Claude Code 生成 38 秒 motion design 影片：AI coding 正從做網頁，延伸到逐幀生成可交付視覺內容

Claude Code · Motion Design · Browser Rendering

這個案例的訊號不是「AI 會做影片」這麼籠統，而是 Claude Code 能把影片拆成可程式化的視覺場景：先觀察參考影片，再用 HTML/CSS 重建畫面，最後用 headless browser 逐幀截圖串成影片。

來源與查核

Threads：Sliven 轉述 Claude Code motion design 案例
來源標示：Threads 提到來源為 SammmAing；本次未找到可直接核對的原始 X 貼文或 repo，因此 10 分鐘、38 秒、2,300 幀、60fps、第一次可用等數字皆保留為作者/Threads 宣稱。
驗證標記：Claude Code motion design 38 秒 2300 幀 headless browser HTML CSS

貼文中的工作流

使用者把一則 X 貼文連結貼進 Claude Code，問「這是真的嗎？能不能做出類似的東西」。
沒有額外提供素材、色彩、字型或詳細 prompt。
Claude 先下載/分析參考影片，逐幀理解剪接、構圖與技法。
自行寫出 HTML/CSS scene：模糊圓形背景、有字母的色點、手繪線條圖表等。
在隱形瀏覽器中每幀截圖，約 2,300 幀、60fps，最後串成 38 秒影片。

為什麼這重要

傳統想法	這個案例顯示的新做法
影片生成要靠專用 video model	某些 motion graphic 可用 web scene + browser render 完成。
前端 agent 只能做網頁	HTML/CSS/Canvas/SVG 可以變成影片生成 DSL。
要先寫詳細 prompt	agent 可從參考影片反推視覺語言與節奏。
影片工具鏈固定	可用 headless browser + frame capture + ffmpeg 組自動化 pipeline。

可複製架構

Reference video / link
  → frame sampling & visual analysis
  → scene spec: palette, typography, layout, timing
  → HTML/CSS/SVG/Canvas implementation
  → Playwright / Chromium frame capture
  → ffmpeg encode
  → QA: duration, fps, artifacts, text readability

和 Remotion 的差異：Remotion 是成熟的 React video framework；這個案例刻意不用 Remotion/Hyperframe，代表 agent 可以直接用 browser rendering 拼出結果。但 production pipeline 仍可把同樣思路搬回 Remotion，獲得更好的時間軸、組件化與重現性。

風險與驗收

授權：參考影片只應做風格分析，不能複製受保護素材與商標元素。
重現性：第一次可用不代表每次可用；要保留 scene spec、seed、瀏覽器版本與 ffmpeg 參數。