claude-code-ultimate-guide/examples/workflows/remotion-quickstart.md

Remotion + Claude Code Quickstart

Objectif: Créer votre première vidéo programmatique avec Remotion et Claude Code en 15 minutes.

Niveau: Débutant React (connaissances basiques suffisantes)

---

⚡ Prérequis

Requis	Version minimum	Vérification
Node.js	18+	node --version
npm	8+	npm --version
Claude Code	2.1+	claude --version
React basics	JSX syntax	Connaître <div>, props, useState

Temps estimé: 15-20 minutes (première fois)

---

📦 Étape 1: Installation des Remotion Skills

Option A: Via skills.sh (Recommandé)

# Dans un nouveau dossier de projet
mkdir my-remotion-test && cd my-remotion-test

# Installer les skills Remotion pour Claude Code
npx skills add remotion-dev/skills

Résultat attendu:

✓ Skills added to .claude/skills/
  - remotion-best-practices
  - remotion-animations
  - remotion-audio
  [... 20+ skills installés]

Option B: Manual (si skills.sh indisponible)

# Cloner le repo skills directement
git clone https://github.com/remotion-dev/skills.git .claude/skills/remotion

---

🎬 Étape 2: Créer votre premier projet Remotion

Via Claude Code (méthode recommandée)

Lancez Claude Code et utilisez ce prompt:

Create a new Remotion project for a simple 5-second video with:
- A fade-in title "Hello Remotion"
- Background gradient (blue to purple)
- Smooth animation

Use npx create-video to scaffold the project.

Ce que Claude va faire:

1. Exécuter npx create-video@latest my-video
2. Générer le boilerplate Remotion
3. Créer un composant React pour votre vidéo
4. Configurer remotion.config.ts

Résultat attendu

my-remotion-test/
├── src/
│   ├── Root.tsx           # Entry point
│   ├── HelloWorld.tsx     # Votre composition vidéo
│   └── ...
├── public/
├── package.json
└── remotion.config.ts

---

🖼️ Étape 3: Prévisualiser votre vidéo

Lancer le studio Remotion

npm start

Résultat: Un serveur local démarre à http://localhost:3000

Interface du Studio:

• Timeline interactive (scrub pour voir les frames)
• Live preview de votre composition
• Contrôles de playback
• Panel de props (modifier les paramètres en temps réel)

Tester les modifications

Dans src/HelloWorld.tsx, modifiez le texte:

<h1 style={{fontSize: 100}}>Hello Remotion!</h1>

Hot reload → Changement visible immédiatement dans le studio.

---

📹 Étape 4: Rendre votre vidéo

Commande de base

npm run build

Ce qui se passe:

1. Remotion compile votre React code
2. Génère chaque frame (30 fps × durée = 150 frames pour 5s)
3. FFmpeg encode les frames en MP4
4. Sortie: out/video.mp4

Options de rendu avancées

# Haute qualité (1080p, 60fps)
npx remotion render src/index.ts HelloWorld out/video.mp4 \
  --width 1920 \
  --height 1080 \
  --fps 60

# Format GIF
npx remotion render src/index.ts HelloWorld out/video.gif \
  --image-format png

---

🤖 Étape 5: Itérer avec Claude Code

Prompts efficaces

Exemple 1: Ajouter une animation

Add a smooth scale animation to the title:
- Start at scale 0.8
- End at scale 1.0
- Use spring physics with config {damping: 20}

Exemple 2: Ajouter de l'audio

Add background music to the video:
- Use a public domain track from /public/music.mp3
- Fade in over 1 second
- Volume at 0.5

Exemple 3: Séquences multiples

Create a 3-scene video:
1. Intro (0-2s): Logo fade in
2. Main (2-8s): Product showcase with transitions
3. Outro (8-10s): Call to action text

Pattern Claude Code efficace

1. Describe what you want (natural language)
   └─ Claude génère le JSX + animations

2. Preview in Studio
   └─ Vérifier visuellement

3. Iterate with specific feedback
   └─ "Make the transition slower"
   └─ "Change color to #FF6B35"

4. Render final video
   └─ npm run build

---

🐛 Troubleshooting

Problème: "Command not found: remotion"

Solution:

# Installer globalement
npm install -g @remotion/cli

# Ou utiliser npx
npx remotion --version

Problème: "React is not defined"

Solution: Vérifier que react et react-dom sont dans package.json:

npm install react react-dom

Problème: FFmpeg error lors du rendu

Solution: Installer FFmpeg:

# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows
choco install ffmpeg

Problème: Claude génère du code qui ne compile pas

Cause: Skills pas chargés correctement.

Solution:

# Vérifier que .claude/skills/ existe
ls -la .claude/skills/remotion

# Re-sourcer les skills
claude --reload-skills

Problème: Vidéo rendue mais écran noir

Debug:

1. Vérifier la console du Studio (F12)
2. Chercher les erreurs TypeScript
3. Vérifier que <Composition> a les bonnes props:

   <Composition
     id="HelloWorld"
     component={HelloWorld}
     durationInFrames={150}  // 5s × 30fps
     fps={30}
     width={1920}
     height={1080}
   />
   

---

📊 Métriques de succès

Après ce quickstart, vous devriez avoir:

• ✅ Projet Remotion fonctionnel (structure scaffoldée)
• ✅ Vidéo de test rendue (MP4 dans out/)
• ✅ Comprendre le workflow Claude → Preview → Render
• ✅ 1-2 animations créées via prompts Claude

Temps de rendu typique (5s video, 1080p):

• MacBook Pro M1: ~10-15 secondes
• Intel i5: ~30-45 secondes
• Cloud (GitHub Actions): ~60-90 secondes

---

🎯 Prochaines étapes

Niveau intermédiaire

1. Ajouter des assets:

   Claude, import an image from /public/logo.png and animate it rotating 360°
   

2. Data-driven videos:

   // Générer 100 vidéos à partir d'un dataset
   const data = [{name: "John", score: 95}, ...];
   npx remotion render --props='{"data": data}'
   

3. Compositions complexes:

   Create a video with 3 scenes using <Sequence>:
   - Scene 1: Intro (0-30 frames)
   - Scene 2: Content (30-150 frames)
   - Scene 3: Outro (150-180 frames)
   

Ressources

Ressource	URL	Type
Remotion Docs	remotion.dev/docs	Documentation officielle
Agent Skills Repo	github.com/remotion-dev/skills	GitHub
Discord Community	remotion.dev/discord	Support communautaire (~1.5K membres)
Examples Gallery	remotion.dev/showcase	Inspiration

---

💡 Cas d'usage validés

Use Case	Exemple	Difficulté
Product demos	Feature walkthrough avec highlights	⭐⭐
YouTube intros	Animated logo + title card	⭐
Data viz	Graphiques animés, infographics	⭐⭐⭐
Social media	Instagram stories, TikTok templates	⭐⭐
Explainer videos	Step-by-step tutorials animés	⭐⭐⭐⭐

Success stories: Icon.me ($5M ARR), Submagic ($8M ARR), Crayo ($500K/mois)

---

⚠️ Limitations importantes

1. React knowledge requise: Claude aide, mais comprendre JSX = essentiel pour debug
2. Courbe d'apprentissage: Premières vidéos = 2-4h. Maîtrise = 2-4 semaines
3. Coûts: License commerciale (>3 personnes) + Claude API + compute pour rendering
4. Pas un remplaçant After Effects: Paradigme différent (code vs timeline)

---

🎓 Exemple complet de session

# 1. Setup
mkdir remotion-demo && cd remotion-demo
npx skills add remotion-dev/skills

# 2. Claude Code prompt
claude

> Create a 10-second countdown timer video:
> - Large numbers (1-10) centered
> - Each number appears for 1 second
> - Use spring animations for each transition
> - Background gradient that changes color per number
> - Add a "beep" sound effect on each number change

# Claude génère le code...

# 3. Preview
npm start
# Ouvrir http://localhost:3000

# 4. Ajustements
> Make the spring animation bouncier (increase damping to 40)
> Change gradient colors to warm tones (orange to red)

# 5. Render final
npm run build

# Résultat: out/video.mp4 (10 secondes, 300 frames)

Durée totale session: ~25 minutes (incluant itérations)

---

📝 Checklist avant production

• Tester le rendu complet (pas juste preview)
• Vérifier les performances (watch mode vs production)
• Valider les assets (licences, résolution, formats)
• Prévoir les coûts de rendering (cloud vs local)
• Documenter les props dynamiques (pour data-driven use cases)
• Setup CI/CD si génération automatique (GitHub Actions + Remotion Lambda)

---

Créé: 2026-01-23 Testé avec: Claude Code 2.1.17, Remotion 4.x, Node.js 20.x Durée moyenne: 15-20 min (première vidéo), 5-10 min (suivantes)