Remotion Video Builder (Skill-Bibliothek)

Remotion Video Builder

Dein Remotion-Wissen ist möglicherweise veraltet. Wenn exaktes API-Verhalten wichtig ist, bevorzuge den offiziellen remotion-documentation MCP-Server oder die Dokumentation unter remotion.dev.

Starte hier

• Wenn das Projekt noch nicht existiert, richte es mit npx create-video@latest ein und bevorzuge die leere Vorlage.
• Halte jedes remotion- und @remotion/*-Paket auf exakt derselben Version und vermeide Caret-Bereiche.
• Standardform des Einstiegs:
  • src/index.ts ruft registerRoot() auf
  • src/Root.tsq registriert alle Videos mit <Composition> oder <Still>

Baureihenfolge

1. Modelliere zuerst den Eingabe-Contract:
   • Schema der obersten Props-Ebene
   • Timeline- oder Event-Daten
   • Render-Profil
2. Definiere gemeinsame Props mit zod und übergib das Schema an jede <Composition>.
3. Verwende calculateMetadata, um durationInFrames, width, height, transformierte Props und defaultOutName abzuleiten.
4. Baue die Szenenstruktur mit <Series> für narrative Reihenfolge und <Sequence> für Overlays, Eintritte, Footage-Fenster und Callouts.
5. Setze in Remotion v4.x-Projekten explizit premountFor auf <Sequence>-Elemente, die benötigte Assets laden müssen, bevor sie erscheinen.
6. Füge Beispieldaten und Renderscripte hinzu, bevor du die Animation verfeinerst.

Standardeinstellungen und Regeln

• Standardmäßig fps={30} und 1920x1080 für Querformat, sofern nicht anders angegeben.
• Verwende AbsoluteFill für Ebenen.
• Verwende staticFile() für alles, was aus public/ kommt.
• Verwende useCurrentFrame() und useVideoConfig() für frame-basierte Logik.
• Bevorzuge dezente Bewegung:
  • spring() mit hoher Dämpfung
  • interpolate() mit Clamping
• Verwende kein Math.random(). Verwende random(seed) aus remotion.
• Halte Textanimation einfach und lesbar.
• Halte Querformat- und Hochformat-Ausgaben auf derselben Geschäftslogik, es sei denn, die Aufgabenstellung erfordert wirklich eine Abweichung.

Checkliste für parametrisierte Videos

• Ein gemeinsames z.object()-Schema auf oberster Ebene
• defaultProps, das zur Komponenten-Prop-Form passt
• calculateMetadata, das bei Bedarf dynamische Dauer oder Abmessungen zurückgibt
• Beispiel-JSON oder TypeScript-Daten für die lokale Vorschau
• Renderscripte für jede Zielausgabe

Footage-Strategie

Unterstütze mindestens diese Modi, wenn Footage optional ist:

• none
• placeholder
• real

Die Timeline und Overlays sollten auch ohne echtes Footage rendern.

Millrace-Startvideo

Wenn die Anfrage Millrace oder die Pipeline für das Startvideo betrifft, lies references/millrace-launch-video.md, bevor du mit der Implementierung beginnst.

Referenzen

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

---

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