seam-craft

seam-craft

熱門

HyperFrames 啟動影片中場景轉場的渲染正確性原則 — 讓轉場在主時間軸上正確合成的必要條件。在組裝主時間軸 / index.html 時、在剪輯或淡入淡出轉場處出現白色閃爍(特別是在暗色影片上)、在推論轉場透明度下降為何透出時、或在驗證重疊場景包裝器如何混合的渲染端機制時載入。涵蓋不透明舞台背景(#root 背景)白色閃爍防護,以及注入器如何重疊包裝器、保持最終幀、乒乓切換軌道、並將 lint 乾淨的模板代碼印到主時間軸上。不包含各轉場目錄 — 請參閱轉場註冊表以獲取個別轉場條目。

3.6萬星標
3412分支
更新於 2026/7/19
SKILL.md
readonlyread-only
name
seam-craft
description

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

Seam Craft — 場景轉場的渲染必要條件

這是 PLV 場景轉場的渲染正確性原則:讓任何轉場正確合成的必要條件與主時間軸機制,與選擇哪個特定轉場無關。各轉場目錄(淡入淡出、推滑、縮放穿越、切曲線等)位於轉場註冊表中 — 此頁面是支撐所有轉場的基礎原則。

此原則管理的轉場為Tier-B-ready:僅對兩個場景剪輯包裝器#el-<sid>)進行 transform / opacity / filter 操作,無需注入覆蓋 DOM,也無需場景間協作。覆蓋系列(階梯區塊、百葉窗、漏光、網格溶解、頁面燃燒)和著色器轉場則延後至後續階段。

舞台背景必要條件(白色閃爍防護)

多個模板會開啟一個窗口,期間兩個包裝器的透明度總和小於 1(切曲線的中間剪輯、縮放穿越的 0.15 下限、一般淡入淡出的冪曲線下降)。在此窗口期間,包裝器後方的任何內容都會透出。如果組裝後的 index.html #root 沒有不透明背景,渲染器會將下降區域合成到預設的白色頁面上 → 每個轉場處出現白色閃爍,在暗色影片上尤其刺眼(在修復前於兩個 Spotify 運行中觀察到)。組裝器必須繪製舞台背景: #root { background: var(--canvas-deep, var(--canvas, #000)) }assemble-index.mjs 現在會輸出此設定;任何其他使用這些模板的消費者都需承擔相同保證。

注入器如何應用轉場

在場景 ifrom)與場景 i+1to)之間的 break 邊界處,注入器會:

  1. #el-<from> 包裝器的 data-duration 延長 duration_s(保持其最終幀 — 已驗證:core/src/runtime/init.ts:1393-1410 外部插槽分支)。
  2. #el-<to> 包裝器的 data-start 提前 duration_s(建立重疊窗口)。
  3. 將所有剪輯的 data-track-index 重新指派為 0/1 乒乓,使兩個重疊包裝器永不共享同一軌道(相同軌道重疊是非法的 — core/src/lint/rules/composition.ts)。較高軌道會合成在上方。
  4. gsap_template 印入 window.__timelines["main"] 中的 T = overlap-start 位置。

已由原型渲染驗證(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 白名單僅是 scene-worker 提示規則 — 它不綁定 index.html)。