Remotion 影片
使用 Remotion 創作動畫短片（1080x1920）。支援六種影片類型，每種類型皆遵循「先研究、再動畫」的工作流程。
為什麼選擇 Remotion
Remotion 渲染的是程式碼，而非像素。AI 原生理解程式碼——改變一個透明度變數是明確無歧義的，與之相比，決定哪些像素構成「標題」則充滿模糊性。程式碼也帶來了：解析度無關的輸出、可重複使用的元件、即時預覽，以及基於 Git 的版本控制。
前置需求
此技能需要 Remotion 最佳實踐技能。開始之前，請先確認 Remotion 技能是否已安裝於專案中。若未安裝，請引導使用者執行：
npx skills add remotion-dev/skills
詳情請參閱 Remotion 代理技能文件。
類型選擇
根據使用者的輸入決定影片類型：
| 使用者提供 | 影片類型 | 載入參考文件 |
|---|---|---|
| 一個要教授或解釋的主題 | 教育解說 | education-explainer.md |
| 一個產品網址 | 產品展示 + 發佈 | product-demo.md |
| 一個 Google 商家 / 地圖連結 | 客戶推薦 / 社群認證 | testimonial.md |
| 一個頭像影片檔案（9:16） | 頭像 + 動畫疊加 | avatar-overlays.md |
| CSV 或資料檔案 | 資料視覺化儀表板 | data-viz.md |
| 頻道／品牌／社群網址 | 浮動字幕 / 疊加 | lower-thirds.md |
僅載入相關的類型參考文件，以及 defaults.md（共用設定，包含安全區域、字型、動畫規則、視覺風格）。
其他參考文件（依需求載入）
這些檔案並非每部影片都必須使用。僅在情境需要時才載入：
- integrations.md — 當使用者需要 Playwright（網頁爬取）、Lottie 動畫、3D 素材、配音或 AI 生成圖像時載入。部分整合需要 API 金鑰——務必先詢問使用者。
- advanced-patterns.md — 當使用者想要時間軸滑桿、每個合成畫面的控制項、從目錄批次產出多部影片、透明背景渲染、自訂轉場或基於 Git 的儲存工作流程時載入。
通用工作流程
所有類型皆遵循相同的兩步驟模式：
步驟 1：研究 / 爬取 / 分析
根據影片類型收集資訊（研究主題、爬取網站、爬取評論、轉錄影片或分析資料）。呈現發現結果並提出場景大綱。在撰寫程式碼之前，請等待使用者確認。
步驟 2：設計與動畫
獲得批准後，將所有場景建置為 Remotion React 元件。遵循 defaults.md 的動畫規則：
- 使用 Spring 彈性入場（
damping: 200），避免線性運動 - 將相關項目交錯 8-12 幀
- 使用
TransitionSeries搭配 12 幀淡出過場連接場景 - 使用 SVG
stroke-dashoffset實現圖表/流程圖繪製效果 - 使用
interpolate()搭配tabular-nums實現計數動畫 - 在慶祝或結尾時刻加入粒子效果
步驟 3：打磨（選用）
在影片正確播放後，主動提供加入控制項：
- 時間軸滑桿 — 參見 advanced-patterns.md 以在合成畫面中加入即時控制項
- 整合功能 — 參見 integrations.md 以加入 Lottie 動畫、3D 效果、配音等
預覽
建置完成後，啟動 Remotion Studio：
npx remotion studio
設計原則
- 每個場景需要一個清晰的視覺隱喻——圖表、流程圖、圖示、逐步動畫
- 避免文字牆——精簡資訊、優美動態、明快節奏
- Kurzgesagt 遇上 Fireship：將複雜概念以視覺化方式深入淺出
- 預設情況下所有圖形以 SVG 元件建置；Lottie 和 3D 可透過 integrations.md 取得
- 尊重安全區域（參見 defaults.md）——避免重要內容靠近邊緣
致謝
基於 Sabrina Ramonov 的影片提示以及 Remotion AI 影片編輯教學 的製作見解。改編為具備可設定預設值與漸進式揭露機制的代理技能。