輪播動畫-MP4

輪播 → 動畫 MP4

此技能重複使用 instagram-carousel 技能（必須安裝於 ~/.claude/skills/instagram-carousel；以下簡稱 <ic>）。 最終產出為 MP4，而非 PNG。

工作流程

1. 照常製作輪播：遵循 <ic>/SKILL.md 的步驟 1 到 4（簡報、原型、視覺系統、腳本與 HTML）。所有規則皆適用：投影片間的連續性、新字體、2+1 配色方案與設計審查。

   • 在設計前務必詢問方向，即使要求中未提及（以多選題方式提問）：

     • 垂直：Reels/限時動態 9:16 (1080×1920，--reels) 或動態消息 4:5 (1080×1350，無標記)；
     • 水平：16:9 (1920×1080，--landscape)，用於 YouTube、網站或螢幕。

     方向會改變整個構圖（網格、尺寸、安全區），因此切勿預設選擇。水平方向僅在動態圖形模式下有效。

   • 同時詢問風格：投影片（自動編排：投影片間鏡頭移動）或動態圖形（動態排版與多樣過場，使其不像投影片）。若使用者表示結果「看起來像投影片」或要求更動態的內容，則使用動態圖形。詳見 references/motion.md。

   • 以及音效：內建效果（預設）、Openverse 效果、Openverse 音樂、使用者自訂檔案，或無音效。

2. 閱讀 <ic>/references/video.md：關於編排、使用 data-anim/data-delay 控制動畫、音效與檢查事項。
3. 視需要在 HTML 中調整編排。動畫會自動產生，但 data-anim 與 data-delay 可讓您微調關鍵時刻。
4. 在完整影片前以靜態畫面快速檢查：

   node <ic>/scripts/video.mjs <output>/carousel.html <output>/carousel.mp4 --stills=0.6,1.5,3,4.2,6
   

   開啟 <output>/carousel-stills/ 中的 JPEG 檔案，確認每個入場結束時沒有任何內容被裁切、重疊或隱形。
5. 音效（選用，詳見 video.md › 音效）：
   • Openverse：node <ic>/scripts/sounds.mjs search "whoosh" --type=sfx。向使用者顯示選項，並經其許可後執行 node <ic>/scripts/sounds.mjs download <id> <output>/sounds/whoosh-1.mp3。
   • 檔案名稱設定用途：whoosh*（過場）、pop*（貼紙/藥丸按鈕）、hit*（標題）。每種類型使用多個檔案（whoosh-1.mp3、whoosh-2.mp3……），使過場音效不總是相同；它們會輪流播放，不會重複。音樂則單獨放置。
   • 若無檔案，內建效果本身已具備多樣性（5 種 whoosh、3 種 pop、3 種 hit，附隨機音高與長度）。
6. 渲染 MP4：

   node <ic>/scripts/video.mjs <output>/carousel.html <output>/carousel.mp4 [--reels] [--sfx=<output>/sounds] [--music=<output>/sounds/music.mp3]
   

   無需 ffmpeg：它使用 Chrome（GSAP + WebCodecs）。20–30 秒的影片約需 30–60 秒渲染。若時間較長，可在背景執行。
7. 交付：
   • carousel.mp4（H.264 + AAC，可直接用於 Instagram/Reels）
   • caption.txt（說明文字、Hashtag、關鍵字）
   • 備註：長度、格式、使用的音效（及其來源，來自 sounds/sound-sources.txt）以及仍待替換的佔位符

除非使用者要求，否則不要交付 PNG。若對方要求，則使用基礎技能中的 render.mjs。