Talán már feltűnt a festék. Az oldalon minden tintaszélből csorgások nőnek: megtelnek, elnehezednek, fonallá nyúlnak, aztán leszakadnak. Ugyanez történik minden logóval is abban a sávban, ahol a márkák futnak, amelyeknek dolgozunk. A cseppek arra esnek, ami alattuk van (egy fotóra, egy kártyára, egy gombra), és szétfröccsennek. Vízszintes felületen nyugton maradnak. Ferdén lecsúsznak, átbuknak a szélén, lefolynak az oldalán, és csöpögnek tovább. Végül mind egy tócsában köt ki a lábléc tetején, és ez a tócsa addig emelkedik, amíg itt maradsz.
A logónk egy csepp, úgyhogy az oldalnak is csöpögnie kellett. Nem loopoló videó: igazi festék, élőben kiszámolva a böngésződben. Claude Code-dal készült, ahogy egy olyan ügynökségtől várnád, amelyik az AI-t kiírta a cégtáblára. A cseppeket képernyőre tenni volt a könnyű rész. Az igazi munka az volt, hogy elég jók legyenek ahhoz, hogy egy éles oldalon hagyjuk őket futni – erről szól ez a jegyzet.
Festék, ami tudja, hol van
Minden csepp egy kis fizikajáték. A festék összegyűlik a csepp aljában, az egyre nehezebb lesz, és minél nehezebb, annál gyorsabban folyik tovább a csepp, míg végül elvékonyodik és leszakad. A lehulló csepp annak a valódi körvonalát olvassa le, amit eltalál, a lekerekített sarkokat és a ferde fotókat is beleértve, így egy kerek gombon a festék a gombra simul. Az oldalt is érzi. Ha görgetés közben megrántod az oldalt, a lógó cseppek lerázódnak. Ha a kezdőlapon egy logó fölé viszed az egeret, a logó megemelkedik, és vele együtt a rajta lévő festék is.
Mielőtt bármi kikerülhetett volna az éles oldalra, négy szabálynak kellett megfelelnie:
- Soha nincs útban. Nem blokkolhat kattintást, nem takarhat ki szöveget, és nem lassíthatja az oldalt.
- Nyugton marad, ha kérik. Ha az eszközöd csökkentett mozgást kér, vagy ki van kapcsolva a JavaScript, nyugalmi állapotban kapod az oldalt, ráfestett cseppekkel.
- Sík festék. Éles szélek és ugyanaz a kis csillanás, mint a logón. Semmi elmosás, semmi színátmenet.
- Alszik, ha semmi sem mozog.
Ahol necces lett
Először is a kerek dolgok. A logók többsége pirula alakú gombokban ül, és a festék imád a kerek végeik köré kúszni. Pont ott kezdtek a cseppekből éles tüskék nőni, mintha valaki ollóval vágta volna körbe őket. A lógó cseppet kirajzoló kód azt feltételezte, hogy a felette lévő felület vízszintes. A pirula alján az is. Az íven viszont egy éket rajzolt fel a lejtőn, és egy vékony festékcsíkot magára a gombra. A megoldás az volt, hogy a festék mindkét oldalon a valódi ívhez simuljon, ahogy egy csepp és a felület közé gurított golyó is mindkettőhöz hozzáérne.
Aztán jött az a rész, amikor majdnem leolvadt a böngésző. Minél tovább maradtál, annál nehezebb lett az oldal. A festék felgyűlt minden fotón és kártyán, amely mellett elgörgettél, és ha egy logó fölé vitted az egeret, akadozni kezdett a sáv. Az első verzió egy olyan elvet követett, amire a legtöbb fejlesztő rábólintana: rajzoljuk a festéket sok kis canvasra, és csak azokat a kis részeket rajzoljuk újra, amelyek változnak. Kiderült, hogy ez pont fordítva működik. Minden canvas kerül valamibe a grafikus chipnek már azzal, hogy létezik és újrarajzolják, akármilyen kicsi, és egy hosszabb látogatás végére nagyjából 250 volt belőlük. Kevesebb, de nagyobb canvasszal, és azzal, hogy nem festjük meg, amit senki sem lát, ezt kb. 80-ra vittük le. Egy tesztben, amely végiggörgeti az egész oldalt, és egy tucat logó fölé viszi az egeret, a grafikus munka 39%-kal csökkent, a hosszú akadások száma pedig tizenegyről egyre esett.
A mérésnek is megvolt a maga csapdája. Az első mérésünk szerint az oldal másodpercenként 19 képkockát dobott el. Nem így volt. A cseppek szándékosan másodpercenként 60 képkockával futnak, egy olyan kijelzőn, amely másodpercenként 120-szor frissül, és a böngésző minden kihagyott képkockát hibának számolt. Simán elmehetett volna egy napunk arra, hogy ehhez a számhoz optimalizálunk. Mielőtt egy szám után futsz, nézd meg, mit jelent.
Egy weboldalnak lehet személyisége úgy is, hogy közben gyors marad. A trükk az, hogy a játékos részt ugyanazzal a fegyelemmel kezeled, mint az unalmasakat: valódi böngészőben teszteled, tiszteletben tartod azokat, akik nem kérnek mozgást, és távol tartod attól, amiért a látogató jött.
Neked is kéne egy kicsit elevenebb weboldal?