씸(Seam) 제작 — 장면 간 전환을 위한 렌더 사전 조건
이 문서는 PLV 장면 간 씸(seam)을 위한 렌더 정합성 교리입니다: 모든 전환이 어떤 특정 전환을 선택하든 올바르게 합성되도록 하는 사전 조건과 마스터 타임라인 메커니즘입니다. 각 전환별 카탈로그(크로스페이드, 푸시 슬라이드, 줌 스루, 컷-더-커브, ...)는 별도 전환 레지스트리에 있으며, 이 페이지는 그 모든 전환 아래에 위치한 교리입니다.
이 교리가 적용되는 전환은 Tier-B 준비 상태입니다: 두 장면 클립 래퍼(#el-<sid>)에 대해 순수 transform/opacity/filter 속성을 사용하며,
주입된 오버레이 DOM이나 장면별 협력이 필요하지 않습니다. 오버레이 계열(엇갈린 블록, 블라인드, 라이트 릭, 그리드 디졸브, 페이지 번) 및 셰이더 전환은 추후 단계로 연기됩니다.
스테이지 그라운드 사전 조건 (흰색 플래시 방지)
여러 템플릿에서 두 래퍼의 합산 불투명도가 1보다 작은 구간이 발생합니다
(컷-더-커브 중간 윈도우 컷, 줌 스루의 0.15 바닥, 일반 크로스페이드의 파워 곡선 딥).
이 구간 동안 래퍼 뒤에 있는 것이 보여집니다. 조립된 index.html의 #root에 불투명 배경이 없으면,
렌더러는 기본 흰색 페이지 위에 딥을 합성하여 모든 씸에서 흰색 플래시가 나타납니다
(수정 전 두 번의 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-1410외부 슬롯 브랜치).#el-<to>래퍼의data-start를duration_s만큼 당깁니다(오버랩 윈도우 생성).- 모든 클립의
data-track-index를 0/1 핑퐁(ping-pong)으로 재할당하여 두 오버랩 래퍼가 동일한 트랙을 공유하지 않도록 합니다(동일 트랙 오버랩은 불법 —core/src/lint/rules/composition.ts). 더 높은 트랙이 위에 합성됩니다. gsap_template을T = 오버랩 시작시점에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-clean)합니다
(확인됨: core/src/lint/rules/gsap.ts에는 속성별 화이트리스트가 없으며 data-composition-id 범위로 검사를 한정합니다;
x/y/scale/rotation/opacity 화이트리스트는 장면 워커 프롬프트 규칙에만 해당하며 index.html에는 바인딩되지 않습니다).