Bang Motion

Bang Motion 把編碼代理變成動態設計師。大家給一段簡報或品牌說明，它做成一支單一的 index.html，可以是片頭、產品演示、動態字卡或解說，播放方式像影片而不是一頁一頁的投影片。需要成片時可以再逐格輸出 MP4。適合先在瀏覽器裡看動態，再決定要不要進剪輯軟體。

執行環境：Claude Code、Codex

授權 MIT。星數 2,020。最近推送 2026-09-15。快照日 2026-11-11。

這是什麼

Bang Motion 把編碼代理變成動態設計師。成品是一支可播放的 index.html，而不是一頁一頁淡出的投影片。它要求一個連續的世界、會動的鏡頭，以及活在畫面裡的文字，並用選單避免每支片長得一樣。

怎麼運作

1. 先寫風格簡報：概念、結構、配色來源、字體、背景和一個特別的瞬間。
2. 從概念選單挑結構，再寫 HTML。GSAP 和字體從 CDN 載入，用瀏覽器就能看。
3. 可選的 Node 腳本能擷取畫面或配上 ffmpeg 輸出 MP4。
4. 也可以把影片片段當成圖層，時間軸跟成片對齊。

適合誰

• 開場、產品導覽、動態字卡或視覺報導
• 希望成品還是可改的網頁，而不是只剩一支成片
• 使用 Claude Code、Codex，或任何能讀 Agent Skills 的代理

安裝與執行環境

• 執行環境：Claude Code 可用外掛市集安裝；其他代理用手動複製技能資料夾。
• 只看結果時，瀏覽器加上網路就夠，不必 npm install。
• 輸出 MP4 才需要 Node、Puppeteer 與 ffmpeg。生圖或 After Effects 是選用，不是必備。

優點

• 規則寫成代理可以自己檢查的項目，例如文字不要小於 30px、不要整段淡出。
• 風格從品牌推導，範例的顏色和形狀不能直接抄。
• MIT。

限制與授權注意

• 沒有 ffmpeg 時，交付物是可播放的 HTML，不是 MP4。
• CDN 上的 GSAP 與字體需要網路才能觀看。