Seam Craft — prerrequisitos de renderizado para transiciones entre escenas
Esta es la doctrina de corrección de renderizado para las transiciones entre escenas de PLV: los prerrequisitos y la mecánica de la línea de tiempo maestra que hacen que cualquier transición se componga correctamente, independientemente de la transición específica elegida. El catálogo por transición (fundido, deslizamiento por empuje, zoom, corte de curva, …) vive en el registro de transiciones; esta página es la doctrina que subyace a todas ellas.
Las transiciones que esta doctrina rige están preparadas para el Nivel B: transformación pura / opacidad / filtro en los dos envoltorios de clip de la escena (#el-<sid>), sin DOM superpuesto inyectado, sin cooperación por escena. Las familias de superposición (bloques escalonados, persianas, fuga de luz, disolución de cuadrícula, quema de página) y las transiciones de sombreadores se posponen para fases posteriores.
Prerrequisito del fondo de etapa (protector contra destellos blancos)
Varias plantillas abren una ventana donde la opacidad sumada de los dos envoltorios es < 1 (el corte medio de la curva de corte, el piso de 0.15 del zoom, la caída de la curva de potencia del fundido simple). Lo que esté DETRÁS de los envoltorios se ve durante esa ventana. Si el index.html ensamblado #root no tiene un fondo opaco, el renderizador compone la caída sobre su página blanca predeterminada → un destello blanco en cada unión, que resalta en películas oscuras (observado en dos ejecuciones de Spotify antes de la corrección). El ensamblador debe pintar el escenario: #root { background: var(--canvas-deep, var(--canvas, #000)) } — assemble-index.mjs ahora emite esto; cualquier otro consumidor de estas plantillas asume la misma garantía.
Cómo aplica el inyector una transición
En un límite de break entre la escena i (from) y la escena i+1 (to), el inyector:
- Extiende
data-durationdel envoltorio#el-<from>porduration_s(mantiene su fotograma final — verificado: rama de ranura externacore/src/runtime/init.ts:1393-1410). - Adelanta
data-startdel envoltorio#el-<to>porduration_s(crea la ventana de superposición). - Reasigna todos los
data-track-indexde los clips como un ping-pong 0/1 para que los dos envoltorios superpuestos nunca compartan una pista (la superposición en la misma pista no es válida —core/src/lint/rules/composition.ts). La pista más alta se compone encima. - Estampa el
gsap_templateenwindow.__timelines["main"]enT = inicio-de-superposición.
Verificado por renderizado de prototipo (2026-05-31): se busca y renderiza el tween del envoltorio de la línea de tiempo maestra (sin búsqueda doble con la propia línea de tiempo pausada del sub-comp — el runtime los maneja de forma independiente), el envoltorio extendido mantiene el fotograma final de la escena i, y el envoltorio entrante de pista más alta se compone encima y se mezcla con el saliente.
Marcadores de posición de la plantilla
El inyector sustituye estos tokens en cada línea de gsap_template:
| Token | Significado |
|---|---|
__OLD__ | "#el-<from>" — selector del envoltorio del clip saliente (entre comillas) |
__NEW__ | "#el-<to>" — selector del envoltorio del clip entrante (entre comillas) |
__T__ | tiempo de inicio de superposición en segundos (reloj maestro) |
__DUR__ | duration_s para este límite |
__DX__ | desplazamiento horizontal para tipos direccionales: -1920 (IZQUIERDA) / 1920 (DERECHA) |
__DY__ | desplazamiento vertical: -1080 (ARRIBA) / 1080 (ABAJO) |
__ORIGIN_OUT__ / __ORIGIN_IN__ | par transformOrigin para squeeze |
filter / scaleX / transformOrigin están limpios de lint en la línea de tiempo maestra (verificado: core/src/lint/rules/gsap.ts no tiene una lista blanca por propiedad y limita sus comprobaciones a rangos de data-composition-id; la lista blanca de x/y/scale/rotation/opacity es solo una regla de solicitud del trabajador de escena — no vincula a index.html).