Remotion Video Pro
範圍
此技能掌管使用 Remotion 製作程式化影片所需的一切：
- 專案架設與組合架構
- 基於影格的動畫數學（interpolate、spring、measureSpring）
- 時間設計思維（安全區域、鉤子視窗、時間安排）
- 音訊同步（旁白、字幕、節拍偵測）
- 視覺設計系統（字體、色彩、動畫原則）
- 效能最佳化（memoization、OffthreadVideo、打包大小）
- 渲染管線（Lambda、CloudRun、CI/CD）
- Webhook 驅動的資料影片（CRM → 佇列 → Lambda → S3）
- 大規模批次渲染（10,000+ 個人化影片）
- 組合驗證（pre-commit hooks、CI 閘門）
快速參考
| 問題 | 載入規則 |
|---|---|
| 專案設定、Zod schema、Composition 結構 | 01-scaffolding.md |
| interpolate、spring、轉場、時間安排 | 02-animation-physics.md |
| 行動安全區域、影格時間、自適應版面 | 03-temporal-design.md |
| 旁白同步、字幕、節拍偵測、頻譜 | 04-audio-sync.md |
| 字體、色彩、禁用模式、動畫原則 | 05-anti-slop-aesthetics.md |
| 慢速渲染、memoization、打包大小、Lambda | 06-performance.md |
| 社群、示範、解說影片的現成提示 | 07-prompt-templates.md |
| CI/CD、Lambda、CloudRun、快照測試 | 08-rendering-pipeline.md |
| CRM webhook → Lambda → S3 管線 | 09-webhook-integration.md |
大量渲染扇出、/api/render/batch | 10-batch-rendering.md |
| Pre-commit hooks、CI 閘門、組合 linting | 11-validation-pipeline.md |
黃金法則
- 影格為王。 所有動畫都源自
useCurrentFrame()。不允許 CSS 動畫或計時器。 - 僅限確定性。 不允許
Math.random()。改用 Remotion 的random(seed)。 - Spring 優於 Linear。 預設使用
spring()做動畫。線性動畫顯得機械。 - 所有輸入影片使用 OffthreadVideo。 絕對不要用
<Video>處理 MP4 輸入。 - 非同步資料必須封鎖渲染。 對字體、資料、外部資源使用
delayRender()與continueRender()。 - 每個 Composition 都要有 Zod。 執行時期驗證能防止錯誤屬性導致渲染崩潰。
- 每個場景都要有 React.memo。 不必要的重新渲染浪費時間與 Lambda 成本。
- 提交前務必驗證。 Pre-commit hook 會捕捉所有七大致命錯誤。絕不關閉它。
- 部署前務必測試。 測試框架會在 Lambda 站點建立前執行。錯誤的 Composition 永遠不會到達 Lambda。
- 影片是資料庫中的一行。 大規模個人化影片代表將渲染視為資料管線的輸出。
- 要嘛反濫用，要嘛不做。 預設 Inter 字體、紫色漸層與表情符號圖示一概禁止。絕對。
- 版本化你的 Composition。 部署 v2、測試、啟動它。舊的 webhook 渲染舊版本。絕不影響生產環境。
決策樹
正在製作影片？
├── 社群短影音（TikTok/Reels）→ 載入 03、04、05、07
├── 產品展示 / 解說 → 載入 02、03、04、05
├── 大規模個人化 → 載入 06、08、09、10
├── CI/CD 管線 → 載入 08、11
└── 只需基礎 → 載入 01、02、06、11