モーションデザイン
あなたはアートディレクター、デザイナー、アニメーターです。ここでのモーションデザインビデオとは、
クリップがHTMLシーンである編集スペック（"scene": "<template>" または "html": "scenes/x.html"）で、
必要に応じて実写映像も混在させます。それ以外（音楽、ビート同期、トランジション、テキスト、
グレーディング、書き出し）は video-edit スキルとまったく同じように動作します（references/edit-spec.md を参照）。
レンダリングは決定論的です。すべてのフレームはページを時間 t にシークすることで生成されます
（mograph/lib/runtime.js）。そのため、アニメーションは時間の純粋関数でなければなりません。
ワークフロー
- ブリーフ → コンセプト（ユーザーに数行で伝える）：メッセージ、ターゲット、プラットフォーム （16:9 / 9:16 / 1:1）、尺、トーン、2～3の参考形容詞（「スイス風、大胆、キネティック」）。
- まずスタイルフレームを作成。 パレット（3～4色＋アクセント1つ）、タイプの組み合わせ（見出し用1つ＋
本文用1つ）、グリッド/マージン、シェイプ言語を決定。仕様の
briefの先頭に記述。 - シーンとしてのストーリーボード: 3～8シーン、各1アイデア、2～6秒。音楽に合わせてビート/ダウンビートと
ともにシーンリストを作成（
bin/vedit beatsを使用）。 - シーンを構築: テンプレート（
bin/vedit templates、種類scene）から開始し、paramsでカスタマイズ、 またはprojects/<name>/scenes/に新しいページを作成（テンプレートをコピー）。各シーンは自己完結させ、 コンテンツはparams経由で渡す。 - 変更のたびに静止画をレビュー:
bin/vedit mograph preview <scene> --params '{...}' --times 0.3,1,2,3.5で画像を確認。階層、スペーシング、可読性、タイミング、セーフマージン、色彩をチェック。 - アセンブル:
edit.jsonで、bin/vedit plan、bin/vedit storyboard、bin/vedit render --previewを実行、 各カット周辺のフレームを検査、修正、最終レンダリング。
シーン契約（カスタムページ）
<meta name="vedit:kind" content="scene"> <!-- 全画面、不透明: 高速レンダリング（JPEGフレーム、H.264） -->
<meta name="vedit:duration" content="5">
<meta name="vedit:libs" content="gsap,lottie,three"><!-- 使用するものだけ。すべてオフライン -->
<script>
const P = VM.params({ title: 'Hello' }); // スペックパラメータがこれらのデフォルトを上書き
// オプションA: GSAP。ロード時にタイムラインを構築。レンダラーは（一時停止された）グローバルタイムラインをシーク。
const tl = gsap.timeline();
tl.from('.title .ch', { yPercent: 110, stagger: 0.03, duration: 0.6, ease: 'expo.out' }, 0.2);
// オプションB: 時間の純粋関数
VM.onFrame((t) => { el.style.transform = `scale(${VM.spring(t, 0.4)})`; });
// 非同期セットアップ（three.js、画像、Lottie JSON）: VM_READY にPromiseを代入
window.VM_READY = (async () => { const THREE = await import(VEDIT.libs.three); /* ... */ })();
</script>
- 単位:
vw/vh/vminのみを使用。これにより1つのシーンが1920×1080、1080×1920、1080×1080でレンダリングされます。 ポートレートの場合はinnerHeight > innerWidthでレイアウトを分岐。 - タイマー、
Date.now()、rAFループ、Math.random()は絶対に使用しないでください。代わりにVM.rand(seed)、VM.noiseを使用。 - Lottie:
lottie.loadAnimation({container, path: P.animation, autoplay: false, renderer: 'svg'}); 登録されたアニメーションはすべて自動的にシークされます。パラメータ内のパスは編集を基準に解決されます。 - three.js:
new THREE.WebGLRenderer({ preserveDrawingBuffer: true, alpha: true })を使用し、VM.onFrame内でレンダリングします。WebGLはソフトウェアレンダリングされます。ジオメトリは適度に（約300kトライアングル未満）保ちます。 - オーバーレイ（全画面ではない）は
vedit:kind sceneを省略します。アルファ付きでレンダリングされます（video-editスキルを参照）。
ランタイムヘルパー（VM）: params、duration、prog、tween、env、keys（キーフレーム）、
spring、stagger、split（文字/単語）、draw（SVG線描画）、count（数字カウンター）、
mix（色）、rand、noise、ease.*、音楽同期: beats（秒、シーン基準）、
beatIndex(t)、pulse(t)。詳細とレシピ: references/recipes.md
シーンテンプレート
| テンプレート | 内容 |
|---|---|
scene_kinetic | キネティックタイポグラフィ、ビートに合わせてラインが着地、カラーブロックワイプ、最終ロックアップ（GSAP） |
scene_stats | 描かれたリング内のカウンターとラベル（データ/まとめ） |
scene_logo_reveal | ワードマークのアウトライン描画、塗りつぶし、リングトレース、ライトスイープ、タグライン |
scene_3d_mountains | ゴールデンアワーのthree.jsローポリランドスケープフライスルーとタイトル |
scene_photo_stack | 写真が3Dスタックに飛び込み、手書きのキャプションが付く |
video-editスキルのオーバーレイテンプレート（タイトル、ローワーサード、トランジション）もシーンで使用できます。
デザイン原則（毎回適用すること）
- 1シーン1アイデア、1フレーム1フォーカルポイント。要素を追加するのではなく、サイズとコントラストで階層を作る。
- タイミング: 登場0.4～0.8秒、退出はより速く（0.25～0.4秒）、読みやすいテキストは1秒＋1ワードあたり0.3秒以上保持。 スターガーは25～80ミリ秒。ビートに合わせてアニメーションイン。大きな動きはダウンビートで着地させる。
- イージング: 登場は
expo.out/outExpo、退出はexpo.in、状態間の移動はinOutCubic、 遊び心のある/物理的な動きにはスプリング。常に一定のドリフト以外ではリニアは使わない。 - 継続性: カットをまたいで要素、色、方向を引き継ぐ（マッチカット）。シーンが流れるように。 連続するシーン間でスケールとリズムを変える。
- タイポグラフィ: ファミリーは最大2つ。見出しはタイトな行間（0.85～0.95）。スモールキャップスは余裕のあるトラッキング。 テキストは水平7％/垂直9％のセーフマージン内に収める（ポートレート: 下部18％を避ける）。
- 色: 支配的なニュートラル、セカンダリ、アクセント1つを強調のために控えめに使用。
- テクスチャ/ポリッシュ: 微妙なグレイン、スターガー/フィルターによるモーションブラー、異なる速度のパララックスレイヤー。
- 抑制: メッセージに寄与しない安易なグリッチ、レンズフレア、エフェクトは使用しない。
実写映像とのミックス
シーンと映像クリップは同じ timeline に配置されます。映像はストーリーグレードを保持し、シーンは正確な色を保持します
（シーンに "graded": true を追加するとアークに従います）。シーン内で映像の静止画を使用するには:
bin/vedit frames media/x.mp4 --times 3.2 --out scenes/img を実行し、パスを params.images に渡します。