motion-doctrine

モーションの原則（ゲートウェイ）

アニメーションを作成する前に、これを読んでください。各シームで何が起こるか、そして各シーンがどう動くかを定めます。技法スキルはその実装を担います。このルールは、一般的なモーションガイダンスや上流のガイダンスより優先されます。防ぐべき失敗は、シーンを個別に作成することです。カットのたびに視線の勢いが途切れ、シーンが開始と終了の間でその場に揺れ続けます。

ルートマップ

判断（このスキル）	実装スキル
シームのトランジション選択＋パラメーター＋コード	cut-the-curve §1–5（カタログ）
テキスト／要素の段階的な登場	cut-the-curve §6（ウォーターフォール登場）
シーン内のグループの位置変更（カットなし）	cut-the-curve §7（ナッジカーブ）
カーソル主導の動作／シーンの開始／モーフの起動	oversized-cursor
シームのレンダリング機構／白フラッシュ防止	seam-craft
製品ローンチ／解説／キャプション制作	上流スキルに text-beat-economics、brand-faithful、captions-overlay を重ねます

作成順序：ベクトル台帳（ledger.json）→ そこからマスターシームに STAMP を適用（scripts/seam-stamp.mjs --ledger ledger.json --write index.html）→ フェーズごとの持続的なモーションルート → キャリアと原因 → コンポジションを構築 → VERIFY（scripts/seam-gate.mjs）。 手作業で作成するのは Tier-A のモーフ／マッチカットのみです。スタンプ済みのシームは、構造上ゲートを通過します。

---

Part 1 — シームの法則

ベクトルの法則

シーン A の退出方法がシーン B の開始方法を決めます。同じ軸、同じ方向、速度を合わせ、両側ともモーションの途中でカットします。

1. 軸 — x は x のまま、y は y のまま、Z は Z のままにします。カットをまたいで軸を入れ替えてはいけません。
2. 方向 — 反転させてはいけません。Z では、方向はスケール変化の符号で決まります。拡大はプッシュ（カメラが前進）、縮小はプル（カメラが後退）です。遠ざかる退出に対して小さい状態から拡大する開始で応じるのは、ベクトルの反転です。小さい状態から拡大するのが要素のデフォルトの登場方法であるため、これは最もよくある違反です。
3. 速度 — ミラーリングしたイージングを使って、開始時の初速 ≈ 終了時の最終速度にします（退出は power4.in ＋開始は power4.out、距離と時間を同じにします。入ってくる側は、仮想経路の 50% 以上を進んだ地点から動き始めます）。仕組みについては cut-the-curve を参照してください。
4. 位相 — カットは両側ともモーションの途中で行います。カット前に静止状態まで落ち着かせたり、カット後に静止状態から動き始めたりするのは、間の抜けたビートです。

流れ

すべての映像で、支配的な方向を 1 つ選びます（標準設定：LEFT）。通常のシームはすべてこの方向を使います。それ以外のベクトルは予約済みです。使う場合は、意味を持たせてください。

ベクトル	意味
流れ（LEFT）	「次のビート」— 中立的な前進
上方向	高まり — 結論や発見が、それまでの内容を超えて浮かび上がる
Z 前方（ズームスルー）	同じ考えをさらに深く掘り下げる
Z 後方（逆ズーム）	到来 — より大きなものが着地する
スケールバースト（爆発的な拡大）	世界を離れる — 表面がカメラの前を勢いよく通り過ぎる

• 反対方向のシームを連続させてはいけません。ピンポンのような動きは、間違いに見えます。
• 方向を変える場合は、目に見える原因（クリック／バウンス／衝撃）を設けるか、章の境界にします。

ベクトル台帳

マスタータイムラインを作成する前に、プロジェクトのルートに ledger.json として記述します （スキーマ：references/seam-gate.md）。継ぎ目ごとに1行を記述します。カット時刻、退出ベクトルと進入ベクトル （軸＋符号付き方向。Z の行にはスケールの符号を指定）、セレクター、手法を記載します。退出と進入は一致していなければなりません。行が一致しない場合は、イージングではなくプランを修正します。検証ツールは、実行時のサンプリングを行う前に、行の整合性を静的にチェックします。

キャリア

目が追うのは抽象概念ではなく、オブジェクトです。最も効果的な継ぎ目では、具体的なキャリアを、位置と速度を一致させた状態でカットをまたいで引き継ぎます。たとえば、パスの途中にあるカーソル、次のレイアウトに合わせて縮小・ドッキングするコンテナ、正確な位置に飛び込むマーク、ウォーターフォールカットのワードグループです。自然なキャリアがない場合は、シーンの主役に引き継がせます（一部を移動させながら早めにフェードし、進入時には飛行の途中から始めます）。クロスフェードは使いません。引き継ぐキャリアがまったくないためです。

因果関係のある動き

それぞれの動きが直前の動きによって明確に引き起こされるようにつなぎます。クリック → つぶれ → 解放時のスプリング → 飛行 → 衝突 → 反動 → 表示。

• エフェクトは原因となるフレームで開始します。タイムライン上の同じ位置から始め、「少し後」は不可です。
• 反応の大きさは、想定される質量に応じて変えます。大きな要素はゆっくり跳ね返り、小さな要素は素早く反応します。
• 力が加わることで方向を変えられます。原因のない反転はピンポンです。

Seam Gate（ビルドゲート — 検証ツールを実行し、終了コード 0 になるまで継ぎ目は完成ではありません）

node <SKILL_DIR>/scripts/seam-stamp.mjs --ledger ledger.json --write index.html  # generate
node <SKILL_DIR>/scripts/seam-gate.mjs  verify --ledger ledger.json --project .  # verify

このスクリプトは（使い方と台帳スキーマ：references/seam-gate.md）、継ぎ目ごとに次の項目を数値的に検証します。台帳行の整合性、カット時点で退出側がまだ動いていること、進入側が飛行の途中から始まること（静止状態から始まらないこと）、測定された方向と台帳の方向が一致すること、進入側と退出側の速度が一致すること（WARN）、重なりがゼロであること（各フレームで表示される側は一方のみ。カットはディゾルブではありません）、Z 符号の規則（両側で d(scale)/dt の符号が同じであること。入ってくるシーン内のエントランスも走査し、符号が競合していないか確認します）、および祖先のスケールを含めたキャリアの矩形の連続性です。台帳を作成する際は、seam-gate.mjs probe --t <cut> を使って、各継ぎ目の正確なキャリアセレクターを見つけてください。

スクリプトでチェックできないルールは、引き続きあなたが守る必要があります。

1. 編集したら、継ぎ目を再確認します。 シーンの最初または最後の約1秒に変更を加えると（新しい VO に合わせたタイミング変更も含む）、その境界の監査は無効になります。検証ツールを再実行してください。
2. オーディオを基準にします。 VO の実際の単語のタイムスタンプに合わせてシーンのタイミングを変更します。読み上げを枠に収めるために急がせてはいけません。VO を再生成した場合は、その継ぎ目を再確認してください。
3. クリップゲーティングの落とし穴（重なりゼロの FAIL の通常の原因）：data-start が進入時のトゥイーンより前にあるクリップは、初期不透明度のまま表示されます。初期値を autoAlpha: 0 に設定し、data-start は必ずカット時刻と同じにします。それより前にしてはいけません。

---

パート 2 — パフォーマンス（シーンが動き続ける）

待機中の揺れは禁止

待機中のサイン波ループ（呼吸、浮遊、漂流、グローパルス）は、持続的な動きとして禁止です。「動画が待機している」ように見えるためです。数秒を残してシーンの表示が終わるのは、プランニング上の不具合です。揺れを加えるのではなく、ストーリーを加えてください。表示開始から終了までの各フェーズは、以下のいずれかのルートで構成します（プランにルート名を記載してください）。

ルート	内容
段階的な表示	コンテンツを一度に見せず、ナレーションの区切りに合わせて明かします。フレームに情報が増え続けます（コンテンツグループが2つ以上の場合のデフォルト）。
意図のあるカメラワーク	スケールとパンを組み合わせた経路を定めます。広い画角で状況を見せる → 移動する → 被写体に到着する、という流れです。
順を追ったUIの動き	プロダクトが時間とともに動作します。進捗が進み、ハイライトが順に移動し、数値がカウントされます。
アニメーションシーケンス	要素が一連の動きを見せます。カードが束に収まり、項目がドラッグされ、結果が組み上がります。
カーソル主導のアクション	大きなカーソルで視線をトリガーへ誘導します。カーソルのクリックが次の場面を始動します（oversized-cursor）。

確認方法：任意の秒数で一時停止したとき、意味のある動きが進行中である必要があります（表示が完了しつつある、カメラが移動中である、UIがナレーションに沿って動作中である、など）。

クライマックス前の静止

主要なアクションとその結果の間に、0.3～0.75秒の間を設けます。ドラマチックな読点です。アクションから結果へ直行するシーンでは、この効果が失われます。

タイミングの意図

• 単一要素の表示は約800ms以内にします。これより長い立ち上がりには、単一要素をゆっくり動かすのではなく、複数要素を順に表示します。
• 終了は表示時間の約75%にします。例外として、cut-the-curveではこれが逆になり、表示時間は終了時間の約127%になります。
• 段階表示全体の時間は500ms以内にします。要素が8つ以上ある場合は、要素ごとの遅延を短くするか、最初の数要素だけ段階表示します。
• 使用禁止のイージング：bounce.out／elastic.out。表示時のオーバーシュートにはback.out(1.4–1.7)を使用できます。
• 類似した要素では、イージングと時間の組み合わせを統一します。要素ごとに異なる組み合わせを設定しないでください。

トランジションの種類

1つの動画で使用するシーン間トランジションは2～3種類に限定し、繰り返し使います。境界のデフォルトは、現在の方向に沿ったcut-the-curveです。手書きの共有要素モーフ（intent: morph）は、この上限に含めません。

アンチパターン

避けること	代わりにすること
各シーンの登場を個別に作成する	まずベクトル台帳を作成する
シーン間をクロスフェードする	現在の動きの方向に沿ってカーブを切る
シーンが切り替わるのは退出が完了した後	両側とも動きの途中で切り替える
カット後、静止状態から登場を始める	想定経路の50％以上進んだ状態から登場させる
逆ズームで退出 → 小さい状態から拡大して登場（または押し出し → 大きくしてから縮小）	スケール速度の符号を一致させる（Seam Gate 7）
Zシームの引き継ぎ中に、次のシーン独自のポップイン演出を入れる	冒頭フレームの構図を保つか、符号を一致させる
時間を埋めるために、静止中に揺らす／呼吸させる／浮遊させる	持続的な動きの経路を割り当てるか、ストーリーを加える
原因なく方向を反転させる	力を使うか、現在の動きを維持する
変化をつけるために予約済みのベクトルを使う	現在の動きを基本とし、意味を持たせるために使う
原因が起きてから数フレーム後に反応する	同じフレームで動き始める
動作が結果に一気に飛ぶ	クライマックス前の静止（0.3–0.75s）を組み込む