claude-motion-design

claude-motion-design 讓 Claude Code 用 HTML、Playwright 和 ffmpeg 做動態設計影片，不經過 After Effects，也不使用 Remotion。每一格由時間算出來，並對上音樂的拍點。輸入是品牌資料和想要的影片，輸出是一支 MP4。大家可以用它精修一…

claude-motion-design 讓 Claude Code 用 HTML、Playwright 和 ffmpeg 做動態設計影片，不經過 After Effects，也不使用 Remotion。每一格由時間算出來，並對上音樂的拍點。輸入是品牌資料和想要的影片，輸出是一支 MP4。大家可以用它精修一支發布片，而且同一段改動能得到同一組畫面。

執行環境：Claude Code

授權 MIT。星數 810。最近推送 2026-10-04。快照日 2026-11-11。

這是什麼

claude-motion-design 讓 Claude Code 用 HTML、Playwright 和 ffmpeg 做動態設計影片，不經過 After Effects，也不使用 Remotion。範例是一支 24 秒、每秒 60 幀、帶動態模糊的發表片。

claude-motion-design 的 Howseen 發表片預覽動圖。

怎麼運作

  1. 把 skill/motion-design 複製到 Claude Code 的技能資料夾。
  2. 在對話裡要一支影片，或輸入 /motion-design。
  3. 範例專案先下載免費音樂、音效、標誌和字體，再用本機網頁伺服器播放。
  4. render.py 先出靜幀，再渲染完整 MP4；audio.py 依峰值混音並調到 -14 LUFS。

適合誰

  • 想用程式做一支短動態，而不是打開剪輯軟體
  • 使用 Claude Code
  • 可以接受成品來自 HTML 逐幀渲染

安裝與執行環境

  • 執行環境：Claude Code。README 的安裝路徑是 ~/.claude/skills。
  • Python 需要 playwright、imageio-ffmpeg、numpy、pillow，以及 Playwright 的 Chromium。
  • 範例的音樂和字體由 fetch_assets.py 下載，各自保留 Mixkit、Pexels、Unsplash 或字體授權。沒有必填的付費 API。

優點

  • 不依賴 Remotion 或 After Effects。
  • 先出靜幀再渲染全片，方便檢查。
  • 程式是 MIT。

限制與授權注意

  • 第三方素材不在倉庫裡，要自己下載並遵守那些授權。
  • 品牌標誌屬於原品牌。
  • 安裝說明只寫 Claude Code。

創作邦載入中