Opis — ce avem si pentru ce se potriveste

La fiecare proiect, poza se deschide din centru, apoi numarul si titlul. Meniul se deruleaza, iar al doilea click inchide totul invers. Bun pentru un fotograf, un studio de productie sau un brand de moda cu putine proiecte mari.

Seamana putin cu Cominvi Menu (si acolo pagina se micsoreaza), dar acolo meniul e din linkuri, nu din poze.

Un titlu sta fix alaturi cat treci prin carduri. Bun pentru pasii unui serviciu, un proces de lucru sau un onboarding.

Seamana cu Carduri in teanc (acolo cardurile se opresc in trepte si nu se sting). Sageata de pe ultimul card vine din Ionicons, de pe unpkg.

Fiecare bucata are marime, viteza si rotatie la intamplare; miscarea e calculata cadru cu cadru pe gsap.ticker. Bun pentru o lansare, un anunt, o pagina de multumire sau un buton de inscriere.

Pe telefon nu exista hover: porneste doar la atingere, si nu pe orice browser.

Apoi fundalul se ridica, rama urca si ramane in hero, iar titlul curge ca banda pe sub ea; textele urca rand cu rand. Bun pentru un fotograf, o galerie, o expozitie sau un eveniment cu data.

Seamana cu Preloader cu bara (tot Codegrid, aceeasi tehnica a pozelor); in plus are contorul, banda si rama care ramane in pagina. CustomEase se incarca de pe jsdelivr.

Opt pagini facute din aceleasi componente: acasa cu hero, cautare si o banda de cuvinte; o pagina de categorie cu filtre; pagina unui spectacol cu program, bilete, galerie si intrebari frecvente; o campanie cu numaratoare inversa; parteneri; contact cu formular validat; un catalog cu toate cele 41 de componente si o pagina 404. Cinci teme de culoare (Night, Ocean, Orchid, Raspberry, Cream) se schimba dintr-o singura clasa pe sectiune. Bun ca punct de plecare pentru un site de evenimente, teatru, festival sau orice brand de seara.

Construit de noi, nu portat: HTML, CSS si JS simplu, fara build si fara GSAP, deci nu foloseste nimic din ce e global pe site. Marimile sunt numite ca la haine (text-xs ... text-3xl, space-3xs ... space-3xl) si vin din tokens.json; sursa, cu generatoarele, e in Drive, Claude-projects/Golden-Hour. Pachetul pentru Bricks (Color Manager, variabile, clase, Theme Style) e separat si NU e aplicat aici, ca sa nu schimbe stilul Karlson al celorlalte demo-uri. Archivo si Archivo Expanded sunt libere si gazduite local; imaginile sunt generate cu AI. Mutarea in Bricks e descrisa in bricks-migration.md.

La final ramane un teanc. Bun pentru pasii unui proces, pachete de servicii, abonamente sau etapele unui proiect.

Suprapunerea e CSS pur (sticky); JS-ul doar micsoreaza. Fara imagini, doar GSAP si ScrollTrigger. E aceeasi miscare ca abonamentele de pe Pagina de carte, scoasa singura. Detalii la reteta.

Antetul care se ascunde la derulare, coperta care cade si se aseaza, ideile care urca pe rand si se deschid singure pe masura ce ajungi la ele, o bara de jos care arata capitolul la care esti, cardurile de abonament care se lipesc unul peste altul ca un teanc, si o bufnita care se uita peste marginea footer-ului. Bun pentru o pagina de curs, de carte, de serviciu cu pachete, sau orice produs vandut pe abonament.

Demo propriu, nu portare: inspirat de paginile de carte de pe deepstash.com, cu textul si designul nostru, in culorile site-ului. Zero imagini. Doar GSAP si ScrollTrigger. Detalii la reteta.

La apasare, toata pagina coboara, se micsoreaza si isi rotunjeste colturile, iar deasupra apar trei coloane de linkuri ale caror cuvinte urca pe rand. Cand derulezi in jos, logo-ul si butonul ies din ecran. Bun pentru un site de agentie sau de studio, curat, cu putine pagini.

Ca la ForgeAutomotive, pagina e un obiect: Lenis ruleaza pe container, nu pe fereastra, deci orice animatie la scroll de pe aceeasi pagina trebuie legata de container. Detalii la reteta.

Rotita sau degetul misca evantaiul, iar cand te opresti se aseaza pe cea mai apropiata poza. Nu are capat. Bun pentru un portofoliu de fotograf sau de moda, unde pozele sunt tot continutul.

Doar GSAP, nimic altceva. Pozele sunt o lista sus in JS — oricate, se repeta in bucla. Ocupa tot ecranul si opreste rotita; pentru o banda intr-o pagina, vezi reteta.

Dintr-o singură poză de produs: tortul regenerat curat (GPT Image 2.5, fundal transparent), un clip de arc parțial (Kling 3.0), cadre re-eșantionate la mișcare uniformă și desenate pe canvas în discul mov. Bun pentru cofetărie, restaurant, orice produs care merită văzut din mai multe unghiuri.

Fără GSAP: canvas 2D + requestAnimationFrame, cadre WebP decodate o dată în ImageBitmap, pre-scalate la mărimea canvasului, cross-fade sub-cadru și inerție. 160 de cadre la 820 px pe desktop (4,7 MB), 80 la 560 px pe telefon (1,4 MB). Rețeta completă, în engleză, e chiar în pagină, sub hero. Același disc trăiește și în hero-ul nativ de pe la-prajituri.pinul.com/contact/.

Cel din fata se inclina, vine spre tine si iese pe sus, iar urmatorul urca in locul lui. Textul ramane in stanga, neatins. Bun pentru un portofoliu scurt, o colectie sau o lista de servicii ilustrate, unde vrei ca fiecare imagine sa fie privita pe rand.

Pozele sunt puse din CSS, cate una pe card — la mutare se schimba doar cele cinci URL-uri. Tine pagina fixata opt ecrane de derulare; cu mai multe carduri, creste durata. Detalii la reteta.

Apoi o litera se desprinde din cuvant, se roteste si coboara pe pagina, iar inauntrul ei se aseaza, din litere amestecate, „CONTACT US”. Bun pentru un site de brand cu o singura chemare la actiune, unde numele e si meniul.

Zero imagini — cuvantul e un SVG, deci se inlocuieste cu logotipul clientului. Litera desprinsa e aleasa dupa pozitie in SVG, nu dupa nume. Foloseste ScrambleTextPlugin, care nu e global pe site: se incarca doar pe pagina asta. Detalii la reteta.

Fiecare balon apare intai ca un cerc cu trei puncte care „scriu”, apoi se deschide in intrebare sau raspuns, iar textul vine rand cu rand. La derulare inapoi totul se strange la loc. Bun pentru o pagina de servicii sau de agentie, unde un FAQ obisnuit ar fi o lista moarta.

Zero imagini — tot efectul e cod, deci se muta oriunde doar cu textul clientului. Pentru o intrebare noua se copiaza un bloc, scriptul le ia singur pe toate. Lenis e optional: daca nu se incarca, merge cu scroll nativ. Detalii la reteta.

Pagina se stringe spre centru si dispare intr-un punct, iar meniul vine din spate, dintr-un plan aflat la 350px in adancime, trecand din neclar in clar. Linkurile se rostogolesc litera cu litera la hover. Bun pentru un site cu putine sectiuni unde intrarea in meniu trebuie sa fie evenimentul, nu o comoditate.

Cele doua miscari se suprapun 0.8 secunde din 1 — de aceea pare un singur gest, nu doua. Atentie la mutare: aici Lenis ruleaza pe un container, nu pe fereastra, iar documentul nu deruleaza deloc; orice cod care se bazeaza pe scroll-ul ferestrei nu va vedea nimic. Detalii la reteta.

Pupilele merg cel mai mult, capul se intoarce in ax dupa ele, corpul se apleaca abia simtit. Clipeste din cand in cand, iar cand nu misti mouse-ul se uita singura in jur. Bun ca mascota, ca detaliu viu pe o pagina statica, sau pe o pagina de 404.

Desenata direct in SVG, nu incarcata de nicaieri — deci se recoloreaza si se remodeleaza oricand, si nu are nicio problema de licenta. Zero librarii in afara de GSAP, care e oricum global. Capul se intoarce prin alunecarea fetei peste craniu, nu prin rotatie: o rotatie ar arata ca si cum si-ar culca capul pe umar.

Da ocol, se inclina in directia in care merge si isi trage o umbra care se departeaza cand goneste dupa mouse. Cand mouse-ul sta pe loc, ea continua sa se invarta. Bun ca mascota pentru un brand jucaus, sau ca detaliu viu pe o pagina altfel statica.

Efectul vine din trei intarzieri suprapuse, nu dintr-o urmarire simpla — de aceea nu arata a cursor personalizat. Pana la prima miscare de mouse, si deci pe orice telefon, albina hoinareste singura, asa ca pagina nu arata moarta la incarcare. Refoloseste albina Lottie de la LeoParpeix.

Se leagana dintr-o parte in alta, se inclina in directia in care merge si isi trage o umbra care se departeaza si paleste cand urca. Bun pentru un brand jucaus care vrea o mascota, sau pentru o galerie de produs care are nevoie de un fir care sa o tina.

Albina e o animatie Lottie randata de doua ori — o data normal, o data filtrata negru si turtita, ca umbra. Traiectoria nu vine dintr-un tween, ci din doua liste de keyframes citite manual, deci se schimba editand niste numere, fara sa atingi animatia. Lenis si lottie se incarca doar pe pagina asta.

O grila de 12 poze pluteste incet pe diagonala, nevazuta. Se vad doar pozele din jurul cursorului, tot mai mari cu cat sunt mai aproape, asa ca mouse-ul lumineaza un cerc de imagini ca o lanterna. Cursorul e urmarit cu o mica intarziere. Bun pentru o pagina de lansare, un portofoliu de fotograf sau un hero care invita la explorare.

Sablonul era HTML simplu servit prin Vite; rescris fara build, cu GSAP si fontul Google Sans Flex servite din site. Pe telefon nu exista mouse, asa ca grupul de poze sta fix in centru, ca in original. Pozele intra in ordinea in care se incarca, deci modelul se schimba putin de la o vizita la alta.

Fiecare poza de pe site e redesenata in timp real din puncte, ca o imprimare in raster, si se aduna din zgomot cand intra in ecran. Mouse-ul lasa in urma o dara de pixeli care se sting. Titlurile intra litera cu litera, unele alunecand de jos, altele palpaind ca un ecran care porneste. Acasa incepe cu o incarcare scurta, apoi hero-ul cu cladirea in raster si doua butoane care urca din josul paginii. Work e un carusel fara capat, fara derulare: roata mouse-ului, sagetile sau degetul muta proiectele, iar fundalul se redeseneaza la fiecare. Research, Firm, Partnerships, Journal si Contact au benzi de imagini, liste de domenii, echipa, posturi deschise si intrebari frecvente care se deschid pe rand. Intre pagini trece o cortina albastra. Bun pentru o firma de tehnologie, un laborator, un studio de date sau orice brand care vrea sa para exact si rece.

Sablonul era Next.js cu TypeScript si three.js. Rescris fara build, in fisiere simple; three.js e servit din site. Fonturile, Google Sans Flex si Google Sans Code, sunt libere si au ramas. Cinci probleme gasite si reparate: butoanele din hero nu apareau niciodata, fiindca animatia lor era in pagina, nu in buton; pe Work barele de sus si de jos ramaneau invizibile, pentru ca asteptau o derulare pe o pagina care nu se deruleaza; iconitele desenate in raster cantareau cate 117 KB, iar pagina Research ajunsese la 1,5 MB; identificatoarele din iconite se repetau pe aceeasi pagina; si o spatiere intre litere scrisa in procente, pe care browserul o ignora. Cod mort scos: un cub 3D si un panou de reglaje pe care nu le folosea nimic. Fara JavaScript pozele apar normal si textul se poate citi.

Acasa incepe cu o incarcare de cinci secunde, in care patru poze se ridica una peste alta si numele studioului e taiat in litere care intra alternativ de sus si de jos. Urmeaza un showreel care se prinde de ecran si creste pe masura ce derulezi, cu sunet pornit dintr-un buton rotund din mijloc. Mai jos, sase proiecte care se rotesc din lateral ca niste carti aruncate pe masa, sase recomandari care se stivuiesc una peste alta si patru benzi de imagini care trec in sensuri opuse, fiecare cu un cuvant in mijloc ale carui litere se ingroasa una cate una la derulare. Subsolul arunca zece obiecte in aer si le lasa sa cada. Meniul e o banda de cinci cuvinte uriase care se plimba dupa mouse, cu o bara portocalie care se muta si isi schimba latimea sub cuvantul pe care stai. Work e un sertar cu sase dosare colorate din care ies trei poze cand treci peste unul. Studio are cinci fise de echipa care zboara peste un titlu ce aluneca lateral. Stories e un player de povesti cu bare de progres, ca la telefon. Bun pentru un studio de design sau animatie, o agentie creativa, un portofoliu de ilustrator sau un brand care vrea sa para viu.

Sablonul era Next.js cu 12 componente. Rescris fara build, in fisiere simple. Doua din cele patru fonturi nu se puteau publica: PP Neue Montreal si PP Pangram Sans, amandoua de la Pangram Pangram, cu toate drepturile rezervate. Inlocuite cu Archivo si Familjen Grotesk, alese prin comparatie la marimile reale din pagina; Big Shoulders Display si Geist Mono sunt libere si au ramas. Pe pagina de povesti sablonul folosea siglele reale Behance, Dribbble, Awwwards si Adobe pentru niste povesti inventate, asa ca au fost scoase si inlocuite cu canalele studioului. Cinci probleme gasite si reparate: showreel-ul cerea sapte cadre desi arhiva are sase, deci la fiecare al saptelea pas cerea un fisier care nu exista; cinci identificatoare erau scrise de doua ori pe aceeasi pagina; titlul de la contact isi pierdea ultima litera, fiindca masca de text taie si pe orizontala, nu doar pe verticala; doua variabile de culoare nu erau definite nicaieri; iar butonul de e-mail ducea la pagina de start in loc de adresa. Legaturile catre Instagram, YouTube si Twitter au fost inlocuite cu pagini din site. Fara JavaScript navigatia devine cinci butoane, iar sectiunile prinse de ecran se desfac in liste care se pot citi.

Negru de carbune, galben de utilaj si fotografii de santier tinute sub un strat intunecat. Acasa porneste cu o incarcare de opt secunde, cu un semn care se roteste din sfert in sfert si o bara care umple in cinci trepte, apoi titlul urca din masti. Initiative e un carusel care se schimba singur la patru secunde: imaginea intra dintr-o parte, banda de ani se lateste si se string ca un elastic, iar un colt din dreapta jos arata deja cadrul urmator. Misiune are doua fise mari care aluneca una langa alta la derulare, patru reguli de lucru care se deschid rand pe rand si un perete de cifre. Impact prinde ecranul si trece prin sapte cadre cu text care se schimba sub degetul tau, apoi un ceas cu trei ace care pornesc odata. Pagina unei initiative are o banda de doisprezece cadre in dreapta care muta poza mare din mijloc si ii schimba forma la fiecare pas. Bun pentru o companie industriala, o firma de constructii sau de energie, un raport de sustenabilitate sau orice brand care are de aratat cifre si teren.

Sablonul era Next.js cu 22 de componente si 22 de fisiere CSS module. Rescris fara build, in fisiere simple. Amandoua fonturile aveau probleme: GT America Mono era versiunea Trial a lui Grilli Type, cu Trial scris chiar in numele fontului, iar PP Neue Montreal e de la Pangram Pangram, cu toate drepturile rezervate. Inlocuite cu Geist Mono si Archivo, amandoua libere si gazduite local; originalele sunt pastrate separat. Alte trei lucruri reparate: toate spatierile intre litere erau scrise in procente, ceea ce nu e CSS valid si browserul le ignora; o regula din pagina de contact tintea o clasa definita in alt modul, deci nu s-a potrivit niciodata cu nimic, nici macar in sablonul original; iar sase reguli ramasesera fara element. In plus, la rotirea telefonului textul deja taiat in randuri se incurca, asa ca acum se retaie singur. Legaturile externe (Google Maps, Instagram, YouTube, LinkedIn si creditul din subsol) au fost scoase. Fara JavaScript pagina ramane citibila, iar caruselul se transforma intr-o lista simpla cu toate cele opt initiative.

Galben pal, o condensata neagra cat tot ecranul si etichete scrise de mana lipite peste titluri. Acasa incepe cu o incarcare de sapte secunde (sase imagini care se aduna, numaratoare pana la 100, apoi cinci panouri colorate care se ridica), apoi un titlu cu trei patratele negre intre cuvinte care se deschid la trecerea mouse-ului si arata cate o ilustratie. Mai jos, patru proiecte care se aseaza unul peste altul si patru fise de recomandare in evantai care se imprastie cand alegi una. About are o sectiune unde desenul de dedesubt se descopera doar pe unde ai trecut cu mouse-ul, cinci fise de cifre care cad in loc si trei carti de echipa care se string, se despart si se intorc. Work e un perete de zece randuri de proiecte care creste spre tine la derulare. Expertise stivuieste patru fise mari, Careers are o lista unde fiecare rand se roteste pe verticala, Contact are patru carti de joc care se raspandesc si se intorc. Subsolul e plin de pastile cu servicii care cad si se aduna sub gravitatie si pot fi imbrancite cu mouse-ul. Bun pentru un studio de ilustratie sau animatie, o agentie creativa, un ilustrator independent sau orice brand care vrea sa fie tinut minte.

Sablonul era Next.js cu 24 de componente si 29 de fisiere CSS module. Rescris fara build, in fisiere simple. Trei probleme pe care le-am gasit si reparat: mastile de text ale GSAP nu ascundeau nimic (clasa generata are alt nume decat cea presupusa, iar fara un display casetele nu taie), deci textul tranzitiei statea vizibil peste pagina; textele ascunse erau coborate exact cat inaltimea randului, prea putin pentru o litera mai inalta decat randul, si li se vedeau varfurile; iar stilurile cereau variabile de font pe care le adauga build-ul, asa ca meniul, eticheta si numaratoarea se afisau in Times. Legaturile catre retelele sociale, din meniu si din subsol, au fost inlocuite cu adrese reale din site. Fonturile (SCHABO, Host Grotesk, DM Mono, Shadows Into Light) sunt libere pentru comercial si gazduite local. Fara JavaScript pagina ramane citibila si navigabila.

Pagina care pleaca se ridica si se stinge, cea care vine se descopera de jos in sus ca o masca. Bara de navigare ramane fixa in tot acest timp, ca si cum n-ar fi fost o incarcare noua. Bun ca schelet pentru un portofoliu de trei-patru pagini, o galerie sau o prezentare scurta unde tranzitia e vedeta.

Sablonul era Next.js 16 cu React 19 si folosea componenta experimentala <ViewTransition>. Aici nu mai e nevoie de React deloc: aceleasi doua keyframes, plus o regula @view-transition { navigation: auto }, fac exact acelasi lucru intre pagini reale. Bara ramane pe loc pentru ca poarta un view-transition-name in CSS. Fonturile sunt gazduite local. Am reparat si o greseala din sablon: fundalul era scris "va(--bg)" in loc de "var(--bg)", deci nu se aplica niciodata.

Patru cercuri colorate se deschid unul dupa altul, patru produse zboara pe langa ecran si ies, sigla se aseaza si titlul apare litera cu litera. Crem si portocaliu pe maro inchis, condensata foarte grasa. Bun de pus in fata unei pagini de restaurant, de fast-food, de bautura sau a oricarui produs care are ambalaj frumos.

Sablonul era HTML si CSS scris de mana, servit prin Vite. Rescris fara build: gsap si SplitText se incarca direct, fara harta de importuri. Barlow Condensed si Instrument Sans sunt gazduite local; sablonul importa toate cele noua grosimi si toate cursivele, aici sunt doar cele trei grosimi folosite. Fara JavaScript pagina se vede intreaga, fara animatia de intrare.

Acasa e un ecran cu numele la latimea paginii si un final cu simulare de fluid pe WebGL care raspunde la mouse. Studio are un titlu care ocupa tot ecranul, trei sectiuni de pozitionare, un teanc de fise cu echipa care se aduna la derulare si un carusel infinit de logouri de clienti. Work e un carusel de sase proiecte cu miniaturi laterale si un titlu care se schimba cuvant cu cuvant. Sample Project e un studiu de caz complet, Contact are aceeasi simulare de fluid. Bun pentru o agentie, un studio de design, un freelancer cu personalitate sau orice brand care nu vrea sa fie discret.

Sablonul era HTML si CSS scris de mana, servit prin Vite (9.553 linii plus 30 de shadere). Rescris fara build: o harta de importuri leaga gsap, lenis si three de copii locale, iar shaderele se citesc ca fisiere simple. PP Neue Montreal venea impachetat ca .ttf desi Pangram Pangram il vinde: inlocuit cu Archivo. Humane, care e liber si pentru comercial, a ramas. Un import de gsap de pe skypack si doua linkuri catre retelele Codegrid au disparut. Pagina de acasa incarca in sablon trei scripturi pentru sectiuni care nu existau in HTML; are acum subsolul pe care il incarca deja. Fara JavaScript exista un meniu de rezerva, altfel nu se putea iesi din pagina.

Acasa vine dupa un preloader cu contor si doua cuvinte care se intalnesc, apoi statistici, proiecte in evidenta, recenzii si o galerie. Pagina de studio are doua secvente fixate la derulare: zece imagini care aluneca pe un arc pe langa un cadru fix, si un proces in patru pasi cu indicator. Plus index de spatii, arhiva de douazeci de imagini, un studiu de caz si contact. Bun pentru un birou de arhitectura, un studio de design de interior sau orice brand care vinde calm si materialitate.

Sablonul era Next.js 15 cu React 19 (6.430 linii). Tranzitia intre pagini nu mai are nevoie de librarie: e View Transitions API a browserului, pornita dintr-o singura regula CSS, cu acelasi efect de cerc. Zero dependente externe; Manrope si DM Mono sunt gazduite local. In original o regula .overlay nescopata din galerie facea ca preloader-ul sa ruleze invizibil peste hero.

Acasa incepe cu un preloader in care se deseneaza o linie de coasta, apoi patru placi cu litere uriase si o imagine se aseaza una in alta la derulare (GSAP Flip), o busola desenata in SVG isi roteste acul si cinci carduri se aduna intr-un teanc fixat. Chronicles e un pachet de zece fise, una pe ecran, la rotita sau la sageti. Catalog e un perete curbat de fotografii in WebGL prin care te plimbi cu mouse-ul. Field Report are un radar fixat: un ac matura cercul si sterge o fotografie peste alta. Transmit are trei carduri care se despart si se intorc. Bun pentru un muzeu, o arhiva, un proiect editorial sau orice brand care vinde vechime si atmosfera.

Sablonul era Next.js 16 cu React 19 (5.663 linii). Fontul de titlu, Palace, venea impachetat ca .ttf fara nicio licenta, desi Tropical Type il vinde: inlocuit cu Cormorant Garamond, gazduit local, alaturi de Bellefair si DM Mono care erau deja OFL. Cele cinci linkuri catre retelele Codegrid din meniu au devenit adresele arhivei. Tranzitia intre pagini e aceeasi grila de patratele, refacuta fara librarie de rutare. Zero cereri externe. Pachetul de fise raspunde acum si la sagetile de la tastatura, iar fara JavaScript catalogul si arhiva se vad ca grile simple.

Acasa vine dupa un preloader cu bara de progres, apoi o grila de noua proiecte care se descopera de jos in sus, un studiu de caz lung, un slider de fotografii unde dai click pe jumatatea din stanga sau din dreapta, o pagina de bio cu CV animat si contact. Meniul acopera tot ecranul cu o miscare proprie. Bun pentru un developer sau un studio mic care vrea ceva linistit si bine facut.

Sablonul era Next.js (App Router) cu @gsap/react si locomotive-scroll. E rescris de mana in sase pagini HTML, cu GSAP, Lenis si SplitType locale. Zero dependente externe. Fontul comercial PP Neue Montreal e inlocuit cu Archivo, variabil: un singur fisier per subset in loc de sase TTF-uri.

Meniu pe tot ecranul care merge si de la tastatura, carusel de echipa care se trage si cu degetul, anunturi de angajare care se deschid. Trei fonturi cu licenta libera, gazduite local. Bun ca punct de plecare pentru un studio, un fotograf sau o agentie mica.

Filmul de pe pagina de proiect vine de pe un CDN public. Siglele de client sunt marci reale, de inlocuit.

Preloader care trece prin douazeci de cadre, un hero desenat de un shader WebGL care pixeleaza imaginea sub cursor, un slider de proiecte pe tot ecranul cu trecere prin shader, index de regizori, o pagina de cultura si contact. Cel mai greu proiect din biblioteca. Bun pentru o casa de productie, un studio de film sau orice brand care vrea sa para scump.

Sablonul e multi-pagina cu Vite. Aici e fara build: GSAP cu trei plugin-uri si Lenis se incarca normal, iar three.js, ukiyojs si html2canvas sunt ESM, rezolvate cu un import map local. In original doua videoclipuri de hero nu erau livrate deloc, deci ambele sectiuni ramaneau goale; acum shader-ul ruleaza pe o imagine. Zero dependente externe.

Acasa incepe cu un preloader al carui titlu se umple pana la suta, apoi o galerie in care fiecare imagine creste si scade la derulare, un meniu cu card care se schimba din miniaturi, recenzii pe un carusel infinit care se trage cu mouse-ul si o invitatie la masa cu un cerc care se deseneaza. Pagina Essence are un titlu care se rupe si se mareste pe o derulare lunga, sase carduri lipite doua cate doua si opt bucatari carora li se schimba numele litera cu litera. Carte e meniul complet, Book are trei fise care intra in evantai peste o sectiune fixata. Bun pentru un restaurant, un bistro, un hotel mic sau orice loc care se vinde prin fotografie si liniste.

Sablonul era Next.js 16 cu React 19 (5.225 linii). Fontul de afis, Roslindale, venea de la cdnfonts in variante de test ale unui font comercial, iar numele cerut in CSS ("Roslindale Variable") nu exista in acel fisier: in sablonul original titlurile cadeau pe sans-serif. Inlocuit cu Bodoni Moda, gazduit local, alaturi de Host Grotesk si DM Mono. Tranzitia intre pagini e acum View Transitions API din CSS, fara librarie. Meniul, acordeonul si comenzile caruselului sunt butoane reale; meniul complet si recenziile sunt in HTML, deci se citesc si fara JavaScript.

Acasa are o secventa de spotlight la derulare, pagina de about are un camp de fizica unde etichetele de competente cad si se rostogolesc, work e un slider pe tot ecranul, plus un jurnal de proiect si contact. Bun pentru un developer sau un designer care vrea personalitate, nu sobrietate.

Sablonul era deja multi-pagina, cu Vite pe deasupra. Zero dependente externe acum: GSAP cu ScrollTrigger si SplitText, Lenis si matter.js sunt locale, iar cele trei fonturi Google (patruzeci de variante cerute, importate de doua ori) sunt gazduite local in sase fisiere woff2, 69 KB.

Acasa isi scrie numele litera cu litera, langa o coloana densa de date: clienti, functii, premii. Urmeaza un carusel de sapte proiecte unde dai click oriunde si urmatorul slide se descopera pe jumatate de ecran, o grila de fotografii alb-negru, o galerie cu acelasi mecanism si un studiu de caz pe fundal inchis. Bun pentru un designer, un fotograf sau oricine are putine proiecte dar vrea sa le arate incet.

Sablonul era React + React Router + Vite. E rescris de mana in cinci pagini HTML, cu GSAP local si zero dependente externe. In original nu se incarca niciun font (trei familii numite, niciun @font-face, iar una era o versiune 'trial'), o regula nescopata facea toate linkurile din paragrafe albe pe alb, si se importa o librarie intreaga de iconite pentru o singura sageata.

Acasa are statistici, cinci misiuni si o sectiune finala cu carduri care intra la derulare. Observatorul are un carusel orizontal de sase pasi fixat pe ecran, o fraza mare rupta pe randuri si un contor de echipaj care se roteste. Expeditii e o lista de saisprezece randuri care se rasucesc pe verticala la trecerea cursorului. Traces e o arhiva de zece obiecte pe un carusel 3D cu filtru goo si un panou de detaliu. Bun pentru un brand tehnic, un studio de joc, un produs cu poveste sau orice prezentare care vrea sa arate ca un panou de bord.

Sablonul era HTML si CSS scris de mana, dar servit prin Vite, cu importuri npm pentru GSAP si Lenis. Rescris fara build: o harta de importuri leaga numele pachetelor de copii locale. Toate cele patru fonturi sunt gazduite local, inclusiv SCHABO Condensed, care venea de la cdnfonts. Iconitele ionicons de pe unpkg au devenit SVG in pagina. Zero cereri externe. Meniul, acordeonul si comenzile caruselului sunt butoane reale; fara JavaScript pagina se vede intreaga si arhiva se afiseaza ca grila simpla.

Acasa e doar numele in litere uriase, cu doua linkuri ale caror litere se imprastie la hover. Urmeaza o lista lunga de proiecte care se aprind si se sting la derulare, o arhiva cu nume mari si o imagine centrala care se schimba din 100 in 100 de pixeli de scroll, o pagina de informatii densa si un studiu de caz. Bun pentru un art director, un fotograf sau oricine vrea ca tipografia sa fie continutul.

Sablonul era o aplicatie React + React Router + Vite (1783 linii, bundle de 429 KB). E rescris de mana in cinci pagini HTML: JS-ul scade la ~130 KB (doar GSAP, ScrollTrigger si Lenis, gazduite local), fiecare pagina are URL propriu si nimic nu mai cere node_modules ca sa fie modificat. Zero dependente externe.

Sase pagini: acasa cu grila de noua proiecte, banda derulanta, tabel de competente si lista de premii; despre, cu numele rupt peste un portret; index de proiecte; premii; contact; si un studiu de caz. Bun pentru un designer, un developer sau un studio mic care are destul de aratat cat sa umple sase pagini.

Zero dependente externe: GSAP, Lenis, fontul si singura iconita (inline SVG, in locul intregii librarii ionicons pe care sablonul o incarca de la unpkg pentru o sageata) sunt locale. Navigatia si subsolul sunt web components definite o singura data, nu copiate in sase fisiere. In sablon ambele butoane magnetice erau moarte (cod GSAP 2 cu librarie GSAP 3) si niciun titlu nu se vedea fara JavaScript.

Hero peste o scena 3D, un panou intunecat 'About' care se deschide din mijloc si devine fundal pentru portrete si lista de servicii, carusel de cinci proiecte care urca pe rand, arhiva de douasprezece randuri si un cuvant urias de contact. A doua pagina e un studiu de caz cu coloana de imagini fixata si sertar lateral cu detalii. Bun pentru un designer, un fotograf sau orice portofoliu care vrea sa arate multa munca fara sa para o galerie.

Singura dependenta externa e scena 3D din hero, un iframe de la Spline; daca dispare, hero-ul ramane gol si nimic altceva nu se strica. Restul e local: GSAP, Lenis, SplitType si sase fonturi woff2. Sablonul original nu declara niciun @font-face, asa ca nu incarca de fapt niciun font, iar caruselul avea toate imaginile rupte.

Loader cu bara de progres, scroll lin cu Lenis, carduri de proiect care se fixeaza pe rand la derulare, tabel de preturi si formular de contact. Titluri foarte late si inclinate. Bun pentru o agentie, un studio de produs sau orice serviciu care se vinde pe o pagina.

Fara nicio dependenta externa: GSAP, Lenis, SplitType si fonturile sunt gazduite local, iar cele 13 iconite sunt SVG inline (6,7 KB, fata de ~180 KB libraria). Sablonul incarca si un vizualizator 3D pe care nu-l folosea nicaieri.

Meniu pe tot ecranul cu o cortina SVG care se lasa peste pagina, scroll lin cu locomotive, pagina de proiecte care deruleaza pe orizontala si un disc care se roteste la click. Tipografie display uriasa peste fotografie, pe negru. Bun pentru un fotograf, un muzician sau un studio care vrea ceva de atmosfera.

Refacut cu o singura versiune de GSAP (sablonul avea patru) si fara nicio dependenta externa: fonturi si librarii gazduite local. Fonturile originale nu erau licentiate pentru web, asa ca sunt inlocuite cu unele libere.

Un singur clip video sta in spatele primelor doua slide-uri si furnizeaza fotografia amandurora, asa ca tranzitia dintre ele nu are ce sa scape nepotrivit. Restul slide-urilor sunt aranjamente diferite peste aceeasi grila.

Click pe un card si coboara o cortina peste pagina de proiect.

Cat e stins, cursorul se poarta ca o lanterna care descopera camera luminata.

Portretul plin ecran se strange intr-o coloana, numele urca in stanga sus, citatul si miniatura apar de jos.

Hero cu patru cadre, acordeon de servicii, banda de proiecte care curge, contact cu fundal in parallax.

Click pe una si imaginea zboara intr-un cadru mare, cu fisa proiectului alaturi.

Fiecare proiect are pagina lui, care se deschide din imagine.

Click pe unul si zboara in fata.

Se termina cu planul cladirii.

Cele apropiate mult, cele departate putin. Numele si linia de sub el stau pe loc. E heroul folosit pe lotcastudio.ro. Bun pentru o agentie sau un portofoliu care vrea sa arate multe proiecte deodata, fara sa le aseze intr-o grila.

Construit din elemente Bricks native si CSS (7 @keyframes pentru plutire); scriptul doar trimite pozitia mouse-ului in doua variabile CSS si se opreste cand campul s-a asezat. Varianta pe canvas a fost stearsa in octombrie 2026 ca dublura.

Cu ora locala in colt.

Incarca o librarie de pe unpkg.

Incarca o librarie de pe unpkg.

Incarca o librarie de pe unpkg.

Incarca o librarie de pe unpkg.

De consultat, nu de copiat.

Imaginile vin de pe Unsplash.

before.jpg / after.jpg stau pe CodePen.

Imaginile vin de pe Unsplash.

Adancime dintr-o imagine plata.

Imaginile stau pe greensock.com.

MotionPath.

Tehnica Apple.

Imaginile vin de pe Unsplash.

Vedere explodata.

Fasiile se ridica una cate una la intrare, apoi se misca pe scroll cu viteze usor diferite, asa ca imaginea pare ca respira.

Imaginile vin de pe picsum.photos — sunt aleatorii la fiecare incarcare.

Texturile stau pe CodePen.

Cateva imagini stau pe CodePen.