Remotion + Agent Skills : créer des vidéos avec l’IA en React

Remotion est un framework qui transforme des composants React en vidéo. Au lieu d’assembler chaque plan sur une timeline classique, on décrit les scènes, le timing, les médias et les animations dans du code. Le résultat reste visuel, mais il devient aussi versionnable, reproductible et plus simple à décliner.

Cette approche est particulièrement utile lorsqu’un même format doit vivre en plusieurs versions : une série de vidéos produits, des bilans personnalisés, des annonces localisées ou des capsules pour les réseaux sociaux. Les données changent, tandis que la composition, les règles de mise en page et les animations restent cohérentes.

• React : les scènes sont des composants et les propriétés pilotent leur contenu.
• Frames : chaque animation est calculée à partir de l’image courante et de la durée.
• Rendu : Remotion produit un fichier vidéo à partir de la composition définie dans le projet.

Le moyen le plus direct de démarrer consiste à créer le squelette proposé par Remotion. La commande prépare un projet JavaScript ou TypeScript avec une composition d’exemple et le Studio : une interface locale pour visualiser chaque frame avant de lancer le rendu final.

Travaillez dans un dossier isolé et conservez les médias utilisés dans le projet. Une vidéo générée par code n’est pas une boîte noire : les composants, les données d’entrée, les polices et les fichiers audio doivent rester traçables pour pouvoir rejouer le rendu plus tard.

# Créer un projet Remotion avec le générateur officiel
npx create-video@latest

# Entrer dans le dossier créé
cd mon-projet-remotion

# Ouvrir Remotion Studio pour prévisualiser les compositions
npm run start

Une composition est le point de départ d’une vidéo Remotion. Elle indique notamment sa taille, sa fréquence d’images et sa durée. À l’intérieur, `useCurrentFrame()` donne la frame affichée au moment du rendu ; `interpolate()` permet ensuite de convertir cette valeur en opacité, déplacement, échelle ou toute autre propriété animable.

L’exemple ci-dessous crée un carton titre qui apparaît progressivement pendant la première seconde. La logique est volontairement simple : elle sert de base pour comprendre que le temps est une donnée, et non une série de manipulations manuelles sur une timeline.

import { AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';

export const IntroTitle = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 20], [0, 1], {
    extrapolateRight: 'clamp',
  });
  const translateY = interpolate(frame, [0, 20], [24, 0], {
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill style={{ alignItems: 'center', justifyContent: 'center', backgroundColor: '#101820', color: '#f7f2e8' }}>
      <h1 style={{ opacity, transform: `translateY(${translateY}px)` }}>Une vidéo pilotée par React</h1>
    </AbsoluteFill>
  );
};

Les Agent Skills de Remotion donnent à un agent de code un contexte spécialisé : structure d’une composition, animation, médias, sous-titres, aperçu dans Studio et rendu. Ils évitent de traiter une vidéo Remotion comme une simple page React, ce qui est important car le timing, les assets et le rendu image par image ont leurs propres contraintes.

Ils ne remplacent pas la direction créative ni la validation du résultat. En revanche, ils aident à formuler une demande précise, à générer un premier composant propre et à itérer plus vite. Un bon brief indique toujours le format, la durée, le rythme, les éléments à afficher et les contraintes de marque.

• Créer : démarrer une composition ou un projet adapté au besoin.
• Mettre en forme : appliquer les bonnes pratiques pour le timing, les médias et la typographie.
• Prévisualiser et exporter : contrôler le résultat dans Studio, puis lancer le rendu.

Remotion documente une installation des skills depuis le terminal. Une fois ajoutés à votre environnement, ils peuvent être utilisés par un agent compatible pour guider la création, le Studio ou le rendu. Commencez par une scène courte : un titre, deux plans et une transition. Vous pourrez ensuite enrichir le projet avec des données, une voix-off ou des sous-titres.

Le bon échange avec un agent n’est pas « fais une belle vidéo ». Décrivez le livrable : « crée une vidéo verticale de 15 secondes, fond sombre, titre qui arrive en fondu, trois données à afficher, sortie 1080 × 1920 ». Demandez ensuite un aperçu, relisez le code et validez le rendu avant toute diffusion.

# Ajouter les Agent Skills officiels de Remotion
npx skills add remotion-dev/skills

# Exemple de demande à un agent de code
# Crée une composition verticale 1080x1920 de 15 secondes.
# Anime un titre, puis trois chiffres, avec un rythme régulier.
# Utilise des composants Remotion et prépare un rendu local.

Le Studio sert à vérifier le timing image par image avant l’export. C’est le moment de contrôler les débordements de texte, les polices, les changements de plan, le niveau sonore et l’affichage sur le bon format. Une prévisualisation réussie ne dispense pas du contrôle du fichier final : ouvrez également le MP4 exporté sur les supports où il sera publié.

Pour un flux récurrent, séparez clairement le template vidéo, les données et les médias. Gardez des valeurs par défaut, validez les images et les textes avant le rendu, et testez un petit lot avant de passer à une série complète. L’IA accélère l’écriture du composant ; la qualité vient de la précision du brief, des tests visuels et des règles de marque.

# Rendre une composition locale vers un fichier MP4
npx remotion render HelloWorld out/video.mp4

# Avant une production en série, vérifiez :
# - les données injectées dans chaque vidéo
# - les droits d’utilisation des médias
# - la lecture du MP4 final sur mobile et desktop