Motion Craft Pro · 動效工坊 Pro 是做什麼的？

程式化 motion graphics。對標 Claude Opus 5.5 寫程式做片的審美與習慣：先分鏡，再配音，再靜幀，再整段渲染。

不是可靈/即夢那種 AI 生影片。畫面由程式碼在 Canvas 上逐幀畫出來。

先定位技能目錄（每次必做）

engine.js / scenes.js / render.js / compose.py / tts.py / film.html / storyboard.json 全部在本 SKILL.md 同級目錄（扁平，無子資料夾）。

<技能目錄> = 本檔案父目錄的絕對路徑。

# 自檢路徑
python "<技能目錄>/compose.py" --check

禁止依賴相對路徑 python scripts/compose.py——審核環境會找不到。

依賴

依賴	用途
Node 18+	render.js
puppeteer-core	驅動本機 Chrome
Chrome / Chromium	渲染
Python 3.9+	tts / compose
edge-tts	`pip install edge-tts`
FFmpeg 完整版	合成（排除 Playwright 精簡版）

品質條（按這個做，就是「Pro」）

預設 1920×1080（也支援 1440×1080 / 1080×1920 / 1080×1080）
一屏一件事；幕間必須淡出；長 hold，短飛入
Spring 輕微 overshoot（damping≈16–18，禁止滿屏彈性狂歡）
留白：外邊距 ≥ 短邊 8%；正文暖白 #f4f1ea，強調色克制（預設青銅 #c4a574）
標題加字距；層級字號差 ≥ 1.5×
配音先行 + 盡量匯出 WordBoundary 字幕
先匯出 ≥4 張靜幀驗收，再全時長渲染
renderFrame(t) 純函式：禁止 Date.now() / Math.random()

工作流（嚴格按序）

1. 寫分鏡 JSON（先於一切程式碼）

複製 storyboard.json，按 storyboard.schema.json 填：

meta：畫幅、時長、旁白全文、音色
beats[]：id, start, end, type, copy, visual
場景類型：TitleBeat / BulletReveal / StatCounter / CompareBars / QuoteCard / EndCard

數字說話，不寫形容詞。 例：標題 86px、入場 0.9s、hold 2.2s——不要寫「大氣一點」。

2. TTS → 真實時長 → 回寫時間軸

python "<技能目錄>/tts.py" \
  --text-file narration.txt \
  --out "<工作目錄>/voice.mp3" \
  --voice zh-CN-YunxiNeural \
  --rate=-6% \
  --captions-json "<工作目錄>/captions.json" \
  --captions-vtt "<工作目錄>/captions.vtt"

用真實 voice.mp3 時長改 beats[].start/end 與 meta.duration。不要先拍腦袋寫死時間再配音。

字幕說明：若 Edge TTS 返回 WordBoundary 則按字聚合；當前多數中文音色僅有 SentenceBoundary，腳本會按逗號/頓號比例切成短語級 VTT。

3. 填 film.html（或基於模板改）

同目錄引用：engine.js、scenes.js（不要 ../assets/）
把 storyboard 嵌進頁面，或保持與 storyboard.json 同步
呼叫 MCScenes.drawScene(...)；右側裝飾可手寫，但內容盡量走場景元件

4. 靜幀質檢（必做）

先渲染短樣或在瀏覽器拖 t，或先渲 1fps 關鍵點。至少檢查：開場、中段、資料/對比、收尾。

檢查：疊層、溢字、過暗、對齊、字幕可讀。

5. 全量渲染

node "<技能目錄>/render.js" \
  "<工作目錄>/film.html" \
  "<工作目錄>/frames" \
  30 \
  18

6. 合成

python "<技能目錄>/compose.py" \
  --frames "<工作目錄>/frames" \
  --voice-file "<工作目錄>/voice.mp3" \
  --captions "<工作目錄>/captions.vtt" \
  --out "<工作目錄>/out.mp4" \
  --duration 18 \
  --width 1920 --height 1080

可選：--bgm music.mp3（旁白閃避）、--burn-captions、或 --text 讓 compose 內聯 TTS。

7. 讀 qa-report.json + 四張 qa-stills

不過關就改分鏡/排版，重渲——不要硬交。

引擎 API（engine.js）

const {
  Ease, spring, springSeg, seg, lerp, beatAlpha,
  glow, beam, drawBackdrop, createParticles, drawParticles,
  drawGrain, drawVignette, drawColorGrade,
  drawTracked, wrapCN, camera, transition, applyWipe,
  divider, card, ring, bars,
  drawCaptions, captionsFromWordBoundaries, layoutGrid, Palette
} = MC;

const { TitleBeat, BulletReveal, StatCounter, CompareBars, QuoteCard, EndCard, drawScene } = MCScenes;

Spring 建議參數（Claude 審美）

用途	damping	stiffness	overshootClamping
標題入場	16–18	140–160	false（允許極輕回彈）
列表項	18	145	true
數字跳動	14	120	false

畫幅

用途	尺寸
預設橫屏	1920×1080
課件 / 4:3	1440×1080
豎屏	1080×1920
方圖	1080×1080

用 layoutGrid(W,H) 取邊距與雙欄。

交付物

storyboard.json
film.html（可重渲染）
voice.mp3 + captions.vtt / captions.json
out.mp4（1080p 級）
qa-report.json + qa-stills/*.png ≥ 4

邊界

產出 motion graphics，不是實拍，不是擴散模型影片
複雜 3D / 角色表演 / 流體不在範圍內
Edge TTS 不是真人；情感上限有限
完整 Remotion 工程（React 生態、伺服端渲染叢集）不在本包內；本包是可上架的輕量導演棧

Motion Craft Pro · 動效工坊 Pro