Linden

Scroll cinematografic pe sase etape, cu snap. Pagina live: /linden/. Bundle: linden.json. Sursa: src-linden.zip.

• Sase etape (labels) pe un ScrollTrigger scrubat; cand opresti scroll-ul, pagina se aseaza pe eticheta urmatoare in directia in care mergeai.
• Patru clipuri video plus un plan de nivel; cadrul media 3:2 isi anima pozitia si dimensiunea de la o etapa la alta.
• Loader la prima incarcare (clasa linden-loading pe body, scoasa cand media e gata).

Doar GSAP + ScrollTrigger, deja incarcate site-wide. Nicio alta librarie.

31 de elemente. Sectiune .lin cu un element Code (markup-ul cu <video> si doua <source>), plus blocuri native de text pentru copy-ul fiecarei etape, nav nativ si .lin-scroll-track.

Setari de pagina: bodyClasses = linden linden-loading, disableLazyLoad = true.

Atasamentele 436–446: 4 clipuri in webm si mp4 (video-02-top-down, video-04-top-down-to-three-quarter, video-05-day-to-night, video-06-night-to-day), plus floor-plan, drawing-one, poster-02-first. Total ~40 MB. Masterele originale au ramas doar in folderul de pe Drive.

• snapTo: labels te trage inapoi — ignora directia. Foloseste labelsDirectional.
• Geometria fractionara face video-ul sa tremure. Math.round pe dreptunghi NU e destul: pune si snap: { top:1, left:1, width:1, height:1, padding:1, borderRadius:1 } pe tween, ca sa se rotunjeasca si cadrele intermediare.
• Nu promova in layer o cutie care isi schimba dimensiunea la fiecare cadru: transform: translateZ(0) si will-change: top,left,width,height au inrautatit lucrurile (al doilea e oricum inutil pentru proprietati de layout).
• Elementul Video din Bricks accepta o singura sursa — webm + mp4 trebuie sa stea intr-un element Code.