Možno ti už padla do oka farba. Na každom atramentovom okraji tohto webu rastú kvapky, ktoré sa naplnia, oťažejú, natiahnu sa do tenkej nite a odtrhnú sa – a to isté robí každé logo v páse značiek, pre ktoré pracujeme. Kvapky dopadnú na to, čo je pod nimi (fotku, kartu, tlačidlo), a rozprsknú sa. Na rovnom povrchu zostanú ležať. Na naklonenom sa zošmyknú, pretečú cez okraj, stečú po boku a kvapkajú ďalej. Všetko skončí v kaluži nad pätičkou, ktorá stúpa, kým tu zostávaš.
Naše logo je kvapka, takže web musel kvapkať. Žiadne video v slučke: skutočná farba, ktorú tvoj prehliadač počíta naživo. Postavili sme ho v Claude Code, ako sa na agentúru s AI na štíte patrí. Dostať kvapky na obrazovku bolo to jednoduchšie. Skutočná makačka bola urobiť ich dosť dobré na to, aby mohli bežať na ostrom webe – a o tom je táto poznámka.
Farba, ktorá vie, kde je
Každá kvapka je malá fyzikálna hračka. Farba sa zbiera v baňke, baňka oťažieva a čím je ťažšia, tým rýchlejšie kvapka steká, až sa zúži a odtrhne. Padajúca kvapka číta skutočný obrys toho, na čo dopadne, vrátane zaoblených rohov a naklonených fotiek, takže farba na okrúhlom tlačidle tlačidlo obopne. Cíti aj stránku. Švihni stránkou pri scrollovaní a visiace kvapky sa uvoľnia. Prejdi myšou nad logo na domovskej stránke a nadvihne sa – a farba na ňom spolu s ním.
Kým smela na ostrý web, musela dodržať štyri pravidlá:
- Nikdy nezavadzia. Nesmie blokovať kliknutie, prekryť text ani spomaliť stránku.
- Pokoj, keď si oň povieš. Ak tvoje zariadenie žiada obmedzený pohyb alebo máš vypnutý JavaScript, dostaneš stránku v pokoji s namaľovanými kvapkami.
- Plochá farba. Ostré okraje a rovnaký jemný lesk ako logo. Žiadne rozmazanie, žiadne prechody.
- Spí, keď sa nič nehýbe.
Kde to zaškrípalo
V prvom rade okrúhle veci. Väčšina tých log sedí v tlačidlách v tvare pilulky a farba sa rada plazí okolo ich zaoblených koncov. Presne tam začali kvapkám rásť ostré hroty, akoby ich niekto pristrihol nožnicami. Kód, ktorý kreslil visiacu kvapku, predpokladal, že povrch nad ňou je rovný. Na spodku pilulky aj je. Na oblúku však nakreslil klin hore po svahu a tenký pásik farby cez samotné tlačidlo. Riešením bolo nechať farbu stretnúť sa so skutočnou krivkou z oboch strán, tak ako by sa oboch dotkla gulička vložená medzi kvapku a povrch.
Potom prišla časť, pri ktorej sa prehliadač skoro roztopil. Čím dlhšie tu niekto zostal, tým ťažšia bola stránka. Farba sa kopila na každej fotke a karte, okolo ktorej sa prescrollovalo, a keď sa prešlo myšou nad logo, pás sa zasekával. Prvá verzia stavala na nápade, ktorému by väčšina vývojárov prikývla: kresliť farbu na množstvo malých canvasov a prekresľovať len malé kúsky, ktoré sa zmenia. Ukázalo sa, že je to naopak. Každý canvas stojí grafický čip niečo už len tým, že existuje a prekresľuje sa, nech je akokoľvek malý, a po dlhej návšteve ich bolo okolo 250. Keď sme prešli na menej, zato väčších canvasov a prestali kresliť to, čo nikto nevidí, kleslo to asi na 80. V teste, ktorý prescrolluje celú stránku a prejde myšou nad tuctom log, klesla grafická záťaž o 39 % a počet dlhých zaseknutí klesol z jedenástich na jedno.
Aj meranie malo svoju pascu. Prvé meranie tvrdilo, že stránka stráca 19 snímok každú sekundu. Nestrácala. Kvapky bežia zámerne pri 60 snímkach za sekundu na obrazovke, ktorá sa obnovuje 120-krát za sekundu, a prehliadač každú snímku, ktorú sme vynechali, počítal ako chybu. Pokojne sme mohli celý deň optimalizovať podľa tohto čísla. Kým sa za číslom rozbehneš, over si, čo znamená.
Web môže mať osobnosť a zároveň byť rýchly. Trik je brať hravú časť s rovnakou disciplínou ako tie nudné: otestovať ju v skutočnom prehliadači, rešpektovať ľudí, ktorí pohyb nechcú, a nepúšťať ju do cesty tomu, kvôli čomu návštevník prišiel.
Chceš, aby aj tvoj web pôsobil o niečo živšie?