Le chapitre 7 a produit le spot de lancement de Braise avec Veo, le chapitre 8 lui a donné sa voix : de l'émotion, de la matière, du grain. Ce chapitre produit l'autre moitié de la vidéo de marque, celle dont personne ne parle dans les démos : la vidéo qui affiche des chiffres exacts, un logo au pixel, et qui doit ressortir chaque mois avec les nouvelles données. Pour celle-là, on n'appelle pas un modèle génératif. On écrit la vidéo en code, et c'est Claude qui écrit le code.
C'est mon terrain de développeur, et c'est le chapitre où les deux publics de ce guide se rejoignent : le principe s'explique sans une ligne de React — la brique standard avec laquelle sont construits les sites web modernes —, et depuis janvier 2026, la pratique aussi.
Le brief que la génération ne sait pas tenir
Maya, la torréfactrice qui lance sa marque Braise depuis le chapitre 1, veut une vidéo mensuelle pour ses abonnés : les trois cafés du mois, leurs altitudes, leurs profils de torréfaction, trente secondes, aux couleurs de la marque. Le brief tient en trois exigences.
- Exigence 1 · Les chiffres exactsIls viennent de
data/origines.csv, la table vérifiée au chapitre 4, et doivent s'afficher tels quels à l'écran. - Exigence 2 · La charte au pixelLe logo et les couleurs de Braise sont respectés exactement, pas approximativement.
- Exigence 3 · La régénérationLa vidéo se refait le mois prochain avec les nouvelles données, sans tout reconstruire.
Relisez ces trois exigences avec les yeux du chapitre 7 : Veo échoue sur les trois. Un modèle génératif produit du vraisemblable, et un chiffre vraisemblable est un chiffre faux : demandez « 2 100 mètres » à l'écran et vous obtiendrez un nombre qui ressemble à 2 100 mètres. Le texte net est son point faible, la charte au pixel n'est pas dans son vocabulaire, et deux générations du même prompt donnent deux vidéos différentes.
Ce n'est pas un défaut de jeunesse, c'est sa nature : il imagine des images. Or le brief de Maya ne demande pas d'imagination, il demande de l'exactitude.
Un modèle génératif hallucine un chiffre ; un composant React l'affiche.
Chaque image est une fonction du numéro d'image
Le principe de Remotion tient en une phrase de sa documentation : une vidéo est une fonction d'images dans le temps. Version non-développeur, en quatre temps.
- 900 images fixesUne vidéo de trente secondes à trente images par seconde, c'est 900 images qui défilent, comme un dessin animé.
- Vous écrivez le dessinateurUn programme qui, quand on lui dit « dessine l'image numéro 412 », produit exactement cette image.
- Le rendu photographieLes 900 images sont capturées une par une dans un navigateur invisible, puis assemblées en fichier vidéo.
- Le déterminismeMême code, mêmes données : même vidéo, au pixel près, aujourd'hui et dans six mois. C'est cette propriété qui répond au brief de Maya.
Version développeur : le dessinateur est un composant React (un bloc d'affichage réutilisable), le rendu se fait en ligne de commande, sur votre machine ou, pour le volume, sur Lambda, le rendu dans le cloud d'Amazon, et quatre briques suffisent à tout construire.
Le chapitre Au-delà du code du guide « Coder avec Claude » vous a donné le premier aperçu : une vidéo en code est versionnée, corrigeable, régénérable. Ce chapitre-ci va plus loin : le pipeline piloté par les données, les skills qui ont changé la donne, et les pièges que l'on ne découvre qu'au rendu.
Les quatre briques, les voici. Vous n'écrirez jamais ces quatre mots : Claude les écrit. Sachez seulement les reconnaître quand il vous en parle.
- useCurrentFrame()Le numéro de l'image en cours, seule source de temps légitime du projet : tout le reste en découle.
- interpolate()Convertit ce numéro en n'importe quelle valeur animée, une opacité, la hauteur d'une barre de graphique, avec clamp pour borner.
- spring()La physique du mouvement naturel, entrées et rebonds.
- SequenceDécale l'horloge locale d'une scène pour composer la timeline : chaque scène a son propre temps.
Janvier 2026 : la vidéo se décrit en langage naturel
Pendant des années, l'objection était imparable : « il faut savoir coder en React ». Elle est tombée en janvier 2026, quand l'équipe Remotion a publié ses skills officielles pour les agents. L'état des lieux, relevé en août 2026 :
- 12 playbooks officiels
npx skills add remotion-dev/skills, avec un plugin Claude Code dédié : création de projet, composition, rendu, sous-titres mot à mot, cartes animées, interactivité. Chaque skill encapsule les bonnes pratiques de l'équipe qui fabrique l'outil. - 464 000 installationsEnviron, et un top 5 du classement skills.sh.
- 3 utilisateurs sur 4 ne sont pas techniciensLe chiffre qui compte vraiment, donné par Jonny Burger, le créateur de Remotion : ils décrivent leur vidéo en langage naturel, l'agent écrit le React.
- Une doc publiée pour les agentsL'équipe a poussé la logique jusqu'à sa documentation, disponible aussi en texte brut : Claude ne devine pas Remotion, il le lit.
La vidéo de Maya : l'audio d'abord, l'image ensuite
L'erreur classique du débutant est de construire les scènes puis de poser une voix off par-dessus : rien ne tombe juste, et on passe la soirée à rallonger des scènes. Le métier fait l'inverse : l'audio d'abord, le timing ensuite. La voix est générée avant la première ligne de code, et les durées de scène se déduisent des phrases. Vous savez la diriger depuis le chapitre 8 ; une lecture posée du script suffit.
- Écrire le scriptQuatre phrases, une par scène, dans la voix de la marque : le VOIX.md du chapitre 2 sert aussi aux scripts.
- Générer la voixElevenLabs — le clone de Maya, posé au chapitre 8 —, export MP3 dans public/. Pour la vidéo de Maya : 27 secondes.
- Donner la voix à l'agentIl en déduit le découpage : 27 secondes égalent 810 frames à 30 fps, quatre scènes calées sur les phrases.
- Brancher les donnéesorigines.csv devient les props des composants — les données qu'on verse dans le moule. Le contenu vit dans les données, le rendu dans les composants : la vidéo est régénérable.
- Itérer sur des framesUn rendu partiel des frames 0 à 90 coûte quelques secondes, un rendu complet plusieurs minutes.
❯ npx create-video@latest braise-stats Projet Remotion créé. Studio sur localhost:3000. ❯ npx skills add remotion-dev/skills 12 skills installées : create, render, captions... ❯ Vidéo 30 s : les stats de torréfaction d'août. ❯ Voix : public/voix-aout.mp3. Données : data/origines.csv. ❯ Fond : assets/refs/braise-hero-01.png, voile brun charte. · Claude lit la voix, le CSV, et compose... Voix de 27 s : 810 frames à 30 fps, 4 scènes calées sur les phrases. 3 origines lues depuis origines.csv, altitudes en barres animées, braise-hero-01 en fond. ❯ Rends les frames 0-90, je veux voir l'entrée du titre. out/preview.mp4 : titre à la frame 12, barres à la 60. ❯ Parfait. Rends la vidéo complète. out/braise-stats-aout.mp4 : 30 s, 900 frames, 3 origines, altitudes conformes à data/origines.csv.
Les pièges qui n'apparaissent qu'au rendu
Une famille de bugs propre à Remotion piège même les bons développeurs React : tout a l'air parfait dans la préview, et le fichier rendu clignote. La cause est toujours la même : quelque chose dans le code dépend du temps réel ou du hasard, alors que le rendu photographie les frames une par une, dans le désordre et en parallèle. La documentation officielle y consacre une page entière (relue en août 2026) ; en voici le condensé, symptôme d'abord, phrase à dire à Claude ensuite.
Le code qui survit au rendu
Entre
- La vidéo saccade ou dérive au rendu → « toute animation doit découler du numéro d'image », l'unique horloge du projet (useCurrentFrame())
- Les confettis changent de place à chaque rendu → « fixe le hasard, le même tirage à chaque rendu » (le random(seed) de Remotion)
- Le logo continue sa course hors champ → « borne les valeurs animées » (interpolate avec clamp)
- Des barres vides sur les premières frames → « fais attendre le rendu jusqu'aux données » (delayRender())
- La police change entre deux images → « charge les polices explicitement » (@remotion/google-fonts)
On évite
- Tout ce qui anime en temps réel : la préview est belle, le fichier clignote (transitions CSS, Framer Motion, GSAP)
- Le hasard et l'heure système : chaque frame tire un résultat différent (Math.random(), Date.now())
- Les chargements sans attente : la frame part avant les chiffres
- Les polices implicites : la frame 1 se rend avant la fonte, la 2 après
La bonne nouvelle : les skills officielles évitent ces pièges d'elles-mêmes dans le code généré. Votre travail est de les reconnaître quand une vidéo clignote, pour demander la bonne correction en une phrase.
Générative ou programmatique : la table de décision
La question n'est jamais « Veo ou Remotion », c'est « quel besoin ». Les deux chapitres se combinent d'ailleurs très bien : un plan généré par Veo se pose dans public/ et s'embarque dans une composition Remotion comme n'importe quel asset, habillé de titres nets et de chiffres exacts.
Les alternatives du même camp tiennent en une phrase : Motion Canvas (l'animation composée à la main) et Revideo (son dérivé orienté rendu automatisé) existent, mais en août 2026, l'écosystème d'agents reste l'avance décisive de Remotion.
| Le besoin | L'outil |
|---|---|
| Émotion, ambiance, prise de vue impossible | Veo 3.1 (chapitre 7) |
| Chiffres exacts, texte net, charte au pixel | Remotion |
| Régénérer chaque mois depuis des données | Remotion |
| Produit photoréaliste en mouvement | Veo, images-ancres à l'appui |
| Volume publicitaire UGC e-commerce | hoox (chapitre 7) |
| Habiller un plan généré : titres, logo, sous-titres | Remotion par-dessus Veo |
L'image qui se dessine : la preuve par l'animation
Mon geste préféré de l'année prouve cette répartition en une seule animation. Pour un promoteur immobilier, je voulais une ouverture de page qui ne ressemble à rien de connu. J'ai généré trois images de la même maison, calées au pixel : un croquis d'architecte en traits, une version peinture, une version photoréaliste. Puis j'ai demandé à Claude d'animer la superposition, en trois plaques.
- Le croquis se dessineClaude calque le croquis : chaque trait est converti en tracé animable (vectorisé) sur un canvas — la toile de dessin des navigateurs —, puis les traits se dessinent un à un, comme une main invisible.
- La peinture recouvreLa version peinture vient recouvrir le dessin achevé : l'image prend sa matière.
- La photo prend vieUn fondu amène la version photoréaliste. L'image s'est dessinée, puis a pris vie.
Le site aveliorpromotion.fr est construit sur ce principe, et l'effet en production est celui de la préview : rejouable, réglable trait par trait.
Notez la répartition des rôles, c'est la leçon du chapitre : la cohérence des trois plaques vient de la génération d'images, le même sujet décliné en trois styles avec la méthode de l'image-ancre du chapitre 6 ; le mouvement vient du code, donc il est exact et rejouable. Remotion n'est même pas convoqué ici, c'est un canvas dans une page web, piloté par l'agent : le principe voyage au-delà de l'outil.
Transposez pour Maya : trois plaques du paquet Braise, et la troisième existe déjà, c'est braise-hero-01.png. Le croquis et la peinture s'en déclinent par édition conversationnelle (chapitre 6), le canvas fait le reste : la page d'accueil de Braise s'ouvre sur un paquet qui se dessine sous les yeux du visiteur.
La rentabilité vient de la deuxième génération
Soyons honnêtes sur l'économie, parce qu'elle est contre-intuitive. La première vidéo n'est pas là où Remotion gagne : le rendu est lent par nature, et même piloté par un agent, le projet demande quelques allers-retours. Le retour d'expérience du développeur Adeel Imran, publié en mars 2026, donne l'ordre de grandeur.
- 35 secondes, 6 scènesUne vidéo de landing page complète, environ 1 600 lignes de code (TypeScript).
- 3 h 30 et 0 € d'outilsLà où un freelance motion lui aurait coûté 500 à 1 900 € et une semaine.
- Un agent tient toute l'image à la foisTimeline, texte, réglages de voix : il itère sur l'ensemble. Sa conclusion rejoint la mienne : c'est ce que fait un réalisateur.
Mais le vrai gain arrive à la deuxième génération. Un changelog produit en vidéo à chaque version, les stats mensuelles d'une marque, la même vidéo déclinée par pays ou par langue : partout où la vidéo se répète avec des données qui changent, le composant écrit une fois devient un moule. Le même levier que les composants réutilisables en développement, appliqué au motion design.
La vidéo de septembre de Maya coûtera une phrase, celle d'octobre aussi.
La voici, cette phrase, pour cocher la troisième exigence du brief : « Mets à jour la vidéo : data/origines.csv a changé, la voix de septembre est dans public/voix-sept.mp3. » Même composition, nouvelles données, même charte : le composant écrit en août est devenu un moule.
Reste la licence, et méfiez-vous des blogs sur ce point : la page officielle fait foi. Relevé en août 2026 :
| Qui | Licence Remotion (relevé en août 2026) |
|---|---|
| Individus et entreprises jusqu'à 3 personnes | Gratuit, usage commercial des vidéos compris. |
| Créateurs au-delà de 3 personnes | 25 $ par mois et par siège. |
| Rendus automatisés | 0,01 $ par rendu, minimum 100 $ par mois. |
| Licence entreprise | À partir de 500 $ par mois. |
| Maya, seule à bord | 0 €. |
Questions fréquentes sur la vidéo programmatique avec Remotion
Qu'est-ce que Remotion ?
Remotion est un outil qui fait d'une vidéo un programme React : chaque image est calculée à partir de son numéro, et le rendu photographie les images une par une avant de les assembler en fichier vidéo. La vidéo se versionne donc dans git, se corrige en changeant une ligne, et se régénère quand les données changent. Depuis janvier 2026, ses douze skills officielles permettent de la décrire en langage naturel dans Claude Code, sans écrire le React soi-même.
Claude peut-il créer des vidéos ?
Oui, de deux façons complémentaires : il pilote les modèles génératifs comme Veo pour les images imaginées, et il écrit des vidéos Remotion pour tout ce qui exige de l'exactitude, chiffres, textes, charte graphique. Avec les skills officielles installées, vous décrivez les scènes et leurs timings en frames ; Claude écrit la composition, rend des extraits pour vérification et corrige sur demande. Environ trois quarts des utilisateurs de Remotion ne sont pas des techniciens, selon son créateur.
Remotion est-il gratuit ?
Oui pour les individus et les entreprises jusqu'à 3 personnes, usage commercial des vidéos inclus (relevé en août 2026 sur la page de licence officielle). Au-delà : 25 $ par mois et par siège pour la création manuelle, 0,01 $ par rendu avec un minimum de 100 $ par mois pour les rendus automatisés, licence entreprise à partir de 500 $ par mois. Les chiffres des blogs tiers sont souvent périmés : vérifiez la page officielle.
Vidéo générative ou programmatique : comment choisir ?
Par la nature du besoin. L'émotion, l'ambiance, la prise de vue impossible : génératif (Veo). Les chiffres exacts, le texte net, la charte au pixel, la vidéo à régénérer depuis des données : programmatique (Remotion). Les deux se combinent : un plan Veo s'embarque comme asset dans une composition Remotion qui l'habille de titres et de chiffres. Le test rapide : si une erreur de chiffre à l'écran est grave, c'est du code.
La suiteTous les ateliers ont produit. Sur la table de Maya : un article, des visuels, un spot qui parle avec sa voix et son jingle, une vidéo de stats qui se régénère en une phrase. Le réflexe serait de produire davantage. Le chapitre 10 prend l'autre chemin : décliner ce qui existe, un asset maître qui devient neuf contenus sans perdre la voix.
La suite par email
Recevez les prochains chapitres.
Les guides s'écrivent chapitre par chapitre et se révisent quand les outils bougent. Laissez votre email : un message à chaque publication ou révision majeure, rien d'autre.
Uniquement les publications des guides. Désinscription sur simple réponse.
Pour votre équipe
Ce guide existe aussi en formation.
Le guide donne la méthode, la formation l'installe : une à deux journées avec votre équipe, sur vos projets réels, avec un plan d'outillage à la fin.
Discutons de votre équipeDavid Silvera
Développeur mobile & web freelance · 15 ans · Android, iOS, React Native, Next.js
Ce guide est tiré de ma pratique : les vidéos, les visuels, la musique et les articles de mes projets sortent du pipeline qu'il enseigne, ce site compris. J'accompagne aussi les équipes qui veulent monter en compétence : audit de pratique, formation, mise en place d'outillage.