Misschien is de verf je al opgevallen. Aan elke inktrand op deze site groeien druppels die vollopen, zwaar worden, uitrekken tot een draad en loslaten. Dat geldt ook voor elk logo in de strook met merken waarvoor we werken. De druppels landen op wat eronder zit (een foto, een kaart, een knop) en spatten uiteen. Op een vlakke bovenkant blijven ze liggen. Op een schuine glijden ze weg, lopen over de rand, langs de zijkant naar beneden en druppelen verder. Alles eindigt in een plas boven op de footer, en die plas blijft stijgen zolang je blijft.
Ons logo is een druppel, dus de website moest druipen. Geen video in een loop: echte verf, live berekend in je browser. We bouwden het met Claude Code, zoals je mag verwachten van een bureau dat AI op de gevel zet. Druppels op het scherm krijgen was het makkelijke deel. Ze goed genoeg maken om ze op een live website te laten draaien, dát was het echte werk, en daar gaat deze notitie over.
Verf die weet waar die zit
Elke druppel is een klein natuurkundig speeltje. Verf verzamelt zich in de bol, de bol wordt zwaarder, en hoe zwaarder hij wordt, hoe sneller de druppel uitloopt, tot hij insnoert en loslaat. Een vallende druppel leest de echte omtrek van waar hij op valt, afgeronde hoeken en schuine foto’s incluis, dus verf op een ronde knop sluit strak om die knop. Hij voelt de pagina ook. Scrol je met een flinke zwiep, dan schudden hangende druppels los. Hover je op de homepage over een logo, dan komt het omhoog, en de verf erop gaat mee.
Voordat er ook maar iets van op de live site mocht, moest het aan vier regels voldoen:
- Nooit in de weg. Het mag geen klik blokkeren, geen tekst bedekken en de pagina niet vertragen.
- Stil als je dat vraagt. Vraagt je apparaat om minder beweging, of staat JavaScript uit, dan krijg je de pagina in rust, met de druppels erop geschilderd.
- Vlakke verf. Strakke randen en dezelfde kleine glans als het logo. Geen blur, geen verlopen.
- In slaap als er niets beweegt.
Waar het lastig werd
Om te beginnen: ronde dingen. De meeste van die logo’s zitten in pilvormige knoppen, en verf kruipt maar al te graag om hun ronde uiteinden. Precies daar kregen de druppels ineens scherpe punten, alsof iemand ze met een schaar had bijgeknipt. De code die een hangende druppel tekende, ging ervan uit dat het oppervlak erboven vlak was. Aan de onderkant van een pil klopt dat. Op de bocht tekende hij een wig de helling op en een reepje verf over de knop zelf. De oplossing: de verf aan beide kanten de echte curve laten raken, zoals een balletje dat je tussen de druppel en het oppervlak rolt ze allebei zou raken.
Toen kwam het deel waarin de browser bijna smolt. Hoe langer je bleef, hoe zwaarder de pagina werd. Op elke foto en kaart waar je langs scrolde, stapelde de verf zich op, en als je over een logo hoverde, haperde de strook. De eerste versie volgde een idee waar de meeste developers instemmend bij knikken: teken de verf op veel kleine canvassen en teken alleen de stukjes opnieuw die veranderen. Het bleek precies omgekeerd. Elk canvas kost de grafische chip iets, alleen al omdat het bestaat en opnieuw getekend wordt, hoe klein ook, en na een lang bezoek waren het er zo’n 250. Minder, grotere canvassen, en niet tekenen wat niemand ziet: dat bracht het terug naar ongeveer 80. In een test die de hele pagina doorscrolt en over twaalf logo’s hovert, daalde het grafische werk met 39% en gingen de lange haperingen van elf naar één.
Meten had zijn eigen valkuil. Volgens onze eerste meting liet de pagina elke seconde 19 frames vallen. Klopte niet. De druppels draaien bewust op 60 frames per seconde, op een scherm dat 120 keer per seconde ververst, en de browser telde elk frame dat we oversloegen als mislukt. We hadden makkelijk een dag kunnen optimaliseren op dat getal. Check wat een getal betekent voordat je erachteraan jaagt.
Een website kan persoonlijkheid hebben en toch snel zijn. De truc: behandel het speelse deel met dezelfde discipline als de saaie delen. Test het in een echte browser, respecteer de mensen die geen beweging willen, en houd het uit de weg van waarvoor de bezoeker kwam.
Wil je dat je eigen website ook wat meer leeft?