動態圖形工作室
影片從程式碼渲染而成：一個包含純 seek(t) 的 HTML 頁面，透過 Playwright 逐幀拍攝，並以 ffmpeg 編碼。文字、UI、圖表、圖解與動畫始終是程式碼。 AI 模型提供插圖、實拍畫面與配音（references/ai-assets.md）。
階段閘門（切勿跳過；每個 ✋ 處需獲取核准）
- 簡報：目標、受眾、平台/格式、長度、語言 + 方言、行動呼籲、品牌、是否配音、事實。選擇類型（
references/genres.md）；它設定結構、能量預設與鉤子。 - 概念 ✋：三個截然不同的點子，每個一行加上其鉤子。使用者選一個。
- 腳本 + 故事板 ✋：節拍表（每個場景一個訊息，鉤子 ≤ 1.5 秒）、風格聖經與主要素材（GenerateImage →
cut2.py）。將場景建置為樣式影格，然後執行node scripts/storyboard.mjs film.html storyboard/name --template templates/storyboard.html --title "…"即可獲得由影片本身製作的 html/png/pdf/json（references/storyboard.md）。在故事板獲核准之前，不得進行完整動畫。 - 動畫草稿 ✋：執行
node scripts/render.mjs film.html checks_layout.txt --check必須得到 0 個版面問題、0 個遺漏提示與 0 個頁面錯誤。然後製作一個 30 fps 無模糊的草稿（render_chunks.mjs film.html out_draft 30 1）並加入音效混音，以供時間節奏審查。 - 最終輸出：
render_chunks.mjs film.html out 60 4→sfx.mjs→mix.sh→export.sh→qa.sh處理主檔 與 社交檔案。然後查看接圖表與轉場表（references/render-qa.md）。此後僅進行範圍限定的修訂：只更改被要求的內容。
硬性規則（每一條都來自真實失敗的教訓）
- 雜訊是靜態的：一次種子圖塊繪製完成，絕不每幀重新隨機化。閃爍測試必須通過。
- 預設無音樂：動作同步音效 + 配音。僅在要求時加入音樂，且需取得授權（
references/sound.md）。 - 單一動畫系統：持續時間僅來自
ENERGY標記。彈簧 z ≥ 0.78（超調 ≤ 2%），無抖動，類型上無彈跳，長距離移動使用弧線，每次狀態變化時交叉淡變（references/motion-system.md）。 - 使用分塊渲染器渲染（
render_chunks.mjs）：每個分塊使用全新瀏覽器，支援重試，並可透過重新執行相同指令恢復。對於超過約 20 秒的影片，絕不使用單一長時間單進程渲染。 - 正確轉寫：
align.py（large-v3，VAD 開/關傳遞，間隙傳遞，強制對齊腳本）→words.json。絕不使用單一 Whisper 傳遞。 - 字幕屬於其場景：它們隨場景一起清除與推動，並使用場景的顏色。一個元素在口語詞彙前後 ±2 幀內達到 80% 的不透明度。
- 風格：插圖風格，角色前後一致（一張參考圖 → 所有姿勢）。科技解說影片使用概念視覺（流程圖、圖表、表格、比較、時間軸），根據每個口語短語規劃，而非裝飾性素材。
- 兩個輸出：60 fps 主檔 + 30 fps 手機/社交檔案。以附件形式發送。只有在使用者明確同意下，才提供直接下載連結、上傳或發布。
- 長片（3–10 分鐘）：規劃章節、場景數量（約每 4–7 秒一個場景）、節奏變化循環與視覺變化，每個章節一個頁面（
references/genres.md→ 長片）。 - 保持套件分離：scripts/、references/、templates/。不要長成一個巨大的檔案。
此外：阿拉伯語僅以整個單詞為單位進行動畫（references/arabic-rtl.md）· 畫面中不得有 AI 生成的文字 · 虛構產品、價格與評分需標示為 SAMPLE · 事實僅來自使用者 · 主要元素佔畫面 60–70% · 廣告中至少使用 3 種不同的轉場，從不連續重複相同轉場（references/transitions.md）· 無超過 1 秒的靜音。
預設值（說出你的選擇）
社交平台使用 9:16 1080×1920，網頁/YouTube 使用 16:9 · 廣告與限時動態使用能量 ad，配音解說使用 explainer，奢侈品/長章節使用 calm · 60 fps 主檔 + 30 fps 社交檔案 · −14 LUFS，真實峰值 ≤ −1.5 dBTP · 音效 + 配音，無音樂 · 靜態雜訊 0.06 · 插圖扁平風格，一種強調色，Noto Kufi Arabic / Cairo + Figtree。
設定
所有 scripts/、templates/ 與 references/ 路徑均相對於此技能本身的資料夾（即存放此 SKILL.md 的資料夾，無論安裝在何處：.claude/skills/motion-graphics、.agents/skills/motion-graphics、~/.cursor/skills/motion-graphics……）。將此資料夾稱為 $SKILL_DIR，並從專案資料夾執行指令，例如 node "$SKILL_DIR/scripts/render.mjs" …。在 $SKILL_DIR 內執行一次 npm i。
npm i（Playwright），然後執行一次 npx playwright install chromium。您還需要 ffmpeg/ffprobe、Python 3 與 numpy/scipy/pillow（品質檢查、cut2），以及用於 align.py 的 pip install faster-whisper。
工作範例（位於 GitHub 倉庫 mr0ibrahim/motion 的 examples/ 下，安裝時不會複製）：demo-ar/（一個 13 秒的海灣阿拉伯語應用程式廣告：RTL 動態文字、AI 角色、視差、鏡頭推近、縮放/推近/圓形/分割）· demo/（一個 10.5 秒的英語 SAMPLE 廣告）。