Comment j'ai créé une vidéo produit complète avec Claude Code + Remotion - Builder Créatif

Le problème : une vidéo produit, zéro budget After Effects

Tu lances ton app. Tu as besoin d’une vidéo produit pour le marketing.

Les options classiques :

Freelancer vidéo : 1 000–3 000€, 2 semaines de délai
After Effects toi-même : 3 jours minimum si tu sais ce que tu fais
Canva/templates : ça fait cheap, pas à la hauteur de ton produit

Mon choix ? Coder la vidéo avec React.

Résultat : une vidéo pro de 1min40, 18 scènes animées, en 2 langues. En une seule session avec Claude Code.

Le stack : React qui génère du MP4

Outil	Rôle
Remotion	Framework React → vidéo (code = MP4)
Claude Code (CLI)	A écrit 100% du code
React + TypeScript	Composants = scènes
@remotion/transitions	Transitions animées (fade, slide, wipe)
@remotion/media	Vidéos embarquées synchronisées
Remotion Studio	Preview live + render H.264

Le principe de Remotion : chaque scène est un composant React. Tu codes ton animation, tu preview en temps réel, tu renders en MP4.

C’est du code. Donc c’est versionné, réutilisable, modifiable en 2 secondes.

Comment j’ai travaillé avec Claude Code

Toute la vidéo a été construite de manière itérative en conversation.

Le workflow :

Je décris la scène que je veux en langage naturel
Claude génère le composant Remotion complet avec animations
Je preview dans Remotion Studio
J’envoie un screenshot + feedback (“trop petit”, “mauvaise couleur”, “fusionne ces deux scènes”)
Claude ajuste

Ce qui a marché :

Décrire un layout/design et obtenir du code fonctionnel instantanément
Itérer sur le styling en envoyant des screenshots
Opérations bulk : traduire 18 scènes en français, supprimer tous les points, remplacer toutes les couleurs — en secondes
Système de design cohérent appliqué automatiquement sur toutes les scènes
Gestion de l’orchestration (durées, transitions, frames totaux)

C’est exactement ça, l’AI-assisted development. L’IA est mon accélérateur, pas mon remplaçant. Je dirige la vision, Claude écrit le code.

L’architecture : 18 scènes, 17 transitions, 30 FPS

src/
├── Composition.tsx          # Orchestrateur EN
├── CompositionFR.tsx        # Orchestrateur FR
├── constants.ts             # Couleurs, durées, FPS
├── components/
│   ├── PhoneMockup.tsx      # Phone frame réutilisable
│   └── SceneBg.tsx          # Variantes de background
├── scenes/                  # Scènes anglaises
│   ├── Scene01Hook.tsx
│   ├── Scene02Journey.tsx
│   └── ... (18 scènes)
└── scenes-fr/               # Scènes françaises (même structure)

La vidéo est une TransitionSeries — une séquence de composants React connectés par des transitions animées.

Configuration centralisée dans un seul fichier :

export const SCENE_DURATIONS = {
  scene01: 120,  // 4s
  scene02: 210,  // 7s
  // ...
};

export const TOTAL_FRAMES = 3120; // ~1min40 à 30fps

Modifier le timing d’une scène ? Une ligne. Ajouter une scène ? Un composant. Changer toutes les couleurs ? Un grep + replace.

Les décisions de design

Identité visuelle :

Palette cream/gold/black de la landing page Muse Otter
Cards consistantes : fond blanc, bordure colorée à gauche, ombre, icône carrée
Police Cairo partout

Types de scènes :

Texte seul (Hook, Gap, Reveal) — animations spring + interpolate
Phone mockup — vidéos MP4 de l’app réelle embarquées
Data (Architecture, Pricing, Message Flow)
Comparaison (Chat IA générique vs Muse Otter — côte à côte)
Hub-and-spoke (Foundation — layout circulaire avec lignes SVG)

Transitions :

fade() pour les transitions calmes
slide({ direction }) pour le mouvement dynamique
wipe({ direction }) pour les révélations

La version française : 18 fichiers traduits en un pass

J’ai créé une composition séparée (MuseOtterFR) en dupliquant toutes les scènes dans scenes-fr/. Les deux versions partagent les mêmes composants, constantes et assets — seul le texte change.

Claude a géré la traduction complète des 18 fichiers en un seul pass.

Manuellement ? Ça aurait pris des heures. Avec Claude Code : quelques secondes.

L’évolution des app recordings

La vidéo inclut 8 enregistrements d’écran de l’app réelle (onboarding, sélection de coach, chat, marketplace, mode vocal…).

L’évolution technique :

GIFs → qualité médiocre (256 couleurs, framerate bas)
<Gif> de @remotion/gif → problèmes de rendu (canvas mal intégré dans les composants)
MP4 + <Video> de @remotion/media → sync parfaite, qualité full, support loop

Le composant <Video> synchronise chaque frame avec la timeline Remotion. Le rendu est déterministe et frame-perfect.

Les galères (et comment je les ai résolues)

GIF rendering

Les GIFs natifs ne se synchronisent pas avec le rendu frame-by-frame de Remotion. Solution : tout convertir en MP4.

Font sizing à 1920x1080

Le texte qui paraît bien dans un navigateur est minuscule en résolution vidéo. J’ai dû scaler les fonts, icônes et espacements plusieurs fois en me basant sur les screenshots de preview.

Couleurs parasites

Des couleurs d’un ancien projet (violet) ont fuité dans le design. Solution : grep + replace systématique sur tous les fichiers.

Maths des transitions

Chaque scène a besoin de frames de padding pour l’overlap des transitions. Facile de mal calculer TOTAL_FRAMES en ajoutant/supprimant des scènes.

Versions de packages

AnimatedImage (API Remotion récente) n’était pas dispo dans ma version. Fallback de @remotion/gif vers @remotion/media.

Ce que Claude Code ne peut pas faire

Jugement visuel — Il ne voit pas la preview. J’envoie des screenshots et je décris ce qui ne va pas
Création d’assets — Les enregistrements d’écran, le logo, les images de fond sont faits à part
Copywriting subjectif — Je donne la direction et le contexte audience. Claude adapte le ton, mais c’est moi qui pilote le message

Ce qui m’a surpris

Vélocité — 18 scènes, 2 langues, multiples itérations de design. En une seule session
Consistance — Une fois le design system établi, Claude l’applique sur toutes les scènes sans qu’on le rappelle
Opérations bulk — Traduire 18 fichiers, supprimer les points finaux, remplacer les couleurs — des tâches pénibles qui prennent des secondes
La skill Remotion — Claude Code a chargé une skill Remotion qui fournit les best practices pour les animations, transitions et media

Le résultat final

2 vidéos : Anglais + Français
18 scènes chacune avec animations spring et transitions interpolées
8 enregistrements d’app embarqués (MP4)
~1min40 à 30fps (3120 frames)
Rendu via Remotion Studio → H.264 MP4

Quoi	Outil
Tout le code	Claude Code (Opus)
Framework vidéo	Remotion 4.0.420
Enregistrements d’écran	Manuel (iPhone/web app capture)
Conversion GIF → MP4	Manuel
Images de fond	Assets existants
Logo	Asset de marque existant
Musique	Track royalty-free
Preview	Remotion Studio (localhost)
Render	Remotion CLI (H.264)

Pourquoi c’est du Builder Créatif pur

Cette approche résume exactement ma philosophie :

Vélocité. Une session pour une vidéo complète en 2 langues. Pas 2 semaines et 2 000€ de freelance.

Code = asset réutilisable. Chaque scène est un composant. Changer le texte, swapper un asset, créer une nouvelle langue : quelques lignes. Pas de “refaire toute la vidéo from scratch.”

IA + expertise = résultat. Claude écrit le code. Moi, je dirige le design, l’identité visuelle, le message. 7 ans d’expérience + maîtrise de l’IA = vélocité maximale.

Le seul prérequis : savoir donner du feedback design par conversation et screenshots. Claude Code écrit le code, mais c’est toi qui diriges la vision.

Tu veux voir la vidéo ? Elle est sur la page de Muse Otter. 1min40 qui montre tout ce que l’app fait — sans un centime dépensé en production vidéo classique.