rendydev404/motion-reel

motion-reel 是做什麼的？

製作 1920×1080、30 fps 的 MP4 影片，採用編輯風格的 motion-reel 樣式。內建引擎位於 template/ 中。您複製它，撰寫一個設定檔 (src/reel.config.ts)，渲染，檢查畫面，然後傳送影片。

引數：$ARGUMENTS

1. 解讀請求

從引數與對話內容中，找出：

• 主題： 哪個產品或功能。如果您位於其程式碼庫中，請閱讀實際的文案（i18n 檔案、頁面元件、README），讓影片顯示產品的實際功能。
• 顏色：
  • 預設名稱：lime（參考外觀）、coral、ocean、sunset、violet、night（暗色）。
  • 或十六進位值，對應到 accent（螢光筆，最跳的顏色），然後 secondary（次要品牌色），接著可選 paper（背景）和 ink（文字）。
  • 如果只給一種顏色，那就是強調色。
  • 如果專案有品牌標記（例如 globals.css），將它們作為 secondary 提供。
  • 若未提供任何顏色：使用 lime，並在最終訊息中說明。
• 文案語言： 與使用者語言一致（若使用者使用印尼文，則預設為印尼文）。
• 輸出資料夾： 工作階段的暫存區域，除非使用者指定資料夾。切勿將其放在產品儲存庫內，除非使用者要求。

僅在主題不明確時才提問。顏色與持續時間有預設值。

2. 建立專案

cp -r "<此技能的目錄>/template" "<輸出目錄>/reel"
cd "<輸出目錄>/reel" && npm install && npm run sfx

• npm install 大約需要 2 分鐘。若同時有其他工作，可在背景執行。
• 如果產品有 Logo，將其複製到 public/ 並設定 brand.logo 為其檔案名稱。否則設定 brand.initials。

3. 撰寫 src/reel.config.ts

• 設定 theme: makeTheme(presets.coral) 或 makeTheme({ accent, secondary, paper, ink })。其餘 token 會自動衍生。
• 選擇場景。欄位清單、預設持續時間及文案長度限制位於 references/config.md；撰寫文案前請先閱讀該檔案。
• 建議的章節安排（約 45 秒）：spark → word → tagline → bento → checklist → steps → formula → showcase → stats → kinetic → logo。刪除不適合產品的場景。簡短版本（約 20 秒）為 spark → word → tagline → kinetic → logo。
• 事實： 僅顯示產品真實宣稱的內容。切勿捏造「10,000 名使用者」或「99% 正常運作時間」等指標。範例內容（帳戶名稱、範例貼文）應為虛構且明顯通用，絕不能使用真實客戶資料。
• 標題： title.sans 是陳述句，title.serif 是斜體補充說明。mark 是 serif 部分中會加上螢光筆的一個單字。

4. 檢查與渲染

npx tsc --noEmit
npm run render        # → out/reel.mp4，使用 --port=3917
npm run frames        # → out/frames/sheet*.jpg，每 1.5 秒一張

閱讀每張聯絡圖。檢查：

• 文字溢出卡片或畫面
• 元素重疊
• 場景看起來空白
• 螢光筆標記在錯誤的單字上
• 自訂顏色對比度過低（例如淺色強調色放在淺色背景上）

修正設定檔，或必要時修正引擎，然後再次渲染。不要重複渲染。

5. 交付

• 使用 SendUserFile (display: "render") 傳送 out/reel.mp4。
• 回報影片長度、大小、每個場景的一行摘要、使用的顏色，以及設定檔路徑以便後續編輯。
• 清楚地說明音訊並未被聆聽過。僅檢查了時間點與音量。

樣式規則（擴充引擎時適用）

• 色板角色： paper 背景，ink 文字與深色膠囊，accent 僅用於高亮與活動狀態（切勿用於大段文字在背景上），secondary 用於色塊與 Logo 強調字。
• 字體：
  • Inter Tight 800 用於陳述句。
  • Instrument Serif 斜體用於補充說明。
  • Archivo Black 僅用於動態字體單字。
  • JetBrains Mono 13–20px 搭配字母間距用於標籤與 HUD。
• 動態：
  • 進入使用 Expo-out bezier(0.16,1,0.3,1)，移動使用 in-out bezier(0.65,0,0.35,1)。
  • 退出時加速並帶有方向模糊（Smear）。
  • 文字從遮罩中升起（overflow: hidden + translateY）。
  • 數字以垂直模糊滾動（Roll）。
• 轉場： 塗抹淡出/淡入、tagline 後沉浸到 ink、縮放模糊穿越、在動態字體區塊前展開強調色卡片至全畫面、以及動態字體單字間的硬切。無抖動、無白色閃爍。
• HUD： 左上角標籤、右上角時間碼、左下角區塊標籤與進度細線、右下角解析度、角落括號。在有顏色的深色色塊上 HUD 會切換為淺色文字。
• 每個場景 應提供至少 1.5 秒的可讀文字時間。

Remotion 陷阱（從經驗中學到）

• 所有動態必須來自 useCurrentFrame()。CSS 轉場和動畫無法渲染。
• 連接埠 3000 經常被開發伺服器佔用。務必傳遞 --port。
• Remotion 內建的 ffmpeg 缺少 fps 和 tile 濾鏡。請使用 -ss 逐張擷取畫面（scripts/frames.mjs 會處理）。
• React.useId() 包含冒號。在 url(#id) 中使用前請先清除。
• 方向模糊：SVG feGaussianBlur stdDeviation="x y"。CSS blur() 僅能產生均勻模糊。
• 音訊：每個提示一個 <Sequence from> + <Html5Audio>，並將 durationInFrames 設為片段長度。
• color-mix() 和 clip-path: circle() 可在 Remotion 的 Chrome 中運作。