Možda ti je boja već zapela za oko. Na svakom rubu tinte na ovoj stranici rastu kapi koje se pune, otežaju, istegnu u nit i otkinu, a isto rade i svi logotipi u traci brendova za koje radimo. Kapi padaju na ono što je ispod njih (fotografiju, karticu, gumb) i rasprsnu se. Na ravnoj površini ostanu mirno. Na nagnutoj kliznu, preliju se preko ruba, cure niz bok i kapaju dalje. Sve završi u lokvi na vrhu footera, koja raste dok god si na stranici.
Naš logo je kap, pa je i web-stranica morala kapati. Ne video u petlji, nego prava boja, izračunata u stvarnom vremenu u tvom pregledniku. Napravljena je uz Claude Code, kako i očekuješ od agencije koja AI ističe na sav glas. Prikazati kapi na ekranu bilo je lako. Pravi posao bio je napraviti ih dovoljno dobrima da ih pustimo da rade na web-stranici koja je live, i o tome je ovaj tekst.
Boja koja zna gdje je
Svaka kap je mala fizikalna igračka. Boja se skuplja u trbuhu kapi, kap postaje teža, a što je teža, to se brže izdužuje, sve dok se pri vrhu ne stanji i otkine. Kap koja pada čita stvarni obris onoga u što udari, i zaobljene kutove i nagnute fotografije, pa se boja na okruglom gumbu priljubi uz gumb. Osjeća i samu stranicu. Skrolaj naglo i viseće kapi se otresu. Prijeđi mišem preko logotipa na početnoj stranici i on se podigne, a s njim i boja na njemu.
Prije nego što je išta od toga smjelo na pravu web-stranicu, moralo je poštovati četiri pravila:
- Nikad ne smeta. Ne smije blokirati klik, prekriti tekst ni usporiti stranicu.
- Miruje kad se to traži. Ako je na tvom uređaju uključeno smanjeno kretanje ili je JavaScript isključen, dobiješ stranicu u mirovanju, s naslikanim kapima.
- Ravna boja. Oštri rubovi i isti mali odsjaj kao na logu. Bez zamućenja, bez gradijenata.
- Spava kad se ništa ne miče.
Gdje je zapelo
Prvo, okrugle stvari. Većina tih logotipa sjedi u gumbima u obliku pilule, a boja se rado zavlači oko njihovih zaobljenih krajeva. Upravo su tamo kapi počele dobivati oštre šiljke, kao da ih je netko podrezao škarama. Kod koji je crtao viseću kap pretpostavljao je da je površina iznad nje ravna. Na dnu pilule i jest. Na zavoju je nacrtao klin uz kosinu i trakicu boje preko samog gumba. Rješenje je bilo pustiti boju da dotakne stvarnu krivulju s obje strane, kao što bi je dotaknula kuglica ugurana između kapi i površine.
Onda je došao dio u kojem se preglednik zamalo rastopio. Što se dulje ostajalo na stranici, to je bila teža. Boja se gomilala na svakoj fotografiji i kartici pokraj koje se skrolalo, a prelazak mišem preko logotipa tjerao je traku da zapinje. Prva verzija slijedila je ideju s kojom bi se složila većina developera: crtaj boju na puno malih canvasa i ponovno iscrtavaj samo male dijelove koji se mijenjaju. Ispalo je baš obrnuto. Svaki canvas grafički čip nešto košta već samim time što postoji i što se ponovno iscrtava, koliko god bio malen, a nakon dugog posjeta bilo ih je oko 250. Manje canvasa, ali većih, i nikakvo crtanje onoga što nitko ne vidi spustili su broj na otprilike 80. U testu koji skrola cijelu stranicu i prelazi mišem preko desetak logotipa grafička obrada pala je za 39 %, a dugih zastoja bilo je jedan umjesto jedanaest.
I mjerenje je imalo svoju zamku. Prvo očitanje reklo je da stranica gubi 19 sličica svake sekunde. Nije. Kapi namjerno rade na 60 sličica u sekundi, na ekranu koji se osvježava 120 puta u sekundi, a preglednik je svaku sličicu koju smo preskočili brojao kao grešku. Lako smo mogli potrošiti cijeli dan optimizirajući prema tom broju. Provjeri što broj znači prije nego što ga kreneš juriti.
Web-stranica može imati karakter i svejedno biti brza. Štos je u tome da razigrani dio dobije jednaku disciplinu kao i oni dosadni: testiraj ga u pravom pregledniku, poštuj ljude koji ne žele animacije i drži ga podalje od onoga po što je posjetitelj došao.
Želiš da i tvoja web-stranica bude malo življa?