AgentMotion — 純コード動画生成統一フレームワーク
「一言」を、すべてコードで描画された MP4 に変換します。このスキルはオーケストレーションレイヤーです：バックエンドの選択、スタイルの選定、ワークフローの実行、品質チェックを支援します。具体的な描画知識は references/ と styles/ にあります。
コア不変条件（全バックエンド共通）
すべてのフレームはフレーム番号の純粋関数：frame = f(t)。 Math.random()（代わりにシード付き乱数）、Date.now()、rAF による状態蓄積は使いません。これが決定論的レンダリング、並列出力、フレーム単位の自己チェックが成立する前提です。これに違反すると、レンダリングとプレビューが一致しなくなります。
第一ステップ：バックエンドの選択（決定木）
| シナリオ | バックエンド | 参照先 |
|---|---|---|
| 短編（≤60秒）、外部素材不要、イラスト/手描き/スタイライズ | 単一ファイル HTML Canvas | references/backends.md §1 |
| データ駆動、バッチパーソナライズ（データ1件につき1本）、字幕/ナレーション焼き込み、3D/チャートコンポーネントエコシステム | React + Remotion | references/backends.md §2 |
| Webページ内で直接再生するインタラクティブアニメーション（MP4不要） | 単一ファイル HTML、HTMLを納品、レンダリングは行わない | references/backends.md §3 |
迷ったら Canvas 単一ファイル：依存関係が最小で、エージェントが一発で正しく書きやすい。
第二ステップ：スタイルの選択
styles/recipes.md（15 種類の商用グレードスタイル：カラーパレット / コア技法 / モーションルール / 注意点）を参照。ユーザーがスタイルを指定できない場合は、選ばせるかテーマに沿って推薦します。異なる2本の動画ではデフォルトで同じビジュアルと楽曲は再利用しません。
第三ステップ：標準ワークフロー（途中で質問を止めない）
- 課題理解：ユーザー入力から動画タイプ（ストーリー/解説/まとめ/ループ/データ動画）、尺（デフォルト 15-20秒）、アスペクト比（デフォルト 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フレーム/秒 のコンタクトシート、カット点で区切り
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 # エンコードパラメータのアサーション
- 目視検査2回（
references/qc.md）：① 絵コンテ適合度——各ショットのアクションのビートでフレームをキャプチャし、絵コンテの行と照合；② ディレクターラウンド——コンタクトシートを確認し、リズム/ショットのバリエーション/デッドフレーム/各アクションに音があるかを評価。最低2ラウンド、修正は該当フレームのみ再レンダリング。 - 納品：MP4 + HTML（HTML はブラウザで直接再生可能）。最後に1〜2文で変更可能項目を提示：スタイル変更、楽曲変更、尺変更。
Remotion バックエンドのレンダリングと検証は npx remotion still → 目視検査 → npx remotion render（references/backends.md §2 参照）。
失敗防止ルール（最も頻度の高い失敗）
- 純粋関数。状態の蓄積は並列レンダリングでのフレームズレを引き起こす。
- 手描き線は「沸騰」させ、「震え」させない：wobble シードは4フレームごとに切り替え（≈7.5回/秒）、毎フレーム切り替えるとノイズのように見える。
- 体は楕円と角丸矩形で描く、多角形が少ないと道路標識のように見える。
- 描画順序は明示的に奥から手前へ、「顔が隠れている」問題の多くは描画順序に起因する。
- テキストは決して重ならない：テキストブロックとキーオブジェクトに占有領域（claim）を設定し、納品前にフレーム単位でレイアウトを確認。
- カット点とアクション点はビートに合わせる、かつラウドネスの急変は ≤+6dB に抑える。そうしないと驚いたように見える（
references/audio.md）。
ファイルマップ
| ファイル | 内容 |
|---|---|
scripts/render.mjs | 決定論的レンダリングコア：MP4 / 静止画 / コンタクトシート、マルチワーカー並列 |
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（あなたのプロジェクトディレクトリにインストール。このスキルのディレクトリではない）。