reels-motion

reels-motion 是做什麼的？

製作一個垂直貼文（1080×1920，30 fps，約 40–50 秒），風格為「終端機流行」：深色背景搭配網格、單一強調色、大字體逐詞呈現、其中一個關鍵字以彩色色塊標示、一隻像素寵物執行動作、計數器 01 / 04 以及結尾的關鍵字 CTA。

此技能的檔案（相對於此資料夾的路徑）：

• references/motion_system.md：調色盤、字體、動作、轉場、構圖與節奏。設計前務必閱讀。
• template/：完整且可運作的 Remotion 專案（範例「Cartuchos」貼文說明何謂技能）。請以此為基礎，不要從零開始。
• template/README.md：專案結構、指令與設定。

流程

1. 瞭解需求

只詢問缺少的資訊：主題、目標觀眾、帳號 @、CTA 的關鍵字、留言者會獲得什麼、是否需要旁白（以及哪種 ElevenLabs 聲音）與大約長度。

2. 腳本與分鏡（先展示並等待確認後才開始動畫）

• 結構： 鉤子（≤ 2 秒）→ 4 個章節，附 HUD 01–04 → CTA（約 4 秒）。
• 鉤子： 3 段文字，最後一段包含關鍵字色塊，且該段寵物要有動作。
• 旁白句： ≤ 14 個字，口語化且不與螢幕文字雷同。螢幕文字每段 ≤ 6 個字。
• 寵物： 每個章節需要一個能解釋概念的動作（接線、選擇、掃描等），並非裝飾。
• CTA： 「留言 PALABRA 我傳送 X 給你」，關鍵字以強調色色塊呈現。

3. 建立專案

cp -r <此技能的路徑>/template <使用者資料夾>/<貼文名稱>
cd <使用者資料夾>/<貼文名稱>
npm install

請使用者提供一個簡短路徑。在 Windows 上，路徑過長（超過約 200 個字元）會導致 Remotion 使用的 Chrome 無法啟動。

4. 根據主題調整

• src/config/texts.ts： 所有螢幕文字及 BRAND.handle。[palavras] 表示強調色色塊。
• src/config/voiceover.ts： 按場景編寫的腳本，分成多個 blocks（每區塊一句）。
• src/config/theme.ts： 強調色與位置。
• src/scenes/S2…S5： 為「Cartuchos」範例。若為其他主題，請重寫每個章節的動作，重複使用 components/（Headline、Appear、Bit、Cartridge、Terminal、Pill、CommentBar、Transitions、Sfx）與 lib/anim.ts。請維持模式：每個階段以 cue('scene', n, fallback) 開頭，代表該場景旁白的第 n 句起始。
• Bit： src/components/Bit.tsx 中的 MAP 矩陣（16×16）定義其形狀；若帳號有不同寵物，請修改此處。

5. 音效

npm run sfx 會合成 public/sfx/ 中的 .wav 檔案。使用 <Sfx name="…" at={frame} /> 放置音效，並使用與動畫相同的常數。音量與開關設定在 src/config/audio.ts。

6. 旁白（選擇一種方式）

• 自有的 API 金鑰： 在 .env 中設定 ELEVENLABS_API_KEY，VOICE.voiceId 設定聲音 ID，然後執行 npm run voiceover。每個場景會產生一個 MP3，並寫入 src/config/voiceover.generated.ts，內含每句的準確起始時間。
• Claude 的 ElevenLabs 外掛： 使用每個場景的 blocks 合併後的確切文字產生每個場景，並將 MP3 下載至 public/voiceover/<reel>/。此外掛不提供時間戳，因此：
  1. 將每個 MP3 解碼為 WAV（npx remotion ffmpeg -i x.mp3 -ac 1 -ar 16000 x.wav）。
  2. 在 Node.js 中以 10 毫秒視窗測量能量，並偵測 80 毫秒以上的停頓。
  3. 將每句分配給最接近其預期位置（按字元比例計算）的停頓。
  4. 手動撰寫 voiceover.generated.ts，包含 duration（說話結束，不含尾端靜音）與 blockStarts。
• 無旁白： 將 VOICE_TIMINGS 設為 {}，場景會使用每個 cue 中的 fallback。

7. 節奏

每個場景的長度為其句子長度 + 0.2–0.4 秒的呼吸空間，直到下一句旁白：SCENES.x ≈ (說話結束時間 + 0.3 秒) × 30。鉤子 ≤ 2 秒。CTA 在旁白結束後保留約 1.5 秒供閱讀。旁白永遠不會被截斷：每個 MP3 從其場景開始播放，其尾端靜音可與下一場景重疊。若某個動畫顯得擁擠，請簡化動畫，而非加快速度。

8. 交付前檢查

1. npx tsc --noEmit。
2. 渲染關鍵幀（鉤子、每個章節與 CTA）並檢查：文字斷行是否正確、是否有重疊、安全區域（上方 120 像素、下方 340 像素、左右 64 像素）以及 @ 帳號是否單行顯示。
3. 混音： 分別渲染兩條 WAV 音軌（--codec=wav），一條設定 sfxEnabled = false，另一條設定 voiceEnabled = false，並每 0.1 秒比較音量。當有旁白時，音效至少需低 10 dB；若不夠，請在 audio.ts 中降低該音效的增益。Remotion 的 ffmpeg 不包含 volumedetect：請解碼為 WAV 並在 Node.js 中測量。
4. 最終渲染：npx remotion render ReelCartuchos out/<名稱>.mp4。

9. 縮圖與發布

• 縮圖： npm run thumbnail（組合 Miniatura，第 29 幀）。內容必須落在 4:5 裁切範圍內（以及 285–1635）。
• 文字： 提供適用於 TikTok（簡短、CTA、3–5 個標籤）與 Instagram（逐步價值、CTA、最多 5 個標籤）的描述、替代文字，以及針對關鍵字的自動 DM 訊息。

已知錯誤

• Windows 上 Failed to launch the browser process … ENOENT： 路徑過長。請使用較短的資料夾，或加上 --browser-executable=<短路徑>/chrome-headless-shell.exe。
• 第 0 幀縮圖中的標題不可見： 進入動畫從透明度 0 開始。請在第 29 幀渲染縮圖。
• generate-*.ts： 需要 Node 22.18+（原生 TypeScript）。