Võib-olla märkasid värvi. Iga tindiserv sellel saidil kasvatab tilku, mis täituvad, lähevad raskeks, venivad niidiks ja kukuvad lahti – ja sama teeb iga logo ribal, kus on brändid, kelle heaks me töötame. Piisad kukuvad sellele, mis nende all on (foto, kaart, nupp), ja pritsivad laiali. Tasasel pinnal jäävad nad paigale. Kaldus pinnal libisevad, voolavad üle ääre, jooksevad mööda külge alla ja tilguvad edasi. Lõpuks koguneb kõik loiguks jaluse peale ja loik tõuseb seni, kuni sa lehel oled.
Meie logo on tilk, nii et veeb pidi tilkuma. Mitte tsükliline video, vaid päris värv, mille sinu brauser jooksvalt välja arvutab. Ehitasime selle Claude Codega, nagu agentuurilt, kelle sildil on AI, oodatagi võib. Tilgad ekraanile saada oli lihtne. Päris töö oli teha need nii heaks, et neid võiks avalikul veebil jooksma jätta – ja sellest see märge räägibki.
Värv, mis teab, kus ta on
Iga tilk on väike füüsikamänguasi. Värv koguneb tilga otsa, ots läheb raskemaks ja mida raskemaks see läheb, seda kiiremini tilk edasi jookseb, kuni kael kitseneb ja tilk lahti kukub. Kukkuv piisk tunneb ära selle päris kuju, mida ta tabab, ümarad nurgad ja kaldus fotod kaasa arvatud, nii et ümmargusel nupul liibub värv ümber nupu. Ta tunnetab ka lehte. Kui skrollides lehte järsult tõmbad, raputab see rippuvad tilgad lahti. Kui viid hiire avalehel logo kohale, kerkib logo ja koos sellega kerkib ka värv tema peal.
Enne kui midagi sellest avalikule saidile lubati, pidi see täitma nelja reeglit:
- Ei jää kunagi ette. See ei tohi takistada klikki, katta teksti ega lehte aeglasemaks teha.
- Paigal, kui palutakse. Kui su seadmes on sisse lülitatud vähendatud liikumine või JavaScript on välja lülitatud, näed lehte rahulikuna, tilgad peale maalitud.
- Lame värv. Teravad servad ja sama väike läige nagu logol. Ei mingit hägu ega gradiente.
- Magab, kui midagi ei liigu.
Kus läks keeruliseks
Kõigepealt ümarad asjad. Enamik neist logodest istub kapslikujulistes nuppudes ja värvile meeldib nende ümaratest otstest ümber hiilida. Täpselt seal hakkasid tilkadele kasvama teravad ogad, nagu oleks keegi neid kääridega pügannud. Kood, mis rippuva tilga joonistas, eeldas, et pind selle kohal on tasane. Kapsli all servas see ongi. Kumerusel aga joonistas kood nõlvast üles kiilu ja nupu peale riba värvi. Lahendus oli lasta värvil kohtuda päris kumerusega mõlemalt poolt – nii, nagu tilga ja pinna vahele veeretatud pall puudutaks mõlemat.
Siis tuli see osa, kus brauser peaaegu sulas. Mida kauem lehel olid, seda raskemaks leht läks. Värv kuhjus igale fotole ja kaardile, millest mööda skrollisid, ja kui hiire logo kohale viisid, hakkas riba jõnksutama. Esimene versioon järgis ideed, millega enamik arendajaid nõustuks: joonista värv paljudele väikestele lõuenditele ja joonista uuesti ainult need väikesed tükid, mis muutuvad. Selgus, et see käib just vastupidi. Iga lõuend maksab graafikakiibile midagi juba sellega, et ta olemas on ja teda uuesti joonistatakse, olgu ta kui väike tahes, ja pika külastuse järel oli neid umbes 250. Kui tegime lõuendeid vähem ja suuremaks ning jätsime joonistamata selle, mida keegi ei näe, jäi neid umbes 80. Testis, mis skrollib kogu lehe läbi ja viib hiire tosina logo kohale, vähenes graafikatöö 39% ja pikki takerdumisi jäi üheteistkümne asemel üks.
Mõõtmisel oli oma lõks. Esimene mõõtmine ütles, et leht kaotab 19 kaadrit sekundis. Ei kaotanud. Tilgad jooksevad meelega 60 kaadrit sekundis ekraanil, mis värskendub 120 korda sekundis, ja brauser luges iga vahele jäetud kaadri veaks. Oleksime kergesti võinud terve päeva selle numbri vastu optimeerida. Enne kui numbrit taga ajad, kontrolli, mida see tähendab.
Veebil võib olla iseloom ja ta võib ikkagi kiire olla. Nipp on suhtuda mängulisse osasse sama distsipliiniga kui igavatesse: testi seda päris brauseris, austa inimesi, kes liikumist ei taha, ja hoia see eemale sellest, mida külastaja tegema tuli.
Tahad, et ka sinu veeb tunduks natuke elavam?