motion-studio

モーションスタジオ

アニメーションの断片を生成するのではなく、小規模なモーションデザインスタジオとして制作します。すべての動画は、次の工程を経ます。 ブリーフ → コンセプト → ストーリーボード → ビジュアルシステム → 制作 → プレビュー → レンダリング → QC → 修正 → 最終版。 プロンプトから「何かの図形を動かすだけ」の状態へ飛躍してはいけません。

S = このスキルの scripts/ フォルダーです。プロジェクトはユーザーのワークスペース（デフォルトは ./videos/<name>/）に置き、スキル内には置きません。 セッションごとに一度、マシン環境を確認します。python3 $S/detect_env.py を実行してください（Chromium と FFmpeg が必須です。バックエンドも推奨されます）。

1. 理解と計画（3つの独立したレイヤー）

python3 $S/plan.py "<the user's brief, verbatim>"

プランナーはブリーフを、動画タイプ（テンプレート：構成／ビート）、ビジュアルスタイル（見た目）、モーション言語（動き方）に分け、さらにフォーマット、長さ、fps、音声、モード（single | multi | transform | benchmark）も設定します。解決されたスタイルとモーションのブリーフ、および時間指定されたビート構成を出力します。指定されていない項目にはデフォルトが適用され、「適用されたデフォルト」の下に一覧表示されます。その内容をユーザーに伝えてください。誤った推測でレンダリングを無駄にしてしまう場合（例：被写体がまったくない、または必要なブランド名／ロゴが不明）のみ、質問してください。 「サイバーパンク＋シネマティック」「SaaS＋キレのある動き」「グリッチモーションを使ったVHS風ホラードキュメンタリー」のような組み合わせは自動的に解決されます（プライマリスタイルがタイプ／レイアウト／テクスチャを担い、セカンダリスタイルがパレットとムードを加えます。プライマリモーションがイージング／タイミングを担い、セカンダリモーションが独自の要素を加えます）。plan.py --show <id> で、スタイル、モーション、テンプレートの説明を確認できます。

2. コンセプトとストーリーボード（コードを書く前に）

コンセプト（1つの視覚的アイデア／比喩、展開、感情のピークとなる箇所）と、各シーンについて Scene · time · Purpose · Visual · Camera · Animation · Typography · Transition · Audio を記したストーリーボードを作成します。 ルール（詳細は reference/storyboard.md）：

• 曖昧なブリーフの場合は、スライドショーにするのではなく、コンセプトを改善します（冒頭の緊張感 → 変化 → 盛り上がり → 見せ場 → すっきりとした終わり）。
• シーンごとに構図、スケール、密度、カメラ、トランジションを変化させます。scene → fade → scene → fade の繰り返しは避けてください。
• 静止を意図的に使います。重要な瞬間には予備動作と強調を加え、その後に間を置きます。
• 音楽がある場合は、シーンの区切りやアクセントをビートグリッドに合わせます（C.beat(n)）。

3. プロジェクトを制作する

python3 $S/plan.py "<brief>" --scaffold ./videos/<name>      # spec.json + storyboard.md + starter composition.html

スターターを、エンジン（reference/engine-api.md：シーン、レイヤー／奥行き、テキスト、プリセット、カメラ、トランジション、背景、パーティクル、チャート、UI キット、ロゴのリビール、モーフ、音声機能）を使った実際のデザインに置き換え、composition.html に作成します。バリエーションやスタイル変更にも対応できるよう、トークン駆動（var(--accent)、s.bg('auto')、s.enter、'auto' トランジション、size: 'h1'）にします。SVG アセットも同様に、style="stroke:var(--fg)" または currentColor を使います。暗いスタイルで見えなくなる #111 のような固定色は使わないでください。アセットは、ベクターまたはプログラムによる生成（インライン SVG、CSS、canvas）を優先します。イラストの作成には create-svg スキルを利用できます。シーンごとに最もシンプルな技術を選んでください（reference/tool-selection.md）：テキスト、UI、チャートには DOM/SVG、パーティクルやジェネレーティブ表現には canvas、真の 3D にのみ Three.js（python3 $S/vendor.py three <project>）、既存映像の合成には FFmpeg を使います。 リサイズではなく、フォーマットに合わせた構図にします。C.vertical、C.square、C.safe を使います。縦型では、上部中央に大きな文字を配置し、被写体を中央に置き、下部約 20 % には何も配置しません（reference/formats.md）。

4. プレビュー → レンダリング → QC → 修正

python3 $S/render.py ./videos/<name> --stills           # contact sheet of representative frames -> LOOK at it (Read the PNG)
python3 $S/render.py ./videos/<name> --preview          # half-res 15 fps timing check
python3 $S/render.py ./videos/<name>                    # final MP4 + generated music/SFX + automated QC

最終レンダリングでは、16 項目の QC チェックが実行されます（reference/qc.md）：ファイル、長さ、解像度、fps、音声ストリーム、黒いフレーム、フリーズしたフレーム、予期しない急な変化、テキストの切れ／安全領域からの逸脱／小さすぎる文字、フレーム外に出る要素、トランジション、シーンのタイミングと読み上げ速度、効果音キューとの同期と A/V 多重化のオフセット、ラウドネス、最終ファイルの QC コンタクトシート。QC シートの画像を読み、自分で判断してください（視覚的な階層、読みやすさ、リズム、仕上がり）。エラー → 警告 → 視覚上の問題の順に修正し、再レンダリングします。ループは最大約 3 回です。残った問題があれば報告してください。

モード

• マルチバージョン（「同じ動画を3つのスタイルで」）：構成は1つで、スクリプト／シーン／タイミングを固定します。render.py <p> --variants "cyberpunk:cinematic;minimal:calm;vhs:glitch" → スタイルごとのMP4を1本ずつと、横並びの__compare.mp4を出力します。
• スタイルカット（「すべてのスタイルで1つのシーンを」、ローンチ／ティーザー動画）：python3 $S/stylecut.py <p> cuts.json -> シーンをスタイルごとに再レンダリングし、ビートに合わせてカットします（分割画面のグリッドも作成されます）。スタイルに合わせて音楽のジャンルも切り替わります（reference/modes.md）。
• スタイル変換（「もっとシネマティックに」「サイバーパンクに変換して」）：作り直す必要はありません。spec.jsonのstyle／motion（または一度だけ適用する--style／--motion）を変更し、物語、タイミング、アセットは維持します。アセットの変更が必要なシーンだけを編集します。
• ベンチマーク（モデルの比較）：python3 $S/benchmark.py init <id> <dir> → 固定されたspec／タイミング／シードと、プロンプトを記載したBENCHMARK.mdを作成します。benchmark.py run <dir> → スタイルセットをレンダリングし、QC、決定性チェック、スコアカードを実行します（reference/benchmark.md）。
• ミュージックビジュアライザー／リリックビデオ：python3 $S/audio.py --analyze song.mp3 <project> → 音声に反応するシーン向けに、ビート／オンセット／エネルギーを分析します。

音声

音楽と効果音はスタイル／モーションごとに生成され（reference/audio.md）、エンジンのキューと同期します（トランジション、衝撃音、ポップ音、タイピング音は自動でキューに入ります。独自の効果音を追加するにはC.cue(t, type)を追加してください）。音を入れること自体を目的にしないでください。無音の作品にはaudio.music: "none"を指定します。どの動画もミュートで問題なく視聴できるようにしてください（字幕／画面上のテキスト）。ナレーションには録音済みのファイルが必要です（spec.audio.voiceover）。TTSは同梱されていないため、その旨を伝えてください。

納品

最終MP4のパス、クリエイティブ上の判断（コンセプト、スタイル／モーション、近似した箇所など）を2～4行で説明し、QCの状態と次のステップを1つ提示します。求められない限り、コードは貼り付けないでください。

拡張（スタイル、モーション、テンプレート、プリミティブ、トランジション）：README.md + python3 $S/extend.py lint。