Constructeur de Vidéos Remotion

Que fait Constructeur de Vidéos Remotion ?

Votre connaissance de Remotion peut être obsolète. Quand le comportement exact de l'API compte, 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 tous les packages remotion et @remotion/* exactement sur la même version et évitez les intervalles 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 des props de niveau supérieur
   • données de timeline ou d'événements
   • profil de rendu
2. Définissez les props partagés avec zod et passez le schéma à chaque <Composition>.
3. Utilisez calculateMetadata pour déduire durationInFrames, width, height, les props transformés, et defaultOutName.
4. Construisez la structure des scènes avec <Series> pour l'ordre narratif et <Sequence> pour les superpositions, entrées, fenêtres de footage, et callouts.
5. Dans les projets Remotion v4.x, définissez explicitement premountFor sur les éléments <Sequence> qui ont besoin que les assets soient chargés avant leur apparition.
6. Ajoutez des données d'exemple et des scripts de rendu avant de peaufiner l'animation.

Valeurs Par Défaut et Règles

• Par défaut, utilisez fps={30} et 1920x1080 pour le paysage, sauf indication contraire.
• Utilisez AbsoluteFill pour l'empilement.
• Utilisez staticFile() pour tout ce qui vient de public/.
• Utilisez useCurrentFrame() et useVideoConfig() pour la logique basée sur les images.
• Privilégiez les 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 demande vraiment une divergence.

Checklist Vidéo Paramétrique

• Un schéma z.object() partagé de niveau supérieur
• defaultProps correspondant à la forme des props du composant
• calculateMetadata retournant une durée ou des dimensions dynamiques lorsque les entrées le nécessitent
• Données d'exemple JSON ou TypeScript pour l'aperçu local
• Scripts de rendu pour chaque sortie cible

Stratégie de Footage

Supportez au moins ces modes lorsque le footage est optionnel :

• none
• placeholder
• real

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

Vidéo de Lancement Millrace

Si la requête 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

---

Source : hashgraph-online/awesome-codex-plugins → plugins/tim-osterhus/codex-remotion-plugin/skills/remotion-video-builder/SKILL.md