Du har måske lagt mærke til malingen. Hver blækkant på sitet får dryp der fyldes op, bliver tunge, strækker sig ud i en tråd og slipper taget – og det samme gør hvert logo i rækken af brands vi arbejder for. Dråberne lander på det der er under dem (et foto, et kort, en knap) og splatter ud. På en flad overside bliver de liggende. På en skrå glider de, løber ud over kanten, ned ad siden og drypper videre. Det hele ender i en pøl oven på footeren, som bliver ved med at stige så længe du bliver.
Vores logo er et dryp, så hjemmesiden måtte dryppe. Ikke en video på loop: ægte maling, regnet ud live i din browser. Det er bygget med Claude Code, som du nok havde regnet med fra et bureau der har AI på skiltet. At få dryp på skærmen var den nemme del. At gøre dem gode nok til at køre på et live website var det egentlige arbejde, og det handler den her note om.
Maling der ved hvor den er
Hvert dryp er et lille fysiklegetøj. Malingen samler sig forneden, dråben bliver tungere, og jo tungere den bliver, jo hurtigere løber dryppet, indtil det snører sig sammen og slipper. En faldende dråbe læser den faktiske kontur af det den rammer, afrundede hjørner og skæve fotos inklusive, så maling på en rund knap slutter tæt om knappen. Den mærker også siden. Giv siden et ryk mens du scroller, og hængende dråber ryster sig løs. Hold musen over et logo på forsiden, og det løfter sig – med malingen på.
Før noget af det måtte komme på live-sitet, skulle det overholde fire regler:
- Aldrig i vejen. Det må ikke blokere et klik, dække tekst eller gøre siden langsommere.
- Stille når du beder om det. Hvis din enhed beder om reduceret bevægelse, eller JavaScript er slået fra, får du siden i ro med dryppene malet på.
- Flad maling. Skarpe kanter og den samme lille glans som logoet. Ingen blur, ingen gradienter.
- Sover når intet bevæger sig.
Her blev det tricky
Først og fremmest: runde ting. De fleste af de logoer sidder i pilleformede knapper, og maling elsker at kravle rundt om de runde ender. Det var præcis der dråberne begyndte at få skarpe pigge, som om nogen havde klippet dem til med en saks. Koden der tegnede en hængende dråbe, gik ud fra at overfladen over den var flad. I bunden af en pille er den det. På kurven tegnede den en kile op ad skråningen og en tynd stribe maling hen over selve knappen. Løsningen var at lade malingen møde den rigtige kurve på begge sider, sådan som en kugle der blev rullet ind mellem dråben og overfladen, ville røre dem begge.
Så kom delen hvor browseren næsten smeltede. Jo længere du blev, jo tungere blev siden. Malingen hobede sig op på hvert foto og hvert kort du scrollede forbi, og når du holdt musen over et logo, hakkede striben. Den første version fulgte en idé de fleste udviklere ville nikke genkendende til: tegn malingen på masser af små canvas, og gentegn kun de små bidder der ændrer sig. Det viste sig at være lige omvendt. Hvert canvas koster grafikchippen noget bare ved at eksistere og blive tegnet igen, uanset hvor lille det er, og efter et langt besøg var der omkring 250 af dem. Færre og større canvas, og ingen maling af det ingen kan se, fik det ned på cirka 80. I en test der scroller hele siden igennem og holder musen over et dusin logoer, faldt grafikarbejdet med 39 %, og de lange hak gik fra elleve til ét.
Målingen havde sin egen fælde. Vores første aflæsning sagde at siden tabte 19 frames i sekundet. Det gjorde den ikke. Dråberne kører med vilje med 60 frames i sekundet, på en skærm der opdaterer 120 gange i sekundet, og browseren talte hver frame vi sprang over, som en fejl. Vi kunne sagtens have brugt en dag på at optimere efter det tal. Tjek hvad et tal betyder, før du jagter det.
Et website kan have personlighed og stadig være hurtigt. Tricket er at behandle den legesyge del med samme disciplin som de kedelige dele: test den i en rigtig browser, respektér dem der ikke vil have bevægelse, og hold den ude af vejen for det den besøgende kom for.
Skal dit eget website føles lidt mere levende?