Cut the Curve — テクニックカタログ は何をしますか？
5 つの SEAM テクニック、1 つの原則: カットはピーク速度で、カットの両側で方向と速度を一致させる — さらに 2 つのシーン内テクニック（§6 到着、§7 スライド）。
SEAM の法則 — ベクトル法則、カレント、台帳、シームゲート — は motion-doctrine に記述されています。まずそちらをお読みください。このスキルはパラメータとメカニズムを扱います。
すべての GSAP コードテンプレート（ワーカー + レジストリ）: examples/gsap-implementation.md。
カタログ
| # | テクニック | スコープ | 軸 | 用途 |
|---|---|---|---|---|
| 1 | ズームスルー（前方） | シーン内テキストスワップ | Z（視聴者方向） | 同じ思考内でより深く進む |
| 2 | 逆ズームスルー | 到着 / 決着ビート | Z（視聴者から遠ざかる） | より大きなものが着地する |
| 3 | カーブカット | シーン間 | X / Y | デフォルトの境界、フィルムのカレント |
| 4 | ウォーターフォールカット | テキスト間シーム | X（ワード単位） | 大テキストビート間のワードレベルのハンドオフ |
| 5 | ラックフォーカスブラーカット | 同一サーフェス状態スワップ | X / Y / Z | 見せたいカット — DSLR フォーカスプルの華やかさ |
| 6 | ウォーターフォールエントリー | シーン内到着（シームなし） | Y（下方から） | タイトルカード、セグメントオープナー、リストイントロ |
| 7 | ナッジカーブ | シーン内グループスライド（シームなし） | X / Y | 構成されたグループを再配置してスペースを作る |
Z 方向は符号
Z 軸では「同じ軸」だけでは不十分です — d(スケール)/dt の符号がカット全体で一致している必要があります:
| Z ベクトル | 出口スケール | 入口スケール | バリアント |
|---|---|---|---|
| 押す（前方） | 拡大 1 → 1.2 | 拡大 0.75 → 1 | ズームスルー |
| 引く（後方） | 縮小 1 → 0.8 | 縮小 1.25 → 1 | 逆ズームスルー |
禁止ミラー: 後退する出口が小さくからの成長で応答される（プルがプッシュに反転 — 一般的なもの。小さくからの成長がデフォルトの要素エントランスであるため）、そして押す出口が特大の収縮で応答される。これにより、シームウィンドウ（カット + 約 0.5 秒）中に、ラッパーツイーンだけでなく、入ってくるシーン自身のエントランスがバインドされます。入ってくるフレームを構成されたまま保持するか、そのエントランスを符号に一致するようにオーサリングしてください。シームゲートルール 7 に従って確認してください。
ブラーロジック（すべての Z バリアント）
| 被写体 | ピークブラー | 理由 |
|---|---|---|
| テキストスケール（見出し、ワードグループ） | 10px | 20px では文字がにじむ — カットが速度ではなくグリッチとして読まれる |
| フルフレームサーフェス（ウィンドウ、カード、スクリーンショット） | 18–20px | 大きなサーフェスでの軽いブラーはレンダリングの不具合として読まれる |
スワップフレームで両側に同じピークブラー。ラッパーをブラーし、子要素には決してブラーをかけない。
1. ズームスルー（前方）
Z 軸速度一致型カット。両方のテキストが同時に見えることはない。 すべてが成長する: 出口テキストはカメラに向かって加速し、ピークブラーでハードスワップが隠れ、入口テキストは焦点面に向かって成長を続ける。見出しと短いフレーズのみ。合計約 0.4 秒。
| フェーズ | スケール | ブラー | 不透明度 | イージング | 継続時間 |
|---|---|---|---|---|---|
| 出口 | 1 → 1.2 | 0 → 10px | 1 → 0.15 | power3.in（不透明度: 個別の none ツイーン） | 0.2 秒 |
カット (tl.set) | 入: 0.75 | 10px | 出: 0 / 入: 0.15 | — | — |
| 入口 | 0.75 → 1 | 10 → 0px | 0.15 → 1 | expo.out | 0.5 秒 |
出口不透明度は独自のリニアツイーンでなければならない — power3.in は不透明度を 1 付近に長く保持しすぎる。入口ではすべてのプロパティが expo.out を共有する。
2. 逆ズームスルー（後方）
引き戻しミラー: 出口要素は後退する。入口は（まるでカメラのすぐ後ろにあるかのように）特大で到着し、焦点面に収縮する。すべてが縮小する。到着 / 決着ビートに使用する — 決めゼリフ、巨大な返信、保持される終了状態 — 通常の境界には決して使用しない。合計約 0.7 秒（30% 出口 / 70% 入口）。
| フェーズ | スケール | ブラー | 不透明度 | イージング | 継続時間 |
|---|---|---|---|---|---|
| 出口 | 1 → 0.8 | 0 → 10px | 1 → 0.15 | power3.in（不透明度: 個別の none ツイーン） | 約 0.2 秒 |
カット (tl.set) | 入: 1.25 | 10px | 出: 0 / 入: 0.15 | — | — |
| 入口 | 1.25 → 1 | 10 → 0px | 0.15 → 1 | expo.out | 約 0.5 秒 |
ブラーはテキストスケールで 10px。両側がフルブリードサーフェスの場合のみ 18–20px。
符号規律: 入ってくるシーンは、収縮するラッパー内の構成されたフレームとして到着する — シームウィンドウ内では小さくからの成長イントロは禁止。段階的エントランスは収縮が落ち着いた後、または 1 以上から開始して収縮する。
3. カーブカット（デフォルトのシーン境界）
X/Y 速度一致型カット — すべてのシーン間境界のデフォルト。フィルムのカレント内で、アクセントではない。出口の主人公が一方向に加速し、カットは動きの途中で着地し、入口の主人公は同じ方向に移動を続けて減速する。合計約 0.6 秒。方向: 左 / 右 / 上 / 下（デフォルト: 左）。
部分移動: フレームの約 12%（1920 で約 230px） — 完全な画面外への移動は禁止。
| 方向 | 出口 | 入口の開始 → 終了 |
|---|---|---|
| 左方向 | x: 0 → −230 | x: +230 → 0 |
| 右方向 | x: 0 → +230 | x: −230 → 0 |
| 上方向 | y: 0 → −230 | y: +230 → 0 |
| 下方向 | y: 0 → +230 | y: −230 → 0 |
メカニズム:
- ミラードイージング: 出口
power4.in+ 入口power4.out、同じ距離と継続時間 — 1 つのpower4.inOutの 2 つの半分であり、速度がカットで正確に一致する。 - フェードトリック: 出口の不透明度は移動の約 25–30% で完了する（フェード約 0.18–0.3 秒 vs モーション 0.3–0.34 秒）。入口は経路途中の約 0.35 不透明度で点火する。最後のフェード要素がカットのちょうどで消えるようにタイミングを調整する — 何も動かないギャップはデッドエアとして読まれる。
- 出口 0.2–0.4 秒。入口 ≥ 出口。オプションのブラー 8–10px。
- ステージグラウンド:
#rootは不透明でなければならない（background: var(--canvas-deep, var(--canvas, #000))）— ミッドウィンドウカットは、不透明度の合計が 1 未満のウィンドウを開き、そうしないと白くフラッシュする（seam-craft参照）。
push-slide は存在するが、部分移動とモーション途中フェーズに違反する。カーブカットを推奨する。
4. ウォーターフォールカット（ワード単位のカーブカット）
ワード粒度でのカーブカット — テキスト間シームのための最強の左方向カット。出口のワードは独自のカーブでランプアウトし、入口のワードは飛行中にカスケードインする — 目がシームを横切る波。
スコープ: 1 つのマルチビートコンポ（積み重ねられたフルフレーム .beat レイヤー）内でワーカーがオーサリングする。レジストリ / インジェクタータイプではない — クリップラッパーではなくワードスパンをツイーンする。テキストビートブロックへの境界とそこからの境界は、通常のレジストリトランジションを取得する。2–3 トランジション予算にはカウントされない。
| パラメータ | 値 | 理由 |
|---|---|---|
| 移動 | ±230px（フレームの約 12%） | 部分移動 + 速度 > フルフレームプッシュ |
| 出口 | 0.34 秒 power4.in | 加速がカットそのもの |
| 出口フェード | 0.18 秒、x と同時に開始 | ワードは移動の約 25–30% で消える — にじみなし |
| 出口スターガー | +0.022 秒 読書順 | ラインが剥がれる、ブロックスライドではない |
| 入口 | 0.3 秒 power4.out | 複合体の後半 — 速度一致 |
| 入口開始不透明度 | 0.35 | 経路途中の点火。バイナリ 0→1 はポップする |
| 入口ギャップ | 0.05 秒 × 0.84 減衰 | 加速するカスケード、構成されて解決する |
ルール:
- チェーンごとに 1 方向、カレントに乗る。逆ズームはチェーンの到着ビートのみ。
- ビルド時にすべてのワードを
x: +230, opacity: 0にプリセットする —immediateRender: falseだけでは未開始のワードが静止状態で表示されたままになる。 - 短い最初のビートは行全体で終了してもよい。そのフェードはカットの約 0.02 秒前に終了するため、次のワードが点火するときにまだストリーキングしている — デッドギャップなし。
- トランスフォーム / 不透明度のみ（シークセーフ）。不透明なステージグラウンドが適用される。
5. ラックフォーカスブラーカット（可視カット）
カットが見える唯一のバリアント: デフォーカスブラーのスパイクが 1 フレームのハードスワップを隠す — ハンドヘルド DSLR フォーカスプル。同じビジュアルテーマ内の同一サーフェスの状態スワップのための時折の華やかさとして使用する。デフォルトの境界としては使用しない。
他のものとの違い: 出口はカットまで完全に不透明のまま（ブラーがスワップを隠す — 早期フェードなし）。イージング power2.in / power2.out（ソフトな光学、運動量ではない）。
ルール:
- ナラティブビートでのみ発火。約 8 秒に 1 回以下。キャプション中やホールド中には決して使用しない。
- ピークブラー（≥6px。ピーク 8–12px、最大 ≤16–18px）でカットする — 上がり途中でスワップするとカットが見える。
- 微妙なスケール（約 1.06 のレンズブリージング）で光学効果として売り込む。
- 両側で同じ方向 — ベクトル法則は依然として有効。入口 ≥ 出口の継続時間。
- ラッパーをブラーする。1 つの要素でブラーと不透明度を 1 つのツイーンで同時に行わない（ヘッドレスコンポジットバグ）。
<video>を直接ブラーしない（ラップする）。
6. ウォーターフォールエントリー（シーン内到着 — シームではない）
段階的到着カスケード: ワード / 要素が下方から（一貫した 1 方向）鞭のように飛び込む。それぞれが前のものが落ち着く前に開始する — 加速する波が構成されたレイアウトに解決する。タイトルカード、セグメントオープナー、リスト / 機能イントロ。シームの兄弟は §4。ルールを混同しないこと:
| §6 入口（到着） | §4 ウォーターフォールカット（シーム） | |
|---|---|---|
| 不透明度 | バイナリ 0→1、tl.set で入口時に設定 — フェードなし | 経路途中の 0.35 で点火 — フェードが速度トリック |
| デフォルト軸 | Y、下方から | X、カレントに乗る |
| 出口側 | なし | ワードはミラード power4.in でランプアウト |
コレオグラフィ:
- 重ねる、キューイングしない — 次の要素は前の要素が落ち着くのから ±2 フレーム以内に開始する。ギャップはカスケード全体で縮小する。最後の要素はスナップする。
- 速度は重みによって異なる — 重い / アンカー要素はより遠く、より長く移動する。軽いワード / 句読点はタイトにスナップインする:
| パラメータ | アンカー / 重い | 通常のワード | 軽い / 句読点 |
|---|---|---|---|
| Y オフセット | 60–80px | 40–50px | 30–48px |
| 継続時間 | 0.16–0.20 秒 | 0.13–0.16 秒 | 0.10–0.13 秒 |
| オーバーラップ | 0–2f ギャップ | 1f オーバーラップ | 1–2f オーバーラップ |
- イージング
power4.out（追加のスナップには expo.out）。入口に.inOutは使用しない。 - カスケードごとに 1 方向。
- 最後のワードをフラグメントに分割してクライマックスを延長する。フラグメントはより遠くに移動する。
- ポストセトル後、グループは通常、次のビートのためのスペースを作るためにスライドする — それが §7。
7. ナッジカーブ（シーン内グループスライド — シームではない）
構成されたグループ（ワード行、カードスタック、リスト）のスローファストスロー再配置。コンテンツを明らかにするか、スペースを作る。単一の組み込みイージングでは生成されない — power4.inOut は停止にぶつかる。1 つのプロパティに 3 つのツイーンを連鎖させる:
| フェーズ | イージング | 距離 | 時間 | 感触 |
|---|---|---|---|---|
| 1 ランプイン | power3.in | 約 10% | 約 20% | ほとんど動かない — モーションが登録される、衝撃なし |
| 2 バースト | none（リニア） | 約 65% | 約 18% | 平均の約 2 倍 px/フレーム — 意図的 |
| 3 テール | power4.out | 約 25% | 約 62% | 減衰するクリープで休息へ — 衝撃を殺す |
ルール:
- テールは時間においてランプインの 3 倍以上。それでも衝撃があれば: テールの時間を延長する（距離ではない）、または
power5.outを使用する。 - フェーズ 2 はリニアのまま。イージングするとバーストのコントラストが失われる。
- フェーズ 2 中に新しいコンテンツを表示する — バーストがその出現を隠す。
- 垂直方向も同じ比率。距離を比例してスケールし、時間比率は維持する。
バリアントの選択
| ズームスルー | 逆ズームスルー | カーブカット | ウォーターフォールカット | |
|---|---|---|---|---|
| スコープ | シーン内テキストスワップ | 到着 / 決着ビート | シーン間 | テキスト間シーム |
| Z 符号 / 軸 | 成長（押す） | 縮小（引く） | X / Y | X（ワード単位） |
| 移動 / スケール | 1→1.2、続いて 0.75→1 | 1→0.8、続いて 1.25→1 | ±230px | ±230px |
| ピークブラー | 10px テキスト / 18–20 フルフレーム | 10px テキスト / 18–20 フルフレーム | 8–10px オプション | なし |
| イージング | power3.in / expo.out | power3.in / expo.out | power4.in / power4.out | power4.in / power4.out |
| 感触 | 通過する | 到着する | 横に運ばれる | シームを横切る波 |
アンチパターン
| してはいけないこと | 代わりに |
|---|---|
| カーブカットの代わりにプッシュスライドを使用する（全体移動、シームでの速度ゼロ） | カーブカットは速度を一致させ、部分移動のみを使用する |
| ウォーターフォールカットで出口が消えるまで入口ワードを隠す（デッドギャップ） | 入口は出口のフェードが完了する前に点火する。波を維持する |
| Z バリアントで不透明度を 0 までフェードする（ブラーを無効にする） | 不透明度 0.15 で保持する。ブラーがスワップを隠す |
| ズームスルーですべてのプロパティに power3.in を使用する（不透明度が長すぎる） | 出口不透明度は個別の none（リニア）ツイーンにし、約 0.18 秒で 0.15 にする |
| ラックフォーカスカットで早期フェードする（カットを露出する） | 出口はブラーがピークに達するまで完全に不透明のままにし、その後ハードスワップする |
| ウォーターフォールエントリーで z ベクトルを使用する（回りくどい） | Y、下方からの一貫した方向を維持する。ウォーターフォールエントリーは到着であり、シームではない |