Opus génère ma vidéo de motion design en 20 minutes

Tout le monde teste des prompts pour qu’Opus 5.5 génère une vidéo. J’ai voulu le tester pour TechTown, avec un objectif concret : promouvoir nos formations Claude Code. À vrai dire, je suis bluffé par le résultat ⭐️

En une vingtaine de minutes, Claude Code m’a livré un showreel de 21 secondes, en 1080p à 60 images par seconde, avec sa propre bande-son. Je n’ai ouvert aucun logiciel de montage.

Dans cet article, nous allons voir le but de cette vidéo, le principe du prompt, puis ce que Claude a réellement fait sous le capot. Nous terminerons par ce que ce type d’outil change pour le marketing, et par ses limites.

Le showreel de 21 secondes généré par Claude Code avec Opus 5.5. La vidéo est aussi à voir sur LinkedIn.

🎯 Le but : une vidéo pour nos formations Claude Code

Nous animons une formation Claude Code par mois, et nous avons déjà formé 175 personnes. Pour donner envie à d’autres équipes de se lancer, il nous fallait un format court et visuel, facile à partager sur LinkedIn.

Habituellement, ce genre de vidéo passe par un motion designer et plusieurs allers-retours. Je voulais savoir si un agent de code pouvait tenir ce rôle, avec un brief aussi court que celui que j’enverrais à un prestataire.

💬 Le prompt

Voici le prompt complet, envoyé tel quel à Claude Code :

make a dynamic 15-25 second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé, but about training made by techtown.fr -- go all out.
highlight : formation Claude Code.
Info : https://techtown.fr/formations/
Use /techtown-brand-guidelines

Le prompt ne dit rien de la technique : ni outil, ni format de fichier, ni découpage en scènes. Il donne en revanche tout ce qu’un bon brief créatif contient. Nous retrouvons d’ailleurs la méthode des 3C (Contexte, Clarté, Contraintes) que nous enseignons en formation :

• le contexte : un showreel de motion designer, sur les formations TechTown ;
• la clarté : un sujet à mettre en avant, la formation Claude Code ;
• les contraintes : une durée entre 15 et 25 secondes et la charte graphique TechTown.

L’URL de la page formations donne à Claude une source de vérité. Il a récupéré lui-même les 16 formations, leurs catégories et leurs durées, au lieu d’inventer un catalogue.

Le skill /techtown-brand-guidelines contient notre charte : la police Poppins, le bleu #1C62ED, les règles du logo, le style des boutons. Claude le charge avant de dessiner quoi que ce soit, et chaque couleur de la vidéo en vient.

Enfin, « like it’s your showreel » et « go all out » fixent le niveau d’exigence. Ces quelques mots autorisent Claude à investir du temps dans les détails : flou de mouvement, sound design, transitions travaillées.

💪 ProTip: écrivez votre prompt comme un brief à un professionnel. Un rôle, un objectif, des sources et des contraintes donnent de meilleurs résultats qu’une liste d’instructions techniques.

⚙️ Sous le capot : comment Claude a travaillé

C’est la partie qui m’a le plus impressionné. Claude ne dispose d’aucun outil vidéo dédié. Il a donc écrit la vidéo sous forme de code, puis l’a rendue avec des outils déjà installés sur mon Mac.

1. Rassembler la matière

Claude a d’abord chargé le skill de charte graphique. Il a ensuite téléchargé la page formations avec curl pour en extraire le texte, puis récupéré le logo SVG officiel du site. Le tracé de ce logo est réutilisé tel quel dans l’animation finale.

2. Choisir une technique : la vidéo comme une fonction du temps

L’animation est une page HTML avec un <canvas> de 1920×1080 pixels, dessiné en JavaScript avec l’API Canvas 2D. Le principe est simple : chaque image est une fonction pure du temps. La fonction drawFrame(t) dessine exactement ce que l’on doit voir à t secondes, et la même valeur de t donne toujours la même image.

function drawScene(t) {
  if (t < 2.0) s1(t); // le point bleu du logo
  else if (t < 5.0) s2(t); // le manifeste typographique
  else if (t < 8.5) s3(t); // le catalogue des formations
  else if (t < 15.5) s4(t); // le terminal Claude Code
  else if (t < 18.0) s5(t); // les chiffres clés
  else s6(t); // le logo et l'appel à l'action
}

Ce déterminisme permet d’exporter la vidéo image par image, sans dépendre de la vitesse de la machine.

3. Construire un storyboard calé sur le rythme

Claude a découpé la vidéo en six scènes, toutes calées sur un tempo de 120 BPM. Chaque coupe tombe sur un temps de la musique.

Les six scènes du showreel, de la genèse du point bleu jusqu’au logo TechTown.

La scène la plus longue, de 8,5 à 15,5 secondes, est consacrée à Claude Code. Une carte du catalogue « Coder avec Claude Code » se détache, s’agrandit et devient un terminal. On y voit taper claude, puis la demande « Forme mon équipe à Claude Code ». L’agent active ensuite le Plan Mode, génère un CLAUDE.md, connecte un serveur MCP et lance des sous-agents. Le terminal se range ensuite sur le côté pour présenter les deux niveaux de formation.

4. Les techniques d’un motion designer

Claude a appliqué les techniques d’un vrai showreel :

• des courbes d’accélération (outExpo, inOutCubic, outBack) pour chaque mouvement ;
• des textes révélés par masque, et un effet de texte « décodé » où des glyphes aléatoires se résolvent de gauche à droite ;
• un compteur à rouleaux pour le nombre de formations ;
• des secousses de caméra synchronisées avec les impacts sonores ;
• un grain, un vignettage et un habillage de type caméra (repères d’angle, timecode, barre de progression).

Le flou de mouvement est le détail le plus technique. Pour chaque image, Claude dessine six sous-images réparties sur une demi-durée d’image, puis les moyenne. C’est l’équivalent d’un obturateur à 180° en cinéma.

for (let i = 0; i < subs; i++) {
  const ts = t + ((i + 0.5) / subs - 0.5) * shutter / FPS;
  drawScene(ts);
  out.globalAlpha = 1 / (i + 1); // moyenne glissante
  out.drawImage(scene, 0, 0);
}

La transition entre le catalogue et le terminal : le flou de mouvement vient de la moyenne de six sous-images.

5. Le son, synthétisé de A à Z

La bande-son ne réutilise aucun sample. Un second script Node.js, audio.mjs, calcule l’onde sonore échantillon par échantillon : 48 000 valeurs par seconde, en stéréo.

Chaque instrument est une petite fonction mathématique. La grosse caisse est une sinusoïde dont la fréquence chute très vite. Les charleys et les claps sont du bruit blanc filtré. La basse et les nappes sont des ondes en dents de scie filtrées, sur une grille d’accords la mineur, fa, do, sol. Le script ajoute des montées, des impacts et des souffles pour les transitions.

Côté mixage, la musique baisse à chaque coup de grosse caisse (le fameux sidechain de la musique électronique), et une réverbération inspirée de Freeverb donne de l’espace au tout. Le script écrit enfin un fichier WAV.

La synchronisation repose sur les mêmes horaires que l’animation. Il y a même un clic de clavier par caractère tapé dans le terminal, calculé avec la même formule que l’effet de frappe.

6. Le rendu : Chrome headless et ffmpeg

Pour transformer la page en vidéo, Claude a écrit un petit serveur Node.js, sans aucune dépendance. Il sert la page et enregistre chaque image PNG que le navigateur lui envoie. Google Chrome, lancé en mode headless, calcule alors les 1 260 images de la vidéo :

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new \
  "http://localhost:8123/?render&subs=6"

ffmpeg assemble ensuite les images et le son :

ffmpeg -framerate 60 -i frames/%05d.png -i audio.wav \
  -c:v libx264 -crf 16 -pix_fmt yuv420p \
  -c:a aac -b:a 256k -movflags +faststart techtown-showreel-formations.mp4

Au total, le projet représente environ 1 000 lignes de code réparties dans quatre fichiers : la page HTML, l’animation, la bande-son et le serveur de rendu.

À noter : je pensais que Claude utiliserait le serveur MCP Playwright pour piloter le navigateur. Il n’était pas disponible dans la session. Claude s’est adapté en lançant directement Chrome headless, sans installer le moindre paquet.

7. Se relire avant de livrer

Avant le rendu final, Claude a vérifié son travail dans le navigateur intégré à l’application Claude. Il a ajouté à sa page un mode « planche contact » (?sheet=0.3,0.9,1.3,...) qui affiche seize vignettes de la vidéo sur un seul écran, puis il a contrôlé certaines images en plein écran.

Cette relecture lui a permis de corriger deux défauts avant le rendu : un vignettage trop fort qui grisait les textes en bord d’écran, et une liste à puces trop serrée dans les cartes de formation. Après le rendu, il a encore relu quelques images exportées pour vérifier le flou de mouvement.

🔁 Une correction, trois secondes re-rendues

La première version contenait une erreur de fond. La scène des chiffres clés reprenait la préparation aux certifications Google Cloud, présente sur la page formations. Dans une vidéo consacrée à Claude Code, ce mélange entre Google Cloud et Anthropic n’avait pas de sens.

Je l’ai signalé en une phrase, avec une capture d’écran : « change ce slide. Tu mélanges GCP et Anthropic. Tu peux juste dire 175+ formés cette année avec une courbe par exemple. »

Claude a réécrit la scène avec un compteur 175+ et une courbe de progression qui se dessine mois après mois. La forme de la courbe est illustrative : seul le total de 175 personnes formées est un chiffre réel. Il n’a ensuite re-rendu que les images concernées, autour de la plage de 15,5 à 18 secondes, avant de réencoder la vidéo. Le reste du film n’a pas bougé.

Claude avait bien trouvé l’information sur notre site, sans voir qu’elle n’avait pas sa place dans ce message. La relecture humaine des faits reste indispensable.

📣 Ce que ça change pour le marketing

Ce test m’a fait voir la vidéo marketing autrement.

Le délai entre l’idée et la vidéo se compte en minutes. Le brief tient en quatre lignes, et le premier rendu arrive dans la même session. Il devient possible de tester une idée de vidéo avant même d’en parler à une agence.

La vidéo devient du code. Elle se versionne dans Git, se relit dans une pull request et se reproduit à l’identique. Pour changer un chiffre, il suffit de modifier une ligne et de relancer le rendu de quelques secondes.

Les déclinaisons deviennent peu coûteuses. Une fois l’animation écrite, nous pouvons demander une version par formation, une version en anglais ou un format vertical pour les stories, sans repartir de zéro.

La charte graphique s’applique d’elle-même. En la décrivant une fois dans un skill, l’équipe marketing la rend disponible pour chaque prompt. Chaque vidéo, page ou visuel généré en hérite.

Le contenu reste aligné avec la réalité. Claude lit le site et les données réelles au lieu de recopier un texte figé. Dans notre cas, les 16 formations affichées dans la vidéo sont celles du catalogue.

Il y a aussi des limites, et il faut les garder en tête :

• les faits doivent être relus par un humain, comme l’a montré l’erreur sur les certifications ;
• les marques tierces demandent de la vigilance : la vidéo reproduit l’interface de Claude Code et une couleur de la charte d’Anthropic, ce qui mérite une vérification avant une diffusion large ;
• le son synthétisé fonctionne bien pour un format court, mais ne remplace pas un compositeur ni une voix off ;
• pour une campagne haut de gamme, un motion designer garde l’avantage sur la direction artistique.

Pour du contenu fréquent, court et cohérent avec la marque, en revanche, l’écart avec un agent de code devient très faible.

🎯 Conclusion

Avec un brief de quatre lignes, Opus 5.5 et Claude Code ont produit une vidéo de motion design complète : storyboard, animation, sound design et rendu final. Sous le capot, rien de magique : du Canvas 2D, du Node.js, Chrome headless et ffmpeg, orchestrés par un agent qui sait aussi relire son propre travail.

Mon takeaway : rédigez vos prompts comme des briefs créatifs, donnez une source de vérité et une charte sous forme de skill, puis gardez la main sur la relecture des faits.

👉 Et vous, quel contenu marketing confieriez-vous à un agent de code ?

🎓 Aller plus loin avec Claude Code

Vous voulez apprendre à travailler ainsi avec un agent de code ? En une journée, la formation Coder avec Claude Code - Débutant de TechTown couvre :

• l’installation et la configuration de Claude Code ;
• les commandes essentielles et la méthode des 3C pour formuler des prompts ;
• la personnalisation de l’environnement de travail (CLAUDE.md, permissions, Plan Mode) ;
• l’intégration de Claude dans un workflow Git professionnel.

Quelques retours de participants :

« Sujet passionnant, formateur passionné. »

« Cette formation m’a donné les bases de la bonne utilisation de Claude pour mon métier de dev. Je me sens prêt à l’utiliser quotidiennement et je connais la bonne direction pour progresser en autonomie sur cet outil. »

« J’ai apprécié le fait que l’on puisse approfondir certains sujets lors des questionnements ainsi que de voir des cas pratiques et des démos et TPs. »

« Bonne introduction, sujets pertinents et dans un ordre accessible. Explications théoriques claires et en accord avec la suite des TP. »