Remotion Video Builder

Que fait Remotion Video Builder ?

Votre connaissance de Remotion peut être obsolète. Lorsque le comportement exact de l'API est important, privilégiez le serveur MCP officiel remotion-documentation ou la documentation sur remotion.dev.

Commencez ici

• Si le projet n'existe pas encore, créez-le avec npx create-video@latest et préférez le modèle vierge.
• Gardez chaque package remotion et @remotion/* exactement sur la même version et évitez les intervalles avec caret.
• Structure d'entrée standard :
  • src/index.ts appelle registerRoot()
  • src/Root.tsx enregistre toutes les vidéos avec <Composition> ou <Still>

Ordre de construction

1. Modélisez d'abord le contrat d'entrée :
   • schéma de props de haut niveau
   • données de timeline ou d'événements
   • profil de rendu
2. Définissez des props partagées avec zod et passez le schéma à chaque <Composition>.
3. Utilisez calculateMetadata pour dériver durationInFrames, width, height, les props transformées, et defaultOutName.
4. Construisez la structure de la scène avec <Series> pour l'ordre narratif et <Sequence> pour les superpositions, entrées, fenêtres de séquences vidéo, et légendes.
5. Dans les projets Remotion v4.x, définissez explicitement premountFor sur les éléments <Sequence> qui nécessitent le chargement des ressources avant leur apparition.
6. Ajoutez des exemples de données et des scripts de rendu avant de peaufiner l'animation.

Réglages et règles par défaut

• Par défaut, utilisez fps={30} et 1920x1080 pour le paysage, sauf indication contraire dans le brief.
• Utilisez AbsoluteFill pour la superposition des couches.
• Utilisez staticFile() pour tout ce qui vient de public/.
• Utilisez useCurrentFrame() et useVideoConfig() pour la logique basée sur les images.
• Privilégiez des mouvements subtils :
  • spring() avec un amortissement élevé
  • interpolate() avec clamping
• N'utilisez pas Math.random(). Utilisez random(seed) de remotion.
• Gardez l'animation de texte simple et lisible.
• Gardez les sorties paysage et portrait sur la même logique métier, sauf si le brief exige vraiment une divergence.

Liste de vérification pour une vidéo paramétrée

• Un seul schéma z.object() partagé de haut niveau
• defaultProps correspondant à la forme des props du composant
• calculateMetadata retournant une durée ou des dimensions dynamiques lorsque les entrées l'exigent
• Exemples de données JSON ou TypeScript pour l'aperçu local
• Scripts de rendu pour chaque sortie cible

Stratégie pour les séquences vidéo

Prenez en charge au moins ces modes lorsque les séquences vidéo sont optionnelles :

• none
• placeholder
• real

La timeline et les superpositions doivent toujours s'afficher en l'absence de séquences réelles.

Vidéo de lancement Millrace

Si la demande concerne Millrace ou le pipeline de vidéo de lancement, lisez references/millrace-launch-video.md avant d'implémenter.

Références

• references/remotion-core.md
• references/millrace-launch-video.md