Barva ti je morda že padla v oči. Na vsakem črnilnem robu te strani rastejo kaplje, ki se napolnijo, otežijo, raztegnejo v nitko in odtrgajo, in enako velja za vsak logotip v traku znamk, za katere delamo. Kapljice pristanejo na tem, kar je pod njimi (fotografija, kartica, gumb), in se razpljusknejo. Na ravni površini obmirujejo. Na nagnjeni zdrsnejo, se prelijejo čez rob, stečejo po stranici in kapljajo naprej. Vse se na koncu zbere v luži na vrhu noge strani, ki raste, dokler si tu.
Naš logotip je kaplja, zato je morala kapljati tudi spletna stran. Ne video v zanki, ampak prava barva, preračunana sproti v tvojem brskalniku. Naredili smo jo s Claude Code, kot se za agencijo, ki ima AI napisan na izveski, tudi spodobi. Spraviti kaplje na zaslon je bil lažji del. Pravo delo je bilo, da so postale dovolj dobre, da jih lahko pustimo teči na spletni strani v resnični uporabi, in o tem je ta zapisek.
Barva, ki ve, kje je
Vsaka kaplja je majhna fizikalna igračka. Barva se nabira v trebuščku, ki postaja vse težji, in težji kot je, hitreje kaplja polzi naprej, dokler se ne zoži v vrat in odtrga. Padajoča kapljica prebere pravi obris tega, v kar zadene, vključno z zaobljenimi vogali in nagnjenimi fotografijami, zato se barva na okroglem gumbu oprime gumba. Čuti tudi stran. Med skrolanjem sunkovito potegni stran in viseče kapljice se otresejo. Na domači strani pojdi z miško čez logotip in ta se dvigne, z njim pa tudi barva na njem.
Preden je kar koli od tega smelo na spletno stran v resnični uporabi, je moralo upoštevati štiri pravila:
- Nikoli v napoto. Ne sme blokirati klika, prekriti besedila ali upočasniti strani.
- Pri miru, ko prosiš. Če tvoja naprava zahteva manj gibanja ali je JavaScript izklopljen, dobiš stran v mirovanju, s kapljami, naslikanimi nanjo.
- Ploska barva. Ostri robovi in enak droben lesk kot na logotipu. Brez zamegljenosti, brez prelivov.
- Spi, ko se nič ne premika.
Kje se je zataknilo
Najprej okrogle stvari. Večina teh logotipov sedi v gumbih v obliki kapsule, barva pa se rada priplazi okoli njihovih zaobljenih koncev. Prav tam so kaplje začele poganjati ostre konice, kot bi jih nekdo pristrigel s škarjami. Koda, ki je risala visečo kapljico, je predpostavljala, da je površina nad njo ravna. Na spodnji strani kapsule tudi je. Na krivini pa je narisala klin navzgor po pobočju in tanek pas barve čez sam gumb. Rešitev je bila, da se barva na obeh straneh sreča s pravo krivino, tako kot bi se obeh dotaknila kroglica, zakotaljena med kapljico in površino.
Nato je prišel del, ko se je brskalnik skoraj stopil. Daljši kot je bil obisk, težja je postajala stran. Barva se je kopičila na vsaki fotografiji in kartici, ki je šla mimo med skrolanjem, ob prehodu z miško čez logotip pa se je trak zatikal. Prva različica je sledila ideji, ki bi ji prikimala večina razvijalcev: barvo riši na kup majhnih platen (canvas) in na novo izrisuj le majhne koščke, ki se spremenijo. Izkazalo se je, da je ravno obratno. Vsako platno grafični čip nekaj stane že samo zato, ker obstaja in se na novo izrisuje, pa naj bo še tako majhno, po dolgem obisku pa jih je bilo okoli 250. Z manj, a večjimi platni in brez risanja tistega, česar nihče ne vidi, smo jih spravili na približno 80. V testu, ki preskrola celo stran in gre z miško čez ducat logotipov, se je grafično delo zmanjšalo za 39 %, dolgih zatikov pa je bilo namesto enajst samo še en.
Tudi merjenje je imelo svojo past. Prva meritev je pokazala, da stran vsako sekundo izgubi 19 sličic. Ni jih. Kaplje namenoma tečejo pri 60 sličicah na sekundo, na zaslonu, ki se osveži 120-krat na sekundo, brskalnik pa je vsako sličico, ki smo jo izpustili, štel kot napako. Zlahka bi cel dan optimizirali samo zato, da bi popravili to številko. Preden loviš številko, preveri, kaj pomeni.
Spletna stran ima lahko osebnost in je še vedno hitra. Fora je, da igrivi del obravnavaš z enako disciplino kot dolgočasne: preizkusi ga v pravem brskalniku, spoštuj ljudi, ki gibanja nočejo, in naj ne bo v napoto temu, zaradi česar je obiskovalec prišel.
Tudi tvoja spletna stran potrebuje malo več življenja?