Le motion design avec Claude Code consiste à écrire la vidéo plutôt qu'à la générer : Claude compose des pages HTML animées, et HyperFrames, l'outil libre de HeyGen, les transforme en MP4 image par image. Tout étant du code, la vidéo reprend exactement votre charte, couleurs et polices comprises, et un détail se corrige sans tout refaire. J'en ai tiré une pub de 15 secondes et un film de 2 min 20, musique comprise.

Écrire la vidéo au lieu de la générer

Il existe aujourd'hui 2 façons de faire une vidéo avec l'IA. La première passe par un modèle de génération, comme Seedance ou Veo, qui fabrique des pixels à partir d'une consigne : c'est ce que je raconte dans De Nantes à VivaTech. La seconde fait écrire la vidéo comme une page web : du texte, des formes, des graphiques et des interfaces animés en code, puis rendus en film.

Pour une marque, la seconde a 2 avantages. Les couleurs et les polices viennent de vos fichiers de charte, donc rien ne dérive d'une scène à l'autre. Et le rendu se reproduit à l'identique : changer un chiffre ou une virgule ne demande pas de tout régénérer en espérant le même résultat.

Elle couvre ce dont une vidéo marketing a le plus besoin : une accroche typographique, un chiffre qui monte, une interface qui se remplit, un logo qui s'installe. Une prise de vue réelle peut aussi y prendre place, détourée dans le graphisme.

HyperFrames, le moteur

HyperFrames est un outil libre publié par HeyGen sous licence Apache 2.0. Il prend des pages HTML animées et les rend en MP4 avec un navigateur sans fenêtre et FFmpeg, l'outil de référence pour encoder la vidéo. Le rendu est déterministe : la même page donne toujours la même vidéo, ce qui permet de corriger une scène sans toucher aux autres.

Il a été pensé pour les agents IA. Ses commandes s'enchaînent sans interaction, et il s'installe dans Claude Code sous forme de skills. J'y ajoute son registre d'environ 450 éléments libres, titres animés, transitions, graphiques ou fonds, que Claude repeint à ma charte.

Et Claude Motion ?

Anthropic propose un outil voisin, en bêta.

Claude Motion transforme votre contenu en courtes animations.

Aide de Claude, Get started with Claude Motion (traduction)

Comme HyperFrames, il écrit des animations en code au lieu de générer des images, et il exporte en MP4. Il est réservé aux abonnements Team et Enterprise, et s'utilise depuis une conversation ou un modèle d'artefact.

Claude MotionClaude Code et HyperFrames
AccèsAbonnements Team et Enterprise, en bêtaTout abonnement Claude payant, outil libre
Où il travailleDans la conversationDans vos dossiers, sur votre ordinateur
FormatCourtes animationsFilms longs, prise de vue comprise
Votre charteLe contenu que vous lui donnezVos fichiers de marque, relus à chaque rendu
ExportMP4MP4

Pour une animation rapide dans une équipe déjà abonnée à Team, Claude Motion suffit. Dès que la vidéo doit tenir votre charte sur plusieurs minutes et mêler une prise de vue avec une musique, je passe par HyperFrames.

2 vidéos faites ainsi

Une pub de 15 secondes

Elle annonce mes formations Claude Code. Elle est écrite avec les couleurs et les polices du cerveau de marque de mon atelier, logo compris, jusqu'à la musique, générée par un script.

Pub de 15 secondes au format vertical, écrite en code et rendue avec HyperFrames. Musique générée par un script.

Un film de 2 min 20 pour une page de vente

Le film qui ouvre la page de ma formation Marketeur full stack mêle une prise face caméra, détourée et placée dans le graphisme, avec des scènes de motion design : des interfaces redessinées et animées, des chiffres qui montent, un plan de formation qui se construit, des logos d'outils qui s'allument. La musique est codée elle aussi, et calée sur la ligne de temps.

Les 15 premières secondes du film. La suite, 2 min 20 de face caméra et de motion design, se regarde sur la page de la formation Marketeur full stack.

La version française n'a demandé aucun outil payant : tout a tourné sur mon ordinateur, de la transcription à la musique. La version anglaise a ajouté une voix doublée avec ElevenLabs et une synchronisation des lèvres avec sync.so, pour environ 18 dollars de crédits.

Le motion design avec Claude Code, pas à pas

  1. Un objectif avant une idée : à quoi sert la vidéo et pour qui.
  2. 3 validations humaines avant toute dépense : le concept, le script, puis le storyboard.
  3. La charte en entrée : les couleurs et les polices de la marque deviennent la feuille de style de la vidéo.
  4. Une scène par fichier : Claude écrit chaque scène en HTML animé, que vous regardez dans le navigateur avant le rendu.
  5. Le son écrit lui aussi : musique et bruitages codés, calés sur les mots et les gestes.
  6. Un contrôle mesuré : un script mesure le rendu et tire une planche contact, puis un agent relecteur confronte le film au brief et à la marque, comme décrit dans mes 10 agents marketing.

Le dernier mot revient à votre œil et à votre oreille.

Construire votre propre studio de production

La prochaine session Marketeur full stack : 21 heures pour construire et piloter vos agents sur votre propre production marketing, avec Claude Code.

Découvrir la session

Les limites

La puissance de calcul, d'abord. Le film de ma page de formation m'a pris un après-midi de travail, du brief à la version anglaise. Le reste, c'est du calcul : le détourage et le rendu image par image. Ces étapes tournent pendant que je travaille sur autre chose, et leur durée dépend de la machine. Sur mon MacBook Pro M1 Pro de 2021, elles se comptent en heures.

Pour la musique, Claude se fie à des mesures, le volume et le calage, et le goût se juge à l'oreille. Ma première musique codée, une batterie, sonnait faux sous la voix, et je l'ai fait remplacer par un fond plus sobre.

HyperFrames assemble et anime. Un plan qui n'a jamais été tourné, comme un décor ou un angle de caméra, passe encore par un modèle de génération : c'est le sujet de Monter une vidéo entièrement avec Claude.

Questions fréquentes

Oui, c'est un outil libre publié par HeyGen sous licence Apache 2.0. Il faut un abonnement Claude payant pour Claude Code, et des services payants seulement si vous ajoutez une voix de synthèse ou des plans générés.
Non. Claude écrit les pages animées et lance le rendu. Votre rôle est de valider le concept, le script et le storyboard, puis de juger le résultat à l'œil et à l'oreille.
Claude Motion, en bêta sur les abonnements Team et Enterprise, convient aux courtes animations faites dans une conversation. HyperFrames, avec Claude Code, convient aux films plus longs qui mêlent prise de vue et motion design, musique comprise, et qui doivent tenir votre charte sur toute leur durée.
Oui. Le film de ma page de formation mêle une prise face caméra, détourée et placée dans le graphisme, avec des scènes de motion design.