seam-craft
하이퍼프레임스 런치 비디오에서 장면 간 시임(seam)에 대한 렌더 정확성 원칙 — 마스터 타임라인에서 전환이 올바르게 합성되기 위한 전제 조건. 마스터 타임라인 / index.html을 조립할 때, 컷 또는 크로스페이드 시임에서 흰색 플래시가 나타날 때(특히 어두운 필름에서), 전환 불투명도 딥(dip)이 비쳐 보이는 이유를 추론할 때, 또는 겹치는 장면 래퍼가 블렌딩되는 렌더 측 메커니즘을 검증할 때 로드합니다. 불투명한 스테이지 그라운드(#root...)를 다룹니다.
npx skills add https://github.com/heygen-com/hyperframes --skill seam-craftSeam Craft — render prerequisites for scene-to-scene transitions
This is the render-correctness doctrine for PLV scene-to-scene seams: the prerequisites and master-timeline mechanics that make any transition composite correctly, independent of which specific transition is chosen. The per-transition catalog (crossfade, push-slide, zoom-through, cut-the-curve, …) lives in the transition registry — this page is the doctrine that sits underneath all of them.
The transitions this doctrine governs are Tier-B-ready: pure transform / opacity /
filter on the two scene clip wrappers (#el-<sid>), no injected overlay DOM, no
per-scene cooperation. Overlay families (staggered blocks, blinds, light leak, grid
dissolve, page burn) and shader transitions are deferred to later phases.
Stage ground prerequisite (white-flash guard)
Several templates open a window where the two wrappers' summed opacity < 1 (the
cut-the-curve mid-window cut, zoom-through's 0.15 floor, plain crossfade's
power-curve dip). Whatever is BEHIND the wrappers shows through during that
window. If the assembled index.html #root has no opaque background, the
renderer composites the dip over its default white page → a white flash at
every seam, glaring on dark films (observed on two Spotify runs before the fix).
The assembler must paint the stage: #root { background: var(--canvas-deep, var(--canvas, #000)) } — assemble-index.mjs now emits this;
any other consumer of these templates owns the same guarantee.
How the injector applies a transition
At a break boundary between scene i (from) and scene i+1 (to), the
injector:
- Extends
#el-<from>wrapperdata-durationbyduration_s(holds its final frame — verified:core/src/runtime/init.ts:1393-1410external-slot branch). - Pulls
#el-<to>wrapperdata-startearlier byduration_s(creates the overlap window). - Reassigns all clip
data-track-indexas a 0/1 ping-pong so the two overlapping wrappers never share a track (same-track overlap is illegal —core/src/lint/rules/composition.ts). Higher track composites on top. - Stamps the
gsap_templateintowindow.__timelines["main"]atT = overlap-start.
Verified by prototype render (2026-05-31): the master-timeline wrapper tween is seeked and rendered (no double-seek with the sub-comp's own paused timeline — the runtime drives them independently), the extended wrapper holds scene i's final frame, and the higher-track incoming wrapper composites over + blends with the outgoing one.
Template placeholders
The injector substitutes these tokens in each gsap_template line:
| Token | Meaning |
|---|---|
__OLD__ | "#el-<from>" — outgoing clip wrapper selector (quoted) |
__NEW__ | "#el-<to>" — incoming clip wrapper selector (quoted) |
__T__ | overlap-start time in seconds (master clock) |
__DUR__ | duration_s for this boundary |
__DX__ | horizontal travel for directional types: -1920 (LEFT) / 1920 (RIGHT) |
__DY__ | vertical travel: -1080 (UP) / 1080 (DOWN) |
__ORIGIN_OUT__ / __ORIGIN_IN__ | transformOrigin pair for squeeze |
filter / scaleX / transformOrigin are lint-clean on the master timeline
(verified: core/src/lint/rules/gsap.ts has no per-property whitelist and scopes
its checks to data-composition-id ranges; the x/y/scale/rotation/opacity
whitelist is a scene-worker prompt rule only — it does not bind index.html).