Motion design avec Claude : le guide complet

Depuis la sortie d'Opus 5.5, le 22 septembre 2026, les réseaux se remplissent de vidéos animées « faites par Claude ». Elles sont réelles, mais Claude ne génère pas une vidéo comme le font les outils d'images animées. Il écrit le code qui dessine et anime chaque élément, et un moteur de rendu transforme ce code en fichier MP4.

Ce guide te montre ce que ça permet vraiment, quels outils choisir, et la méthode complète pour sortir une vidéo animée à ta marque. Je l'ai testée sur une vidéo de 15 secondes pour lorisgautier.fr, et j'en ai tiré un skill que tu peux télécharger.

Claude peut-il faire du motion design ?

Oui, en écrivant du code. Une vidéo de motion design, c'est du texte, des formes, des chiffres et des images qui bougent selon une partition précise. Claude écrit cette partition en HTML et en animations, ou en React selon l'outil. Un navigateur sans écran affiche ensuite la vidéo image par image, et ffmpeg assemble ces images en MP4. Le résultat est exact : la même partition donne toujours la même vidéo.

Ce que ça permet, concrètement, pour une entreprise :

• un logo animé pour ouvrir ou fermer tes vidéos ;
• une annonce de 15 secondes pour une offre, un événement, un recrutement ;
• un chiffre clé qui monte et se pose, pour un bilan ou un résultat client ;
• une vidéo explicative qui découpe une méthode en trois points ;
• des sous-titres animés et des titres posés sur une vidéo existante.

Ce qu'il ne fait pas, ce sont des images réalistes : un personnage qui marche, un paysage, un produit filmé. Claude anime ce qu'il peut dessiner en code, et tes propres visuels.

Les exemples sérieux existent. L'équipe de Claude Code chez Anthropic a monté la vidéo de lancement du modèle Fable 5, en juin 2026, avec Claude et Remotion, l'un des deux moteurs présentés plus bas. Le Journal du Net a testé l'autre, HyperFrames, en juillet, et chiffre à environ 0,75 dollar une vidéo de reporting générée avec Claude. Et depuis Opus 5.5, un même prompt circule partout : « fais une vidéo de motion design de 15 secondes qui montre quel motion designer incroyable tu es ». Les résultats impressionnent, et se ressemblent tous : texte centré sur un dégradé, fondus, logo à la fin. C'est tout le sujet de ce guide : sans ta charte et sans storyboard, Claude produit une démo, pas une vidéo à ta marque.

Il y a trois façons de s'y mettre :

• l'onglet Code de Claude Desktop, en local : c'est la voie complète, celle du pas à pas plus bas ;
• le connecteur HyperFrames dans le chat de Claude, sans rien installer, avec un compte HeyGen ;
• Claude Design, qui anime tes designs sans code, mais ne sort pas de fichier vidéo tout seul.

Si ce que tu cherches, c'est couper une vidéo que tu as filmée, c'est un autre usage, détaillé dans mon guide pour monter une vidéo avec Claude.

Quels outils pour faire du motion design avec Claude ?

Remotion ou HyperFrames ?

Deux moteurs dominent, et Claude sait piloter les deux grâce à des skills officiels.

Remotion est le plus ancien et le plus utilisé par les développeurs. Son vrai piège est sa licence : dès que ton entreprise compte quatre personnes, il faut une licence payante, soit au moins 75 dollars par mois. HyperFrames a été pensé dès le départ pour être piloté par une IA, il contrôle lui-même ses images avant le rendu, et sa licence est libre pour toutes les entreprises. Pour un dirigeant, c'est le choix par défaut, et c'est celui de mon test.

Claude Design, la voie sans code

Claude Design anime tes designs : un titre qui arrive, des cartes qui se déplacent, un chiffre qui monte. Mais il n'exporte pas de MP4. Ses exports sont une archive ZIP, un PDF, un PowerPoint, une page HTML, ou un envoi vers Canva, Adobe, Gamma ou Miro.

Pour transformer une animation Claude Design en vidéo, la méthode proposée par HyperFrames tient en trois gestes : donner à Claude Design le fichier d'instructions de HyperFrames et ta charte, lui demander un projet complet plutôt que des maquettes, puis télécharger le ZIP et l'ouvrir dans l'onglet Code pour le rendu. Mon guide de Claude Design détaille le reste de l'outil.

Les connecteurs et les MCP

• HyperFrames by HeyGen : le connecteur officiel, vérifié par Anthropic depuis juin 2026. Il compose et rend la vidéo dans le cloud de HeyGen, depuis une simple conversation. Il faut un compte HeyGen, et le rendu consomme des crédits.
• Canva : son connecteur exporte un design animé en MP4. Pratique si tes visuels vivent déjà dans Canva.
• After Effects : plusieurs serveurs MCP communautaires laissent Claude créer des compositions, des calques et des textes dans After Effects. Le plus suivi compte environ 700 étoiles sur GitHub. C'est une piste pour ceux qui ont déjà le logiciel, pas un point de départ.
• Blender : un serveur MCP communautaire, très suivi (près de 30 000 étoiles), pour l'animation 3D.

ElevenLabs pour la voix off

Une vidéo animée muette marche sur LinkedIn, où la plupart des gens regardent sans le son. Pour une vidéo explicative ou une publicité, une voix off change tout, et ElevenLabs est la référence pour la générer. C'est d'ailleurs la voix qu'utilise HyperFrames pour narrer ses propres vidéos de documentation.

Le branchement tient en une clé. Tu crées une clé API dans ton compte ElevenLabs, tu la ranges dans le fichier .env du projet vidéo, et le skill média de HyperFrames s'en sert pour transformer ton texte en voix. Sans clé, il se rabat sur Kokoro, un petit modèle de voix qui tourne sur ton ordinateur, gratuit et sans compte : de quoi caler le rythme avant de payer une vraie voix.

Trois choses à savoir avant de te lancer :

• La voix passe avant l'animation. Claude génère d'abord la voix, la fait transcrire mot par mot, puis cale chaque scène sur la phrase qui l'accompagne. Dans l'autre sens, tu passes ton temps à rallonger des scènes.
• Le plan gratuit ne suffit pas pour une entreprise. Il donne 10 000 crédits par mois, mais sans licence commerciale. Celle-ci commence au plan Starter, à 6 dollars par mois pour 30 000 crédits. Avec le modèle multilingue, un crédit vaut un caractère : une voix off de 30 secondes, environ 450 caractères, en consomme à peu près 450.
• Tes vidéos peuvent parler avec ta voix. Le clonage instantané est inclus dès le plan Starter : un court enregistrement suffit, et la voix off sort avec ton timbre. Ne clone que ta voix, ou celle de quelqu'un qui t'a donné son accord écrit.

Le connecteur ElevenLabs existe dans le répertoire de Claude, mais au 2 octobre 2026 il ne gère que les agents vocaux d'ElevenLabs : la génération de voix et de musique y est annoncée pour plus tard. L'ancien serveur MCP local, qui savait le faire, est archivé depuis août 2026. Pour la voix off d'une vidéo, c'est donc la clé API qui fait le travail.

Comment faire du motion design avec Claude ?

J'ai déroulé la méthode sur une vraie commande : une vidéo de 15 secondes pour LinkedIn qui donne envie de réserver l'audit IA offert de lorisgautier.fr, à mes couleurs et avec mes polices. Voici les étapes, et ce que le test a donné.

Étape 1 : Ouvrir l'onglet Code de Claude Desktop

Installe l'application Claude Desktop, sur Mac ou sur Windows, ouvre l'onglet Code et choisis l'environnement Local. Il faut un forfait Pro au minimum, et une vidéo consomme vite ta limite d'usage : mon comparatif des abonnements Claude t'aide à choisir le bon. Crée un dossier vide pour ta vidéo et ouvre-le dans l'onglet Code.

Étape 2 : Créer le projet vidéo

Il te faut Node.js 22 ou plus, FFmpeg et Google Chrome. Sur Mac : brew install node ffmpeg. Sur Windows : winget install OpenJS.NodeJS Gyan.FFmpeg. Puis demande à Claude de créer le projet, ou lance toi-même :

npx hyperframes init ma-video --non-interactive --example blank
npx hyperframes doctor

La seconde commande vérifie que tout est en place. Deux choses à savoir sur cette installation : elle dépose les skills de HyperFrames dans ton dossier de skills, mais aussi dans ceux de Cursor, Codex ou Gemini s'ils sont sur ta machine. Et HyperFrames envoie une télémétrie anonyme, que tu coupes avec la variable HYPERFRAMES_NO_TELEMETRY=1.

Étape 3 : Installer les skills

L'installation du projet a déjà posé les skills de HyperFrames. Ils apprennent à Claude comment écrire une composition qui se rend sans erreur. Ce qu'ils ne savent pas, c'est ta marque.

C'est le rôle du skill que j'ai écrit pour ce guide. Il part de ta charte, propose cinq formats prêts à l'emploi, impose un storyboard validé avant d'écrire le moindre code, et fait contrôler chaque scène en images avant le rendu. Télécharge le skill Motion design, il arrive dans la seconde. Pour l'installer, écris dans l'onglet Code : « installe le skill contenu dans ~/Downloads/skill-motion-design.zip dans ~/.claude/skills ». Si tu découvres les skills, mon guide des Skills Claude explique le principe.

Étape 4 : Donner ta charte graphique

C'est l'étape qui sépare une vidéo à ta marque d'une démo de plus. Donne à Claude les codes de tes couleurs, tes polices, ton logo, et deux ou trois adjectifs qui décrivent ton ton. Le skill contient un modèle de charte à remplir une fois pour toutes.

Pour mon test : un dégradé violet, un corail pour l'accent, la police Rotation pour les titres et Neue Montreal pour le reste, mon portrait à la fin, et une règle de vocabulaire, « offert », jamais « gratuit ».

Un piège à connaître : tes polices doivent être des fichiers dans le dossier du projet. Une police qui ne se charge pas est remplacée en silence par Arial ou Helvetica, sans aucune erreur. Ça ne se voit qu'au contrôle.

Étape 5 : Écrire le storyboard scène par scène

Avant le moindre code, écris ou fais écrire le storyboard : une ligne par scène, avec son minutage, le texte exact à l'écran et ce qui bouge. Voici celui de mon test :

Deux règles évitent la plupart des ratés. Une idée par scène. Et un texte reste à l'écran au moins une seconde et demie, plus trois dixièmes de seconde par mot, sinon personne n'a le temps de le lire.

Si ta vidéo a une voix off, écris son texte dans le storyboard, scène par scène : c'est elle qui donnera le tempo.

Étape 6 : Prévisualiser et corriger le rythme

Claude construit la vidéo. Pour la voir, demande-lui de lancer l'aperçu : il s'ouvre dans ton navigateur et se met à jour à chaque modification. Les corrections se font en français, comme à un monteur : « fais arriver les cartes un peu plus vite », « laisse le chiffre se poser une seconde de plus », « le titre de fin est trop petit ».

Étape 7 : Faire vérifier les images par Claude

C'est l'étape que presque tout le monde saute, et celle qui fait la qualité. Claude ne voit pas la vidéo qu'il écrit. Il faut donc lui faire capturer des images de contrôle, au milieu de chaque scène et à la fin, puis les lui faire examiner : un texte qui déborde, deux éléments qui se chevauchent, une police de secours, une faute, un élément trop près du bord.

HyperFrames le fait en deux commandes, npx hyperframes check puis npx hyperframes snapshot, et mon skill y ajoute une liste de contrôle à passer sur chaque image.

Sur mon test, Claude a pris treize images de contrôle et corrigé cinq défauts avant le rendu :

• le corail clair de ma charte manquait de contraste sur le violet : il l'a remplacé par un pêche plus clair ;
• le texte blanc du bouton final se lisait mal sur le corail : il l'a passé en noir ;
• le premier titre apparaissait une fraction de seconde avant son animation ;
• dans la scène du compteur, le chiffre écrasait les deux lignes du dessous : il a rééquilibré les tailles ;
• la version verticale ne trouvait ni mes polices ni mon portrait, à cause d'un chemin de fichier faux.

Quatre corrections sur cinq sont exactement celles qu'un graphiste aurait faites. La première pose une vraie question : changer une couleur de la charte est une décision de marque, et Claude l'a prise seul. C'est pour ça que mon skill lui demande de proposer l'alternative au lieu de l'appliquer.

Étape 8 : Rendre en 16:9 et en 9:16

Le rendu final se lance en une commande par format. La version verticale, pour LinkedIn sur mobile, les Reels et les Shorts, ne doit pas être un simple recadrage : les textes grossissent, les éléments s'empilent, et rien d'important ne doit se trouver dans les 250 pixels du haut et du bas, cachés par l'interface des applications. Demande-la comme une composition à part.

Une fois rendue, le skill assemble des images réparties sur toute la vidéo en une seule planche, que Claude vérifie une dernière fois.

Voici le bilan de mon test, du brief aux deux vidéos rendues :

Sur un abonnement Pro ou Max, tu ne paies pas ces 4 dollars : ils se décomptent de ta limite d'usage. Le test a tourné sur Opus 4.7, le modèle par défaut de mon installation de Claude Code.

Et voici la vidéo, telle que Claude l'a rendue, sans retouche :

La version verticale n'est pas un recadrage : les cartes s'empilent, les titres grossissent, et la fin garde le portrait et le bouton au centre de l'écran.

Les skills Claude pour le motion design

Au-delà des skills officiels de Remotion et de HyperFrames, la communauté en publie beaucoup. Voici ceux qui tiennent la route, relevés sur GitHub début octobre 2026 :

Le mien n'invente rien sur la technique : il s'appuie sur les skills de HyperFrames pour écrire une vidéo qui se rend sans erreur. Ce qu'il ajoute, c'est ce qui manque à un dirigeant : partir de sa marque, valider le scénario avant de produire, et ne rien livrer qui n'a pas été contrôlé.

Je l'ai passé au même test, sur un autre sujet : une vidéo au format « trois points », trois signes qu'il est temps d'automatiser ses tâches, avec ma charte. La première version du skill rendait un 16:9 propre, mais un 9:16 faible : texte trop petit, contenu collé en haut de l'écran, un titre sur trois lignes. J'ai ajouté au skill des règles propres au vertical, des tailles minimales et un contenu centré sur toute la hauteur, puis j'ai relancé.

La seconde version a travaillé 14 minutes, en 71 allers-retours, pour un peu plus de 5 dollars au tarif de l'API. En contrôlant ses propres images, Claude a allongé la vidéo de 19 à 22 secondes, parce que deux phrases n'avaient pas le temps d'être lues, et ramené le titre vertical à deux lignes. Quand une couleur de ma charte manquait de contraste, il me l'a signalé sans y toucher. Voici la version verticale, sortie telle quelle :

Télécharge le skill Motion design pour Claude, il arrive dans la seconde.

Les limites du motion design avec Claude

Il ne voit pas ce qu'il crée. Sans images de contrôle, il livre en aveugle. C'est l'étape 7, et elle n'est pas facultative.

Sans charte, tout se ressemble. Le prompt seul donne la démo que tout le monde a déjà vue. Ta marque, ton storyboard et tes vrais chiffres font la différence.

Il n'anime pas le réel. Pas de personnages, pas de décors, pas de produit filmé : du texte, des formes, des données et tes propres images.

Le son demande un outil de plus. ElevenLabs pour la voix, une bibliothèque libre de droits pour la musique : tranche la question des droits avant de publier, surtout pour une voix clonée.

Ça consomme. Ma vidéo de 15 secondes a demandé 75 allers-retours, l'équivalent de 4 dollars au tarif de l'API, décomptés de ta limite d'usage si tu es abonné. Chaque retouche demandée ensuite en ajoute.

Les licences comptent. Celle de Remotion au-delà de trois personnes, et celle de tes polices : une police achetée pour le web n'est pas toujours autorisée en vidéo.

Ce qu'il faut en retenir

Claude ne génère pas de vidéo, il l'écrit. C'est une force : chaque élément se corrige en une phrase, chaque vidéo se décline en un autre format, et le résultat est exactement celui que tu as validé. Pour une entreprise, HyperFrames est le bon point de départ, libre et pensé pour être piloté par une IA.

Commence par un format court, une annonce ou un chiffre clé, avec ta charte et un storyboard écrit. Fais contrôler les images avant le rendu. Et si tu veux que Claude produise tes vidéos chaque semaine à partir de tes contenus, branché sur tes outils, c'est le genre de système que je mets en place chez les dirigeants que j'accompagne.