シームクラフト — シーン間トランジションのレンダリング前提条件
これは PLV シーン間シームのレンダリング正確性ドクトリンです。特定のトランジションに依存せず、すべてのトランジションがマスタータイムライン上で正しく合成されるための前提条件とメカニズムを定義します。個別のトランジションカタログ(クロスフェード、プッシュスライド、ズームスルー、カットザカーブなど)はトランジションレジストリにあります。このページはそれらすべての下に位置するドクトリンです。
このドクトリンが対象とするトランジションは Tier-B 対応です。2 つのシーンクリップ ラッパー(#el-<sid>)に対する純粋な transform / opacity / filter のみを使用し、オーバーレイ DOM の注入やシーン間の協調は必要ありません。オーバーレイファミリー(千鳥ブロック、ブラインド、ライトリーク、グリッドディゾルブ、ページバーン)およびシェーダートランジションは、後のフェーズに延期されます。
ステージ背景の前提条件(白フラッシュ防止)
いくつかのテンプレートでは、2 つのラッパーの opacity の合計が 1 未満になるウィンドウが発生します(カットザカーブの中間カット、ズームスルーの 0.15 下限、プレーンクロスフェードのパワーカーブディップなど)。このウィンドウ中は、ラッパーの 背後 にあるものが透けて見えます。アセンブルされた index.html の #root に不透明な背景がない場合、レンダラーはデフォルトの 白 ページ上にディップを合成します → すべてのシームで白フラッシュが発生し、暗いフィルムで特に顕著です(修正前に 2 回の Spotify ランで確認)。アセンブラーはステージをペイントする必要があります: #root { background: var(--canvas-deep, var(--canvas, #000)) } — assemble-index.mjs はこれを出力するようになりました。これらのテンプレートを使用する他のすべてのコンシューマーも同じ保証を負います。
インジェクターがトランジションを適用する方法
シーン i(from)とシーン i+1(to)の間の break 境界で、インジェクターは以下の処理を行います。
#el-<from>ラッパーのdata-durationをduration_sだけ延長します(最終フレームを保持 — 検証済み:core/src/runtime/init.ts:1393-1410external-slot ブランチ)。#el-<to>ラッパーのdata-startをduration_sだけ早めます(オーバーラップウィンドウを作成)。- すべてのクリップの
data-track-indexを 0/1 の ping-pong として再割り当てし、2 つのオーバーラップするラッパーが同じトラックを共有しないようにします(同じトラックのオーバーラップは禁止 —core/src/lint/rules/composition.ts)。高いトラックが上に合成されます。 gsap_templateをT = overlap-startの時点でwindow.__timelines["main"]にスタンプします。
プロトタイプレンダリングで検証済み(2026-05-31): マスタータイムラインのラッパー tween はシークおよびレンダリングされます(サブコンポジション自身の一時停止タイムラインとの二重シークは発生しません — ランタイムはそれらを独立して駆動します)。拡張されたラッパーはシーン i の最終フレームを保持し、高いトラックの着信ラッパーはそれに重ねて合成・ブレンドされます。
テンプレートプレースホルダー
インジェクターは各 gsap_template 行で以下のトークンを置き換えます。
| トークン | 意味 |
|---|---|
__OLD__ | "#el-<from>" — 退出クリップラッパーセレクター(引用符付き) |
__NEW__ | "#el-<to>" — 進入クリップラッパーセレクター(引用符付き) |
__T__ | オーバーラップ開始時間(秒、マスタークロック) |
__DUR__ | この境界の duration_s |
__DX__ | 方向タイプの水平移動: -1920(左) / 1920(右) |
__DY__ | 垂直移動: -1080(上) / 1080(下) |
__ORIGIN_OUT__ / __ORIGIN_IN__ | squeeze の transformOrigin ペア |
filter / scaleX / transformOrigin はマスタータイムライン上でリントクリーンです(検証済み: core/src/lint/rules/gsap.ts にはプロパティごとのホワイトリストはなく、data-composition-id 範囲にチェックを限定しています。 x/y/scale/rotation/opacity ホワイトリストは scene-worker プロンプトルールのみであり、index.html を拘束しません)。