Motion Craft Pro · 动效工坊 Pro は何をしますか？

プログラムによるモーショングラフィックス。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も対応）
1画面1メッセージ；幕間は必ずフェードアウト；長めのホールド、短めのフライイン
Springは微弱なオーバーシュート（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、ホールド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 と4枚の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) を使用してマージンと2カラムレイアウトを取得。

成果物

storyboard.json
film.html（再レンダリング可能）
voice.mp3 + captions.vtt / captions.json
out.mp4（1080p品質）
qa-report.json + qa-stills/*.png ≥ 4枚

範囲外

出力は モーショングラフィックス であり、実写や拡散モデル動画ではありません
複雑な3D / キャラクターアニメーション / 流体は対象外
Edge TTSは人間のナレーターではなく、表現力には限界があります
完全なRemotionプロジェクト（Reactエコシステム、サーバーサイドレンダリングクラスター）は本パッケージに含まれません。本パッケージは出荷可能な軽量ディレクタースタックです。

Motion Craft Pro · 动效工坊 Pro