Créer des vidéos avec du code Remotion + Claude = pipeline vidéo programmable

Tu produis du contenu vidéo répétitif : intros YouTube avec ton logo, ads Meta avec variations de copy, snippets LinkedIn avec data du jour, présentations de produit avec photos de stock différentes. Sur Adobe Premiere ou Final Cut, chaque variation = ouvrir le projet, éditer 3 calques, exporter (30 min). Sur 50 variations = 25 heures.

Remotion renverse complètement le flow : tu écris ta vidéo comme un composant React, tu paramètres tout (texte, images, durées, animations), tu balances des props dynamiques, Remotion render en .mp4. C'est React, donc Claude écrit le code pour toi.

§Ce que c'est concrètement

Remotion = framework React pour vidéo. Tu écris :

export const MyVideo = ({titleText, accentColor}: Props) => {
  return (
    <AbsoluteFill style={{backgroundColor: accentColor}}>
      <h1>{titleText}</h1>
    </AbsoluteFill>
  )
}

Tu lances npm run render avec {titleText: "Promo Black Friday", accentColor: "#C8A84E"} → tu obtiens out.mp4. Tu boucles avec 50 props différentes → 50 vidéos.

Tout ce que tu peux faire en React est animable :

• Composants UI (cards, charts, transitions)
• Vidéos imbriquées, audio, images
• API externes (récupère le météo, les stats, etc. à chaque render)
• Tailwind, Framer Motion, Three.js — tout fonctionne

§Quand l'utiliser (et quand NE PAS)

✅ Bon use case :

• Vidéos répétitives avec variations (ads, intros, snippets data)
• Vidéos data-driven (charts animés, stats du jour, leaderboards)
• Vidéos personnalisées à l'échelle (1 vidéo par utilisateur avec son nom)
• Generation à partir d'un CSV / spreadsheet
• Pipeline automatisé (cron qui render et upload sur YouTube)

❌ Mauvais use case :

• Une seule vidéo créative unique (utilise Final Cut, c'est 10× plus rapide)
• Vidéo avec acteurs réels, montage complexe, sound design fin
• Vidéo de 30 min de podcast (Remotion est lent à render sur du long)

§Pré-requis

§Installation

Pas un skill npx skills add — Remotion est un framework, tu scaffoldes un projet :

npx create-video@latest

Ça te demande quelques questions (template à utiliser, nom du projet), puis crée un dossier prêt. Tu rentres dedans :

cd mon-projet-video
npm install
npm run dev

Le Remotion Studio s'ouvre dans le browser sur localhost:3000. C'est un éditeur visuel temps réel : à gauche la timeline, au centre la preview, à droite les props éditables. Tu modifies le code dans ton IDE, ça se recharge live.

§Premier essai avec Claude

Lance Claude Code dans le dossier de ton projet Remotion :

Crée-moi une vidéo de 5 secondes qui affiche le texte "Mon Produit"
en gold #C8A84E sur fond noir, avec une animation slide-in depuis
la gauche, et un fade-out à la fin. Le texte doit être en grand
et centré.

Claude écrit un composant React Remotion, le place dans src/Composition.tsx, te demande de lancer le studio pour preview. Tu valides visuellement, tu render :

npm run build

→ tu obtiens out/video.mp4.

§Cas d'usage typiques

1. Ads Meta/TikTok avec variations :

Tu as un CSV avec 30 variations de copy (hook + benefit + CTA). Tu écris un template Remotion qui prend {hook, benefit, cta} en props. Tu loop sur le CSV → 30 .mp4 en quelques minutes. Tu les uploades sur Meta Ad Manager en batch.

2. Intros YouTube automatisées :

Chaque vidéo de ta chaîne a un intro de 5 sec avec le titre du jour. Au lieu de re-éditer dans Premiere :

Crée une intro Remotion qui prend en prop {videoTitle, episodeNumber,
date}. Animation : logo qui apparaît en bas à gauche, titre qui slide
depuis le haut, numéro d'épisode qui counts up de 0 au numéro réel.
Durée 4 secondes, 1920×1080 60fps.

Tu uses le même intro template partout, juste en changeant les props.

3. Vidéos data-driven :

Récupère via fetch les stats GitHub de mon repo (stars, contributors,
last commit). Crée une vidéo de 10 sec "État du projet" qui anime
ces chiffres en counter, avec une mini timeline des commits récents.
Couleurs : palette IDE dark.

Tu peux lancer ça en cron tous les lundis pour avoir une vidéo automatique des stats de ton projet.

4. Vidéos personnalisées à l'échelle :

Tu vends une formation. À chaque achat, tu génères une vidéo de bienvenue personnalisée avec le prénom du client + son objectif (récolté au checkout). Tu uploades sur Mux, tu intègres l'URL au mail de welcome.

5. Charts animés pour social :

Données chiffrées → vidéo carrée 1080×1080 → post LinkedIn/Instagram. Beaucoup plus engageant qu'une image statique pour les contenus data.

§Gotchas

• Le render est lent en local : 1 minute de vidéo 1080p = 1-5 min de render selon ta machine. Pour du batch lourd (>20 vidéos), passe à Remotion Lambda (AWS) ou Remotion Cloud (payant mais 10-50× plus rapide).
• FFmpeg téléchargé au premier render : le premier npm run build télécharge FFmpeg (~50 Mo). Compte 1-2 min la première fois, ensuite c'est cache.
• Audio est plus complexe que vidéo : synchroniser un voiceover ou des sound effects précisément demande de comprendre les concepts de frames + samples Remotion. Lire la doc audio (<Audio />, useCurrentFrame()) avant.
• Pas de support natif pour le live streaming : Remotion produit du fichier, pas du stream. Pour du live (ex: live Twitch animations), regarde Caspar CG ou OBS plugins.
• Licensing pour usage commercial : Remotion est gratuit en dev / open source / hobby. Pour usage commercial (entreprise, freelance qui facture des clients), il y a une licence à acheter à partir de leur seuil (cf. remotion.dev/license). Vérifie avant de l'utiliser pour des clients payants.
• Hot reload glitchy sur Windows : connue sur certaines configs Windows. Si le studio rafraîchit mal, redémarre npm run dev.