Gal pastebėjai dažus. Ant kiekvieno rašalo krašto šioje svetainėje auga lašai: jie prisipildo, sunkėja, ištįsta į siūlą ir atitrūksta – taip pat ir ant kiekvieno logotipo juostoje su prekės ženklais, kuriems dirbame. Lašai nukrenta ant to, kas po jais (nuotraukos, kortelės, mygtuko), ir pliumpteli. Ant plokščio paviršiaus jie lieka ramūs. Ant pakreipto – slysta, persilieja per kraštą, teka šonu ir laša toliau. Visa tai baigiasi bala poraštės viršuje, kuri vis kyla, kol tu čia esi.
Mūsų logotipas – lašas, tai ir svetainė turėjo varvėti. Ne ciklinis vaizdo įrašas: tikri dažai, apskaičiuojami tiesiai tavo naršyklėje. Svetainė sukurta Claude Code įrankiu – kaip ir tikėtumeisi iš agentūros, kuri DI užsirašė ant iškabos. Parodyti lašus ekrane buvo lengviausia. Tikrasis darbas – padaryti juos tokius gerus, kad drąsiai paliktum juos veikti viešai prieinamoje svetainėje, ir būtent apie tai šis užrašas.
Dažai, kurie žino, kur yra
Kiekvienas lašas – mažas fizikos žaisliukas. Dažai kaupiasi lašo gale, galas sunkėja, ir kuo jis sunkesnis, tuo greičiau lašas tįsta, kol susiaurėja ir atitrūksta. Krintantis lašelis nuskaito tikrą kontūrą to, į ką atsitrenkia, su apvaliais kampais ir pakreiptomis nuotraukomis, tad dažai ant apvalaus mygtuko apgaubia mygtuką. Jis jaučia ir patį puslapį. Staigiai paskrolink puslapį – ir kabantys lašai nukrenta. Užvesk pelę ant logotipo pradžios puslapyje – jis pakyla, o kartu su juo pakyla ir dažai ant jo.
Prieš patenkant į veikiančią svetainę, viskas turėjo atitikti keturias taisykles:
- Niekada netrukdyti. Dažai negali užblokuoti paspaudimo, uždengti teksto ar sulėtinti puslapio.
- Ramūs, kai paprašai. Jei tavo įrenginys prašo mažiau judesio arba JavaScript išjungtas, gauni ramų puslapį su nupieštais lašais.
- Plokšti dažai. Ryškūs kraštai ir toks pat nedidelis blizgesys kaip logotipe. Jokio suliejimo, jokių gradientų.
- Miega, kai niekas nejuda.
Kur pasidarė sudėtinga
Pirmiausia – apvalūs dalykai. Dauguma tų logotipų tupi piliulės formos mygtukuose, o dažai mėgsta šliaužti aplink jų apvalius galus. Būtent ten lašams ėmė augti aštrūs spygliai, tarsi kas būtų juos apkarpęs žirklėmis. Kodas, kuris piešė kabantį lašą, manė, kad paviršius virš jo plokščias. Piliulės apačioje taip ir yra. Ant lenkimo jis nupiešdavo pleištą aukštyn šlaitu ir dažų juostelę per patį mygtuką. Pataisėm taip, kad dažai abiejose pusėse susitiktų su tikra kreive – taip, kaip abu paliestų rutuliukas, įridentas tarp lašo ir paviršiaus.
Tada atėjo ta dalis, kai naršyklė vos neištirpo. Kuo ilgiau būni puslapyje, tuo jis sunkesnis. Dažai kaupėsi ant kiekvienos nuotraukos ir kortelės, kurią jau pranaršei, o užvedus pelę ant logotipo juosta ėmė strigti. Pirmoji versija rėmėsi idėja, kuriai pritartų dauguma programuotojų: piešti dažus daugybėje mažų drobių ir perpiešti tik tas mažas vietas, kurios keičiasi. Paaiškėjo, kad viskas atvirkščiai. Kiekviena drobė kainuoja grafikos lustui vien tuo, kad egzistuoja ir yra perpiešiama, kad ir kokia maža būtų, o po ilgo apsilankymo jų susikaupdavo apie 250. Kai drobių liko mažiau, bet jos tapo didesnės, ir nustojom piešti tai, ko niekas nemato, jų sumažėjo iki maždaug 80. Teste, kuris pernaršo visą puslapį ir užveda pelę ant tuzino logotipų, grafikos darbo sumažėjo 39 %, o ilgų strigčių – nuo vienuolikos iki vienos.
Matavimas turėjo savų spąstų. Pirmas rodmuo sakė, kad puslapis kas sekundę praranda 19 kadrų. Netiesa. Lašai sąmoningai juda 60 kadrų per sekundę greičiu ekrane, kuris atsinaujina 120 kartų per sekundę, o naršyklė kiekvieną mūsų praleistą kadrą skaičiavo kaip nesėkmę. Lengvai galėjom sugaišti visą dieną optimizuodami pagal tą skaičių. Prieš vaikantis skaičiaus, išsiaiškink, ką jis reiškia.
Svetainė gali turėti charakterį ir vis tiek būti greita. Visa paslaptis – žaismingą dalį vertinti su ta pačia disciplina kaip ir nuobodžiąsias: testuoti tikroje naršyklėje, gerbti žmones, kurie nenori judesio, ir neleisti jai trukdyti to, dėl ko lankytojas atėjo.
Nori, kad ir tavo svetainė atrodytų šiek tiek gyvesnė?