sangbiaolaoda-arch/remotion-srt-workflow

Remotion SRT Animation Workflow

Turn an SRT transcript (spoken script) into a Remotion-rendered 2D animation video. This workflow was fully validated on a real project with 81 sentences / 193 seconds / 35 scenes (including 12 renders, 11 real bugs caught by verification gates).

When to Use

• The user provides an SRT / transcript / spoken script and wants a "narrated video with visuals"
• An existing Remotion project needs new scenes or scene modifications
• Reviewing the output quality of someone else's Remotion project

Core Principles (Violating These Will Cause Failure)

1. Evidence Boundaries: Do not fabricate executed actions. Conclusions are categorized into three tiers: "Verified Facts / Design Suggestions / Unverified Items".
2. Don't Skip Gates: Each stage ends with a G-gate; do not proceed without user confirmation. User saying "continue" means authorization for the current gate.
3. Do It All at Once: When the user explicitly requests a continuous delivery ("can't you just do it all at once?"), complete all remaining scenes in one go, with verification gates automatically checking — do not split into multiple rounds waiting for confirmation.
4. Frame Determinism: The timeline operates strictly in frames. CSS animation/transition/@keyframes/Tailwind animate-* and setTimeout-driven timelines are prohibited; Random must have a fixed seed.
5. Text Spacing Based on Line Boxes: Chinese fonts (e.g., Noto Serif SC) have line boxes ≈1.44em; text that visually does not overlap may overlap when measured. Leave ≥0.3em margin between text blocks, and ≥1.55em for vertical text spacing.
6. Zero Punctuation in On-Screen Text: Replace SRT punctuation with spaces in the render layer; do not ask the author to modify the source file.

Workflow Overview

Stage	Output	Gate
S0	Feasibility Assessment (grading / technical approach / risk table / briefing gaps), no code or assets	G0 User decides on approach
S1	Project initialization: npm install Remotion ecosystem, fonts in public/fonts/, tsconfig, Root	—
S2	brief.md + beat-sheet.md (sentence→scene, frame boundaries from SRT) + style-guide.md + 3 real styleframe renders	G1 Visual direction
S3	assets.md asset plan (primitive list + parameters + risks; prioritize 100% programmatic SVG, zero outsourced assets)	G2 Consolidated approval
S4	storyboard.md per-scene storyboard (frame boundaries / main visuals / main motion / transition rationale / silence verification anchors)	G3 Consolidated approval
S5	Vertical slice: render 3–4 scenes with highest data density plus keyframe QA	G4 Sample
S6	Full scene rendering (can be done all at once), each scene passes verification gate	—
S7	Full render + five-level verification + delivery	G5 QA → G6

All state files are saved to disk (brief / beat-sheet / style-guide / assets / storyboard / progress / findings), and long-running tasks use files as the source of truth.

Detailed Manuals (Read on Demand)

• references/workflow.md — Operational details per stage, digital recalculation methods, literature verification standards
• references/qa-gates.md — Overlap verification gate principles, blackframe, contact printing, keyframe extraction commands, render range rules
• references/remotion-rules.md — Hard rules for Remotion and real-world gotchas from this project (black frames between scenes, font loading, absolute positioning, etc.)
• assets/OverlapAudit.tsx — Frame-by-frame text overlap audit component, ready to copy into the project and mount at the top level of the main Composition

10-Minute New Project Start

1. npm i remotion @remotion/cli @remotion/bundler react react-dom typescript (+ @remotion/renderer)
2. Chinese font: cp /c/Windows/Fonts/NotoSerifSC-VF.ttf public/fonts/ (variable font single file covers all weights, SIL OFL for commercial use), use staticFile() + FontFace + delayRender/continueRender for local loading, disable online Google Fonts
3. Copy assets/OverlapAudit.tsx to src/audit/, mount at top level of main Composition
4. Build beat-sheet per S2, write frame boundaries into the single source of truth src/acts/acts.ts

Render Commands (Local Verified)

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          # Single frame verification
npx remotion browser ensure                                     # First download Headless Shell

Render speed reference: 1080p complex effects ≈17–27fps (full 5810-frame video about 3–6 minutes).