Remotion SRT 动画工作流

Remotion SRT Animations-Workflow

Ein SRT-Skript (Sprachskript) in einen mit Remotion gerenderten 2D-Animationsfilm verwandeln. Dieser Workflow wurde an einem echten Projekt mit 81 Sätzen / 193 Sekunden / 35 Szenen vollständig validiert (einschließlich 12 Rendering-Durchläufen und 11 echten Fehlern, die durch die Rechen-Gates erkannt wurden).

Wann verwenden

• Der Benutzer übergibt ein SRT / Skript / Sprachmanuskript, um ein "erklärendes Video mit Bildern" zu erstellen
• Ein bestehendes Remotion-Projekt soll um neue Szenen erweitert oder geändert werden
• Qualitätsprüfung der fertigen Filme anderer Remotion-Projekte

Kernprinzipien (Nichteinhaltung führt zum Scheitern)

1. Beweisgrenze: Keine erfundenen ausgeführten Aktionen. Schlussfolgerungen werden in drei Kategorien eingeteilt: "Verifizierte Fakten / Gestaltungsvorschläge / Ungeprüfte Aspekte".
2. Gates nicht überspringen: Am Ende jeder Phase gibt es ein G-Gate; ohne Benutzerbestätigung wird nicht fortgefahren. Der Benutzer sagt "Weiter" = Autorisierung für das aktuelle Gate.
3. Alles auf einmal erledigen: Wenn der Benutzer explizit eine durchgehende Lieferung verlangt ("Kannst du das nicht auf einmal machen?"), werden die restlichen Szenen in einem Durchgang ausgerollt; die Prüfungstors übernehmen automatisch die Qualitätssicherung, nicht in mehrere Runden unterteilt werden.
4. Frame-Determinismus: Die Zeitleiste arbeitet nur in Frames. Kein CSS animation/transition/@keyframes/Tailwind animate-*; keine setTimeout-gesteuerten Zeitleisten; Random muss einen festen Seed haben.
5. Textabstand nach Zeilenbox berechnen: Bei chinesischen Schriftarten (Noto Serif SC usw.) beträgt die Zeilenbox ca. 1,44em; visuell überlappungsfreier Text kann sich tatsächlich überlappen. Textblöcke mit ≥0,3em Abstand; vertikaler Textabstand ≥1,55em.
6. Bildschirmtext ohne Satzzeichen: SRT-Satzzeichen werden in der Rendering-Ebene durch Leerzeichen ersetzt; der Autor muss die Quelldatei nicht ändern.

Prozessübersicht

Phase	Ergebnis	Tor
S0	Machbarkeitsbewertung (Einstufung / Technischer Pfad / Risikotabelle / Brief-Lücken), kein Code, keine Assets	G0 Benutzer wählt Pfad
S1	Projektinitialisierung: npm Install Remotion-Familie, Schriftarten in public/fonts/, tsconfig, Root	—
S2	brief.md + beat-sheet.md (Satz→Szene, Framegrenzen aus SRT abgeleitet) + style-guide.md + 3 echte Styleframe-Renderings	G1 Visuelle Richtung
S3	assets.md Asset-Planung (Liste der Grafikelemente + Parameter + Risiken; priorisiert 100 % programmatische SVGs, kein externer Einkauf)	G2 Zusammenführung bestätigen
S4	storyboard.md Szenen-Storyboards (Framegrenzen / Hauptvisual / Hauptbewegung / Übergangsbegründung / QA-Ankerpunkte)	G3 Zusammenführung bestätigen
S5	Vertikaler Schnitt: Auswahl von 3–4 datendichtesten Szenen für echte Renderings + Stichproben-Frame-QA	G4 Muster
S6	Vollständiges Szenen-Rendering (kann auf einmal erledigt werden); jede Szene durchläuft das Prüfungstor	—
S7	Gesamt-Rendering + Fünf-Stufen-Verifikation + Lieferung	G5 QA → G6

Statusdateien werden immer auf die Festplatte geschrieben (brief / beat-sheet / style-guide / assets / storyboard / progress / findings), lange Aufgaben basieren auf den Dateien als Faktenquelle.

Detailliertes Handbuch (bei Bedarf lesen)

• references/workflow.md — Details jeder Phase, Methoden zur digitalen Neuberechnung, Literaturüberprüfungsstandards
• references/qa-gates.md — Prinzip des Überlappungsprüfungstors, Blackframe, Kontaktabzug, Stichproben-Frame-Befehle, Rendering-Bereichsregeln
• references/remotion-rules.md — Harte Regeln für Remotion und in diesem Projekt getestete Fallstricke (schwarze Frames zwischen Szenen, Schriftarteinladung, absolute Positionierung usw.)
• assets/OverlapAudit.tsx — Frame-für-Frame-Textüberlappungsprüfungsschicht; direkt in das Projekt kopierbar, oben auf den Haupt-Composition-Baum hängen

New Project 10-Minuten-Start

1. npm i remotion @remotion/cli @remotion/bundler react react-dom typescript (+ @remotion/renderer)
2. Chinesische Schriftart: cp /c/Windows/Fonts/NotoSerifSC-VF.ttf public/fonts/ (variable Schriftart, einzelne Datei deckt alle Gewichte ab, SIL OFL, kommerziell nutzbar); mit staticFile() + FontFace + delayRender/continueRender lokal laden; keine Online-Google Fonts
3. assets/OverlapAudit.tsx nach src/audit/ kopieren, oben auf den Haupt-Composition-Baum hängen
4. Gemäß S2 ein beat-sheet erstellen, Framegrenzen in die einzige Faktenquelle src/acts/acts.ts schreiben

Rendering-Befehle (lokal getestet)

npx remotion render src/index.ts Main out.mp4 --codec h264 --crf 18 --frames=START-END --log=error
npx remotion still src/index.ts Main out.png --frame=N          # Einzelframe-Verifikation
npx remotion browser ensure                                     # Erstmaliges Herunterladen von Headless Shell

Rendering-Geschwindigkeitsreferenz: 1080p komplexe Effekte ≈17–27fps (5810 Frames des gesamten Films etwa 3–6 Minuten).