Remotion Engine

Overview

Environnement pour créer des vidéos animées via du code React/Remotion. Permet vidéos data-driven, animations programmatiques, rendu server-side.

⚠️ Claude Code doit être authentifié (claude auth login ou API key) avant toute délégation d’installation. Sans auth, les commandes claude -p échouent.

When to Use

• Génération de vidéos programmatiques (data-driven, automatiques)
• Animations complexes (transitions, morphing, chronologies)
• Vidéos marketing, démos produit, tutoriels
• Motion design avec données variables
• Vidéos qui doivent être versionnées (git-friendly)

Ne PAS utiliser pour : vidéos simples (préférer manim-video), montage vidéo existant, streaming en direct.

Prérequis Techniques

Installation

node -v  # ≥18.0 (v22+ recommandé)
pnpm create video@latest  # → choisir "Blank" (ou npm init video@latest)
cd video-app && pnpm install  # pnpm préféré sur VPS réseau lent

⚠️ pnpm préféré sur VPS/serveur lent — npm timeout fréquemment sur les réseaux à latence élevée. pnpm est plus résilient. Si npm uniquement disponible : npm install --prefer-offline.

Si pnpm utilisé : le warning ERR_PNPM_IGNORED_BUILDS (esbuild, etc.) est non-bloquant. Pour le résoudre : pnpm approve-builds puis sélectionner les builds à autoriser.

Structure Projet

remotion-project/
├── src/
│   ├── Root.tsx          # Point d'entrée, registration compositions
│   ├── Video.tsx         # Composition principale
│   ├── sequences/        # Séquences réutilisables
│   │   ├── Intro.tsx
│   │   ├── Scene1.tsx
│   │   └── Outro.tsx
│   ├── components/       # Composants animés
│   │   ├── AnimatedText.tsx
│   │   └── Transition.tsx
│   └── data/             # Props data-driven (JSON)
│       └── video-data.json
├── public/               # Assets statiques
├── package.json
└── remotion.config.ts

Commandes Clés

npm run start               # Studio (hot reload, preview) → ajouter --port=3000 si reverse proxy
pnpm run start              # Version pnpm (préférée sur VPS)
npx remotion render         # Production render
pnpm exec remotion render   # Version pnpm
npx remotion still          # Image statique
npx remotion preview        # Preview dans le navigateur
npx remotion lambda         # Render cloud (optionnel)

Composition Template

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

export const MonComposant: React.FC<{ texte: string }> = ({ texte }) => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();

  // Animation spring
  const scale = spring({ frame, fps, config: { damping: 12 } });
  // Interpolation
  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });

  return (
    <AbsoluteFill style={{ backgroundColor: "#1a1a2e" }}>
      <div style={{ transform: `scale(${scale})`, opacity }}>{texte}</div>
    </AbsoluteFill>
  );
};

Workflow Production

1. Écrire les données dans src/data/video-data.json
2. Développer composants dans src/components/
3. Tester avec npm run start
4. Rendre avec npx remotion render src/index.tsx ma-video out/video.mp4

Common Pitfalls

1. Oubli de useVideoConfig() → composition se fige
2. Props non typées → erreurs runtime
3. Assets pas dans public/ → non trouvés au render
4. Pas de .gitkeep dans public/ → dossier vide pas commité
5. npm timeout sur VPS réseau lent → utiliser pnpm à la place. Si npm seul : npm install --prefer-offline --no-audit --no-fund
6. npx remotion render timeout → le premier render peut prendre 60s+ sur réseau lent. Attendre. Si timeout persiste, node_modules/ peut être corrompu → rm -rf node_modules && pnpm install
7. pnpm approve-builds warning → non-bloquant, mais pnpm approve-builds résout le warning

Verification Checklist

• node ≥18 installé
• npm run start lance le studio
• npx remotion render produit un .mp4
• Audio synchro si présent