Motion Forge: Code-to-Video (Code2Video) Industrielle Produktions-Skill - Hauptleitfaden

Dieses Projekt ist ein vollständig eigenständiger, unabhängig verteilbarer Code-to-Video Industrie-Skill. Das System basiert auf Remotion 4.x + React 19 + TypeScript + Three.js (@remotion/three) + Canvas 2D + SVG als vereinheitlichter Multi-Tech-Stack-Kernel und enthält 265 atomare, entkoppelte Bewegungskarten (unterteilt in 9 Fachgebiete), eine visuelle Basis (_shared/), eine lokale Debugging-Workbench sowie strenge G1/G2 Qualitätsprüfungs-Gates.

Inhaltsverzeichnis

Kernarchitektur & Fünf Technische Gebote
Zwei Qualitätsprüfungs-Gates - Standardarbeitsanweisung (G1 & G2 Gates SOP)
Szenario-spezifische Pipelines (Scenario Pipelines)
265 Bewegungskarten: Gesamtbestand & Regie-Entscheidungsfindung (Creative & Open Motion Design)
Film IR - Storyboard-Protokoll & Multi-Tech-Stack-Rendering-Spezifikation
CLI-Toolchain: Lebenszyklus & Workbench-Interaktion
Endgültige Lieferung & Fehlerbehebungs-Checkliste

1. Kernarchitektur & Fünf Technische Gebote

Bevor Sie Code für ein Video-Storyboard oder Rendering schreiben, muss der Agent die folgenden fünf unverhandelbaren Designprinzipien einhalten:

Absolute Entkopplung & Lokale Uhrzeit (Local Frame Only):
- Jede Szene verwendet nur lokale Framenummern (frame 0 bis durationInFrames). Verwenden Sie niemals absolute Zeitstempel für das gesamte Video (absoluteFrame oder from) innerhalb einer Szene. Die absolute Uhrzeit wird von der Core-Ebene durch die Zeitleiste akkumuliert.
- Importieren Sie niemals Komponenten aus anderen Szenen. Der gesamte gemeinsame Zustand zwischen Szenen muss über props des Film IR übergeben werden.
- Bewegungskarten (Cards) enthalten nur Bewegungsmathematik und visuelle Logik. Schreiben Sie niemals projektspezifische Texte oder Geschäftsbildpfade fest in die Karten.
Reine Funktionen & Frame-Deterministische Ausführung (Frame-Deterministic Execution):
- Alle Animationen, Objektverschiebungen, Transparenzänderungen müssen reine mathematische Funktionen des aktuellen lokalen Frames frame sein: Value = f(frame).
- Verwenden Sie niemals requestAnimationFrame, setInterval, setTimeout oder externe, selbstlaufende Zeitleisten.
- Verwenden Sie niemals Math.random() ohne Seed (verwenden Sie random(seed) von Remotion). Stellen Sie sicher, dass der Rendering-Pixel 100% idempotent identisch ist, unabhängig davon, wann der Frame gesucht und gerendert wird.
Lokale Asset-Nutzung (Local Assets Only):
- Die Rendering-Engine verbietet die direkte Verbindung zu externen, nicht verifizierten Remote-URLs während der Videokomposition (Schutz vor Netzwerkausfällen, Hotlinking und Anforderungsverzögerungen).
- Externe Bilder, Videoclips und Audiomusik müssen von den Anbietern vorab heruntergeladen und in einem lokalen Projektverzeichnis gespeichert und in assets.json registriert werden. Fehlende Assets müssen explizit markiert und dem Benutzer gemeldet werden. Keine stillen Platzhalter oder gefälschten Daten.
Einheitliches Multi-Tech-Rendering (Multi-Tech Rendering):
- Layout und interaktive UI: HTML/CSS + Spring-Elastizitätsanimation.
- Geometrische Konturen, Verbindungen, Diagramme und Masken: SVG-Pfadinterpolation.
- Partikel, Flüssigkeiten und zehntausende hochfrequente Bewegungspunkte: Canvas 2D.
- 3D-Modelle, räumliches Licht und Schatten, 3D-Kamerafahrten: Three.js (@remotion/three).
- Alle technischen Wege unterliegen der Fram-Synchronisation von Remotion (useCurrentFrame()).
Projektunabhängigkeit (Standalone Project):
- Dieses Skill-Verzeichnis enthält nur Workflow-Spezifikationen, Bewegungskarten-Referenzen, generische Laufzeit-Templates und den forge create Projektgenerator. Der gesamte Inhalt des Benutzerprojekts (core/, cards/, scenes/, public/-Assets, film.json, package.json, Workbench und Render-Ausgabe) muss im eigenen Projektverzeichnis des Benutzers abgelegt werden, mit einer eigenen npm ci, eigener Validierung und eigenem Rendering. Es muss unabhängig vom Skill-Verzeichnis ausführbar sein.
- Schreiben Sie niemals projektspezifischen Code/Assets in das Skill-Verzeichnis und verwenden Sie keine Symlinks, um Projektinhalte zurück in das Skill-Verzeichnis zu verlinken. forge create kopiert Laufzeit, Bewegungskarten und standard-Film als echte Dateien in das Projekt. Projektspezifische Szenenkomponenten werden direkt unter scenes/ des Projekts geschrieben.
- Das output/projects/-Verzeichnis und die Gate-Prozesse im Skill-Verzeichnis gelten nur für die mitgelieferten Beispiele des Skills. Die G1/G2 Überprüfungsaufzeichnungen des realen Projekts werden im Projektverzeichnis gespeichert.
Projektinitialisierung (Eingabe: absoluter Projektpfad & Eingabe-Assets; Ausgabe: unabhängig installierbares Projekt-Skeleton):
1. Führen Sie im Template-Verzeichnis aus: npm run forge -- create --dir /absolute/project --input <Eingabe> [--audio-kind song|instrumental] [--name <id>]. Das Ziel muss ein leeres Verzeichnis außerhalb des Templates sein. Der Befehl generiert eine vollständige Laufzeitkopie, kopiert lokale Assets nach public/assets/<id>/ und erstellt einen Projektentwurf.
2. Nach der Initialisierung: cd <PROJECT_ROOT>, führen Sie aus: npm ci, npm run validate -- --project <id>. Code, Assets, Film IR, Genehmigungsstatus und Ausgabe des realen Projekts sind durch PROJECT_ROOT/output/projects/<id>/ und PROJECT_ROOT/public/ selbstständig enthalten.
3. Verwenden Sie nur relative Pfade unter public/ für lokale Assets. Remote-Quellen werden nur als Metadaten für die Quelle erfasst, nicht in Rendering-Referenzen verwendet. Stoppen Sie sofort, wenn Assets fehlen. Das Projekt darf nicht absolute Pfade oder externe Symlinks verwenden, um sich als unabhängiges Projekt auszugeben.
4. Führen Sie für alle nachfolgenden Befehle zuerst cd <PROJECT_ROOT> aus, bevor Sie Skripte im Projekt ausführen. Renderprodukte und Überprüfungsaufzeichnungen dürfen nicht zurück in das Template-Verzeichnis geschrieben werden.
5. Das Template-Verzeichnis wird nur während create als schreibgeschützte Quelle verwendet. Nach der Generierung dürfen Importe, npm-Abhängigkeiten, Skripte und Asset-Referenzen im Projekt nicht mehr auf dieses Verzeichnis verweisen.

Fehlerbedingungen & Wiederherstellungspfade

Auslöser	Erste Maßnahme	Bei anhaltendem Fehler oder Änderungsbedarf
Projektstammverzeichnis nicht klar oder droht in das Skill-Verzeichnis zu schreiben	Stoppen Sie das Schreiben, bestätigen Sie den absoluten Projektpfad mit dem Benutzer; nachfolgende Befehle verwenden dieses Verzeichnis als Arbeitsverzeichnis	Bis ein klarer Pfad vorliegt, nur das Design besprechen, keine Dateien erstellen
Erforderliche Assets fehlen, sind nicht lesbar oder die Lizenz ist unklar	Melden Sie den spezifischen Pfad und Grund, pausieren Sie die betroffenen Szenen; keine stillen Platzhalter oder erfundene Assets	Der Benutzer ergänzt Assets oder genehmigt explizit einen alternativen Plan und synchronisiert G1 entsprechend
G1 nicht bestätigt oder Änderungen angefordert	Bleiben Sie in der Designphase, überarbeiten Sie `film.json` und `design-review.md`	Erstellen Sie keine Sample-Szene, führen Sie keinen G1-Genehmigungsbefehl aus
Sample-Szene zeigt schwarzen Bildschirm, Audio-/Video-Versatz, Textüberlauf oder minderwertige visuelle Qualität	Halten Sie G2 gesperrt, identifizieren und reparieren Sie die spezifische Szene. Nur die Sample-Szene erneut rendern	Reichen Sie G2 erneut ein; verwenden Sie kein vollständiges Video-Rendering als Ersatz für die Sample-Validierung
Änderungen an genehmigter Erzählung, Layout, Dauer, Assets oder Audio	Machen Sie die ursprünglichen G1/G2 Ergebnisse ungültig. Kehren Sie zu G1 zurück, um den betroffenen Bereich neu zu bestätigen	Nach bestandener neuer G1, erstellen und bestätigen Sie eine neue Sample-Szene mit Audio
Build, Validierung oder Rendering-Befehl schlägt fehl	Behalten Sie das vollständige Protokoll bei. Reparieren Sie die Ursache und führen Sie denselben Befehl erneut aus. Kommentieren Sie den Fehler nicht aus und überspringen Sie die Validierung nicht	Wenn weiterhin fehlgeschlagen, stoppen Sie die Lieferung und melden Sie klar die Blockierung und die abgeschlossenen Validierungen
Unabhängigkeits-Scan findet externe absolute Pfade, `file:`-Abhängigkeiten oder Symlinks, die auf das Skill-Verzeichnis verweisen	Kopieren Sie den benötigten Code oder die Assets physisch in das Projekt und ändern Sie sie in projektsinterne Referenzen um	Installieren und rendern Sie erneut in einer isolierten Kopie. Bis bestanden, nicht als unabhängig ausführbar deklarieren

2. Zwei Qualitätsprüfungs-Gates - Standardarbeitsanweisung (G1 & G2 Gates SOP)

Um zu verhindern, dass der Agent "aus der Luft gegriffene, blinde Code-Blöcke stapelt, was zu schwerwiegender Rechenverschwendung und Abweichungen von der Erwartung führt", erzwingt das System zwei Überprüfungsgates (Two-Gate Review). Überspringen Sie niemals die Gates und rendern Sie nicht direkt das gesamte Video!

[Benutzereingabe]
   ↓
[Anforderungsanalyse & Asset-Bereitstellung]
   ↓
[Erstellung Film IR Entwurf]
   ↓
【🔴 CHECKPOINT G1: Storyboard & Design-Freigabe】 → Präsentieren Sie dem Benutzer ein klar formatiertes Drehbuch und eine visuelle Tabelle. STOP und warten auf Genehmigung.
   ↓ (Nach Benutzerbestätigung ausführen: npm run forge -- approve-design)
[Erstellung einer echten Sample-Szene mit Audio]
   ↓
【🔴 CHECKPOINT G2: Sample-Szene mit Audio Freigabe】 → Render-Video der repräsentativen Szene. Der Benutzer prüft die echte Audio-/Videoqualität und Synchronisation. STOP und warten auf Genehmigung.
   ↓ (Nach Benutzerbestätigung ausführen: npm run forge -- approve-sample)
[Vollständige Code-Assemblierung & Batch-Rendering]
   ↓
[Endgültige Lieferung (MP4 + bearbeitbares Projekt + Workbench)]

2.1 G1 Gate: Storyboard & Design-Freigabe (Design Review)

Bevor Sie komplexen Rendering-Code schreiben, muss der Agent zuerst den G1 Storyboard & Design-Plan erstellen und dem Benutzer ein klar formatiertes Markdown-Review-Dokument vorlegen, das mindestens Folgendes enthält:

Basiseigenschaften: Filmtyp, Zielgruppe, Seitenverhältnis (Querformat 16:9 / Hochformat 9:16), angestrebte Gesamtdauer und Bildrate (z. B. 30fps)
Visuelles Thema: Primärfarbe, Hintergrundfarbe, Textfarbe, Akzentfarbe, Schriftartenfamilie
Hauptuhr-Auswahl: Ausrichtung auf Sprachaufnahme / Liedtext / reines Musikbeat-Raster / Textlesezeit
Detaillierte Storyboard-Tabelle (muss dem Benutzer im folgenden Format präsentiert werden):

Szene Nr.	Name der Szene	Narrativer Zweck & Semantik	Voice-Over	Tatsächlicher Bildschirmtext (On-Screen Text)	Visuelle Beschreibung	Primäre Bewegungskarte	Kamerakarte	Übergangskarte	Lokale Dauer (Frames/Sek)
S01	Eröffnungsknüller	Hook: Spannung erzeugen	Warum scheitern 90% der KI-Transformationen von Unternehmen in der Pilotphase?	"Warum 90% der KI-Transformationen scheitern?"	Zentrierter, großer, kontrastreicher Titel + rote Warnleuchte im Hintergrund	`typography/halation-bloom`	`camera/slow-push`	`transition/cube-rotate`	90f (3.0s)
S02	Datenpräsentation	Data: Schockierende Statistiken demonstrieren	Schauen Sie sich zwei Zahlen an: 78% bleiben im Spielzeugstadium stecken, 12% erzielen negative Rendite.	"78% bleiben im Spielzeugstadium12% erzielen negative ROI"	Links-rechts Vergleichspanel mit dynamischen Zahlen und Sandfüll-Diagramm	`data/particle-sand-fill`	Keine	`transition/whip-pan`	150f (5.0s)

🔴 CHECKPOINT · STOP: Nach der Präsentation beim Benutzer muss die aktuelle Runde beendet und der Benutzer gefragt werden, ob das Storyboard akzeptiert wird. Führen Sie in derselben Runde keine Genehmigung, Erstellung von Sample-Szenen oder Vollbild-Rendering durch.
Durchgangssignal: Nur wenn der Benutzer in einer nachfolgenden Antwort G1 explizit bestätigt, führt der Agent in PROJECT_ROOT aus:
```
npm run forge -- approve-design --project <project-id>
```

2.2 G2 Gate: Sample-Szene mit Audio Freigabe (Sample Review)

Nach bestandener G1 das gesamte Video nicht sofort rendern. Wählen Sie die repräsentativste, visuell komplexeste Szene des gesamten Videos (normalerweise den Hook oder den Höhepunkt), die echte Audio- und Video-Elemente enthält. Erstellen und rendern Sie diese als Sample-Szene-Video:

Render-Befehl:

npm run forge -- render --project <project-id> --scope sample

Qualitätskontrollpunkte:
- Ist Audio und Video exakt synchronisiert? Kommen Untertitel 1–2 Frames vor dem Sprachbeginn?
- Gibt es Textüberlappungen, Zeilenumbrüche oder Überschreitungen der Sicherheitszone?
- Passt die Bewegungsgeschwindigkeit zur Musikstimmung? Gibt es ein Gefühl von Atem?
🔴 CHECKPOINT · STOP: Nach Bereitstellung des echten Sample-Videos und der Qualitätskontrollergebnisse muss die Runde enden. Warten Sie auf die Überprüfung durch den Benutzer. Genehmigen Sie G2 nicht selbstständig im Namen des Benutzers.
Durchgangssignal: Nach expliziter Bestätigung der Sample-Szene durch den Benutzer, führen Sie in PROJECT_ROOT aus:
```
npm run forge -- approve-sample --project <project-id>
```
Erst nach Abschluss des G2-Genehmigungsprozesses entsperrt die Projekt-Zustandsmaschine die Berechtigung für das endgültige Vollbild-Rendering!

3. Szenario-spezifische Pipelines (Scenario Pipelines)

Die End-to-End-Verarbeitungslogik für verschiedene Eingabetypen ist in separate Anleitungsdateien unter pipelines/ unterteilt. Der Agent sollte basierend auf dem tatsächlichen Eingabetyp des Benutzers die entsprechende Anleitung konsultieren:

Szenario-Typ	Geeignete Eingabe & Filmtyp	Entsprechende Pipeline-Anleitungsdatei
Szenario 1: URL zu Video	Blog, WeChat-Artikel, SaaS-Landing-Page, technische Dokumentation, Pressemitteilung	`pipelines/url-to-video.md`
Szenario 2: Reine Musik zu Video	Reine Instrumentalmusik, elektronische Musik, epischer Soundtrack; philosophische Filme, Beat-Sync-Videos, Stimmungsaufsätze	`pipelines/instrumental-to-video.md`
Szenario 3: Lied mit Gesang zu Video	Vollständiges Lied (Gesang + Begleitung); dynamisches Lyric-Video, Musik-Geschichten-Kurzfilm	`pipelines/song-to-video.md`
Szenario 4: Reines Thema zu Video	Ein-Satz-Thema/Aufgabe; tiefgehende Wissenschaft, humanistische Philosophie, Geschäftseinblicke, Allgemeinwissen-Kurzfilm	`pipelines/theme-to-video.md`
Szenario 5: Benutzer-Multimodale-Assets-Mix	Benutzer-eigene Bilder, Screenshots, kurze Videoclips, Sprachaufnahmen; Produktdemonstration, Vlog	`pipelines/assets-to-video.md`
Allgemeine Content-Planung	Strukturierte Planung von Thema/URL, Erzählbogen, Faktenprüfung, Film IR Konvertierung	`pipelines/content-planning.md`
Leitfaden zur Szenario-Erweiterung	Wie man neue Eingaben erweitert (z. B. Tabellen, PPT, Duo-Podcast usw.)	`pipelines/extending-pipeline.md`

4. 265 Bewegungskarten: Gesamtbestand & Regie-Entscheidungsfindung (Creative & Open Motion Design)

Die 265 atomaren Bewegungskarten im System sind die visuellen Pinsel des Agenten für die Videoerstellung.

4.1 Offene Auswahlprinzipien: Unbegrenzte künstlerische Vorstellungskraft

Keine dogmatischen Beschränkungen oder Einschränkungen: Dieses System schreibt niemals vor, dass „bestimmte Filmtypen bestimmte Karten verwenden müssen". Im Gegenteil, wir ermutigen den Agenten, basierend auf der emotionalen Spannung des Textes, der narrativen Spannung und den Hörbeats eigenständig zu kombinieren und zu innovieren.
Der Agent ist der wahre visuelle Regisseur: Bewegungskarten sind ein modulares Baukastensystem. Sie können die interaction/command-palette-summon-Karte, die für Tech-Produkte gedacht ist, verwenden, um die "Wissenssuche" eines alten Denkers darzustellen. Oder verwenden Sie die typography/split-flap-flip-Karte, die an Flughafentafeln erinnert, um Zeitreise oder einen Lebens-Countdown zu zeigen.
Freie Einstellung von parametrischen Reglern: Jede Karte bietet eine Reihe von Parametern (z. B. Federhärte, Schwerkraft, Unschärferadius, Partikelanzahl), die der Agent in den params des film.json frei anpassen kann, um eine individuelle Bewegungsästhetik zu erzielen.

4.2 Neun Fachbereiche Bewegungskarten-Asset-Übersicht (265 Karten)

Alle 265 Karten sind standardisiert, unterstützen die adaptive Hoch-/Querformat-Dualmodus und sind nach Fachbereich vollständig entkoppelt:

Kategorie (Kind)	Verzeichnis & Kartenanzahl	Kernfunktion	Repräsentative Karten (direkt im Code referenzierbar)
`camera` (Kamera)	`cards/camera/` (21 Karten)	Räumliches Schwenken, Zoomen, Kamerabrennweite, perspektivische Verzerrung; Erzeugt Tiefe und Raum im flachen Bild	`dolly-zoom` (Hitchcock-Zoom), `slow-push` (tiefes, langsames Einzoomen), `slow-pull` (sanftes Herauszoomen), `shot-crash-zoom-punch` (kraftvoller Crash-Zoom), `space-camera-moves` (3D-Raum-Rotationen), `tension-camera-moves` (Dutch Angle für Spannung), `overhead-camera-moves` (Vogelperspektive mit großen Schwenks), `whip-pan` (Schwenk mit Unschärfe), `orbit-drift` (umlaufende Drift)
`typography` (Typografie)	`cards/typography/` (52 Karten)	Intro-Einblendungen, Lyrik-Animation, Hervorhebung von Kernaussagen, Code-Terminal, Zeichen-Dekodierung	`split-flap-flip` (Retro-Flughafen-Klapptafel), `scramble-decode` (Rauschen-Matrix-Dekodierung), `halation-bloom` (Film-Lichtschimmer), `type-rhythm-sync` (Beat-synchrone Text-Animation), `tracking-expand-reveal` (Buchstabenabstand-Enthüllung), `terminal-typewriter` (Hacker-Terminal-Schreibmaschine), `keyword-reveal` (Hervorhebung von Schlüsselwörtern), `quote-card` (elegantes Zitat), `highlighter-sweep` (Textmarker-Strich), `cel-flash-stomp` (Stop-Motion-Flash)
`interaction` (Komponenten & Interaktion)	`cards/interaction/` (58 Karten)	Skeuomorphe Objekte, interaktive Elemente, schwebende Karten, Popups, Cursor-Kollaboration	`command-palette-summon` (Cmd+K schwebend), `stack-reveal` (Karten-Stapel-Enthüllung), `popup-book-rise` (Papier-Popup-Buch), `masking-tape-slap` (Malerklebeband), `autolayout-gap-dial` (Auto-Layout-Wähler), `carousel-3d` (3D-Karussell), `theme-switch-moves` (Theme-Wechsel-Wellen), `collab-cursor-moves` (Multi-Cursor-Kollaboration), `type-and-filter` (Eingabe & Filter), `glassmorphism-card` (Glasmorphismus-Panel)
`data` (Daten & Diagramme)	`cards/data/` (20 Karten)	Physik-Partikel-Effekte, dynamische Linien-/Balkendiagramme, Dashboards, Nummern-Countdown/Rennen	`particle-sand-fill` (Sandfüll-Effekt mit Schwerkraft), `counter-confetti` (Nummern-Rennen + Konfetti), `number-counter` (Rollzähler), `chart-grow` (Balken-/Linien-Wachstum), `chart-live-moves` (Echtzeit-Datenstrom), `gauge-readout-moves` (Tachonadel-Sprung), `before-after-slider-scrub` (Vorher-Nachher-Schieberegler), `scroll-brake-moves` (Scroll-Brems-Stopp)
`effects` (Effekte & Licht)	`cards/effects/` (22 Karten)	Leucht-Lichteffekte, HUD-Scan-Fadenkreuz, 3D-rotierender Kristall, Ambient-Partikelfeld	`three-crystal` (Three.js 3D-Kristall), `light-play-moves` (Lichtspiele), `spotlight-sweep-moves` (Scheinwerfer-Streifen), `glow-flyline-moves` (Glühende Linien), `fui-hud-moves` (Technologie-Wireframe), `impact-feedback` (Anime-Wucht-Welle), `canvas-particles` (Zehntausende fließende Partikel), `flying-words` (Wortwolken-Durchflug)
`rhythm` (Schnitt & Rhythmus)	`cards/rhythm/` (8 Karten)	Rhythmus-Frame-Drops, Flash-Cuts, Split-Screen-Duelle, Montage-Schnitte	`beat-cut-moves` (Beat-synchrone Flash-Schnitte), `speed-ramp-freeze` (Geschwindigkeitsrampe + Einfrieren), `quad-split-parallel-scenes` (Vierfach-Split-Screen), `panel-grid-moves` (Comic-Panel-Neuanordnung), `rhythm-interrupt-moves` (Cut-and-Crash-Vorstoss), `trailer-grammar-moves` (Trailer-Schwarzblende-Crash)
`commercial` (Kommerzielle Szenen)	`cards/commercial/` (43 Karten)	Produktpräsentation, Brand-Intro/Outro, Eröffnungsthese, Finale	`hook` (Pain-Point-Hook), `price-card` (Preis- & Angebotskarte), `features` (Feature-Liste-Strom), `store-card` (Store & Standort-Info), `fact-sheet` (Fakten-Checkliste), `brand-ink-open` (Tinten-Intro), `logo-shrink-wordmark-lockup` (Logo-Schrumpf-Outro), `ui-to-brand-morph` (UI-Morph zu Brand-Logo)
`transition` (Übergänge)	`cards/transition/` (26 Karten)	Raumzeit-Transformationen & sanfte Blickführung zwischen Szenen	`cube-rotate` (3D-Würfel-Rotation), `clock-wipe` (Uhrzeiger-Wipe), `bubble-swarm-takeover` (Blob-Schwarm-Maske), `color-block-step-wipe` (Farbblock-Schritt-Wipe), `paper-plane-messenger` (Papierflieger), `push-through` (Durchschub), `whip-pan` (Schneller Schwenk mit Unschärfe), `dark-tunnel` (Dunkeltunnel-Durchflug)
`media` (Medien-Präsentation)	`cards/media/` (15 Karten)	Externe Bilder, Video-Intro-Komposition, Bild-im-Bild-Vergleich	`media-pop-in` (Sanftes Einspringen), `split-compare` (Links-Rechts-Split-Vergleich), `svg-path` (Vektor-Pfad-Animation), `video-pip-float` (Schwebendes Bild-im-Bild), `photo-polaroid-scatter` (Polaroid-Foto-Streuung)

Basis (cards/_shared/): Bietet allgemeine Render-Primitive (wie SpeedBlur Bewegungsunschärfe, softShadow doppelte physikalisch weiche Schatten, Stage Bühnenlicht-/Reflektor) und adaptive Schriftgrößen-Berechnung für kommerzielle Typografie. Diese werden nicht als eigenständige Karten nach außen exponiert.

4.3 Klassische Inspirations-Kombinationsparadigmen für sechs Filmtypen (nur zur Inspiration, freie Innovation)

Die folgenden sind nur inspirierende Referenzen für gängige Stile, keine starren Regeln. Der Agent kann basierend auf der tatsächlichen Kreativität mischen:

Wissenschaft & Erklärung (Science Explainer):
- Inspirations-Kombination: typography/scramble-decode (Zeichen-Dekodierung) + data/particle-sand-fill (Physik-Sand-Effekt) + media/svg-path (Konzeptverbindungen) + transition/color-block-step-wipe.
Philosophie & Tiefgang (Philosophical Essay):
- Inspirations-Kombination: typography/halation-bloom (Lichtschimmer) + camera/dolly-zoom (räumlicher Zoom) + typography/quote-card (elegantes Zitat) + effects/canvas-particles (leichter Staub).
Tech-Produkt & Launch (Product Promo):
- Inspirations-Kombination: effects/three-crystal (3D-Kristall-Intro) + interaction/command-palette-summon (Produktivitäts-Popup) + data/counter-confetti (Performance-Rekord) + transition/cube-rotate.
Business & Strategie (Business & Strategy):
- Inspirations-Kombination: data/gauge-readout-moves (Tachonadel) + data/chart-live-moves (Kurvenwachstum) + typography/highlighter-sweep (Datenmarkierung) + transition/clock-wipe.
Musik & Stimmung MV (Music Story & Lyrics):
- Inspirations-Kombination: typography/type-rhythm-sync (Strophen-Beat-Texte) + typography/cel-flash-stomp (Refrain-Stop-Flash) + camera/shot-crash-zoom-punch (Crash-Zoom) + transition/whip-pan.
Retro-Handwerk & Scrapbook (Scrapbook & Handcrafted):
- Inspirations-Kombination: interaction/masking-tape-slap (Malerklebeband) + interaction/popup-book-rise (Pop-up-Buch) + typography/split-flap-flip (Flughafen-Klapptafel) + transition/paper-plane-messenger.

4.4 Vier-Slot-Montagespezifikation & objektive Qualitätsgrenzen

Jede Szene unterstützt in der motion-Eigenschaft des film.json vier entkoppelte Slots:

{
  "motion": {
    "camera": { "cardId": "camera/slow-push", "params": { "scale": 1.15 } },
    "primary": { "cardId": "data/particle-sand-fill", "params": { "gravity": 1.2 } },
    "text": { "cardId": "typography/halation-bloom", "params": { "bloomIntensity": 0.8 } },
    "transitionOut": { "cardId": "transition/cube-rotate", "params": { "direction": "left" } }
  }
}

Objektive Qualitätsgrenzen (müssen eingehalten werden):
1. Klaren visuellen Fokus setzen: In derselben Szene sollte es ein klares visuelles Hauptelement geben. Wenn ein intensiver primary-Effekt verwendet wird, sollte die Kamerafahrt (camera) ruhig und atmend sein. Wenn die Kamera einen starken shot-crash-zoom-punch verwendet, sollte der Inhalt der Komponente relativ statisch bleiben, um ein Chaos zu vermeiden, das visuelles Unbehagen verursacht.
2. Ausreichende kognitive Verweildauer (Cognitive Hold Time): Nachdem die Animation abgeschlossen ist, muss der Text und die Kernstruktur auf dem Bildschirm mindestens 45–90 Frames (1,5 s–3,0 s) stabil bleiben, damit der Betrachter genügend Zeit zum Lesen und Verstehen hat. Schneiden Sie niemals sofort nach der Animation weg.
3. Textlänge an Bildschirmformat anpassen: Querformat: max. 22 chinesische Zeichen pro Zeile. Hochformat: max. 14 chinesische Zeichen pro Zeile. Vermeiden Sie Zeilenumbrüche mit Überlappungen oder Text, der über die Sicherheitszone hinausgeht.

5. Film IR - Storyboard-Protokoll & Multi-Tech-Stack-Rendering-Spezifikation

film.json ist die einzige semantische Quelle der Wahrheit für das gesamte Projekt.

5.1 Standard Film IR Struktur

{
  "id": "project-slug",
  "title": "Projekt Video Titel",
  "genre": "explainer",
  "brief": {
    "goal": "Kern-Narrationsziel",
    "audience": "Zielgruppe",
    "tone": "Grundstimmung"
  },
  "output": { "width": 1920, "height": 1080, "fps": 30 },
  "theme": {
    "background": "#0a0f1d",
    "foreground": "#f8fafc",
    "accent": "#38bdf8",
    "fontFamily": "Inter, PingFang SC, sans-serif"
  },
  "scenes": [
    {
      "id": "scene-01",
      "title": "Szenenname",
      "intent": "Narrationsabsicht",
      "semantic": "hook",
      "durationInFrames": 90,
      "onScreenText": ["Tatsächlicher Haupttitel auf dem Bildschirm", "Untertitel-Beschreibungstext"],
      "layout": { "kind": "center-headline" },
      "renderer": "html",
      "sceneComponent": "scene/stack-explainer",
      "motion": {
        "camera": { "cardId": "camera/slow-push" },
        "primary": { "cardId": "interaction/stack-reveal" },
        "text": { "cardId": "typography/scramble-decode" },
        "transitionOut": { "cardId": "transition/cube-rotate" }
      },
      "props": {},
      "qa": { "keyFrames": [20, 45, 80] }
    }
  ]
}

5.2 Dual-Mode-Adaption (16:9 ↔ 9:16)

Alle Szenen und Karten unterstützen responsives Skalieren. Verwenden Sie im Szenencode den Basis-Seitenverhältnis-Container:

import React from 'react';
import { useVideoConfig } from 'remotion';

export const AdaptiveStage: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { width, height } = useVideoConfig();
  const isPortrait = height > width;
  const baseWidth = isPortrait ? 1080 : 1920;
  const baseHeight = isPortrait ? 1920 : 1080;
  const scale = Math.min(width / baseWidth, height / baseHeight);
  return (
    <div style={{ transform: `scale(${scale})`, transformOrigin: 'top left', width: baseWidth, height: baseHeight, overflow: 'hidden' }}>
      {children}
    </div>
  );
};

6. CLI-Toolchain: Lebenszyklus & Workbench-Interaktion

Das Projekt enthält vollständige CLI-Integration. Führen Sie alle Befehle innerhalb des Projektstammverzeichnisses aus.

6.1 Projekt-Lebenszyklus-Befehle

Phase	Befehl	Effekt
Initialisierung	`npm run forge -- create --dir <path> --input <Eingabe>`	Erstellt ein neues Projekt im angegebenen Verzeichnis. Ziel muss außerhalb des Template-Verzeichnisses liegen.
Validierung	`npm run validate -- --project <id>`	Überprüft Asset-Vollständigkeit und Korrektheit der `film.json`-Struktur.
G1 Genehmigung	`npm run forge -- approve-design --project <id>`	Zeichnet die G1-Genehmigung auf, nachdem der Benutzer das Storyboard akzeptiert hat.
Sample Render	`npm run forge -- render --project <id> --scope sample`	Rendert die repräsentative Szene für die G2-Überprüfung.
G2 Genehmigung	`npm run forge -- approve-sample --project <id>`	Zeichnet die G2-Genehmigung auf, nachdem der Benutzer die Sample-Szene akzeptiert hat.
Vollbild-Render	`npm run forge -- render --project <id> --scope all`	Rendert das vollständige Video (nur nach bestandenen G1 und G2).
Workbench	`npm run forge -- workbench --project <id>`	Startet die lokale Debugging-Workbench.
Lieferung	`npm run forge -- deliver --project <id>`	Exportiert MP4 + bearbeitbares Projekt + Workbench-Stand.

6.2 Zustandsmaschine (State Machine)

Der Projektfortschritt wird in states/<project-id>.json verfolgt:

{
  "status": "draft | design-approved | sample-approved | completed",
  "g1ApprovedAt": null,
  "g2ApprovedAt": null
}

7. Endgültige Lieferung & Fehlerbehebungs-Checkliste

Bevor Sie das Projekt als abgeschlossen betrachten und dem Benutzer liefern, überprüfen Sie die folgende Checkliste:

Audio-Synchronisation: Alle Voice-Over- und Soundeffekte sind mit der Video-Timeline synchronisiert. Kein störender Lippensynchronisationsfehler oder Beat-Versatz.
Asset-Vollständigkeit: Alle Bilder, Videos, Audiodateien und Schriftarten sind im public/-Verzeichnis vorhanden. Keine 404-Fehler.
Text-Überprüfung: Alle on-screen Texte wurden auf Rechtschreibung und Grammatik geprüft.
Sicherheitszone: Wichtige Inhalte (Text, Logos, Hauptgrafiken) liegen innerhalb der 5% Sicherheitszone des Bildschirmrands.
QR-Code/Gültigkeit: Enthält das Video einen QR-Code? Funktioniert er? Ablaufdatum.
Video-Codec & Auflösung: Ausgabe in H.264/MP4 mit mindestens 1080p (1920x1080) für Querformat oder 1080x1920 für Hochformat.
Audio-Codec: AAC, 48kHz, 192kbps oder besser.
Lieferung: Das endgültige Paket enthält: ausführbare MP4-Datei, bearbeitbares Remotion-Projekt (alle Dateien, package.json) und Workbench-Snapshot. Dem Benutzer den vollständigen Pfad und die empfohlene Anzeigemethode geben.

Ende des Motion Forge Hauptleitfadens

Motion Forge: Code-to-Video (Code2Video) Industrielle Produktio…

Was ist Motion Forge: Code-to-Video (Code2Video) Industrielle Produktio…?

In Ihrer bevorzugten KI fragen

Dokumentation