Faire coder une animation par Claude Code avec Remotion

1. À la fin de cette leçon, tu sauras

Expliquer ce qu’est Remotion et pourquoi un agent peut écrire une vidéo.
Créer un projet Remotion en suivant la documentation officielle.
Faire travailler Claude Code en mode plan, puis par petites étapes.
Modifier ta vidéo en une phrase et la rendre en fichier MP4.

2. Pourquoi ça t’intéresse

Camille voudrait une courte vidéo animée qui présente ses trois ateliers : initiation, tournage, émaillage. Dans un outil en ligne, elle devrait tout refaire à chaque changement de date. Avec Remotion, la vidéo est un petit programme. Elle décrit ce qu’elle veut à Claude Code, valide son plan, et obtient une animation à ses couleurs. Le mois suivant, elle écrit : « remplace la date du stage d’émaillage par le 14 décembre ». La vidéo est à jour.

3. Avant de commencer


Il te faut	Claude Code installé (voir la page d’installation sur code.claude.com/docs), Node.js installé (nodejs.org), ton logo et tes couleurs, la phrase de style de la leçon 1, ton carnet de bord
Coût	Claude Code demande un abonnement Claude payant ou un compte Console : vérifie le prix du jour sur claude.com/pricing. Remotion est gratuit pour les particuliers et les très petites structures ; au-delà, une licence entreprise est demandée : vérifie les conditions sur remotion.dev
Durée	75 à 90 minutes

Cette leçon suppose que tu sais lancer Claude Code dans un dossier (module 5). Si tu n’as pas d’abonnement, lis-la quand même : tu comprendras ce qu’un agent sait faire, et tu pourras passer à la leçon 4 avec les outils des leçons 1 et 2.

4. Comprendre en 3 minutes

Avec Remotion, une vidéo n’est pas une suite d’images que l’on monte : c’est un programme qui calcule chaque image. Le site officiel le présente ainsi : créer des vidéos et du motion design avec React (un langage de création d’interfaces web). La documentation explique l’idée de base : une vidéo, c’est une suite d’images dans le temps ; si le contenu change un peu à chaque image, on obtient une animation.

Image mentale : une partition. Tu écris la partition, l’orchestre la joue autant de fois que tu veux. Changer une note change le morceau, sans tout réenregistrer.

Toi, tu n’écris pas le code : c’est Claude Code qui l’écrit. Ton rôle est celui d’un réalisateur :

Toi	Claude Code	Remotion
Tu décris la vidéo, tu valides le plan, tu regardes l’aperçu, tu demandes les corrections	Il écrit et modifie le code, et peut lancer le rendu	Il affiche l’aperçu dans ton navigateur (Remotion Studio) et fabrique le fichier vidéo

La documentation de Remotion consacre une page au travail avec Claude Code, et propose des « Agent Skills » : des instructions qui apprennent à l’agent les bonnes pratiques de Remotion. Les commandes évoluent : la page officielle fait foi.

5. Faire ensemble

Exemple : la vidéo des trois ateliers de l’Atelier Argile.

Étape 1 · Créer le projet en suivant la documentation

Va sur remotion.dev, ouvre la documentation, puis la partie consacrée à l’IA et la page sur Claude Code.
Ouvre un terminal dans ton dossier de travail. Au moment où nous écrivons, la page indique de créer un projet vierge avec npx create-video --yes --blank my-video, d’entrer dans le dossier avec cd my-video, d’ajouter les Agent Skills avec npx remotion skills add, puis de lancer l’aperçu avec npm run dev.
Si la page indique autre chose, suis la page.

Ce que tu dois voir : après npm run dev, le terminal affiche une adresse locale. Ouvre-la dans ton navigateur : c’est Remotion Studio, avec une vidéo vide ou presque. Laisse ce terminal ouvert.

Si ça ne marche pas : « npx n’est pas reconnu » signifie que Node.js n’est pas installé, ou que tu dois ouvrir un nouveau terminal après l’installation.

Étape 2 · Lancer Claude Code et donner le contexte

Ouvre un second terminal, va dans le dossier my-video, et lance claude.
Copie dans ce dossier ton fichier de logo.
Lance /init pour que l’agent crée un fichier CLAUDE.md, puis demande-lui d’y noter ta charte :

Ajoute dans CLAUDE.md la charte de ma vidéo : couleurs [tes couleurs principales], police [ta police ou « simple et lisible »], style de mouvement [ta phrase de style de la leçon 1], logo [nom du fichier]. Ne modifie rien d'autre.

Étape 3 · Décrire la vidéo en mode plan

Appuie sur Maj+Tab jusqu’à voir le mode plan affiché en bas de l’écran.
Décris ta vidéo :

Je veux une vidéo verticale d'environ 15 secondes pour [ton projet]. Déroulé : le titre [ton accroche] apparaît, puis trois cartes présentent [tes trois offres, activités ou rendez-vous], une par une, puis mon logo termine la vidéo. Respecte la charte de CLAUDE.md. Propose un plan par petites étapes, et pose-moi tes questions avant de coder.

Lis le plan. Si une partie ne te convient pas, dis-le avant d’accepter. Puis accepte le plan.

Étape 4 · Avancer par petites étapes

Demande d’abord seulement le titre. Regarde le résultat dans Remotion Studio (l’aperçu se met à jour).
Puis les cartes, puis le logo. Une étape, une vérification.
Pour corriger, une seule phrase à la fois :

Dans la vidéo, change seulement ceci : [la modification, par exemple « le titre arrive deux fois plus lentement »]. Ne touche à rien d'autre.

Si l’agent part dans une mauvaise direction, appuie sur Échap pour l’interrompre. Échap deux fois permet de revenir en arrière.

Si ça ne marche pas :

L’aperçu affiche une erreur rouge : copie le message et donne-le à l’agent, sans rien ajouter d’autre.
Le texte déborde de l’image : demande « réduis la taille du texte pour qu’il reste dans le cadre, avec une marge ».
L’aperçu ne bouge plus : vérifie que le premier terminal, celui de npm run dev, tourne toujours.

Étape 5 · Rendre la vidéo

Dans Remotion Studio, clique sur le bouton de rendu, vérifie les réglages proposés, puis confirme.
Tu peux aussi demander à l’agent de lancer le rendu pour toi et de te dire où se trouve le fichier.
Copie le fichier obtenu dans ton dossier « motion-design », sous le nom animation-codee.mp4.

Piège fréquent : tout demander dans une seule longue phrase, puis corriger dix choses à la fois. L’agent mélange les corrections et tu ne sais plus laquelle a cassé l’animation. Une demande, une vérification dans l’aperçu, et seulement ensuite la suivante.

6. Faire toi-même

Fais coder par Claude Code une animation de ton propre projet : tes trois services, les trois temps forts de ton association, les trois étapes de ton projet personnel. Puis fais trois modifications en une phrase chacune (une couleur, une vitesse, un texte) et vérifie chacune dans l’aperçu avant la suivante.

Résultat attendu : un fichier animation-codee.mp4 dans ton dossier « motion-design », un CLAUDE.md qui contient ta charte, et la liste de tes trois demandes de modification dans ton carnet de bord.

7. Vérifier

Remotion Studio s’ouvre dans mon navigateur et affiche ma vidéo.
Ma charte (couleurs, police, style de mouvement) est notée dans CLAUDE.md.
J’ai validé un plan en mode plan avant que l’agent ne code.
J’ai fait au moins trois modifications, une à la fois, vérifiées dans l’aperçu.
Les textes sont justes et restent dans le cadre, avec une marge.
Le fichier MP4 est rendu et rangé dans mon dossier.

8. Ce que tu gardes

Dans ton carnet de bord : la demande de l’étape 3 en modèle à trous, les phrases de modification qui ont marché, et le chemin du dossier my-video, ton modèle pour la prochaine fois.

9. Pour aller plus loin

Demande à l’agent une version carrée et une version horizontale de la même animation : tu en auras besoin en leçon 5.
La leçon suivante assemble tout ce que tu as produit dans une vidéo explicative de 30 secondes.