Remotion et Claude Code : skills, rendu et limites

Remotion est devenu en 2026 la façon la plus connue de faire des vidéos avec Claude Code : l'agent écrit des composants React, Remotion les rend image par image en MP4. Les recherches sur « Remotion Claude Code » et « Remotion skill » sont passées de presque rien à plusieurs centaines par mois en France depuis janvier.

Nous avons utilisé Remotion en octobre 2026 sur une série de vidéos courtes pour un logiciel de facturation, avant de le comparer à deux autres techniques. Cet article dit comment l'installer avec ses skills, comment se déroule une vidéo, ce que nous avons mesuré, et quand un autre outil fait mieux l'affaire.

Remotion, c'est quoi, et pourquoi il va bien avec Claude Code ?

Remotion est un framework open source qui fabrique une vidéo à partir de composants React. Chaque composant lit le numéro de l'image en cours avec useCurrentFrame() et renvoie ce qu'il faut afficher à cet instant. Remotion ouvre ensuite un navigateur sans interface, capture chaque image et les assemble avec ffmpeg.

Ce modèle convient très bien à un agent de code, pour une raison simple : chaque image est une fonction pure de son numéro. Il n'y a pas de timeline à manipuler à la souris, pas d'état caché. Claude écrit du React, ce qu'il fait bien, et peut demander l'image 120 pour vérifier ce qu'il a fait. C'est le même principe que la fonction seek(t) que nous décrivons dans notre guide pour créer une vidéo avec Claude Code, avec un framework complet autour.

import { AbsoluteFill, spring, useCurrentFrame, useVideoConfig } from 'remotion';

const centre = { justifyContent: 'center', alignItems: 'center' };

export const Titre = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  // ressort intégré : 0 au départ, 1 au repos
  const entree = spring({ frame, fps, config: { damping: 14 } });
  const style = { transform: `translateY(${(1 - entree) * 80}px)` };
  return (
    <AbsoluteFill style={centre}>
      <h1 style={style}>Devis envoyé</h1>
    </AbsoluteFill>
  );
};

Installer Remotion et ses skills pour Claude Code

Il faut Node.js et ffmpeg sur le poste, et Claude Code installé. L'installation tient en quatre commandes :

# 1. Créer le projet (choisir un modèle vide ou « Hello World »)
npx create-video@latest
cd mon-film

# 2. Ajouter les skills officiels de Remotion au projet
npx skills add remotion-dev/skills

# 3. Ouvrir l'aperçu en direct
npx remotion studio

# 4. Dans un autre terminal, lancer Claude Code depuis le même dossier
claude

Les skills de Remotion sont des fiches de bonnes pratiques que l'agent charge quand la tâche le demande : composition et timing, polices et médias, sous-titres, rendu, mise à jour des paquets. Ils évitent les erreurs classiques d'un modèle qui écrit du React « comme pour un site » (animation CSS, setTimeout, image chargée trop tard) alors que tout doit dépendre du numéro d'image. Si vous découvrez la notion de skill, notre article sur les skills, sous-agents et hooks de Claude Code explique comment ils se chargent et où les ranger.

Le déroulé d'une vidéo avec Remotion et Claude Code

1. Le brief : une ligne qui dit ce que le spectateur doit ressentir, la durée, le format (1080 × 1920 pour les réseaux, 1920 × 1080 pour un site), l'accroche des deux premières secondes et le texte autorisé à l'écran.
2. La découpe : Claude propose une liste de plans avec leurs instants, puis crée une composition par plan et une composition principale qui les enchaîne avec <Sequence>.
3. L'aperçu : vous suivez le travail dans Remotion Studio, qui recharge à chaque modification. C'est le gros avantage de Remotion pour la personne qui supervise.
4. La critique : Claude exporte des images fixes à des instants précis avec npx remotion still, ou une planche tirée de la vidéo avec ffmpeg, les regarde, les note et corrige. Sans cette étape, les défauts passent : titres qui se chevauchent, texte illisible au téléphone, objet qui cache le sujet.
5. Le rendu : npx remotion render produit le MP4. Le son se pose dans la composition avec <Audio>, et une personne l'écoute avant publication.

La quatrième étape est celle qui fait la différence. Le détail de notre boucle de critique (planches, grille de notation, journal, défauts réellement rencontrés) est dans notre guide de la vidéo en code avec Claude ; elle s'applique telle quelle à Remotion.

Ce que nous avons constaté en production

Sur notre projet de vidéos courtes, nous avons écrit des films d'environ 30 secondes avec trois techniques : Remotion, un rendu Python avec Pillow, et un moteur HTML maison rendu par Playwright. Voici ce qui distinguait Remotion.

Ses points forts

• Les séries. Un composant « carte de devis » ou « bulle de message » écrit une fois sert à toutes les vidéos de la série. Pour décliner une même vidéo par offre, par métier ou par langue, les propriétés d'une composition suffisent.
• L'aperçu. Remotion Studio permet de suivre et de commenter le travail de l'agent en direct, image par image.
• L'écosystème. Sous-titres, médias, rendu dans le cloud et skills officiels sont fournis et documentés.

Ses limites

• Le temps de rendu. Dans nos essais, 3 à 5 minutes pour un film de 30 secondes, contre une vingtaine de secondes pour le même type de film avec le moteur maison, qui répartit les images sur plusieurs pages de navigateur en parallèle. Sur une boucle de critique de 3 à 5 tours, l'écart se sent.
• Les dépendances. Node, React, bundler et paquets Remotion à maintenir, là où un moteur maison tient avec Python, Playwright et ffmpeg.
• La licence. Gratuite pour une petite structure, payante au-delà de trois salariés (voir plus bas).

Le constat le plus utile est ailleurs : le code avait la même taille dans les trois techniques, entre 1 600 et 1 900 lignes pour un film de 30 secondes. Le framework ne réduit pas le travail de fond. Ce qui a fait la qualité, c'est un concept fort, des mouvements en ressort, une grille de tempo commune à l'image et à la musique, et la relecture des images par l'agent.

Remotion, HyperFrames ou moteur maison : lequel choisir ?

HyperFrames, publié en open source par HeyGen, a pris beaucoup de place depuis le printemps 2026. Il part d'une page HTML, avance l'horloge de façon déterministe et capture chaque image dans un navigateur sans interface. Il accepte des animations GSAP, CSS, Lottie ou Three.js, et fournit lui aussi des skills pour les agents de code.

Notre règle de choix : si l'équipe fait déjà du React et prévoit une série, Remotion. Si elle a des animations web ou des gabarits HTML à réutiliser, HyperFrames. Si l'objectif est d'itérer vite avec l'agent et de garder la main sur chaque détail du mouvement, un petit moteur maison, dont nous donnons le contrat et les briques dans notre guide de motion design avec Claude Code.

Licence et coûts à vérifier avant de se lancer

Selon les conditions publiées par Remotion, l'usage est gratuit, y compris commercial, pour un particulier, une organisation à but non lucratif ou une entreprise de trois salariés au plus. Une entreprise plus grande doit prendre une licence entreprise. Le rendu dans le cloud (Remotion Lambda) se paie en plus, à l'usage, chez le fournisseur cloud.

Côté Claude, une vidéo représente beaucoup d'allers-retours : écriture des composants, exports d'images, relecture, corrections. Un abonnement qui inclut Claude Code avec une marge d'usage confortable est préférable à un compte d'essai, sur lequel les limites arrivent au milieu d'un tour de critique. Les formules sont détaillées dans notre article sur les abonnements Claude Pro, Max, Team et Enterprise.

Enfin, comptez le temps humain : le brief, la relecture des planches à chaque tour, l'écoute du son. C'est lui qui fait la différence entre une vidéo publiable et une démonstration d'outil, et c'est là qu'une équipe formée à travailler avec un agent gagne le plus. Pour cadrer ce travail sur vos propres projets, voir la formation Claude Code.

Questions fréquentes sur Remotion et Claude Code

Pour aller plus loin

• Créer une vidéo avec Claude Code : la méthode complète, du moteur à la boucle de critique, avec trois vidéos d'exemple.
• Le guide Claude Code : l'outil, ses usages et sa mise en place en équipe.
• Skills, sous-agents et hooks : ranger une méthode dans le dépôt.
• Formation vibe coding : pour les profils marketing ou produit qui ne développent pas.

Sources

• Remotion, documentation des skills pour agents
• Remotion, conditions de licence
• HyperFrames, dépôt open source de HeyGen