twodorz/motion-studio

Motion Studio

短編フィルム（通常9:16 1080×1920のリール、16:9 / 1:1 / 4:5も対応）をコードだけで制作します。

• ピクチャー。 HTMLページ（comp.html）の window.renderAt(t) が、時間 t の正確なフレームを描画します。
• キャプチャ。 ヘッドレスChromiumが全フレームをキャプチャし、ffmpegがエンコードします。
• サウンド。 同じタイムラインからPythonでシンセサイズ：音楽、効果音、アンビエンスを−14 LUFSにマスタリングします。
• 3D（オプション）。 ショットは小型のGPUパストレーサー（pt.js）から生成され、ソフトライト、リアルな反射、被写界深度、モーションブラーを備えます。

視聴者が見るすべては t の純粋関数です。これによりレンダリングが再現可能で、シーク可能、再開可能になります。

リクエストが既存動画の編集、キャプション追加、圧縮、色補正、またはスライドやウェブアニメーションの作成である場合は、このスキルは適切なツールではないと伝え、代わりに直接支援してください。提供された映像素材（イベント、DJ、前回のパーティー）からのプロモーションカットは対象範囲内です：templates/footage/ と references/footage-promos.md を使用してください。

このスキルに含まれるもの

パス	内容	読むタイミング
references/setup.md	スタジオの初期セットアップ（Node、ffmpeg、Playwright、Python venv、GPUチェック）	マシンでの初回使用時
references/render-pipeline.md	レンダリング契約、render.mjs モード、チャンクレンダリング、ffmpegの注意点、決定論性、コンタクトシート	フィルムの構築またはレンダリング時
references/design-rules.md	実際のクライアントフィードバックから学んだストーリーテリング、レイアウト、タイポグラフィ、モーション、トランジションのルール；監査	ストーリーボード前と各レビュー前
references/sound.md	イベント駆動型のスコア＋サウンドデザイン、ミックスターゲット、測定、ラウドネス仕上げ	オーディオ作業時
references/path-tracer-3d.md	3Dパストレーサー：セット、マテリアル、ライト、正確な寸法でのプロダクトモデリング、カメラ、マッチカット、コスト	フィルムに3Dシーンが必要な場合のみ
references/claims-and-sources.md	事実を正確に：公式ソース、CLAIMS.md、絶対に主張してはいけないこと、安全なウェブサイトキャプチャ	製品事実、価格、仕様、クライアントブランドを含むフィルム
references/footage-promos.md	提供された映像素材からのイベント/クラブ/アーティストプロモ：クライアントの要望、ビートグリッド音楽、DJトランジション、顔のフレーミング、グラフィック技法	実映像からプロモを制作する場合
templates/film/	完全な動作する2Dリール（15秒、キネティックタイポ、プロダクトカード、カウンター、チャート、CTA）＋レンダリング、サウンド、仕上げスクリプト	すべての2Dフィルムをここから開始
templates/film-3d/	パストレーサー＋サンプルセット（スタジオ、部屋、家）＋動作する3Dフィルムとルックデブツール	3Dフィルムをここから開始
templates/footage/	映像プロモパイプライン：ビートグリッド上のショットリスト（カット、グリッド、分割、ストリップ、ランプ、アイリス）、顔のフレーミング、測定BPM/キックフェーズ/ドロップ、DJトランジション、グラフィックツールキット（タイプマット、人物後ろテキスト、ティッカー、光学センター）＋サンプル	すべての映像プロモをここから開始
scripts/setup_studio.ps1 / .sh	スタジオフォルダを作成し、すべてをインストール（ダウンロード前に確認）	初回使用時
scripts/new_film.mjs	テンプレートを <studio>/films/<name> にコピー	新しいフィルムごと

ワークフロー

以下の手順を順番に実行してください。各手順は、一度でもスキップするとクライアントからの修正が入った経験に基づきます。

1. ブリーフィング。
   • 長さ、フォーマット、fps（デフォルト30；PAL編集者向けは25）、言語、CTA、投稿先を取得します。
   • ブランドファイル（ロゴSVG/PNG、フォント、カラー、既存投稿）を依頼します。ない場合は、クライアントのサイトからブランドを読み取ります。
   • 相手が「全力でやって」と言っても、製品や主張を変更するものは必ず確認します。ペースとスタイルはあなたの判断に委ねられます。
2. リサーチと事実（references/claims-and-sources.md）。
   • コピーを書く前に、すべての数字と主張を公式ソースから CLAIMS.md に収集します。
   • ソース間で矛盾がある場合は、数字を省いてその旨を伝えます。広告の間違った仕様は、仕様がないより悪いです。
3. ビートグリッド上のストーリーボード。
   • 長さがビートの整数倍になるBPMを選びます（例：30秒 = 96BPMで48ビート；15秒 = 120BPMで30ビート）。
   • すべてのシーンチェンジ、キャプション、サウンドイベントをそのグリッド（bar(n, beat) / bt(b)）に配置します。
   • ストーリーボードを短い表（ビート→ピクチャー→テキスト→サウンド）として書き、リーチ可能な相手なら構築前に共有します。
4. スキャフォールディング。 node <skill>/scripts/new_film.mjs <studio> <name> [film|film-3d|footage] を実行し、その後 comp.html（2D）、film.js + world.js + comp.html（3D）、または sources.json + edit.json + comp.html（映像；references/footage-promos.md に従う）を編集します。
5. 小さなループで構築。 低品質でコンタクトシートをレンダリング（node render.mjs beats 0.5,4,8,… 0.25 sheet）して確認します。修正、再シート。1フレームだけでモーションを判断しないでください。最終レンダリング前にフィルム全体の各ビート（または半ビート）をシート化します。
6. 監査（node render.mjs audit 0.25）。テキストが製品や他のテキストと重なってはならず、プラットフォームのセーフエリア内に収まる必要があります。すべての違反を修正し、監査と議論しないでください。
7. サウンド。 python audio.py out/mix.wav out/stems を実行し、次に python check.py：セクションごとのラウドネス、スペクトラム、サイレン/グライドテスト、クリック。
8. 最終レンダリング。まず許可を得る（「レンダリングエチケット」を参照）。
   • 2Dフィルムは数分：node make.mjs frames + encode。
   • 3Dフィルムは数時間：node render.mjs chunks + concat。
9. 仕上げ。 node make.mjs finish でラウドネス正規化（−14 LUFS、−1.5 dBTP）、ピクチャーにマルチプレクス（ピクチャーがマスタークロック、決して -shortest は使わない）、軽量な -share コピーを出力します。出力のフレーム数、長さ、ラウドネスを確認します。
10. 最終ファイルをレビューし、コンポジションはレビューしない。 エンコードされたmp4からフレームを抽出（0.5秒ごと）してシート化し、すべてを確認します。その後、簡単なメモ（クライアントの言語に応じてルーマニア語または英語）を添えて納品します：内容、事実の出典、クライアントが確認すべき項目。

レンダリングエチケット（相手のコンピュータは相手のもの）

3DレンダリングはGPUを1時間以上100%使用し、マシンが遅くなります。何百ものフレーム画像を書き込むと、Windows Defenderがすべてのファイルを再スキャンします。かつて誰かが「やめて、PCが焼ける」と叫んだことがあります。そのため：

• マシンに数分以上の負荷をかけるジョブの前には、それが何か、どれくらい時間がかかるか、どのような体感になるかを伝え、承諾を待ちます。 以下を提案します：
  • ジェントルモード（NICE_MS=25 DUTY=.35）：GPUパス間に休止を入れ、デスクトップが使用可能な状態を保ちます；
  • フルスピード；
  • 後で / 夜間。
• render.mjs chunks を優先（1秒単位のmp4チャンク、再開可能）し、すべてのフレームをPNGとして書き込まない。
• 長時間レンダリングはデタッチドプロセスとして起動し、チャットを閉じても途中で止まらないようにします（Windows：Start-Process node -ArgumentList 'render.mjs','chunks' -WindowStyle Hidden）。
• 止めるよう指示されたら、即座に止めます。 プロセスツリーを強制終了（Windows：taskkill /T /F /PID …）、プロセスリストで何も残っていないことを確認し、まだマシンを使っているもの（例：Defenderが書き込んだファイルをスキャン中）を言い訳にせず伝えます。
• 短いシートや単一テストフレームは許可不要です。 数秒で終わります。

絶対条件（それぞれ一度は修正が入った経験に基づく）

• renderAt(t) は純粋であること。
  • フレーム間で状態を保持しない、Math.random() を使用しない（シード付きmulberry32を使用）、CSSトランジションやアニメーション、タイマーを使用しない。
  • node render.mjs verify でフレームを順序通り・ランダムにレンダリングし、一致することを確認。
• すべてのフォントウェイトをフレーム0の前にロード（使用する各フェイスに対して document.fonts.load）。フィルム途中で初めて使用されるフェイスは、1フレームだけ見えなくなる。
• 2つのテキストブロックが重なる、またはテキストが製品を覆うことを絶対に避ける。
  • 出ていくタイトルは、次のタイトルが現れる前に消える。
  • カウンターは順次入れ替わる（古いものが消えてから新しいものが入る）；2つの数字が重なると壊れて見える。
• キャプションは画面に1.5秒以上表示、各7語以内、1ビートにつき1アイデア。 フレーム0を読みやすいサムネイルにする。
• 数字、顧客、レビュー、結果を決して捏造しない。 価格は日付入りの証拠を画面上に表示し、かつクライアントの許可がある場合のみ表示する。
• サウンドは、特に指定がない限り真剣に扱う。 テクノロジー製品にトイマリンバやベルは使わない、連続的なトーングライドも避ける（あるリールのスパークサウンドが「終末のサイレン」と呼ばれた）。
• 実際のUIと実際のアセットを使用する（Playwrightでクライアント自身のサイトを高DPRでクロップ）。クライアントのUIやロゴを手書きで描き直さない。実際のサイトで「購入」「送信」「提出」を決してクリックしない。