Créer des vidéos avec Claude Code et Remotion

Claude Code associé à la compétence Remotion constitue un workflow permettant de générer des vidéos à partir de prompts en langage naturel : installez la compétence, initialisez un projet Remotion, décrivez la vidéo en anglais courant, et laissez Claude rédiger du React précis à l’image près pour produire un fichier MP4. C’est l’intégralité de la boucle. La friction ne vient jamais du prompt — elle vient de la compréhension du code que Claude vous remet, suffisamment pour le corriger lorsque le rendu s’écarte de ce que vous aviez demandé. Cet article parcourt un exemple orienté développeur de bout en bout, puis vous montre comment assimiler le modèle mental de Remotion afin de diagnostiquer un rendu défaillant depuis l’aperçu Studio, plutôt que de relancer des prompts à l’aveugle.

En quoi consiste cette stack ?

Remotion est un framework React open source permettant de créer des vidéos par programmation : vous définissez des scènes sous forme de composants React, contrôlez le timing via des numéros de frame, et exportez le résultat en MP4, WebM ou GIF — sans éditeur de timeline ni glisser-déposer. La compétence Remotion pour Claude Code est un ensemble de règles qui enseigne à l’agent la surface d’API de Remotion — compositions, séquences, interpolate(), spring(), configuration du rendu — afin qu’il génère des calculs de frames corrects plutôt que de les deviner. Il ne s’agit pas d’un plugin s’exécutant au moment du rendu ; c’est du contexte injecté dans Claude pour que le code qu’il produit compile et s’anime conformément à votre description.

Quel est le modèle mental de Remotion ?

Dans Remotion, votre vidéo est une fonction pure d’un numéro de frame. Une composition est un composant React avec une durée fixe en frames. À 30fps, une vidéo de 15 secondes représente 450 frames, et chaque animation s’exprime comme un mapping de la frame courante vers une valeur CSS — opacité, transform, couleur. Il n’existe pas de timeline ; il n’y a que des mathématiques.

Quatre primitives portent l’intégralité du modèle, toutes documentées dans les fondamentaux de Remotion :

• useCurrentFrame() retourne la frame en cours de rendu. Votre composant est ré-exécuté pour chaque frame.
• fps et durée sont définis sur la <Composition>. Selon la documentation des compositions, vous y configurez durationInFrames, fps, width et height.
• <Sequence> décale le temps. Un enfant enveloppé dans <Sequence from={90}> voit la frame 0 lorsque la frame globale est à 90, ce qui permet d’échelonner les scènes.
• interpolate() mappe une plage de frames vers une plage de valeurs.

Calculs de frames que vous utiliserez en permanence :

Une fois que vous avez intégré le principe « frame en entrée, valeur CSS en sortie », le code généré cesse de ressembler à de la magie.

Prérequis et installation

Vous avez besoin de Node.js (vérifiez la version requise sur la page de démarrage de Remotion avant l’installation) et de Claude Code, l’agent de codage en terminal d’Anthropic. Claude Code fonctionne avec un abonnement Claude ou une facturation API — confirmez les conditions d’accès actuelles dans la documentation Claude Code d’Anthropic, car la disponibilité des offres évolue.

Voici la partie que tous les tutoriels expédient. La commande d’installation de la compétence Remotion est apparue sous au moins trois formes différentes dans des articles récents (npx @anthropic-ai/skills add remotion, npx skills add remotion, npx skills add remotion-dev/skills). Le packaging des compétences étant en mouvement, ne faites pas confiance à une commande copiée. Ouvrez la page officielle des compétences — remotion.dev/docs/ai/skills — et exécutez la commande qui y figure actuellement. Considérez cette page comme la source de vérité unique jusqu’à ce que l’écosystème se stabilise.

Vérifiez d’abord que Claude Code est accessible dans votre PATH :

claude --version

Installez ensuite la compétence en utilisant la commande de la page de documentation officielle, et confirmez qu’elle est bien chargée en interrogeant Claude dans un projet : « Do you have the Remotion skill loaded? »

Un exemple concret : un clip de présentation de fonctionnalité de 15 secondes

Les cas d’usage développeur les plus pertinents pour cette stack sont des assets que vous régénérez à partir de données ou selon un calendrier : un clip de changelog construit depuis CHANGELOG.md, un diagramme d’architecture animé reflétant le système actuel, ou une présentation de fonctionnalité produit re-générée à chaque release. Nous allons construire la présentation de fonctionnalité.

Étape 1 — Initialisation du projet

La commande d’initialisation est documentée sur la page de démarrage de Remotion :

npx create-video@latest feature-reveal
cd feature-reveal
npm install

Créez le projet avec un template ou une configuration TypeScript. L’initialisation vous fournit src/Root.tsx (où les compositions sont enregistrées) ainsi qu’une composition de démarrage.

Étape 2 — Prompter Claude Code

Ouvrez l’agent dans le projet et soyez explicite sur les calculs de frames — c’est là que la plupart des sorties incorrectes trouvent leur origine :

Create a Remotion composition called FeatureReveal.
- 15 seconds at 30fps (450 frames), 1920x1080.
- Dark background (#0d1117).
- A headline "Ship changelogs as video" fades in over frames 0-30,
  holds, then fades out over frames 420-450.
- Three feature rows below the headline, each sliding up from 40px
  with a spring, staggered: row 1 enters at frame 60, row 2 at 90,
  row 3 at 120.
- Register FeatureReveal in Root.tsx with the correct
  durationInFrames and fps.

Étape 3 — Lire le code généré

Une génération correcte ressemble à ceci. Le titre utilise interpolate() ; les lignes utilisent des offsets <Sequence from> combinés à spring() :

import {
  AbsoluteFill,
  interpolate,
  spring,
  Sequence,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";

const features = ["One prompt", "Re-render per release", "Version-controlled"];

const FeatureRow: React.FC<{ label: string }> = ({ label }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // spring() retourne 0→1 ; on le mappe vers translateY et opacity.
  const enter = spring({ frame, fps, config: { damping: 14 } });
  const translateY = interpolate(enter, [0, 1], [40, 0]);

  return (
    <div style={{ opacity: enter, transform: `translateY(${translateY}px)` }}>
      {label}
    </div>
  );
};

export const FeatureReveal: React.FC = () => {
  const frame = useCurrentFrame();

  // Opacité du titre : visible à la frame 30, maintenu, disparaît de 420 à 450.
  const headlineOpacity = interpolate(
    frame,
    [0, 30, 420, 450],
    [0, 1, 1, 0],
    { extrapolateRight: "clamp" }
  );

  return (
    <AbsoluteFill style={{ backgroundColor: "#0d1117", color: "white" }}>
      <h1 style={{ opacity: headlineOpacity, fontSize: 72 }}>
        Ship changelogs as video
      </h1>
      {features.map((label, i) => (
        // Chaque ligne démarre 30 frames après la précédente via `from`.
        <Sequence key={label} from={60 + i * 30}>
          <FeatureRow label={label} />
        </Sequence>
      ))}
    </AbsoluteFill>
  );
};

La ligne à retenir est l’interpolate() du titre. L’appel mappe des numéros de frame vers des valeurs d’opacité : à la frame 0, l’opacité est 0 ; à la frame 30, elle est 1 ; elle se maintient jusqu’à la frame 420, puis revient à 0 à la frame 450. Le tableau de frames et le tableau de valeurs doivent avoir la même longueur, et { extrapolateRight: "clamp" } empêche la valeur de continuer au-delà du dernier point — le nom de l’option et son comportement sont documentés dans la référence interpolate().

L’échelonnement provient de from={60 + i * 30} sur chaque <Sequence>. Comme chaque ligne possède sa propre séquence, son useCurrentFrame() repart à 0 à sa frame de départ, de sorte que spring() se déclenche depuis le point d’entrée de la ligne plutôt que depuis le début de la vidéo.

Claude doit également enregistrer la composition dans Root.tsx :

import { Composition } from "remotion";
import { FeatureReveal } from "./FeatureReveal";

export const RemotionRoot: React.FC = () => (
  <Composition
    id="FeatureReveal"
    component={FeatureReveal}
    durationInFrames={450}
    fps={30}
    width={1920}
    height={1080}
  />
);

Si durationInFrames et fps ici divergent des numéros de frames dans votre composant, le timing sera cassé. C’est la source la plus fréquente du problème « la vidéo n’a pas la bonne durée ».

Étape 4 — Aperçu dans Studio

Démarrez le Remotion Studio :

npm run dev

Le Studio s’ouvre dans votre navigateur (notez le port affiché — il n’est pas toujours identique). Sélectionnez FeatureReveal, appuyez sur lecture et faites glisser la tête de lecture. Scrubber jusqu’à une frame précise est le geste de débogage fondamental : l’aperçu vous montre exactement ce que la frame N produit, vous permettant de le comparer aux calculs de frames dans votre code.

Comment diagnostiquer un rendu Remotion incorrect ?

Diagnostiquez depuis l’aperçu Studio, et non à partir d’une liste d’erreurs génériques. Scrubber jusqu’à la frame où le problème apparaît et lisez le code qui contrôle cette plage de frames. Trois modes de défaillance en expliquent la majorité.

Tout s’anime simultanément. Lorsque des animations se déclenchent en même temps dans l’aperçu, la cause est presque toujours l’absence d’offsets from sur les composants <Sequence> : chaque scène démarre par défaut à la frame 0 si vous ne définissez pas from={startFrame}. Scrubber jusqu’à la frame 0 — si les trois lignes sont déjà en mouvement, les séquences ne sont pas échelonnées. Corrigez en demandant : « Wrap each feature row in its own <Sequence> with from set to 60, 90, and 120. »

La vidéo n’a pas la bonne durée. Claude génère des numéros de frames à partir du fps que vous indiquez. Si vous ne précisez pas le fps, il suppose une valeur par défaut et peut effectuer des calculs incorrects par rapport à une composition configurée différemment. Scrubber jusqu’à la fin de la tête de lecture : si votre animation de 450 frames se termine à la frame 300, c’est que durationInFrames de la composition est défini à 300. Reformulez le prompt avec des chiffres exacts — « 15 seconds at 30fps is 450 frames; set durationInFrames={450} » — plutôt qu’un vague « make it longer ».

Le mouvement semble robotique. Un interpolate() linéaire sans easing paraît mécanique. Scrubber à travers une animation d’entrée : si elle se déplace à vitesse constante, il n’y a pas d’easing. Passez à spring() pour un mouvement organique (il retourne une valeur 0→1 que vous mappez sur une transform), ou passez une option easing à interpolate() conformément à la documentation d’interpolate. Demandez : « Use spring() for the row entry instead of a linear interpolate. »

Les replays de session de vidéos de démonstration intégrées sur des landing pages révèlent fréquemment un mode de défaillance distinct — la lecture automatique d’un MP4 volumineux qui bloque le rendu de la page — mais il s’agit d’une problématique de livraison, non de rendu.

Rendu en MP4

Effectuez le rendu depuis la ligne de commande avec npx remotion render, en passant l’identifiant de la composition et un chemin de sortie :

npx remotion render FeatureReveal out/feature-reveal.mp4

Voici la réalité que les prompts de démarrage passent sous silence. Remotion effectue le rendu en lançant Chromium en mode headless, en capturant chaque frame, et en acheminant les frames vers ffmpeg — l’architecture est décrite dans la documentation du rendu. Une composition de 30 secondes à 30fps implique 900 captures d’écran via le navigateur. C’est pourquoi le temps de rendu évolue proportionnellement au nombre de frames et à la complexité par frame, et pourquoi une composition longue ou visuellement complexe peut prendre un temps non négligeable sur un ordinateur portable, loin de se terminer « en moins d’une minute ».

Pour les pipelines de production — vidéos longues, nombreuses variantes, CI ne pouvant pas mobiliser un agent de build — la solution cloud documentée par Remotion est Remotion Lambda, qui distribue les frames entre des fonctions Lambda parallèles. Lambda vaut l’investissement de configuration dès lors que le temps de rendu local devient un goulot d’étranglement, ou que vous devez effectuer des rendus selon un calendrier sans avoir besoin de la machine d’un développeur. Pour un clip ponctuel de 15 secondes, effectuez le rendu en local et ignorez Lambda.

Remotion est gratuit pour les particuliers et les petites entreprises ; les entreprises plus importantes ont besoin d’une licence — vérifiez les conditions actuelles sur la page de licence Remotion avant toute utilisation commerciale.

Quand ne pas utiliser Remotion ?

Optez pour Remotion lorsque la vidéo est pilotée par des données, reproductible, ou doit correspondre exactement à un design system — un clip de changelog, un diagramme animé, une présentation de fonctionnalité par release. Optez pour un éditeur traditionnel ou un générateur de vidéo par IA lorsque le contenu est en prise de vue réelle, photoréaliste, ou constitue une création ponctuelle où le coût d’itération du re-rendu dépasse l’avantage du contrôle par le code. Couper des prises ratées dans un enregistrement face caméra, étalonner des images ou produire des mouvements organiques et photoréalistes sont tous des travaux contre lesquels Remotion vous résistera. La ligne de démarcation est la suivante : la sortie bénéficie-t-elle d’être un programme ? Si vous ne la rendez qu’une seule fois et n’y touchez plus jamais, le code est une surcharge, non un avantage.

Le bénéfice de cette stack réside dans le deuxième rendu, pas dans le premier. Une fois qu’une composition existe, la régénérer à partir de nouvelles données — un nouveau changelog, une nouvelle métrique, une nouvelle release — se résume à une seule commande. Installez la compétence depuis la page de documentation officielle, construisez l’exemple de présentation de fonctionnalité ci-dessus, puis pointez la même composition vers des données que vous livrez réellement.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.