Comment Claude fait du motion design : il ne génère rien, il écrit du code
Par Konno Fuente
Astuce 1 : comment Claude fait du motion design
Disponible maintenant. Le soutien est libre, à partir de ce que tu veux donner.
Claude ne génère rien : il écrit du code
Claude ne génère aucune image. Il écrit une page animée en HTML et CSS, un navigateur sans écran la photographie image par image, et FFmpeg monte le tout avec le son. La vidéo de la communauté, c’est 2 520 images pour 42 secondes.
HTML + CSS
Le code que Claude écrit : la structure et les animations de la page.
HyperFrames + FFmpeg
Le monteur gratuit qui transforme la page en vidéo, et l’outil qui colle images et son en MP4.
GSAP
Il sait quel élément bouge, quand et comment, à la seconde près.
La formation motion design avec Claude Code
Toute ma méthode, du prompt au MP4. Voir toute la formation motion design avec Claude Code.
Contenu seul
10 000 FCFA
Tu veux apprendre seul, à ton rythme, pour un prix réduit.
- Toute la méthode : les modules en vidéo, dans l’ordre
- Les meilleurs prompts de motion design et le kit de recettes prêtes à l’emploi
- Les nouveaux modules et vidéos inclus automatiquement, sans repayer
- Accès à vie et garantie 30 jours
Avec accompagnement
40 000 FCFA
Tu veux livrer ta première vidéo vite, avec quelqu’un derrière toi.
- Toute la formation, les prompts et le kit de recettes
- Le groupe où je partage mes projets au jour le jour — pas seulement dans les vidéos
- Un suivi jusqu’à ta première vidéo livrée, à ta marque ou à un client
- Mes conseils pour vendre ce service : présenter un concept, fixer ton prix, livrer
- Accès à vie et garantie 30 jours
Paiement en une fois, par Mobile Money. Ton accès t’est envoyé par email dès le paiement.
Claude n’est pas un générateur d’images
Veo, Grok ou Sora génèrent des images et des vidéos. Claude fait autre chose : il écrit du texte, et ce texte est un code qui se convertit ensuite en vidéo de motion design. C’est ce que montre la vidéo de la communauté MAW 4U : textes très animés, effets en fond, images de la page Facebook, vidéos de la chaîne, messages de la communauté, compteurs. Rien de tout ça n’a été généré : tout a été écrit.
Les 4 mots à connaître
- HTML et CSS : le HTML est la structure de la page, le CSS donne les couleurs et les animations. C’est le code que Claude écrit.
- HyperFrames : le monteur vidéo gratuit et open source qui transforme une page animée en fichier vidéo MP4.
- FFmpeg : l’outil open source qui colle les images et le son en MP4. Il coupe, il mixe et il mesure à quelle image précise chaque son doit se raccorder.
- GSAP : une bibliothèque JavaScript gratuite qui sait exactement quel élément bouge, quand et comment, à la seconde près.
Du prompt à la vidéo, en 6 étapes
Tu donnes ton prompt, qui peut être une phrase normale : le sujet, le format et la durée. Voici ce qui se passe ensuite.
- 1. Ton prompt : une phrase normale avec le sujet, le format, la durée.
- 2. Claude écrit le HTML et le CSS : le texte, l’interface et les mouvements, dans un fichier index.html.
- 3. Une timeline en pause : GSAP sait où est chaque élément à chaque seconde.
- 4. Chrome photographie : un navigateur sans écran saute à l’image N et prend la photo.
- 5. 2 520 images : 42 secondes à 60 images par seconde, une pile de captures numérotées.
- 6. FFmpeg + son : il assemble les images, la voix, la musique et les effets en un MP4.
Chrome sans écran : un photographe, pas une caméra
C’est un navigateur qui tourne sans fenêtre autour : il n’y a ni la fenêtre de Chrome, ni celle d’Edge, juste le HTML et le CSS. Il ne filme pas une vidéo, il prend une photo à chaque image, puis passe à la suivante. Le principe est celui du mode headless de Chrome.
2 520 images pour une seule vidéo
La vidéo de la communauté dure 42 secondes. À 60 images par seconde, cela fait 2 520 photographies d’une page web, recollées par FFmpeg avec le son. Entre deux instants très proches, il y a quelques images seulement : c’est leur enchaînement qui crée le mouvement.
Pour aller plus loin
- La formation motion design avec Claude Code : toute ma méthode, du prompt au MP4.
- Astuce 2 : vidéo générée ou vidéo codée ? : pourquoi le code gagne.
- Motion design avec Claude Code : mes 2 prompts : mes prompts à remplir.
- Toutes mes vidéos et la communauté MAW 4U.
- Ma chaîne WhatsApp : une astuce chaque matin.
Questions fréquentes
Est-ce que Claude génère des vidéos ?
Non. Claude ne génère ni image ni vidéo. Il écrit une page animée en HTML et CSS, un navigateur la photographie image par image et FFmpeg assemble le tout en MP4.
C’est quoi HyperFrames ?
Un monteur vidéo gratuit et open source qui transforme une page animée en fichier vidéo. Le code source est sur GitHub.
Faut-il savoir coder pour faire du motion design avec Claude ?
Non. Tu décris ce que tu veux dans une phrase normale (le sujet, le format, la durée) et Claude écrit le code. Tu valides l’aperçu, tu demandes une correction, et il la fait.
Combien d’images contient une vidéo animée ?
Cela dépend de la durée et du nombre d’images par seconde. La vidéo de 42 secondes de l’exemple, à 60 images par seconde, en compte 2 520.
Prêt à créer tes vidéos avec Claude ?
Les autres astuces du jour
Astuce n°4Créer un chant gospel avec l'IA : la méthode complète, gratuite, avec Gemini
Une chanson de référence sur YouTube, un prompt qui l'analyse, un deuxième qui t'interviewe en 4 questions : Gemini compose un chant gospel original à partir de tes réponses. Les 2 prompts sont à télécharger dans l'article.
Astuce n°33 façons d’animer un logo avec Claude Code — les prompts prêts à copier
Révélation cinématique 3D, tracé au trait puis remplissage, ou typographie cinétique : 3 styles d’animation de logo, reverse-engineered en prompts prêts à copier-coller. Le PDF des 3 prompts est à télécharger dans l’article.