Remotion SRT 動畫工作流程
將一份 SRT 字幕稿（口播稿）製作成 Remotion 渲染的 2D 動畫成片。本流程在一個 81 句 / 193 秒 / 35 幕的真實專案中全程驗證過（包含 12 輪渲染、11 處被驗算關卡攔下的真實錯誤）。
何時使用
- 使用者提供一份 SRT / 字幕稿 / 口播文案，想製作「配上畫面的解說影片」
- 已有 Remotion 專案，需要續做新幕 / 修改幕
- 審查他人 Remotion 專案的成片品質
核心原則（不遵守必定失敗）
- 證據邊界：不編造已執行的操作。結論分為「已驗證事實 / 設計建議 / 未驗證事項」三類。
- 關卡不跳過：每個階段末尾有 G 關卡，未經使用者確認不推進。使用者回「繼續」= 授權當前關卡。
- 一次完成：使用者明確要求連貫交付時（"你不能一次性做完嗎"），把剩餘幕一次鋪完，驗算關卡自動把關，不要拆成多輪等待確認。
- 幀確定性：時間軸只以幀為單位。禁止 CSS animation/transition/@keyframes/Tailwind animate-*、禁止 setTimeout 驅動時間軸；Random 必須固定種子。
- 文字間距按行盒計算：中文字體（Noto Serif SC 等）行盒 ≈1.44em，視覺上不疊的字量出來可能疊。文字塊間距保留 ≥0.3em 餘量，直排字距 ≥1.55em。
- 畫面文字零標點：SRT 標點在渲染層換成空格，不要求作者修改原始檔。
流程總覽
| 階段 | 產出 | 關卡 |
|---|---|---|
| S0 | 可行性評估（分級 / 技術路徑 / 風險表 / Brief 缺口），不寫程式碼不下素材 | G0 使用者定路徑 |
| S1 | 專案初始化：npm 安裝 Remotion 全家桶、字體放入 public/fonts/、tsconfig、Root | — |
| S2 | brief.md + beat-sheet.md（句子→幕，幀邊界從 SRT 推導）+ style-guide.md + 3 張 styleframe 真實渲染 | G1 視覺方向 |
| S3 | assets.md 素材規劃（圖元清單 + 參數 + 風險；優先 100% 程式化 SVG，零外包） | G2 合併確認 |
| S4 | storyboard.md 逐幕分鏡（幀邊界 / 主視覺 / 主運動 / 轉場理由 / 靜音驗收錨點） | G3 合併確認 |
| S5 | 垂直切片：選取資料密度最高的 3–4 幕真實渲染 + 抽幀 QA | G4 樣片 |
| S6 | 全片鋪幕（可一次鋪完），每幕通過驗算關卡 | — |
| S7 | 整片渲染 + 五級驗證 + 交付 | G5 QA → G6 |
狀態檔案一律寫入磁碟（brief / beat-sheet / style-guide / assets / storyboard / progress / findings），長時間任務以檔案為事實來源。
詳細手冊（按需閱讀）
references/workflow.md— 每階段的操作細節、數字複算方法、文獻核驗標準references/qa-gates.md— 重疊驗算關卡原理、blackframe、接觸印相、抽幀指令、渲染範圍規則references/remotion-rules.md— Remotion 硬規則與本專案實測踩坑（幕間空隙黑幀、字體載入、絕對定位等）assets/OverlapAudit.tsx— 逐幀文字重疊驗算層，可直接複製進專案，掛在主 Composition 頂層
新專案 10 分鐘起步
npm i remotion @remotion/cli @remotion/bundler react react-dom typescript（+@remotion/renderer）- 中文字體：
cp /c/Windows/Fonts/NotoSerifSC-VF.ttf public/fonts/（可變字體單檔案覆蓋全字重，SIL OFL 可商用），使用staticFile()+FontFace+delayRender/continueRender本地載入，禁止線上 Google Fonts - 複製
assets/OverlapAudit.tsx到src/audit/，掛在主 Composition 頂層 - 按 S2 建立 beat-sheet，幀邊界寫入單一事實來源
src/acts/acts.ts
渲染指令（本機已驗證）
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 # 單幀驗證
npx remotion browser ensure # 首次下載 Headless Shell
渲染速度參考：1080p 複雜動效 ≈17–27fps（5810 幀全片約 3–6 分鐘）。