Боята сигурно ти направи впечатление. По всеки мастилен ръб на сайта израстват капки, които се пълнят, натежават, проточват се на конец и се откъсват. Същото става с всяко лого в лентата с брандовете, за които работим. Капките падат върху каквото има под тях (снимка, карта, бутон) и се размазват. На равна повърхност остават неподвижни. На наклонена се плъзгат, преливат през ръба, стичат се по страната и капят нататък. Всичко свършва в локва върху футъра, която се надига, докато стоиш на страницата.
Логото ни е капка, така че сайтът трябваше да капе. Не видео на цикъл, а истинска боя, изчислявана в реално време в браузъра ти. Направихме го с Claude Code, както се очаква от агенция, която е сложила AI на табелата си. Да покажем капки на екрана беше лесната част. Истинската работа беше да станат достатъчно добри, за да ги оставим да текат на пуснат сайт. За това е тази бележка.
Боя, която знае къде е
Всяка капка е малка физична играчка. Боята се събира в издутината, тя натежава и колкото по-тежка става, толкова по-бързо се проточва капката, докато не се стесни на шийка и не се откъсне. Падащата капка усеща истинския контур на това, в което се удари, със заоблените ъгли и наклонените снимки, така че боята по кръгъл бутон го обгръща. Усеща и страницата. Скролнеш ли рязко, висящите капки се отръскват и падат. Задръж курсора върху лого на началната страница и то се повдига, а боята по него – заедно с него.
Преди да я пуснем на сайта, боята трябваше да спазва четири правила:
- Никога не пречи. Не може да блокира клик, да покрива текст или да забавя страницата.
- Мирува, щом поискаш. Ако устройството ти иска намалено движение или JavaScript е изключен, получаваш страницата в покой, с нарисувани капки.
- Плоска боя. Остри ръбове и същият лек гланц като на логото. Без размазване, без градиенти.
- Спи, когато нищо не мърда.
Къде се закучи
Първо – заоблените неща. Повечето от тези логота стоят в бутони с форма на хапче, а боята обожава да пълзи около заоблените им краища. Точно там капките започнаха да пускат остри шипове, сякаш някой ги е подрязал с ножица. Кодът, който рисуваше висяща капка, приемаше, че повърхността над нея е равна. Отдолу на хапчето е. На извивката обаче рисуваше клин нагоре по наклона и тънка ивица боя през самия бутон. Решението беше боята да среща истинската извивка от двете страни – така, както топче, вкарано между капката и повърхността, би докоснало и двете.
После дойде моментът, в който едва не разтопихме браузъра. Колкото повече стоеше на страницата, толкова по-тежка ставаше тя. Боята се трупаше по всяка снимка и карта, покрай която скролваше, а курсорът върху лого караше лентата да засича. Първата версия следваше идея, с която повечето разработчици биха се съгласили: рисувай боята на много малки платна (canvas) и прерисувай само малките парчета, които се променят. Оказа се точно обратното. Всяко платно струва нещо на графичния чип само защото съществува и се прерисува, колкото и малко да е, а след дълго посещение те ставаха около 250. По-малко и по-големи платна и това да не рисуваме каквото никой не вижда ги свалиха до около 80. В тест, който скролва цялата страница и задържа курсора върху дузина логота, графичната работа падна с 39%, а дългите засичания – от единадесет на едно.
И измерването си имаше капан. Първото отчитане казваше, че страницата изпуска по 19 кадъра в секунда. Не изпускаше. Капките нарочно вървят на 60 кадъра в секунда на екран, който се опреснява 120 пъти в секунда, и браузърът броеше всеки пропуснат от нас кадър като провал. Лесно можехме да изгубим цял ден в оптимизиране срещу това число. Първо провери какво означава едно число, после го гони.
Сайтът може да има характер и пак да е бърз. Номерът е да третираш игривата част със същата дисциплина като скучните: тествай я в истински браузър, уважавай хората, които не искат движение, и я дръж далеч от онова, за което посетителят е дошъл.
Искаш и твоят сайт да е малко по-жив?