Možná ti neunikla ta barva. Na každém inkoustovém okraji tohohle webu rostou kapky: nabírají, těžknou, protáhnou se do vlákna a utrhnou se. A stejně tak na každém logu v pásu značek, pro které pracujeme. Kapky dopadnou na cokoli pod sebou (fotku, kartu, tlačítko) a rozprsknou se. Na rovném povrchu zůstanou ležet. Na šikmém sklouznou, přetečou přes hranu, stečou po boku a kapou dál. Všechno skončí v louži na patičce webu, která stoupá, dokud tu zůstáváš.
Naše logo je kapka, takže web musel kapat. Žádné video ve smyčce, ale skutečná barva, kterou počítá přímo tvůj prohlížeč. Vznikl v Claude Code, jak by se od agentury s AI na vývěsním štítu dalo čekat. Dostat kapky na obrazovku bylo to nejjednodušší. Udělat je tak dobré, aby mohly běžet na ostrém webu, dalo skutečnou práci – a o tom je tenhle zápisek.
Barva, která ví, kde je
Každá kapka je malá fyzikální hračka. Barva se sbírá v baňce, baňka těžkne, a čím je těžší, tím rychleji kapka stéká, až se zúží a utrhne. Padající kapka čte skutečný obrys čehokoli, na co dopadne, včetně zaoblených rohů a nakloněných fotek, takže barva na kulatém tlačítku tlačítko obejme. Cítí i stránku. Švihni stránkou při scrollování a visící kapky se setřesou. Najeď myší na logo na domovské stránce a logo se zvedne – a barva na něm s ním.
Než mohlo cokoli z toho na ostrý web, muselo splnit čtyři pravidla:
- Nikdy nepřekáží. Nesmí blokovat kliknutí, zakrýt text ani zpomalit stránku.
- Na požádání v klidu. Když tvoje zařízení žádá omezený pohyb nebo je vypnutý JavaScript, dostaneš stránku v klidu s namalovanými kapkami.
- Plochá barva. Ostré hrany a stejný drobný lesk jako logo. Žádné rozmazání, žádné přechody.
- Spí, když se nic nehýbe.
Kde to začalo zlobit
Nejdřív kulaté věci. Většina log sedí v oválných tlačítkách a barva se ráda plíží kolem jejich zaoblených konců. Přesně tam kapkám začaly růst ostré bodce, jako by je někdo zastřihl nůžkami. Kód, který kreslil visící kapku, počítal s tím, že povrch nad ní je rovný. Na spodku oválu to platí. Na oblouku ale nakreslil klín do svahu a proužek barvy přes samotné tlačítko. Řešení: nechat barvu navázat na skutečnou křivku z obou stran, tak jak by se obou dotkla kulička vkutálená mezi kapku a povrch.
Pak přišla chvíle, kdy se prohlížeč málem roztekl. Čím déle tu člověk zůstal, tím těžší stránka byla. Barva se hromadila na každé fotce a kartě, kolem které se proscrollovalo, a když se najelo myší na logo, pás se zadrhával. První verze vycházela z myšlenky, nad kterou by většina vývojářů přikývla: kreslit barvu na spoustu malých canvasů a překreslovat jen ty malé kousky, které se mění. Ukázalo se, že je to přesně naopak. Každý canvas grafický čip něco stojí jen tím, že existuje a překresluje se, ať je sebemenší, a po dlouhé návštěvě jich bylo kolem 250. Méně větších canvasů a nemalovat, co nikdo nevidí – a počet klesl zhruba na 80. V testu, který proscrolluje celou stránku a najede na tucet log, klesla grafická zátěž o 39 % a dlouhých záseků bylo místo jedenácti jen jeden.
Měření mělo vlastní past. První čísla tvrdila, že stránka zahazuje 19 snímků za sekundu. Nezahazovala. Kapky běží schválně v 60 snímcích za sekundu na displeji, který se obnovuje 120krát za sekundu, a prohlížeč počítal každý vynechaný snímek jako selhání. Klidně jsme mohli celý den optimalizovat podle tohohle čísla. Než se za číslem rozběhneš, zjisti, co znamená.
Web může mít osobnost a pořád být rychlý. Trik je přistupovat k hravé části se stejnou disciplínou jako k těm nudným: testovat ji ve skutečném prohlížeči, respektovat lidi, kteří o pohyb nestojí, a nepouštět ji do cesty tomu, kvůli čemu návštěvník přišel.
Chceš, aby trochu ožil i tvůj web?