Studio Monet 1.0

Intro in spirala plus carusel scrubat de proiecte. Pagina live: /studio-monet/. Bundle: studio-monet.json. Sursa: src-studio-monet.zip.

Ce face

  • Intro (autoplay, scroll blocat): sase imagini intra pe arce cu MotionPathPlugin si se strang in centru, wordmark-ul urca sus, titlul apare alb peste imagine si apoi se desface spre margini.
  • Carusel (scrubat): cele doua coloane de text urca continuu, iar imaginea proiectului urmator se descopera de jos in sus, panou cu panou. Sase proiecte.
  • Pagina de proiect: click pe imagine → imaginea se expandeaza pe tot ecranul si devine hero-ul paginii, cu sectiuni, galerie orizontala si proiect anterior / urmator. Click pe wordmark → inapoi in carusel, exact pe proiectul de unde ai plecat.

Ce cere

  • GSAP + ScrollTrigger + MotionPathPlugin, site-wide.
  • Lenis 1.1.13, incarcat cu import('https://cdn.jsdelivr.net/npm/lenis@1.1.13/+esm').
  • Google Fonts: Newsreader si Montserrat (linkurile stau in markup-ul elementului Code).

Cum e construita in Bricks

Doua elemente: o sectiune .mon si UN singur element Code (1,3 KB markup, 13,8 KB CSS, 28,7 KB JS). Spre deosebire de Linden si Clares, aici nu exista elemente native de text: fiecare cuvant din pagina — nume de proiect, date, discipline, tot continutul paginii de proiect — e generat de JS din tabloul PROJECTS.

CONFIG si PROJECTS, din capul lui javascriptCode, sunt singura suprafata de reglaj: durate, curbe, scari, culorile panourilor, projStep, snapDelay, snapDuration.

Setari de pagina: bodyClasses = monet, disableLazyLoad = true.

Media pe site

Atasamentele 472–490 (monet-01 … monet-19), 1184×864 JPG progresiv la calitate 85, ~3,2 MB in total. PNG-urile originale (~30 MB) au ramas doar pe Drive.

JS-ul construieste caile in cod: BASE + 'monet-' + n + '.jpg'. Pe alt site schimbi doar constanta BASE din capul lui javascriptCode.

Capcane

  • Lenis luat din CDN ca +esm nu aduce si CSS-ul lui, iar tema de aici pune html { scroll-behavior: smooth }. Rezultatul: Lenis pornea, ScrollTrigger se construia, dar orice scrollTo era inghitit si window.scrollY ramanea 0 — caruselul parea mort. Regulile Lenis trebuie lipite in cssCode, nescoped, inclusiv varianta html.lenis, fiindca build-ul ESM nu aplica de fiecare data clasa lenis-smooth: 
    html.lenis, html.lenis body { height: auto; }nhtml.lenis { scroll-behavior: auto !important; }n.lenis.lenis-smooth { scroll-behavior: auto !important; }n.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }n.lenis.lenis-stopped { overflow: hidden; }n.lenis.lenis-smooth iframe { pointer-events: none; }

    Regula generala: orice librarie luata de pe un URL +esm vine fara CSS.

  • Variabila --slot din sursa a fost redenumita --mon-slot, ca sa nu se bata cu altceva de pe site.
  • Tot ce sursa punea pe document.body a fost mutat pe radacina .mon, altfel elementele ies din sectiunea Bricks.
  • Sursa avea import.meta.glob si blocuri import.meta.env.DEV (Vite) — scoase, inlocuite cu o functie simpla care compune URL-ul imaginii.