Costura de Cena — pré-requisitos de renderização para transições entre cenas
Esta é a doutrina de correção de renderização para emendas entre cenas PLV: os pré-requisitos e a mecânica da linha do tempo principal que fazem qualquer transição compor corretamente, independentemente de qual transição específica for escolhida. O catálogo por transição (crossfade, push-slide, zoom-through, cut-the-curve, …) está no registro de transições — esta página é a doutrina que serve de base para todas elas.
As transições que esta doutrina rege estão prontas para o Tier B: transform / opacity /
filter puros nos dois wrappers de clipe de cena (#el-<sid>), sem DOM de sobreposição
injetado, sem cooperação por cena. Famílias de sobreposição (blocos escalonados, persianas, vazamento de luz,
dissolução de grade, queima de página) e transições de shader são adiadas para fases posteriores.
Pré-requisito do fundo do palco (proteção contra flash branco)
Vários templates abrem uma janela onde a opacidade somada dos dois wrappers < 1 (o
corte no meio da janela do cut-the-curve, o piso de 0.15 do zoom-through, a
queda da curva de potência do crossfade simples). O que estiver ATRÁS dos wrappers
aparece durante essa janela. Se o index.html montado #root não tiver um fundo
opaco, o renderizador compõe a queda sobre seu branco padrão da página → um flash
branco em cada emenda, gritante em filmes escuros (observado em duas execuções do Spotify
antes da correção). O montador deve pintar o palco: #root { background: var(--canvas-deep, var(--canvas, #000)) } — assemble-index.mjs agora emite isso;
qualquer outro consumidor desses templates assume a mesma garantia.
Como o injetor aplica uma transição
Em um limite de break entre a cena i (de) e a cena i+1 (para), o
injetor:
- Estende o wrapper
#el-<de>data-durationporduration_s(mantém seu quadro final — verificado:core/src/runtime/init.ts:1393-1410branch de slot externo). - Adianta o wrapper
#el-<para>data-startemduration_s(cria a janela de sobreposição). - Reatribui todos os
data-track-indexdos clipes como um ping-pong 0/1 para que os dois wrappers sobrepostos nunca compartilhem uma faixa (sobreposição na mesma faixa é ilegal —core/src/lint/rules/composition.ts). A faixa mais alta compõe sobre a mais baixa. - Carimba o
gsap_templateemwindow.__timelines["main"]emT = início-da-sobreposição.
Verificado pelo protótipo de renderização (2026-05-31): o tween do wrapper da linha do tempo principal é buscado e renderizado (sem busca dupla com a própria linha do tempo pausada do sub-comp — o runtime os executa independentemente), o wrapper estendido mantém o quadro final da cena i, e o wrapper de entrada da faixa mais alta compõe sobre + se mistura com o wrapper de saída.
Placeholders do template
O injetor substitui esses tokens em cada linha gsap_template:
| Token | Significado |
|---|---|
__OLD__ | "#el-<de>" — seletor do wrapper do clipe de saída (entre aspas) |
__NEW__ | "#el-<para>" — seletor do wrapper do clipe de entrada (entre aspas) |
__T__ | horário de início da sobreposição em segundos (relógio mestre) |
__DUR__ | duration_s para este limite |
__DX__ | deslocamento horizontal para tipos direcionais: -1920 (ESQUERDA) / 1920 (DIREITA) |
__DY__ | deslocamento vertical: -1080 (CIMA) / 1080 (BAIXO) |
__ORIGIN_OUT__ / __ORIGIN_IN__ | par de transformOrigin para squeeze |
filter / scaleX / transformOrigin estão limpos de lint na linha do tempo principal
(verificado: core/src/lint/rules/gsap.ts não tem lista de permissões por propriedade e limita
suas verificações aos intervalos de data-composition-id; a lista de permissões de x/y/scale/rotation/opacity
é apenas uma regra de prompt do scene-worker — ela não vincula o index.html).