remotion-best-practices

Déclencheurs

• vidéo
• remotion
• créer une vidéo
• renderer une vidéo
• vidéo animée
• vidéo promotionnelle
• vidéo explicative
• mp4
• clip vidéo
• motion graphics
• animation vidéo
• vidéo react
• vidéo avec animation de texte
• vidéo avec musique
• vidéo avec légendes
• vidéo avec sous-titres
• vidéo avec voix off
• vidéo 3D
• animation de graphique
• transition vidéo
• montage vidéo
• rendu vidéo

Flux de travail EloPhanto

Quand on vous demande de créer une vidéo, suivez cette séquence :

1. Lire les règles : Charger les fichiers de règles pertinents ci-dessous selon la tâche :

   • Maps → rules/maps.md
   • 3D → rules/3d.md
   • Graphiques → rules/charts.md
   • Légendes → rules/subtitles.md
   • Voix off → rules/voiceover.md
   • Animations de texte → rules/text-animations.md
   • Transitions → rules/transitions.md
   • Audio → rules/audio.md
   • Animations → rules/animations.md
   • Timing → rules/timing.md

2. Scaffolder (ne PAS utiliser npx create-video — il nécessite des prompts interactifs) :

   mkdir -p /tmp/elophanto/<project-name>
   cd /tmp/elophanto/<project-name> && npm init -y
   cd /tmp/elophanto/<project-name> && npm install remotion @remotion/cli @remotion/media react react-dom typescript @types/react

   CRITIQUE : Chaque commande shell_execute DOIT commencer par cd /tmp/elophanto/<project-name> &&. Le shell ne persiste PAS le répertoire de travail entre les appels.

3. Créer les fichiers du projet :

   • src/index.ts — point d'entrée avec registerRoot()
   • src/Root.tsx — définitions <Composition> (id, fps, dimensions, duration)
   • src/MyComposition.tsx — composant vidéo utilisant useCurrentFrame(), interpolate(), etc.
   • tsconfig.json — configuration TypeScript

   Point d'entrée minimal :

   // src/index.ts
   import {registerRoot} from 'remotion';
   import {Root} from './Root';
   registerRoot(Root);

   Racine minimale :

   // src/Root.tsx
   import {Composition} from 'remotion';
   import {MyVideo} from './MyVideo';
   export const Root = () => (
     <Composition id="MyVideo" component={MyVideo}
       durationInFrames={300} fps={30} width={1920} height={1080} />
   );

4. Builder : Écrire des composants React en suivant les patterns Remotion des règles. APIs clés : useCurrentFrame(), useVideoConfig(), interpolate(), spring(), <AbsoluteFill>, <Sequence>, <Series>, <Audio>, <Video>, <Img>

5. Renderer (TOUJOURS le faire — ne jamais s'arrêter avant le rendu) :

   cd /tmp/elophanto/<project-name> && npx remotion render src/index.ts <CompositionId> out/video.mp4 --timeout=60000

   Utiliser --timeout=120000 pour les vidéos complexes. Toujours passer timeout: 300 à shell_execute pour les rendus. Le cd est REQUIS — sans lui, npx remotion échouera avec « could not determine executable ».

IMPORTANT : Ne pas s'arrêter après avoir écrit les fichiers. Vous DEVEZ tenter l'étape de rendu. L'utilisateur s'attend à un fichier .mp4 rendu, pas seulement du code source.

Pour les vidéos complexes, utiliser swarm_spawn pour déléguer le build à un agent de codage.

Système de conception — Appliquer à chaque fois

CRITIQUE : Toujours lire knowledge/system/remotion-video-creation.md avant d'écrire du code vidéo. Il contient le système de conception complet (couleurs, polices, animations, templates de scènes) qui doit être appliqué à chaque vidéo indépendamment du contenu. Règles clés :

• Arrière-plan : #0A0A0A ou dégradé — jamais flat #000 ou bleu défaut (#0f172a)
• Police : Geist Sans (charger via CDN @font-face) — pas system-ui comme police primaire
• Titres : Toujours utiliser du letter-spacing négatif (-3px à -5px pour le texte large)
• Scènes : Minimum 5 secondes (150 frames) par scène — ne pas se précipiter, les gens ont besoin de lire
• Animations : spring({ damping: 200 }) pour un mouvement lisse et professionnel
• Listes/cartes : Échelonner les entrées par 12–15 frames (0,4–0,5s) entre les éléments
• Lueur : Chaque scène a besoin d'au moins une tache de lueur radiale-gradient derrière les éléments clés
• Accent : Choisir UNE couleur héros (violet #8B5CF6 par défaut) — utiliser parcimonieusement sur les CTA uniquement
• Cartes verre : background: rgba(255,255,255,0.03), border: 1px solid rgba(255,255,255,0.08)

Quand l'utiliser

Utiliser cette compétence chaque fois que vous travaillez avec du code Remotion ou qu'on vous demande de créer des vidéos programmatiquement.

Légendes

Quand on traite avec des légendes ou sous-titres, charger le fichier ./rules/subtitles.md pour plus d'informations.

Utiliser FFmpeg

Pour certaines opérations vidéo, comme couper des vidéos ou détecter les silences, FFmpeg doit être utilisé. Charger le fichier ./rules/ffmpeg.md pour plus d'informations.

Visualisation audio

Quand il faut visualiser l'audio (barres de spectre, formes d'onde, effets réactifs aux basses), charger le fichier ./rules/audio-visualization.md pour plus d'informations.

Effets sonores

Quand il faut utiliser des effets sonores, charger le fichier ./rules/sound-effects.md pour plus d'informations.

Comment utiliser

Lire les fichiers de règles individuels pour les explications détaillées et les exemples de code :

• rules/3d.md - Contenu 3D dans Remotion en utilisant Three.js et React Three Fiber
• rules/animations.md - Compétences d'animation fondamentales pour Remotion
• rules/assets.md - Importer des images, vidéos, audio et polices dans Remotion
• rules/audio.md - Utiliser l'audio et le son dans Remotion - importer, couper, volume, vitesse, pitch
• rules/calculate-metadata.md - Définir dynamiquement la durée de composition, les dimensions et les props
• rules/can-decode.md - Vérifier si une vidéo peut être décodée par le navigateur en utilisant Mediabunny
• rules/charts.md - Patterns de graphiques et de visualisation de données pour Remotion (barres, camembert, ligne, graphiques boursiers)
• rules/compositions.md - Définir les compositions, les photographies, les dossiers, les props par défaut et les métadonnées dynamiques
• rules/extract-frames.md - Extraire les frames des vidéos à des timestamps spécifiques en utilisant Mediabunny
• rules/fonts.md - Charger les Google Fonts et les polices locales dans Remotion
• rules/get-audio-duration.md - Obtenir la durée d'un fichier audio en secondes avec Mediabunny
• rules/get-video-dimensions.md - Obtenir la largeur et la hauteur d'un fichier vidéo avec Mediabunny
• rules/get-video-duration.md - Obtenir la durée d'un fichier vidéo en secondes avec Mediabunny
• rules/gifs.md - Afficher des GIF synchronisés avec la timeline de Remotion
• rules/images.md - Incorporer des images dans Remotion en utilisant le composant Img
• rules/light-leaks.md - Effets de fuites de lumière utilisant @remotion/light-leaks
• rules/lottie.md - Incorporer des animations Lottie dans Remotion
• rules/measuring-dom-nodes.md - Mesurer les dimensions des éléments DOM dans Remotion
• rules/measuring-text.md - Mesurer les dimensions du texte, ajuster le texte aux conteneurs et vérifier le débordement
• rules/sequencing.md - Patterns de séquençage pour Remotion - délai, couper, limiter la durée des éléments
• rules/tailwind.md - Utiliser TailwindCSS dans Remotion
• rules/text-animations.md - Patterns de typographie et d'animation de texte pour Remotion
• rules/timing.md - Courbes d'interpolation dans Remotion - animations linéaires, ease, spring
• rules/transitions.md - Patterns de transition de scène pour Remotion
• rules/transparent-videos.md - Renderer une vidéo avec transparence
• rules/trimming.md - Patterns de découpe pour Remotion - couper le début ou la fin des animations
• rules/videos.md - Incorporer des vidéos dans Remotion - découpe, volume, vitesse, boucle, pitch
• rules/parameters.md - Rendre une vidéo paramétrizable en ajoutant un schéma Zod
• rules/maps.md - Ajouter une carte en utilisant Mapbox et l'animer
• rules/voiceover.md - Ajouter une voix off générée par IA à des compositions Remotion en utilisant ElevenLabs TTS

Vérifier

• Le code a effectivement été exécuté (ou type-checked / linted comme approprié) et la sortie de commande est capturée
• Les dépendances et les versions de runtime utilisées sont épinglées et enregistrées (ex. requirements.txt, package.json + lockfile, .nvmrc)
• Les erreurs ou avertissements émis par l'exécution sont adressés ou explicitement acceptés avec une raison
• Les E/S externes nouvelles (réseau, système de fichiers, BD) ont des timeouts et la gestion d'erreurs, pas d'échec silencieux
• Les tests du changement ont été exécutés et le nombre de réussites/échecs est dans la transcription
• Les secrets et identifiants sont lus du magasin env/secret, pas codés en dur, et les fichiers .env ne sont pas validés