Du har kanske lagt märke till färgen. Varje bläckkant på sajten får rinningar som fylls på, blir tunga, dras ut till en tråd och släpper taget – och samma sak händer med varje logga i raden av varumärken vi jobbar åt. Dropparna landar på det som ligger under (ett foto, ett kort, en knapp) och splattar. På en plan yta ligger de still. På en lutande glider de, rinner över kanten, ner längs sidan och droppar vidare. Allt hamnar till slut i en pöl ovanpå sidfoten, som fortsätter stiga så länge du stannar kvar.
Vår logga är en rinning, så sajten måste rinna. Ingen video på loop: riktig färg, uträknad live i din webbläsare. Den byggdes med Claude Code, som man kan hoppas av en byrå som har AI på skylten. Att få rinningar på skärmen var den enkla delen. Att göra dem tillräckligt bra för att låta dem gå på en live-sajt var det riktiga jobbet, och det är vad den här anteckningen handlar om.
Färg som vet var den är
Varje rinning är en liten fysikleksak. Färgen samlas i droppen längst ner, droppen blir tyngre, och ju tyngre den blir desto snabbare rinner den, tills den smalnar av och släpper. En fallande droppe läser av den verkliga konturen på det den träffar, rundade hörn och lutande foton inräknade, så färg på en rund knapp sluter sig kring knappen. Den känner av sidan också. Svep till snabbt när du scrollar så skakas hängande droppar loss. Hovra över en logga på startsidan så lyfter den, och färgen på den lyfter med.
Innan något av det fick gå live på sajten måste det följa fyra regler:
- Aldrig i vägen. Den får inte blockera ett klick, täcka text eller göra sidan långsam.
- Stilla när du ber om det. Om din enhet ber om minskad rörelse, eller om JavaScript är avstängt, får du sidan i vila med rinningarna målade på.
- Platt färg. Skarpa kanter och samma lilla glans som loggan. Ingen oskärpa, inga övertoningar.
- Sover när inget rör sig.
Där det blev knepigt
Först av allt: runda saker. De flesta av logotyperna sitter i pillerformade knappar, och färgen älskar att krypa runt deras rundade ändar. Det var precis där dropparna började få vassa spetsar, som om någon hade klippt till dem med sax. Koden som ritade en hängande droppe utgick från att ytan ovanför var platt. På undersidan av en pillerknapp är den det. I kurvan ritade den i stället en kil uppför sluttningen och en tunn strimma färg tvärs över själva knappen. Lösningen var att låta färgen möta den verkliga kurvan på båda sidor, så som en kula som rullats in mellan droppen och ytan skulle nudda båda.
Sedan kom delen där webbläsaren nästan smälte. Ju längre du stannade, desto tyngre blev sidan. Färg samlades på varje foto och kort du scrollade förbi, och när du höll pekaren över en logotyp började remsan hacka. Första versionen byggde på en idé som de flesta utvecklare skulle nicka instämmande åt: rita färgen på massor av små canvasytor och rita om bara de små bitar som ändras. Det visade sig vara bakvänt. Varje canvas kostar grafikkretsen något bara genom att finnas och ritas om, hur liten den än är, och efter ett långt besök fanns det runt 250 av dem. Färre och större canvasytor, och att inte måla det som ingen kan se, tog ner det till ungefär 80. I ett test som scrollar igenom hela sidan och hovrar över ett dussin logotyper minskade grafikarbetet med 39 % och de långa hackningarna gick från elva till en.
Mätningen hade en egen fälla. Vår första avläsning sa att sidan tappade 19 bildrutor varje sekund. Det gjorde den inte. Dropparna körs med flit i 60 bildrutor per sekund, på en skärm som uppdateras 120 gånger per sekund, och webbläsaren räknade varje bildruta vi hoppade över som ett misslyckande. Vi hade lätt kunnat lägga en hel dag på att optimera mot den siffran. Kolla vad en siffra betyder innan du jagar den.
En webbplats kan ha personlighet och ändå vara snabb. Tricket är att behandla den lekfulla delen med samma disciplin som de tråkiga delarna: testa den i en riktig webbläsare, respektera dem som inte vill ha rörelse, och håll den ur vägen för det besökaren kom för att göra.
Vill du att din egen webbplats ska kännas lite mer levande?