Farba pewnie już rzuciła ci się w oczy. Z każdej krawędzi atramentu na tej stronie wyrastają zacieki: nabierają farby, robią się ciężkie, wyciągają się w nitkę i odrywają – tak samo z każdego logo w pasku marek, dla których pracujemy. Krople spadają na to, co jest pod nimi (zdjęcie, kartę, przycisk), i się rozbryzgują. Na płaskiej górnej krawędzi leżą spokojnie. Na pochyłej zjeżdżają, przelewają się przez krawędź, spływają po boku i kapią dalej. Wszystko kończy w kałuży na stopce, która rośnie tak długo, jak tu jesteś.
Nasze logo to zaciek farby, więc strona musiała kapać. Żadne zapętlone wideo: prawdziwa farba, liczona na bieżąco w twojej przeglądarce. Zbudowaliśmy ją w Claude Code – czego można się spodziewać po agencji, która ma AI na szyldzie. Wrzucenie zacieków na ekran było łatwe. Prawdziwa robota to dopracowanie ich tak, żeby mogły kapać na działającej stronie, i o tym jest ta notatka.
Farba, która wie, gdzie jest
Każdy zaciek to mała zabawka fizyczna. Farba zbiera się w kropli, kropla robi się cięższa, a im jest cięższa, tym szybciej zaciek spływa, aż się przewęży i kropla się oderwie. Spadająca kropla odczytuje prawdziwy kształt tego, w co trafi, z zaokrąglonymi rogami i przekrzywionymi zdjęciami włącznie, więc farba na okrągłym przycisku oblepia przycisk. Czuje też stronę. Szarpnij stroną przy scrollowaniu, a wiszące krople się otrząsną. Najedź na logo na stronie głównej – uniesie się, a farba razem z nim.
Zanim cokolwiek z tego trafiło na produkcję, musiało spełnić cztery zasady:
- Nigdy nie przeszkadza. Nie może blokować kliknięć, zasłaniać tekstu ani spowalniać strony.
- Stoi, gdy prosisz. Jeśli urządzenie prosi o ograniczenie ruchu albo JavaScript jest wyłączony, dostajesz stronę w spoczynku z namalowanymi zaciekami.
- Płaska farba. Ostre krawędzie i ten sam drobny połysk co w logo. Zero rozmycia, zero gradientów.
- Śpi, gdy nic się nie rusza.
Gdzie zaczęły się schody
Najpierw zaokrąglenia. Większość tych logo siedzi w przyciskach w kształcie pigułki, a farba uwielbia pełzać po ich okrągłych końcach. Właśnie tam na zaciekach zaczęły wyrastać ostre kolce, jakby ktoś przyciął je nożyczkami. Kod, który rysował wiszącą kroplę, zakładał, że powierzchnia nad nią jest płaska. Na spodzie pigułki faktycznie jest. Na łuku rysował klin w górę zbocza i cienki pasek farby na samym przycisku. Poprawka: farba styka się z prawdziwym łukiem po obu stronach – tak jak kulka wtoczona między kroplę a powierzchnię dotknęłaby obu.
Potem przyszedł moment, w którym prawie stopiliśmy przeglądarkę. Im dłużej trwała wizyta, tym cięższa robiła się strona. Farba zbierała się na każdym zdjęciu i każdej karcie, które się przescrollowało, a najechanie kursorem na logo sprawiało, że pasek się zacinał. Pierwsza wersja szła za pomysłem, któremu przytaknąłby prawie każdy developer: rysować farbę na wielu małych canvasach i przerysowywać tylko te kawałki, które się zmieniają. Wyszło na odwrót. Każdy canvas, choćby najmniejszy, kosztuje układ graficzny coś już przez to, że istnieje i jest przerysowywany, a po dłuższej wizycie było ich około 250. Mniej, za to większych canvasów i niemalowanie tego, czego nikt nie widzi, zbiło tę liczbę do około 80. W teście, który scrolluje całą stronę i najeżdża na tuzin logo, praca grafiki spadła o 39%, a długich przycięć było jedno zamiast jedenastu.
Pomiary miały własną pułapkę. Pierwszy odczyt mówił, że strona gubi 19 klatek na sekundę. Nie gubiła. Zacieki celowo chodzą w 60 klatkach na sekundę na ekranie, który odświeża się 120 razy na sekundę, a przeglądarka liczyła każdą pominiętą przez nas klatkę jako błąd. Spokojnie moglibyśmy przepalić cały dzień na optymalizowanie pod tę liczbę. Zanim zaczniesz gonić liczbę, sprawdź, co ona znaczy.
Strona może mieć charakter i nadal być szybka. Cały trik w tym, żeby część dla zabawy traktować z tą samą dyscypliną co nudne części: testować ją w prawdziwej przeglądarce, szanować ludzi, którzy nie chcą animacji, i nie wchodzić w drogę temu, po co ktoś przyszedł na stronę.
Chcesz, żeby i twoja strona trochę ożyła?