Artisanat de Jonction — prérequis de rendu pour les transitions scène-à-scène
Ce document est la doctrine de correction de rendu pour les jonctions scène-à-scène PLV : les prérequis et mécanismes de la timeline maîtresse qui assurent le compositage correct de n’importe quelle transition, indépendamment de la transition choisie. Le catalogue par transition (fondu, glissement-poussée, zoom traversant, coupe-courbe, …) se trouve dans le registre des transitions — cette page est la doctrine qui sous-tend toutes les transitions.
Les transitions gouvernées par cette doctrine sont prêtes pour le niveau B : transformation / opacité /
filtre purs sur les deux wrappers de clips (#el-<sid>), sans DOM superposé injecté, sans
coopération par scène. Les familles de superpositions (blocs décalés, stores, fuite de lumière, grille de
dissolution, brûlure de page) et les transitions par shader sont reportées aux phases ultérieures.
Prérequis de la scène de base (garde-fou du flash blanc)
Plusieurs templates ouvrent une fenêtre où la somme des opacités des deux wrappers < 1 (la
coupe en milieu de fenêtre de la coupe-courbe, le seuil 0.15 du zoom traversant, le creux de la courbe de
puissance du fondu simple). Tout ce qui se trouve DERRIÈRE les wrappers apparaît pendant cette
fenêtre. Si le #root du index.html assemblé n’a pas de fond opaque, le moteur de rendu
composite le creux sur sa page blanche par défaut → un flash blanc à chaque
jonction, criard sur les films sombres (observé sur deux passages Spotify avant la correction).
L’assembleur doit peindre la scène : #root { background: var(--canvas-deep, var(--canvas, #000)) } — assemble-index.mjs émet maintenant cela ;
tout autre consommateur de ces templates porte la même garantie.
Comment l’injecteur applique une transition
À une limite de break entre la scène i (from) et la scène i+1 (to), l’injecteur :
- Prolonge
data-durationdu wrapper#el-<from>deduration_s(maintient sa dernière image — vérifié :core/src/runtime/init.ts:1393-1410branche externe-slot). - Avance
data-startdu wrapper#el-<to>deduration_s(crée la fenêtre de chevauchement). - Réaffecte tous les
data-track-indexdes clips en ping-pong 0/1 afin que les deux wrappers qui se chevauchent ne partagent jamais la même piste (chevaucher sur la même piste est interdit —core/src/lint/rules/composition.ts). La piste la plus haute se composite par-dessus. - Tamponne le
gsap_templatedanswindow.__timelines["main"]àT = overlap-start.
Vérifié par prototype de rendu (2026-05-31) : le tween du wrapper sur la timeline maîtresse est cherché et rendu (pas de double recherche avec la timeline en pause du sous-composant — le runtime les pilote indépendamment), le wrapper prolongé contient la dernière image de la scène i, et le wrapper entrant sur la piste la plus haute se composite par-dessus + se fond avec celui qui sort.
Espaces réservés du template
L’injecteur remplace ces jetons dans chaque ligne du gsap_template :
| Jeton | Signification |
|---|---|
__OLD__ | "#el-<from>" — sélecteur du wrapper de clip sortant (entre guillemets) |
__NEW__ | "#el-<to>" — sélecteur du wrapper de clip entrant (entre guillemets) |
__T__ | temps de début du chevauchement en secondes (horloge maîtresse) |
__DUR__ | duration_s pour cette limite |
__DX__ | déplacement horizontal pour les types directionnels : -1920 (GAUCHE) / 1920 (DROITE) |
__DY__ | déplacement vertical : -1080 (HAUT) / 1080 (BAS) |
__ORIGIN_OUT__ / __ORIGIN_IN__ | paire transformOrigin pour squeeze |
filter / scaleX / transformOrigin sont propres sur la timeline maîtresse
(vérifié : core/src/lint/rules/gsap.ts n’a pas de liste blanche par propriété et limite
ses vérifications aux plages data-composition-id ; la liste blanche x/y/scale/rotation/opacity
est une règle de prompt du worker uniquement — elle ne lie pas index.html).