シームクラフト — シーン間トランジションのレンダリング前提条件
これは 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 のピンポンに再割り当てし、2つのオーバーラップするラッパーが決して同じトラックを共有しないようにします(同一トラック上のオーバーラップは違反 —core/src/lint/rules/composition.ts)。高いトラック番号が上に合成されます。 T = overlap-startのタイミングでgsap_templateをwindow.__timelines["main"]にスタンプします。
プロトタイプレンダリング(2026-05-31)で検証済み: マスタータイムラインのラッパートゥイーンはシークされレンダリングされます(サブコンポジション自身の一時停止タイムラインとの二重シークは発生しません — ランタイムがそれらを独立して駆動します)。延長されたラッパーはシーン 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 はマスタータイムライン上で lint クリーンです(検証済み: core/src/lint/rules/gsap.ts はプロパティごとのホワイトリストを持たず、チェックを data-composition-id の範囲に限定しています。x/y/scale/rotation/opacity のホワイトリストは_シーンワーカー_のプロンプトルールのみであり、index.html を拘束しません)。