Remotion est le framework le plus utilisé pour faire écrire des vidéos à Claude Code. Sa documentation résume la mise en place en quatre commandes, et c'est vrai : vingt minutes suffisent pour obtenir une première animation. Ce qu'elle ne dit pas, c'est comment passer d'une démo amusante à un format qu'une PME peut produire chaque mois sans y perdre une journée. C'est l'objet de ce tutoriel : installer, briefer, faire relire par l'agent, rendre, puis industrialiser.
Il s'appuie sur la documentation de Remotion consultée le 6 octobre 2026 (pages mises à jour la veille). C'est le deuxième article de notre série ; pour le panorama des outils et la question de savoir si le jeu en vaut la chandelle, commencez par le guide Claude Code et motion design.
Avant de commencer : trois prérequis
Node.js installé
Remotion est un projet JavaScript : toutes les commandes passent par npx et npm. Un poste Windows, Mac ou Linux convient.
Claude Code opérationnel
Installé et connecté à un compte. La doc Remotion le rappelle : la plupart des agents de code demandent un abonnement payant. Pour l'installation, voyez notre prise en main de Claude Code.
La licence tranchée
Gratuite jusqu'à 3 personnes dans l'entreprise. À partir de 4, une Company License est exigée : 25 $ par mois et par siège pour la formule Creators.
Le troisième point mérite d'être réglé avant le premier rendu. La page licence de Remotion précise que la formule Creators couvre la création manuelle de vidéos pour sa propre organisation « y compris avec des agents d'IA et Remotion Studio », à raison d'un siège par personne qui produit. Si votre projet consiste au contraire à générer des vidéos en lot (une par client, une par produit), c'est la formule Automators qui s'applique : 0,01 $ par rendu, 100 $ par mois minimum. Le détail des formules figure dans le guide pilier.
Étape 1 : les quatre commandes d'installation
Ouvrez un terminal dans le dossier où vous rangez vos projets, puis suivez la séquence officielle. Deux fenêtres de terminal sont nécessaires : l'une fait tourner l'aperçu, l'autre héberge Claude Code.
| Commande | Ce qu'elle fait | Terminal |
|---|---|---|
npx create-video --yes --blank --no-tailwind my-video |
Crée un projet vierge dans le dossier my-video, sans Tailwind |
1 |
cd my-video puis npx remotion skills add |
Installe les Agent Skills de Remotion dans le projet | 1 |
npm run dev |
Lance Remotion Studio : l'aperçu s'ouvre dans le navigateur | 1 (reste ouvert) |
cd my-video puis claude |
Démarre Claude Code dans le même dossier | 2 |
Pourquoi un projet vierge ? Parce que les modèles fournis par Remotion contiennent déjà des animations d'exemple que l'agent aurait tendance à reprendre. Partir d'une page blanche donne des résultats plus fidèles à votre brief. Tailwind est désactivé pour la même raison : moins de couches, moins de surprises.
Les skills sont la pièce maîtresse. Ce sont douze fiches de bonnes pratiques que Claude Code charge quand il en a besoin : /remotion-create pour créer une composition, /remotion-markup pour l'animation, la typographie et le timing, /remotion-render pour le rendu, /remotion-captions pour les sous-titres, /remotion-docs pour consulter la documentation à jour, etc. Sans elles, l'agent écrit du Remotion de mémoire, avec des paramètres parfois périmés. Si vous avez configuré l'ancien serveur MCP de documentation Remotion, retirez-le : il est officiellement déprécié au profit de /remotion-docs.
Étape 2 : comprendre ce que l'agent va écrire
Inutile de savoir coder en React, mais trois mots de vocabulaire vous feront gagner du temps dans vos échanges avec l'agent :
Composition
Une vidéo « rendable » : un composant, une largeur et une hauteur, un nombre d'images par seconde, une durée et un identifiant. Un même projet peut en contenir plusieurs, par exemple une version 16:9 et une version 9:16.
Frame
Une image. À 30 images par seconde, une vidéo de 15 secondes compte 450 frames. Tout le timing se raisonne en frames : « le logo apparaît à la frame 60 », c'est-à-dire à 2 secondes.
Props
Les données qui changent d'une vidéo à l'autre : un titre, un chiffre, une couleur. Bien séparées du reste, elles permettent de produire dix variantes sans toucher à l'animation.
Le troisième mot est le plus important pour une PME. Une vidéo dont le texte est écrit « en dur » dans l'animation est une vidéo unique. Une vidéo dont le texte passe par des props, avec des valeurs par défaut, devient un modèle : Remotion Studio affiche alors ces champs dans un panneau que l'on peut modifier sans ouvrir le code. Demandez-le explicitement à l'agent dès le premier brief.
Étape 3 : le brief qui donne un bon premier jet
La qualité du premier rendu dépend presque entièrement du brief. Un « fais-moi une vidéo pour notre nouveau produit » donnera une animation générique. Voici la structure que nous utilisons, avec un exemple pour un « chiffre du mois » destiné à LinkedIn :
Brief type à coller dans Claude Code
- Objectif : vidéo « chiffre du mois » pour LinkedIn, un seul message.
- Format : 1080 × 1350 (portrait 4:5), 30 images par seconde, 12 secondes.
- Déroulé : 0-2 s logo ; 2-7 s le chiffre « 1 240 commandes » s'incrémente de 0 à sa valeur ; 7-10 s phrase de contexte ; 10-12 s logo et adresse du site.
- Charte : fond #0B1220, accent #38BDF8, police Inter, logo dans
public/logo.svg. - Paramètres : le chiffre, le libellé et la phrase de contexte doivent être des props avec valeurs par défaut, modifiables dans le Studio.
- Contraintes : pas de musique, pas d'image externe, transitions sobres.
Copiez au préalable le logo et les éventuelles images dans le dossier public du projet : l'agent travaille avec les fichiers qu'il voit, et ne va pas chercher votre charte sur votre site. Pour les polices, nommez-les ; la skill /remotion-markup sait les charger proprement. Si vous rédigez souvent ce type de consigne, notre méthode de prompts pour Claude donne une trame réutilisable.
Avant de laisser l'agent écrire, un réflexe utile : lui demander de reformuler le plan (compositions prévues, découpage en séquences, props) et de ne coder qu'après votre accord. Deux minutes de lecture évitent un aller-retour de vingt.
Étape 4 : faire regarder une image fixe à l'agent
C'est l'astuce qui change le plus la qualité, et peu de tutoriels la donnent. Claude Code écrit du code ; il ne voit pas l'aperçu qui tourne dans votre navigateur. Mais Remotion sait rendre une seule image d'une composition, à un instant précis, et Claude Code sait lire une image PNG. On lui donne donc des yeux.
La commande est npx remotion still, suivie de l'identifiant de la composition et de l'option --frame : elle produit par défaut un PNG dans le dossier out. Pour contrôler plusieurs instants d'un coup, la documentation indique de passer par npx remotion render avec --frames=0,30,90 et --image-format=png. Une consigne type :
« Après chaque modification, rends les frames 30, 150 et 330 en PNG, ouvre-les et vérifie : aucun texte coupé ou hors cadre, contraste lisible, logo entier, chiffre affiché en entier à la frame 210. Corrige avant de me rendre la main. »
Ce contrôle attrape l'essentiel des défauts d'un premier jet : un titre trop long qui déborde en format portrait, un texte blanc sur un fond clair, un élément qui sort du cadre. Il ne dit rien du mouvement lui-même. Pour cela, il faut regarder l'aperçu.
Étape 5 : itérer avec des corrections précises
Une fois l'image fixe propre, regardez l'animation dans Remotion Studio, qui tourne dans votre navigateur depuis l'étape 1. Notez ce qui ne va pas, puis formulez des demandes que l'agent peut exécuter sans interpréter :
Demandes floues
- « Rends ça plus dynamique. »
- « Le chiffre n'est pas assez mis en valeur. »
- « Ça fait un peu cheap. »
- « Améliore la fin. »
Demandes exécutables
- « Raccourcis l'entrée du logo de 2 s à 1 s, tout le reste avance d'autant. »
- « Chiffre en 160 px, gras, couleur d'accent, léger rebond à la fin du comptage. »
- « Supprime l'ombre portée et le dégradé du fond, garde un aplat. »
- « Le logo final reste immobile pendant les 2 dernières secondes. »
Deux habitudes complètent la méthode. Versionnez le projet dans Git dès qu'une version vous convient : si une correction dégrade le résultat, on revient en arrière en une commande, et l'agent sait le faire pour vous. Une correction à la fois, ou trois au plus : un lot de dix retouches mélangées rend impossible de savoir laquelle a cassé quoi.
Étape 6 : le rendu final
Deux façons de produire le fichier vidéo. La plus simple : le bouton Render de Remotion Studio, qui ouvre les réglages puis lance le rendu. La plus reproductible : la ligne de commande, npx remotion render suivi de l'identifiant de la composition ; sans chemin de sortie, le fichier arrive dans le dossier out. C'est aussi ce que fait la skill /remotion-render quand vous demandez simplement à l'agent « lance le rendu final ».
Quelques options de la commande sont utiles au quotidien : --props pour injecter les valeurs du mois, --width et --height pour forcer un format, --concurrency pour limiter le nombre de cœurs utilisés si le poste doit rester réactif pendant le rendu.
Piège Windows
La documentation le signale : passer les props en JSON directement dans la commande (--props='{...}') ne fonctionne pas dans les terminaux Windows, qui suppriment les guillemets. Écrivez les valeurs dans un fichier, par exemple props/octobre.json, et passez son chemin : --props=./props/octobre.json. C'est de toute façon plus propre, puisque chaque mois devient un fichier archivé.
Étape 7 : transformer la vidéo en format récurrent
C'est ici que Remotion rentabilise la mise en place. Si les props ont été prévues dès le brief, le « chiffre du mois » de novembre ne demande plus l'agent : on copie le fichier d'octobre, on change trois valeurs, on lance le rendu. Pour les déclinaisons de format, demandez à l'agent d'ajouter une composition par ratio (16:9 pour YouTube et le site, 9:16 pour les stories, 1:1 ou 4:5 pour LinkedIn) partageant le même composant : une seule animation à maintenir, trois fichiers en sortie.
Au-delà de quelques dizaines de vidéos générées automatiquement, par exemple une par fiche produit, on change de nature de projet : rendus côté serveur ou dans le cloud, intégration à une application, et formule de licence Automators. Ce n'est plus un tutoriel, c'est une automatisation à part entière, qui mérite d'être cadrée comme telle.
Les erreurs les plus fréquentes
| Symptôme | Cause probable | Correction |
|---|---|---|
| L'agent utilise des fonctions qui n'existent pas | Skills non installées, il écrit de mémoire | npx remotion skills add, puis lui demander de consulter /remotion-docs |
| L'aperçu ne bouge plus | Le terminal de npm run dev a été fermé |
Relancer l'aperçu dans une fenêtre dédiée |
| Texte coupé en format portrait | Mise en page pensée en 16:9 | Boucle « still » sur chaque composition |
| Chaque variante demande l'agent | Textes écrits en dur dans l'animation | Faire extraire les textes en props avec valeurs par défaut |
| Police différente au rendu | Police non chargée explicitement | Demander le chargement de la police via la skill /remotion-markup |
Enfin, ne confiez à l'agent que ce que vous pourriez publier : un chiffre interne non encore communiqué reste une donnée de l'entreprise. Les règles de confidentialité sont celles décrites dans notre article sur Claude en entreprise et la sécurité des données. Et les droits sur les polices, les musiques et les images restent à vérifier par vous.
Questions fréquentes
Comment installer Remotion avec Claude Code ?
La documentation Remotion donne quatre étapes : créer un projet vierge avec npx create-video --yes --blank --no-tailwind my-video, installer les Agent Skills avec npx remotion skills add dans ce dossier, lancer l'aperçu avec npm run dev, puis démarrer claude dans le même dossier depuis un second terminal.
Faut-il savoir coder pour utiliser Remotion avec Claude Code ?
Non pour produire une première vidéo : l'agent écrit le code React. Il faut en revanche savoir lancer des commandes dans un terminal, connaître trois notions (composition, frame, props) et relire l'aperçu pour demander des corrections précises.
Claude Code peut-il voir la vidéo qu'il crée ?
Pas l'animation elle-même, mais il peut contrôler des images fixes : la commande npx remotion still rend une frame précise en PNG, que l'agent lit et compare au brief. Le jugement sur le rythme et la fluidité reste humain, dans Remotion Studio.
Comment rendre la vidéo finale en MP4 ?
Soit avec le bouton Render de Remotion Studio, soit en ligne de commande avec npx remotion render suivi de l'identifiant de la composition. Sans chemin de sortie, le fichier est placé dans le dossier out du projet.
Le tutoriel est-il gratuit pour une entreprise ?
Remotion est gratuit pour les particuliers et les entreprises de 3 personnes au plus. À partir de 4 personnes, une Company License est exigée : 25 $ par mois et par siège pour la formule Creators, qui couvre la création avec des agents d'IA. Claude Code reste payant par ailleurs (abonnement ou API).
En résumé
Quatre commandes installent Remotion et ses skills ; le reste est une affaire de méthode. Un brief structuré qui prévoit des props, une boucle où l'agent contrôle lui-même des images fixes, des corrections précises une à une, un rendu en ligne de commande avec des fichiers de valeurs : c'est ce qui transforme une démo en format que l'on reproduit chaque mois en quelques minutes. Le prochain article de la série met Remotion face à HyperFrames, l'alternative open source de HeyGen. Pour cadrer ces usages dans votre entreprise, découvrez nos missions de stratégie IA ou contactez-nous.
