Claude Code peut créer des vidéos Remotion à partir d’un prompt rédigé en anglais courant, une fois le skill installé et à condition que le prompt se lise comme une liste de plans. Découvrez les commandes d’installation, trois exemples de prompts, du code React à copier, un flux de travail pour les rushes, les corrections de rendu et le coût des licences.
Taper un paragraphe et récupérer un MP4 généré ressemble à un tour de force, jusqu’à ce que vous le voyiez se produire. Avec le skill Remotion de Claude Code, vous décrivez une scène en anglais courant, l’agent écrit des composants React, et Remotion transforme chaque image en un vrai fichier vidéo. Pas de chronologie à faire glisser. Pas de fenêtre d’export qui cache le réglage dont vous avez besoin. Cet article présente l’installation, les prompts qui fonctionnent, du code à copier et les pièges qui vous font perdre un après-midi.
Que vous gériez un SaaS qui a besoin d’un clip de lancement, une équipe data qui veut des graphiques animés ou un créateur solo lassé de remonter sans cesse la même intro, créer des vidéos avec du code vous offre ce qu’un éditeur à chronologie ne proposera jamais : une vidéo qui est un simple fichier texte que vous pouvez versionner, relire et régénérer en une minute.
Remotion est un framework qui génère des vidéos à partir de code React. Vous écrivez des composants, Remotion les joue image par image dans un navigateur sans interface, capture chaque image et assemble le résultat en MP4, WebM, GIF ou image fixe. Tout ce qu’une page web peut dessiner, comme le SVG, les mises en page CSS, les graphiques, les polices web et le canvas, devient matière vidéo.
La documentation de Remotion résume l’idée centrale en une phrase : une vidéo est une fonction d’images dans le temps. Votre composant lit le numéro de l’image en cours et renvoie à quoi cette image doit ressembler. Modifiez une valeur d’une image à l’autre et vous obtenez une animation.
Chaque composition a besoin de quatre nombres :
La première image est 0 et la dernière est durationInFrames - 1. Un clip de 5 secondes à 30 fps compte 150 images. Ce calcul compte plus tard, car c’est la première chose qu’un prompt vague rate.
Claude Code écrit déjà du React solide. Ce qu’il ne connaît pas par défaut, ce sont les règles maison de Remotion. L’animation doit être pilotée par useCurrentFrame(), car les transitions CSS ne produisent pas de rendu déterministe. Les médias locaux doivent être chargés avec staticFile(). Les clips vidéo doivent être placés dans <OffthreadVideo>, et non dans une simple balise <video>. Si vous en oubliez une, l’aperçu paraît correct alors que le rendu final casse.
Le skill est un ensemble d’instructions que l’agent charge lorsqu’il détecte une tâche vidéo. Il couvre les bonnes pratiques Remotion, la création de projets et de compositions, le lancement de Studio, le rendu, ainsi que des extras comme les sous-titres et la mise à jour des paquets. L’agent cesse de tâtonner et se met à suivre les conventions du framework.
💡 Le skill est un guide, pas un moteur de rendu. Votre projet, votre installation de Node.js et Remotion lui-même produisent toujours la vidéo. Le skill empêche seulement l’agent d’écrire du code qui lutte contre le framework.
Il vous faut Node.js, un terminal et Claude Code, qui nécessite un abonnement payant Anthropic ou des crédits API. Tout le reste s’installe depuis npm.
npx create-video --yes --blank my-video
cd my-video
npm install
L’option --blank crée un projet minimal au lieu d’une démo, ainsi l’agent n’a rien à démêler avant de commencer.
Depuis le dossier du projet :
npx remotion skills add
Il existe deux alternatives. Le paquet de skills s’installe avec npx skills add remotion-dev/skills, et le plugin officiel Claude Code s’installe avec ces deux commandes :
claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion
Ouvrez deux terminaux dans le dossier du projet. Laissez l’aperçu tourner dans le premier et lancez l’agent dans le second :
# terminal 1
npm run dev
# terminal 2
claude
Studio ouvre un aperçu dans le navigateur qui se recharge à chaque fois que l’agent enregistre un fichier. Lancez une nouvelle session Claude Code après l’installation, sinon le skill risque de ne pas se charger. Le skill apparaît sous forme de commandes slash : /remotion-create, /remotion-studio, /remotion-render, /remotion-docs et /remotion-best-practices, qui regroupe toutes les autres lorsque vous ne savez pas laquelle utiliser.
Les prompts vagues donnent des vidéos génériques. Les prompts qui fonctionnent se lisent comme un découpage de plans : durée, dimensions, fréquence d’images (fps), ordre des scènes avec leur timing, texte exact, chemins d’accès aux fichiers, couleurs, polices, style de mouvement et une courte liste de ce qu’il faut éviter.
| Élément | Version faible | Version efficace |
|---|---|---|
| Durée | « une courte vidéo » | « 15 secondes à 30 fps » |
| Taille | « format réseaux sociaux » | « 1080 × 1920, vertical » |
| Scènes | « intro et démo » | « titre 2 s, démo 8 s, appel à l’action 5 s » |
| Texte | « un titre » | « Notes, enfin rapide » |
| Mouvement | « des animations sympas » | « entrées à ressort sobres, sans rebond » |
| Contraintes | aucune | « pas de musique de bibliothèque, une seule famille de police » |
Dites ce qu’il faut éviter. « Pas de dégradés, pas d’emoji, deux couleurs maximum » évite plus de retouches que n’importe quelle consigne positive.
Ce prompt s’inspire de celui du tutoriel de Tella :
/remotion-create
Create a 15-second, 1920x1080, 30 fps launch video for a note-taking app.
Three scenes: a 2-second title card, an 8-second product demo section,
and a 5-second call to action. Dark background, large readable type,
restrained spring animations. One file per scene under src/scenes,
all text passed in as props.
Ce qui revient est prévisible : trois composants de scène, une composition racine de 450 images et un objet defaultProps contenant les textes. Prévisualisez-la dans Studio, puis ajustez avec de courtes relances comme « faites entrer le titre 10 images plus tard » ou « ralentissez le ressort de l’appel à l’action ».
Les vidéos de données sont le terrain où le code l’emporte sur un éditeur à chronologie, car les chiffres sont une vraie entrée et non des barres dessinées à la main.
Read data/sales.json and build a 10-second, 1920x1080 bar chart at 30 fps.
Bars grow from zero with a spring, staggered by 4 frames each.
Show the value above each bar once it stops moving. Hold the final state
for 1 second. White background, one accent color, no gridlines.
Remplacez le fichier JSON et relancez le rendu, et vous obtenez la vidéo du rapport du mois prochain. L’échelonnement des apparitions tient en une ligne pour l’agent : le délai correspond à l’index de la barre multiplié par quatre images.
Le skill contient des consignes sur les sous-titres, donc un prompt de ce type fonctionne bien : « Ajoutez des sous-titres mot à mot à public/clips/interview.mp4 à partir de captions.json. Mettez le mot actif en surbrillance jaune et gardez les sous-titres dans le tiers inférieur de l’image. » Donnez à l’agent les vrais temps par mot dans un fichier plutôt que de lui demander de les inventer. Des temps inventés se désynchronisent en quelques secondes.
Même lorsque l’agent écrit tout, vous devez pouvoir le lire. Trois schémas reviennent dans presque tous les projets.
import {AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';
export const TitleCard: React.FC<{title: string}> = ({title}) => {
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
const enter = spring({frame, fps, config: {damping: 200}});
const opacity = interpolate(frame, [0, 15], [0, 1], {extrapolateRight: 'clamp'});
return (
<AbsoluteFill style={{backgroundColor: '#0f172a', justifyContent: 'center', alignItems: 'center'}}>
<h1 style={{color: 'white', fontSize: 96, opacity, marginTop: (1 - enter) * 60}}>
{title}
</h1>
</AbsoluteFill>
);
};
Régler damping sur 200 produit une entrée fluide sans rebond. interpolate fait correspondre les images 0 à 15 à une opacité de 0 à 1, et extrapolateRight: 'clamp' empêche ensuite la valeur de dépasser 1.
import {AbsoluteFill, Sequence} from 'remotion';
export const LaunchVideo: React.FC = () => (
<AbsoluteFill>
<Sequence from={0} durationInFrames={60}>
<TitleCard title="Notes, finally fast" />
</Sequence>
<Sequence from={60} durationInFrames={240}>
<ProductDemo />
</Sequence>
<Sequence from={300} durationInFrames={150}>
<CallToAction />
</Sequence>
</AbsoluteFill>
);
À l’intérieur de Sequence, useCurrentFrame() repart à zéro, ainsi chaque scène peut être écrite et testée seule. À 30 fps, ces blocs durent 2, 8 et 5 secondes, ce qui correspond aux 450 images du prompt de lancement.
import {Composition} from 'remotion';
import {TitleCard} from './TitleCard';
export const Root: React.FC = () => (
<Composition
id="TitleCard"
component={TitleCard}
durationInFrames={90}
fps={30}
width={1920}
height={1080}
defaultProps={{title: 'Hello from code'}}
/>
);
Surchargez maintenant le texte au moment du rendu et bouclez sur une liste :
for name in "Spring sale" "Black Friday" "New arrivals"; do
npx remotion render src/index.ts TitleCard "out/${name// /-}.mp4" --props="{\"title\":\"$name\"}"
done
Trois vidéos à partir d’un seul composant, sans ouvrir d’éditeur.
💡 Dites-le dès le départ à l’agent : « Chaque chaîne, couleur et nombre passe par les props. » Cela ne coûte rien et facilite ensuite les variantes en lot, les tests A/B et les traductions.
Remotion anime ce que vous lui donnez : textes, formes, graphiques, images et clips. Pour des séquences filmées d’allure réaliste ou un storyboard plus net, vous importez des éléments venus de l’extérieur. PicassoIA couvre les deux, avec une page Claude Sonnet 5 pour rédiger les spécifications de scènes et le code, et une page Seedance 2.0 pour générer des clips.
high lorsque vous avez besoin de nombres d’images exacts sur de nombreuses scènes, et sur low pour les réécritures rapides. Laissez max tokens sur la valeur par défaut de 8 192 pour les longues spécifications./remotion-create.Le modèle accepte aussi une image, donc une capture de l’interface de votre produit peut alimenter directement le storyboard.
16:9 pour 1920x1080, ou 9:16 pour le vertical.720p par défaut.public/clips/, à l’intérieur de votre projet Remotion.Pour garder une apparence de marque cohérente, importez une image fixe comme première image. Seedance 2.0 la traite comme image d’ouverture du clip.
💡 Générez un seul plan par clip, puis assemblez-les dans Remotion. Des clips courts avec un déplacement de caméra net l’emportent sur un long clip qui contient cinq idées.
import {AbsoluteFill, OffthreadVideo, staticFile} from 'remotion';
export const HarborShot: React.FC = () => (
<AbsoluteFill>
<OffthreadVideo src={staticFile('clips/harbor.mp4')} />
</AbsoluteFill>
);
Ajoutez ensuite par-dessus les séquences filmées du texte, des bandeaux et des sous-titres avec du React classique. Pour peaufiner hors de Remotion, ces pages s’intègrent bien au flux de travail :
| Tâche | Page |
|---|---|
| Voix off à partir d’un script | Speech 2.8 HD |
| Couper un clip à la durée exacte | Trim Video |
| Assembler les scènes rendues | Video Merge |
| Remplacer ou mixer une bande-son | Video Audio Merge |
| Incruster les sous-titres dans un rendu | Autocaption |
Studio sert à itérer et la ligne de commande sert à produire le résultat. Voici les commandes que vous utiliserez le plus :
| Objectif | Commande |
|---|---|
| Aperçu en direct | npm run dev |
| Générer un MP4 | npx remotion render src/index.ts LaunchVideo out/launch.mp4 |
| Exporter une image fixe | npx remotion still src/index.ts LaunchVideo out/frame.png --frame=60 |
| Surcharger les props | --props='{"title":"Hello"}' |
| Réduire la consommation de mémoire | --concurrency=2 |
Vous pouvez aussi taper /remotion-render et laisser l’agent lancer le rendu à votre place. En cas de problème, voici les cinq problèmes que vous rencontrerez en premier :
npm install, puis vérifiez dans le terminal s’il y a un conflit de version de Node.js ou de port.Sequence.Quand l’agent continue de deviner, /remotion-docs lui fournit la documentation officielle pour vérifier.
La licence de Remotion détermine si c’est gratuit pour vous. D’après la page de licence du projet, l’outil est gratuit pour les particuliers, les organisations à but lucratif comptant jusqu’à 3 employés, les organisations à but non lucratif et toute personne qui l’évalue. Les entreprises plus grandes ont besoin d’une licence d’entreprise. Au moment de la rédaction, Remotion propose les niveaux suivants :
| Offre | À qui ça s’adresse | Prix |
|---|---|---|
| Free | Particuliers, jusqu’à 3 employés, organisations à but non lucratif | 0 $ |
| Creators | 4+ personnes qui réalisent des vidéos à la main | 25 $ par siège et par mois |
| Automators | Applications qui génèrent des rendus automatiquement | 0,01 $ par rendu, 100 $ de minimum mensuel |
| Enterprise | Conditions sur mesure et assistance | À partir de 500 $ par mois |
Consultez la page tarifaire actuelle avant de publier, car les conditions évoluent. Les autres coûts sont l’usage de Claude Code, le temps de rendu sur votre propre machine et les crédits pour les séquences filmées générées par IA.
Les limites sont réelles, elles aussi. Ce flux de travail brille pour le motion design, les vidéos explicatives, les vidéos de données, les sous-titres et les variantes basées sur des modèles. Il convient mal au montage multicaméra en prise de vue réelle, où les séquences filmées ou générées doivent porter l’image et où Remotion ne doit ajouter que la couche graphique. Et l’agent n’est pas déterministe : deux exécutions du même prompt donnent deux mises en page différentes, donc vérifiez toujours dans Studio avant de générer le rendu.
Commencez petit. Créez le projet, ajoutez le skill et demandez une carte de titre de cinq secondes avec votre propre texte. Une fois le rendu obtenu, développez-la : ajoutez une scène, transmettez les textes sous forme de props, puis bouclez sur une liste pour obtenir dix variantes.
Importez ensuite des éléments venus de l’extérieur. Générez un fond en boucle avec Seedance 2.0, enregistrez un script avec Speech 2.8 HD et laissez Remotion assembler le tout avec un timing exact. Vous préférez les images fixes ? Créez vos propres images et illustrations de scène sur PicassoIA via la liste complète des modèles, puis déposez-les dans public/ comme fonds de vos compositions. Expérimentez, cassez des choses et relancez le rendu. Une vidéo qui vit dans du code se corrige en une minute : essayez donc la version que vous n’auriez jamais tentée sur une chronologie.
Choisissez votre langue
