AgentMotion — 純程式碼影片生成統一框架
把「一句話」變成一支全部由程式碼繪製出來的 MP4。本技能是編排層：它幫你選後端、選風格、走流程、過品檢；具體繪製知識在 references/ 與 styles/。
核心不變量（所有後端共用）
每一幀都是幀號的純函數：frame = f(t)。 不用 Math.random()（用種子隨機）、不用 Date.now()、不用 rAF 累積狀態。這是確定性渲染、平行出幀、逐幀自檢能成立的前提。違反它，渲染和預覽就會對不上。
第一步：選後端（決策樹）
| 場景 | 後端 | 參考 |
|---|---|---|
| 短片（≤60s）、零外部素材、插畫/手繪/風格化 | 單檔案 HTML Canvas | references/backends.md §1 |
| 數據驅動、批次個人化（一條數據一支片）、字幕/旁白燒錄、3D/圖表元件生態 | React + Remotion | references/backends.md §2 |
| 網頁裡直接播放的互動動畫（不需要 MP4） | 單檔案 HTML，交付 HTML 而非渲染 | references/backends.md §3 |
拿不準就選 Canvas 單檔案：依賴最少、agent 最容易一遍寫對。
第二步：選風格
查 styles/recipes.md（15 種商用級風格：調色盤 / 核心技法 / 運動規律 / 避坑）。用戶說不出風格時，讓他挑或按主題推薦；兩支不同的片子預設不複用同一套視覺與配樂。
第三步：標準工作流（不要中途停下問）
- 讀題：從用戶輸入推斷片型（故事/講解/盤點/循環/數據片）、時長（預設 15-20s）、畫幅（預設 1920×1080；數據分享片用 1080×1920）。字幕語言跟隨用戶輸入語言。
- 分鏡：先定 BPM 與段落數據（
SECTIONS/SHOTS/EVENTS），畫面與配樂都讀同一份時間數據，音畫天然對齊（references/storyboard.md）。 - 搭骨架：從
templates/starter.html複製（Canvas 後端），替換調色盤與世界繪製。保持契約：頁面暴露window.C2V = { fps, frames, width, height, draw(frame) }，draw是純函數。 - 自檢後渲染（順序不能反）：
node scripts/render.mjs film.html sheet.jpg --sheet 1 # 1幀/秒 拼圖， stepping off cuts
node scripts/render.mjs film.html still.png --stills 0,90,300 # 指定時刻靜幀
node scripts/env-check.mjs # 環境體檢
node scripts/render.mjs film.html out.mp4 --audio music.mp3 # 全片渲染（可選配樂）
node scripts/probe.mjs out.mp4 1920x1080 30 # 斷言編碼參數
- 目檢兩輪（
references/qc.md）：① 分鏡符合度——在每個鏡頭的動作節拍處截幀，對照分鏡行核對；② 導演輪——看 contact sheet，評節奏/景別多樣性/死幀/每個動作是否有聲音。至少兩輪，改哪幀只重渲哪幀。 - 交付：MP4 + HTML（HTML 可在瀏覽器直接播放）。結尾一兩句提供可變更項：換風格、換配樂、改時長。
Remotion 後端的渲染與驗證用 npx remotion still → 目檢 → npx remotion render（見 references/backends.md §2）。
防翻車規則（最高頻失敗）
- 純函數。任何狀態累積都會導致平行渲染錯幀。
- 手繪線條要「沸騰」不要「抖動」：wobble 種子每 4 幀一換（≈7.5 次/秒），每幀一換讀起來是雜訊。
- 身體用橢圓與圓角矩形，少用多邊形讀起來像路牌。
- 繪製順序顯式從後往前，多數「臉被擋住」是畫序問題。
- 文字永不碰撞：給文字塊與關鍵物體佔位（claim），交付前逐幀查版面。
- 切點與動作點落在節拍上，且響度跳變 ≤+6dB，否則讀起來像驚嚇（
references/audio.md）。
檔案地圖
| 檔案 | 內容 |
|---|---|
scripts/render.mjs | 確定性渲染核心：MP4 / 靜幀 / contact sheet，多 worker 平行 |
scripts/env-check.mjs / probe.mjs | 環境體檢 / MP4 編碼斷言 |
templates/starter.html | 幀=f(t) 骨架：契約、種子隨機、緩動、相機、節拍 |
styles/recipes.md | 15 種風格程式碼級配方 |
references/*.md | 工作流 / 分鏡 / 技法 / 品檢 / 配樂 / 後端選型 |
examples/hello-drop.html | 可立即執行的最小範例 |
依賴
Node 18+、ffmpeg（PATH 可達）、Chrome 或 Edge；npm i playwright-core（在你的專案目錄裝，不是本技能目錄）。