Opis — ce avem si pentru ce se potriveste

Polite Chaos sase pagini

Studio creativ care se prezinta ca o gluma bine facuta: hartie crem, o condensata neagra cat tot ecranul si portocaliu doar unde trebuie. 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.

Oreana sase pagini

Companie miniera care isi asuma fiecare tona scoasa din pamant: 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.

Blunt sapte pagini

Studio de ilustratie care nu vorbeste in soapta: 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.

Aethos trei pagini

Trei imagini pe tot ecranul, cu un singur cuvant peste fiecare, si o tranzitie intre ele: 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.

BucksSauce efect

Intrare in pagina, nu site intreg: 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.

Lemon Bureau cinci pagini

Studio de design cu personalitate: galben strident pe negru, o condensata uriasa cu majuscule si un cursor propriu. 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.

House of Epochs cinci pagini

Arhiva fictiva a unor constructii monumentale: crem si chihlimbar pe negru, serif clasic la scara foarte mare, sunet ambiental optional. 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.

Salle Blanche patru pagini

Restaurant fin de Florenta: crem cald pe negru, fotografie de mancare la scara mare si un serif de afis foarte contrastant. 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.

Orbit Matter cinci pagini

Observator spatial fictiv: portocaliu pe negru, litera condensata foarte mare, grila tehnica peste tot si un preloader din patratele. 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.

Terrene sase pagini

Site de birou de arhitectura, piatra calda pe negru, foarte linistit. 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.

Stefan Markovic sase pagini

Portofoliu de developer, pe negru, sobru si curat. 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.

Negative Films sase pagini

Site de casa de productie de film, negru pe os cu un singur rosu. 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.

Juno Watts cinci pagini

Portofoliu de developer creativ, crem si negru, cu tipografie foarte grasa si un ton jucaus. 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.

Alejandro Ortiz cinci pagini

Portofoliu pe alb, cu un serif cursiv mare care duce tot designul. 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.

Aiden Brooks cinci pagini

Portofoliu de art director, pe negru, foarte tipografic. 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.

Damien Tsarantos sase pagini

Portofoliu de creative director, pe negru, cu tipografie uriasa care se scrie litera cu litera la derulare. 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.

Alex Finley doua pagini

Portofoliu de designer, pe crem si negru: 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.

Nexus site intreg

Landing de agentie pe o singura pagina, pe negru cu gradient rosu: 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.

Sierra Montana site intreg

Portofoliu cinematic pe noua pagini: 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.

Null Studio site intregdepinde de resurse externe

Sablon de agentie creativa refacut de la zero: sase pagini de HTML, CSS si JS, fara framework si fara build. 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.

Maya Hays site intreg

Deck de prezentare: 13 slide-uri 16:9 navigate cu Previous / Next. 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.

Studio Burnett site intreg

Intra cu numele urias si o imagine care rasfoieste, apoi imaginile se desfac intr-un rand orizontal infinit. Click pe un card si coboara o cortina peste pagina de proiect.

Sommers site intreg

Hero cu doua clipuri suprapuse si un intrerupator in litera O: aprinzi lumina in camera. Cat e stins, cursorul se poarta ca o lanterna care descopera camera luminata.

Kate Monroe site intreg

Hero cu video derulat de scroll: portretul plin ecran se strange intr-o coloana, numele urca in stanga sus, citatul si miniatura apar de jos.

Casa Alba site intreg

Site de o pagina pentru un studio de arhitectura sau amenajari: hero cu patru cadre, acordeon de servicii, banda de proiecte care curge, contact cu fundal in parallax.

Paul Hamilton site intreg

Grila infinita de miniaturi pe care o tragi cu mouse-ul, cu inertie. Click pe una si imaginea zboara intr-un cadru mare, cu fisa proiectului alaturi.

Studio Monet site intreg

Sase imagini vin in spirala spre centru, apoi devin un carusel scrubat pe scroll. Fiecare proiect are pagina lui, care se deschide din imagine.

Clares site intreg

Sfera 3D care se roteste, cu 12 proiecte asezate pe suprafata ei. Click pe unul si zboara in fata.

Linden site intreg

Scroll cinematic: sase secvente video care se aseaza singure la locul lor cand te opresti din derulat. Se termina cu planul cladirii.

Field Flight site intreg

Camp 3D peste care zbori la scroll, cu ceata si lumina de dupa-amiaza. Three.js.

Field Flight nativ site intreg

Acelasi zbor, dar construit din elemente Bricks native in loc de canvas. Mai usor de intretinut.

Sprite cu cafea efect

Un desen animat cadru cu cadru, legat de scroll: personajul bea cafeaua pe masura ce derulezi.

Scena parallax efectdepinde de resurse externe

Straturi de peisaj care se misca cu viteze diferite la scroll. Adancime dintr-o imagine plata.

Imaginile stau pe greensock.com.

Card 3D care se intoarce efectdepinde de resurse externe

Cardul se roteste in 3D la hover si arata spatele: pret, descriere, ce vrei tu.

Texturile stau pe CodePen.

Secventa pe canvas efect

Sute de cadre desenate pe canvas si derulate cu scroll-ul — obiectul se roteste sub degetul tau. Tehnica Apple.

Obiect desfacut in piese efect

Obiectul se desface in componentele lui pe masura ce derulezi. Vedere explodata.

Inainte / dupa efectdepinde de resurse externe

Doua imagini suprapuse, cu linia de taiere miscata de scroll.

before.jpg / after.jpg stau pe CodePen.

Scroll orizontal (containerAnimation) efectdepinde de resurse externe

Panourile se deruleaza lateral in timp ce tu derulezi normal in jos.

Cateva imagini stau pe CodePen.

Carduri pe orizontala efect

Sir de carduri care trece lateral, cu scroll lin.

Carduri care se suprapun efectdepinde de resurse externe

Cardurile urca unul peste altul si raman fixate cat le citesti.

Portretele si textura stau pe CodePen.

Card care se despica efectdepinde de resurse externe

Cardul se rupe in doua la scroll si arata ce e dedesubt.

Incarca o librarie de pe unpkg.

Grila care se deschide efectdepinde de resurse externe

Grila de poze se desface si te duce spre imaginea din centru.

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

Grila cu parallax efect

Imagini intr-o grila, fiecare cu viteza ei la scroll.

Zoom pe imagine efectdepinde de resurse externe

Imaginea creste pana umple ecranul in timp ce derulezi.

Imaginile vin de pe Unsplash.

Carusel cu indicator efect

Carusel cu numarul slide-ului, titluri care se schimba si link.

Carusel cu titluri pe litere efect

Titlurile intra litera cu litera la fiecare schimbare de slide.

Lista de proiecte fixata efectdepinde de resurse externe

Proiectele raman fixate pe ecran cu bara de progres, an si etichete, cat le parcurgi.

Incarca o librarie de pe unpkg.

Lista cu previzualizare la hover efect

Treci peste un rand din lista si fundalul devine imaginea acelui proiect. Cu ora locala in colt.

Meniu overlay cu poze efect

Meniul acopera ecranul, iar fiecare link isi arata imaginea la hover.

Meniu pe tot ecranul efectdepinde de resurse externe

Meniu clasic fullscreen, cu sub-navigatie.

Incarca o librarie de pe unpkg.

Logo care urca in header efectdepinde de resurse externe

Logo-ul mare din hero se micsoreaza si se aseaza in bara de sus cand derulezi.

Imaginile vin de pe Unsplash.

Intrare cu panouri efectdepinde de resurse externe

Panouri colorate acopera ecranul, se dau la o parte si descopera pagina.

Incarca o librarie de pe unpkg.

Preloader cu bara efect

Bara de incarcare, imagini care se schimba, apoi titlul intra pe rand.

Hero despicat efect

O singura imagine taiata in sase fasii verticale. Fasiile se ridica una cate una la intrare, apoi se misca pe scroll cu viteze usor diferite, asa ca imaginea pare ca respira.

Text animat + banda efectdepinde de resurse externe

Titluri care intra cuvant cu cuvant si o banda de text care curge continuu.

Incarca o librarie de pe unpkg.

Titlu mare pe scroll efect

Un cuvant urias care se desface in litere pe masura ce derulezi.

Banda de text infinita efect

Textul curge la nesfarsit si isi schimba directia dupa cum derulezi.

Desen pe traseu efect

Un SVG care merge pe un traseu desenat, legat de scroll. MotionPath.

Hero cu SVG animat efect

Desen SVG care se construieste singur la intrarea in ecran.

Hero cu video scrubat efect

Video-ul din hero merge inainte si inapoi dupa scroll.

Hero bento efect

Hero impartit in casute de marimi diferite, fiecare cu continutul ei.

Element dupa cursor efect

Ceva mic care urmareste cursorul cu intarziere.

ScrollTrigger clamp efectdepinde de resurse externe

Demo tehnic: clamp, pin, desenare SVG. De consultat, nu de copiat.

Imaginile vin de pe Unsplash.