marwanhattar94/remotion-motion-graphics

Remotion Motion Graphics

Remotion génère des vidéos en rendant des composants React image par image. La qualité du code n'est pas le goulot d'étranglement — le savoir-faire en design de mouvement l'est. Une génération non entraînée produit des interpolations linéaires, des fondus d'opacité uniquement, des entrées simultanées, des couleurs plates et aucune texture. C'est l'aspect « vidéo IA générique ». Cette compétence existe pour l'éviter.

Règles non négociables (à appliquer à TOUTE composition)

1. N'utilisez JAMAIS l'interpolation linéaire. Chaque interpolate() obtient une courbe d'assouplissement ; chaque entrée privilégie spring(). Toujours avec extrapolateLeft/Right: "clamp".
2. Les entrées animent 2 à 3 propriétés ensemble (opacité + translateY + échelle). Un fondu seul est interdit.
3. Décalez tout. Listes, mots, rayons, cartes : décalages de 3 à 6 images. Rien n'entre simultanément.
4. Les sorties existent et sont plus rapides que les entrées (~10 images contre ~20).
5. Pile de cinq calques dans chaque scène, du bas vers le haut : fond maillé → assets → graphiques/typo → étalonnage → grain + vignette. Jamais de fond uni et plat.
6. Chaque image fixe reçoit un effet Ken Burns (échelle lente 1→1,08 + panoramique). Chaque asset vidéo utilise <OffthreadVideo>, jamais <Video>.
7. Les éléments au repos respirent : tout élément à l'écran >2s reçoit un micro-mouvement sinusoïdal.
8. Tous les timings dérivent de fps via useVideoConfig(). Pas de numéros d'image magiques.
9. Un objet de thème en haut du projet (couleurs, assouplissements, préréglages spring, polices). Jamais de couleur hexadécimale ou d'assouplissement en ligne dans un composant.
10. Rendez, extrayez les images, REGARDEZ-les, corrigez, re-rendez. Ne livrez jamais un rendu non vérifié. Cette boucle est obligatoire — voir Vérification ci-dessous.

Workflow

Étape 1 – Cadrage

Déterminez : la durée, les fps (30 par défaut ; 60 uniquement pour un mouvement rapide intense), les dimensions (1080×1920 pour Reels/Shorts, 1920×1080 pour paysage), les assets existants (images, séquences, audio, logos), et s'il s'agit d'une nouvelle composition ou d'une édition de projet existant. Si vous éditez un projet existant : lisez src/ en entier d'abord, trouvez le thème (ou créez-en un), et refactorez les violations des règles ci-dessus avant d'ajouter des fonctionnalités.

Étape 2 – Configuration

Nouveau projet :

npm install remotion @remotion/cli react react-dom
# facultatif : @remotion/transitions @remotion/motion-blur @remotion/google-fonts

Copiez assets/theme.ts de cette compétence dans src/theme.ts et ajustez la palette aux couleurs de la marque de l'utilisateur. Structure : src/index.ts (registerRoot) → src/Root.tsx (Composition, durée/fps/taille) → src/scenes/*.tsx → src/components/*.tsx. Les assets utilisateur vont dans public/, chargés via staticFile().

Étape 3 – Construction

Lisez references/motion-patterns.md pour les implémentations de composants réutilisables (BgMesh, Grade, Grain, Vignette, KenBurns, WordReveal, Stagger, Counter, Spark, transitions, parallaxe). Composez les scènes à partir de ces motifs. Pour le rythme, le tempo, la typographie, les palettes de couleurs et les règles de design sonore, lisez references/design-rules.md.

Rythme de scène : HIT → pause (15–20 images fixes) → construction → HIT. Quelque chose doit bouger dans les 15 premières images. Jamais plus de 90 images sans un nouvel élément visuel.

Étape 4 – Rendu

npx remotion render src/index.ts <CompId> out/video.mp4 --codec h264 --crf 17

Remotion a besoin d'un binaire Chromium. Si son téléchargement automatique échoue (sandbox, CI hors ligne), trouvez-en un et passez-le explicitement :

which chromium chromium-browser google-chrome 2>/dev/null
ls /opt/pw-browsers 2>/dev/null   # Les installations Playwright vivent ici
npx remotion render ... --browser-executable=<chemin>

Si Chrome complet génère une erreur « Old Headless mode has been removed », utilisez un binaire headless_shell à la place (Playwright en fournit un sous chromium_headless_shell-*/chrome-linux/headless_shell).

Étape 5 – VÉRIFICATION (obligatoire, ne sautez jamais)

Extrayez les images aux moments clés et inspectez visuellement chacune d'elles. La méthode portable – fonctionne sur les machines sans ffmpeg système, rend l'image exacte :

for f in 15 45 90 150; do
  npx remotion still src/index.ts <CompId> out/check_$f.png --frame $f --overwrite
done

Si ffmpeg système EST disponible, extraire du mp4 fini vérifie aussi l'encodage lui-même (-ss est plus portable que les filtres select= dont le quoting casse dans certains shells et dans le ffmpeg intégré de Remotion) :

ffmpeg -v error -ss 1.5 -i out/video.mp4 -frames:v 1 check_1.png

Recherchez et corrigez, par ordre de fréquence :

• Bugs d'espacement : gap/margin en em se résout par rapport à la taille de police PARENT (souvent 16px), pas la taille du texte – utilisez des valeurs en px dans les conteneurs flex autour des grands textes.
• Texte qui dépasse ou touche les bords du cadre (contenez le contenu critique dans les 75% verticaux centraux pour du 9:16 – l'interface utilisateur de la plateforme couvre le haut/bas).
• Éléments visibles avant leur entrée ou après leur sortie (clamp manquant).
• Échecs de couleur/contraste : couleur héroïque sur >1 élément par image, texte sombre illisible sur l'étalonnage.
• Erreurs d'ordre des calques (grain/vignette doit être au-dessus, étalonnage au-dessus du contenu). Corrigez → re-rendez → ré-extrayez → ré-inspectez. Ne livrez qu'après un passage propre. Ensuite, exécutez la checklist finale en bas de references/design-rules.md.

Édition des séquences existantes de l'utilisateur

Pour améliorer un mp4 existant (sous-titres, étalonnage, intro/outro) plutôt que de construire depuis zéro : placez le fichier dans public/, rendez-le en tant que calque d'assets avec <OffthreadVideo src={staticFile("clip.mp4")} />, définissez la durée de la composition à partir de la longueur du clip, et superposez les graphiques/étalonnage/grain par-dessus. Obtenez la durée et les fps du clip avec ffprobe avant de configurer la composition. Pour les sous-titres synchronisés avec les mots sur la parole, voir la section sous-titres de references/motion-patterns.md.

Fichiers de référence

• references/motion-patterns.md — bibliothèque de composants copier-coller : arrière-plans, étalonnage/grain/vignette, Ken Burns, révélations de texte, compteurs, transitions, parallaxe, synchronisation audio, sous-titres. Lisez avant d'écrire des composants.
• references/design-rules.md — palettes, règles typographiques, architecture de scène, design sonore, checklist avant livraison. Lisez avant de concevoir les scènes et avant la livraison finale.
• assets/theme.ts — le modèle de thème à copier dans chaque projet.

Modes de défaillance courants à éviter activement

• Les emojis comme icônes. Les emojis s'affichent sous forme de glyphes de plateforme en couleur (✳️ vert, 🌐 bleu) qui ignorent votre palette et violent silencieusement la règle d'une seule couleur héroïque, et ils se posent sur n'importe quel fond que vous leur donnez (mascotte orange sur carreau orange = invisible). Dessinez les glyphes avec CSS/SVG dans les couleurs du thème, ou vérifiez chaque emoji sur les images extraites.
• L'absence d'assets SFX n'est pas une raison pour livrer du silence. Synthétisez un kit minimal en WAV 16 bits à partir d'un script Node (bruit-souffle whoosh, pop avec chute de hauteur, coup/basse sine-thump, pad sine désaccordé) dans public/sfx/ – voir examples/scripts/ dans le dépôt. Zéro téléchargement, totalement déterministe.
• Générer un composant géant plutôt que des pièces thématiques et réutilisables.
• Décalage de durationInFrames entre la Composition et le contenu de la scène (silence mort).
• Oublier --overwrite lors des re-rendus, puis inspecter le fichier obsolète.
• Polices : ne comptez jamais sur les polices système pour le texte héroïque ; chargez une police d'affichage via @remotion/google-fonts ou @font-face + staticFile.
• Essayer de « décrire » le résultat à l'utilisateur plutôt que de le rendre et de le vérifier.