YYL Remotion 影片

YYL Remotion 影片 是做什麼的？

將文章、劇本、筆記或明確的大綱轉換成 Remotion 影片專案。 此技能以影片為優先：不包含點擊驅動的網頁播放器、沒有網頁 presentation/ 資料夾，也不在此工作流程中進行語音合成。

核心輸出

my-video/
├── article.md
├── script.md
├── outline.md
├── notes.md
└── remotion/
    ├── src/Root.tsx
    ├── src/Composition.tsx
    ├── src/chapters/<NN>-<id>/
    │   ├── <Chapter>.tsx
    │   ├── narrations.ts
    │   └── timing.ts
    ├── public/assets/
    ├── preview-stills/
    └── out/

內建技能資源：

themes/       # 色彩 / 字型系統
templates/    # 可複製的 Remotion TSX 起點
references/   # 製作手法、主題與模板指南

執行強度

在開始寫入檔案前決定：

強度	使用時機	行為
快速	少於等於 450 個中文字元、少於等於 60 秒、主題測試、草稿示範	1 個章節、少數片段、直接實作
標準	1-4 分鐘、一般可發布的解說影片	劇本 + 大綱、先以第一個章節定錨，再繼續
嚴格	超過 4 分鐘、品牌/商業/高風險內容	更完整的規劃、更多靜態檢查、更慢的章節審查

以一行回報：

我將使用 <快速/標準/嚴格> 因為 <長度 / 風險 / 目標>。

工作流程

1. 輸入關卡

   • 僅在使用者提供原始文字、劇本、筆記或明確大綱時才繼續。
   • 如果使用者只給主題，要求提供素材。請勿憑空製作完整影片。

2. 內容檔案

   • 當有提供原始素材時，儲存至 article.md。
   • 將最終口述文字儲存至 script.md。
   • 將開發計畫儲存至 outline.md。
   • outline.md 規劃章節、片段、畫面內容、資訊池、素材。
   • outline.md 不指定確切的動畫實作方式。

3. 主題選擇

   • 僅使用此技能內建的主題：themes/command-film、 themes/studio-white、themes/research-desk。
   • 請勿從 web-video-presentation 重複使用或匯入主題。

4. 模板選擇

   • 如果使用者詢問已知的版面配置或動畫機制，請閱讀 references/TEMPLATES.md。
   • 對於奢華暗色作品集、3D 透視水平輪播或高階代理商畫廊需求， 使用 templates/luxury-perspective-gallery。

5. Remotion 專案

   • 如果已有 remotion/ 則重複使用。
   • 僅在缺少時才建立：

     npx create-video@latest --yes --blank --no-tailwind remotion
     

   • 如果選定的模板需要 Tailwind，請在建立專案時啟用 Tailwind 支援， 或在複製模板檔案前加入 Tailwind。
   • 僅在 remotion/node_modules 遺失或 Remotion 指令因缺少相依套件而失敗時，才安裝相依套件。

6. 時間設定

   • 不進行音訊合成。
   • 根據旁白長度與視覺複雜度估算持續時間。
   • 預設 fps = 30、width = 1920、height = 1080。
   • 將文字儲存在 narrations.ts；將估算的 durationFrames 儲存在 timing.ts。

7. 實作

   • 在每個章節開始前先閱讀 references/REMOTION-CRAFT.md。
   • 使用 useCurrentFrame()、interpolate()、Easing 及 Sequence 進行動畫。
   • 請勿使用 CSS transition / CSS animation / GSAP 作為主要動畫方式。
   • Tailwind 可用於設定靜態佈局樣式，但不允許使用 Tailwind 動畫工具類別。

8. 驗證

   • 執行：

     cd remotion
     npm run lint
     

   • 每個章節至少渲染一張靜態圖，或為簡短的完整影片渲染 2-4 張靜態圖：

     npx remotion still <composition-id> --frame=<幀數> --scale=0.5 --output=preview-stills/<名稱>.png
     

   • 當靜態圖看起來正確時，渲染 mp4：

     npx remotion render <composition-id> out/<名稱>.mp4
     

9. 備註

   • 在 notes.md 中記錄 fps、解析度、總幀數、估算長度、 已檢查的靜態圖、已渲染的 mp4 路徑，以及音訊與字幕為後製項目。

主題選擇

主題	最佳用途	感覺
command-film	代理、終端機、自動化、開發者工具	暗色電影風格的指令室
studio-white	SaaS 展示、產品發表、課程、產品教學	潔淨的白色產品工作室
research-desk	文章、報告、論文、商業分析	冷靜的分析桌面

完整的主題說明請閱讀 references/THEMES.md。

模板選擇

模板	最佳用途	感覺
luxury-perspective-gallery	高階作品集、產品展示、3D 水平輪播	暗色極簡格風格的代理商滑塊
charity-doodle-poster	非營利海報、手繪動物英雄、線條跳動編輯網頁效果	復古墨水筆觸的停格動畫海報

完整模板說明請閱讀 references/TEMPLATES.md。

Remotion 規則

• 在 Root.tsx 中使用 Composition。
• 使用 Sequence 將片段放置到時間軸上。
• 使用 useCurrentFrame() + interpolate() 製作動畫。
• 將靜態素材放在 remotion/public/assets/；使用 staticFile() 引用。
• 在最終渲染前必須進行靜態檢查。
• 最終的 mp4 為無聲，除非使用者在後製階段另行提供音訊。