Nous contacter

  1. Accueil
  2. Blog
  3. Tech
  4. Motion design avec Claude : créer une animation vidéo, du prompt au MP4

Motion design IA : créer une animation vidéo avec Claude

Motion design avec Claude : créer une animation vidéo, du prompt au MP4

Dans Tech

30 secondes d’animation. 46 lignes de code. Aucune image générée.

Vous voulez animer les chiffres d’un client, un titre ou un graphique, sans ouvrir After Effects ? Claude sait le faire : il n’invente pas de vidéo, il écrit le code qui anime vos propres éléments, et ce code s’exporte en MP4.

Le 21 octobre 2026, nous avons testé la méthode sur les données de notre test de polices. Voici le résultat, la marche à suivre en 5 étapes avec un prompt type, trois façons d’exporter la vidéo, et ce que change Claude Motion, la version officielle lancée le 8 octobre 2026 pour les offres Team et Enterprise.

L’essentiel en 30 secondes

  • Oui, on peut faire du motion design avec Claude : il écrit le code d’une animation (texte, chiffres, formes, graphiques, images), que l’on exporte ensuite en vidéo MP4. Ce n’est pas de la vidéo générée : pas de personnage ni de décor réaliste, mais un texte exact et chaque élément modifiable sans tout refaire.
  • Notre test du 21 octobre 2026 : 30 secondes en 1920 × 1080, un fichier MP4 de 1,2 Mo, un défaut corrigé en une ligne de code.
  • L’export reste la seule étape technique : enregistrement d’écran, script de rendu ou Remotion selon votre niveau.
  • Claude Motion fait la même chose dans une interface dédiée, avec export MP4 en un clic, mais seulement sur les offres Team et Enterprise.

Peut-on faire du motion design avec Claude ?

Oui, pour tout ce qui se construit avec du texte, des formes, des chiffres et des images : Claude écrit le code de l’animation, en HTML, CSS et JavaScript, et le navigateur la joue. C’est la même approche que Claude Motion, l’outil officiel d’Anthropic.

La différence avec Runway ou Luma AI tient en une phrase. Ces outils génèrent des images vidéo à partir d’un prompt. Claude, lui, écrit des instructions d’animation qui manipulent vos propres éléments.

Animation écrite par ClaudeVidéo générative (Runway, Luma AI)
Ce qui est produitDu code qui anime vos élémentsDe nouvelles images vidéo
Changer un chiffreLe chiffre seul change, le reste ne bouge pasEn général, il faut regénérer le plan
Personnages, décors réalistesNonOui
Texte lisible et exactOui, c’est votre texteVariable
Usage typeData-viz, explainer, titre animé, tutorielPlan d’ambiance, publicité, clip

À retenir : Claude fait du motion design « par le code », idéal pour animer des données et du texte, pas pour filmer.

Notre test : 30 secondes d’animation écrites en code

Le résultat : une animation de 30 secondes, propre et lisible, obtenue en une demande, avec un seul défaut corrigé en une ligne de code.

Le 21 octobre 2026, nous avons demandé à Claude d’animer les résultats de notre test des 20 polices manuscrites gratuites. La demande tenait en quatre éléments : le public (lecteurs du blog), le format (30 secondes, 16:9), les données (20 polices, 40 caractères vérifiés, 6 défauts) et les quatre scènes voulues.

Les 4 scènes de l’animation de 30 secondes écrite par Claude : titre, compteur de 40 caractères, grille des 20 polices manuscrites, résultat 14 sur 20
Les 4 scènes de l’animation. Test Blog du Webdesign, 21 octobre 2026
MesureRésultat
Code produit par ClaudeUn fichier HTML de 46 lignes (mise en page, styles, animation)
Vidéo exportéeMP4, 1920 × 1080, 30 images par seconde, 30 secondes, 1,2 Mo
Rendu et encodage1 min 28 s pour la version 1 sur notre machine de test
Défaut de la version 1Deux noms de police débordaient de leur case
CorrectionUne ligne de code ajoutée, puis 1 min 23 s de rendu

La première version n’était pas parfaite : « Permanent Marker » et « Homemade Apple », écrits dans leur propre police, sortaient de leur case. La correction a pris une ligne, qui ajuste la taille du texte à la largeur de la case. Le reste de l’animation n’a pas bougé.

Ce n’est pas un cas d’école : c’est ainsi que nous produisons déjà les tutoriels animés de Madate et d’e-monsite, deux outils du groupe auquel appartient le Blog du Webdesign.

Avant et après la correction : dans la version 1, les noms Permanent Marker et Homemade Apple débordent de leur case, dans la version 2 ils s’adaptent
Version 1 et version 2, après une ligne de code. Test Blog du Webdesign, 21 octobre 2026

À retenir : la retouche ciblée tient sa promesse, c’est le vrai changement par rapport à la vidéo générée.

Comment créer une animation avec Claude, en 5 étapes ?

Préparez vos données, décrivez les scènes, vérifiez l’aperçu, corrigez par petites demandes, puis exportez. Voici la méthode que nous avons suivie.

  1. Rassemblez le contenu. Les chiffres exacts, les textes, les couleurs et les polices de la marque. Claude anime ce que vous lui donnez : un chiffre approximatif à l’entrée reste approximatif à l’écran.
  2. Décrivez l’animation scène par scène. Indiquez le public, la durée, le format (16:9, 9:16 ou 1:1) et ce qui se passe dans chaque scène, avec son timing.
  3. Demandez un fichier HTML autonome et vérifiez l’aperçu. Claude peut afficher la page dans un artefact : regardez-la jouer en entier avant d’aller plus loin.
  4. Corrigez une chose à la fois. « Ralentis la scène 2 », « le nom déborde de la case », « passe le vert en #5AD19A » : une demande précise modifie un seul élément.
  5. Exportez en MP4. C’est la seule étape technique, détaillée dans la section suivante.

Le prompt type que nous recommandons, construit à partir de notre test :

Crée une animation de motion design de 30 secondes, au format 16:9 (1920 × 1080), dans un seul fichier HTML autonome. Public : [lecteurs, clients, équipe]. Couleurs : [codes]. Police : [nom]. Scène 1 (0 à 5 s) : [titre]. Scène 2 (5 à 11 s) : [chiffre clé animé]. Scène 3 (11 à 23 s) : [graphique ou liste]. Scène 4 (23 à 30 s) : [message final]. Données : [vos chiffres exacts]. Ajoute une fonction render(t) qui affiche l’image correspondant à l’instant t, pour pouvoir exporter la vidéo image par image.

La dernière phrase est celle qui compte pour l’export : elle rend l’animation déterministe, donc capturable sans saccade.

À retenir : un bon storyboard écrit vaut mieux que dix allers-retours.

Comment exporter l’animation en MP4 ?

Trois options, de la plus simple à la plus précise : enregistrer l’écran, faire capturer les images par un script, ou passer par Remotion.

MéthodeNiveauQualitéNotre avis
Enregistrement d’écran (outil intégré à macOS ou Windows, ou OBS Studio)DébutantDépend de la machine : saccades possiblesSuffisant pour un brouillon ou une story
Capture image par image (navigateur sans interface, puis FFmpeg)Intermédiaire, terminal requisFluide, 30 images par seconde exactesLa méthode de notre test : 1 min 28 s pour 30 secondes
Remotion avec Claude CodeDéveloppeurProjet vidéo complet en ReactPlus de contrôle. Gratuit pour un indépendant ou une entreprise de 3 salariés au plus, licence payante au-delà

Pour la capture image par image, Claude peut écrire le script lui-même : demandez-lui un script Playwright qui appelle render(t) 30 fois par seconde et assemble les images avec FFmpeg. Si vous travaillez avec Claude Code, il peut aussi le lancer pour vous.

Info : nous avons testé la capture image par image. L’enregistrement d’écran et Remotion sont cités à partir de leur documentation, sans test de notre part.

À retenir : pour un rendu fluide destiné à un client, préférez la capture image par image à l’enregistrement d’écran.

Et Claude Motion, qu’est-ce que ça change ?

Sur le fond, rien : Claude Motion fabrique aussi l’animation par du code, sans modèle de génération vidéo. Il change l’enveloppe : tout se fait dans Claude, avec un export MP4 en un clic. Anthropic l’a lancé en bêta le 8 octobre 2026.

Claude seul (notre méthode)Claude Motion
PrincipeAnimation écrite en codeAnimation écrite en code
DémarrageUn prompt dans une conversation« Output » puis « Motion » dans la zone de message, ou un modèle Motion dans l’onglet Artefacts
RetouchePar demande dans la conversationPar demande dans la conversation ou directement dans l’éditeur
ExportÀ gérer vous-même (voir plus haut)Bouton « Export », format MP4
Suite du travailLe fichier MP4, à ouvrir où vous voulezPasserelles vers Adobe, Descript, HeyGen, Higgsfield, invideo, Luma AI et Runway, Canva annoncé « bientôt »
AccèsToutes les offres de ClaudeOffres Team et Enterprise uniquement
CoûtLes limites d’usage de votre offreLes limites d’usage de l’offre, sans frais par animation

L’offre Team démarre à 20 $ par siège et par mois en facturation annuelle, avec au moins deux sièges (tarifs affichés sur claude.com le 21 octobre 2026). Pour un freelance seul, la méthode manuelle reste la porte d’entrée.

À retenir : Claude Motion fait gagner l’étape d’export, pas la qualité de l’animation.

Ce que ça change pour un motion designer

Claude prend en charge l’animation utilitaire et les premiers jets, pas la création à forte valeur. Notre animation est propre, mais générique : fondus, compteurs, grille. Le rythme, le sound design et l’identité restent votre métier.

Trois usages où l’approche par le code fait gagner du temps :

  • Le bilan chiffré animé. Les résultats annuels d’un client deviennent une animation de 30 secondes pour LinkedIn, à affiner ensuite. C’est le terrain des visualisations de données en motion design.
  • Le storyboard qui bouge. Avant une production dans After Effects, montrez au client une version animée du rythme. Il valide le mouvement, pas une planche fixe.
  • La déclinaison. Une même animation en 16:9, 9:16 et 1:1, ou en trois langues : comme tout est code, on change le format ou le texte sans tout refaire.

Pour la 3D, le personnage ou l’effet spécial, les outils de création de motion design classiques gardent l’avantage. Côté interface, la même logique se retrouve dans Claude Design et dans la skill Impeccable. Pour les modèles qui les font tourner, lisez notre décryptage de Claude Sonnet 5.5 et Opus 5.5.

À retenir : utilisez Claude pour aller vite sur le premier jet, gardez votre savoir-faire pour la version finale.

Motion design : définition

Le motion design est l’art d’animer des éléments graphiques : textes, formes, logos, illustrations et graphiques. On le retrouve dans les génériques, les publicités, les vidéos explicatives et les interfaces. Contrairement à la vidéo filmée, tout y est construit, image par image ou par code.

FAQ : motion design et Claude

Oui. Claude écrit le code d’une animation de texte, de chiffres, de formes ou d’images, que l’on exporte ensuite en vidéo MP4. Il ne crée pas de séquence filmée ni de personnage réaliste.

Pas au sens d’un générateur vidéo comme Runway. Claude produit une animation en code qui se joue dans le navigateur. Elle devient une vidéo MP4 par un export, manuel ou en un clic avec Claude Motion.

Non. Toutes les offres de Claude permettent de demander le code d’une animation. Claude Motion, réservé aux offres Team et Enterprise, ajoute une interface dédiée et l’export MP4 en un clic.

Trois options : enregistrer l’écran pendant la lecture, faire capturer l’animation image par image par un script puis l’assembler avec FFmpeg, ou passer par Remotion. La capture image par image donne le rendu le plus fluide.

Non. Il est inclus dans les offres Team et Enterprise, sans supplément, mais pas dans les offres Free, Pro ou Max. Chaque animation compte dans les limites d’usage de l’offre.

Non. Il produit vite des animations utilitaires et justes, mais génériques. Le rythme, l’identité visuelle, le son et la 3D restent le travail du motion designer. Pour aller plus loin, consultez nos outils de création de motion design.

Sources

L’IA bouge vite. Nous la testons pour vous.

Nouveaux modèles, outils de design, conséquences concrètes pour votre métier : retrouvez tous nos décryptages.

Voir les articles Tech

Aller plus loin

Pour aller plus loin, voici des ressources qui pourraient vous intéresser :