Se calhar já reparaste na tinta. Cada borda de tinta deste site ganha pingos que enchem, ficam pesados, esticam-se num fio e caem, e o mesmo acontece a cada logo na faixa das marcas para quem trabalhamos. As gotas aterram no que estiver por baixo (uma foto, um cartão, um botão) e espalham-se. Numa superfície plana, ficam quietas. Numa inclinada, escorregam, transbordam pela borda, escorrem pelo lado e continuam a pingar. Tudo acaba numa poça em cima do rodapé, que não para de subir enquanto cá estiveres.
O nosso logo é um pingo, por isso o site tinha de pingar. Nada de vídeo em loop: tinta a sério, calculada em tempo real no teu browser. Foi feito com o Claude Code, como seria de esperar de uma agência que pôs a IA no letreiro. Pôr pingos no ecrã foi a parte fácil. Deixá-los bons o suficiente para ficarem a correr num site publicado é que deu trabalho, e é disso que fala esta nota.
Tinta que sabe onde está
Cada pingo é um pequeno brinquedo de física. A tinta junta-se no bolbo, o bolbo fica mais pesado e, quanto mais pesa, mais depressa o pingo escorre, até estreitar e cair. Uma gota a cair lê o contorno real daquilo em que bate, cantos arredondados e fotos inclinadas incluídos, por isso a tinta num botão redondo abraça o botão. Também sente a página. Dá um safanão à página enquanto fazes scroll e as gotas penduradas soltam-se. Passa o rato por cima de um logo na página inicial e ele levanta, e a tinta levanta com ele.
Antes de poder entrar no site publicado, tinha de cumprir quatro regras:
- Nunca empata. Não pode bloquear um clique, tapar texto nem tornar a página mais lenta.
- Quieta quando lho pedem. Se o teu dispositivo pede movimento reduzido, ou se o JavaScript estiver desligado, recebes a página parada, com os pingos pintados.
- Tinta lisa. Bordas nítidas e o mesmo brilhozinho do logo. Sem desfocado, sem gradientes.
- A dormir quando nada mexe.
Onde a coisa se complicou
Primeiro, as coisas redondas. A maioria daqueles logos está em botões em forma de pílula, e a tinta adora contornar as pontas redondas. Foi exatamente aí que os pingos começaram a ganhar picos afiados, como se alguém os tivesse aparado à tesoura. O código que desenhava uma gota pendurada partia do princípio de que a superfície por cima era plana. Na base de uma pílula, é. Na curva, desenhava uma cunha encosta acima e uma lasca de tinta por cima do próprio botão. A solução foi deixar a tinta encontrar a curva real dos dois lados, tal como uma bola encaixada entre a gota e a superfície tocaria nas duas.
Depois veio a parte em que quase derreteu o browser. Quanto mais tempo ficavas, mais pesada a página ficava. A tinta acumulava-se em cada foto e cartão por onde fazias scroll, e passar o rato por um logo fazia a faixa engasgar-se. A primeira versão seguia uma ideia com que a maioria dos developers concordaria: desenhar a tinta em muitos canvas pequenos e redesenhar só os bocadinhos que mudam. Saiu ao contrário. Cada canvas custa alguma coisa ao chip gráfico só por existir e ser redesenhado, por mais pequeno que seja, e depois de uma visita longa havia cerca de 250. Menos canvas, maiores, e não pintar o que ninguém vê baixou isso para cerca de 80. Num teste que faz scroll à página toda e passa o rato por uma dúzia de logos, o trabalho gráfico caiu 39% e os engasgos longos passaram de onze para um.
Medir tinha a sua própria armadilha. A nossa primeira leitura dizia que a página estava a perder 19 frames por segundo. Não estava. Os pingos correm a 60 frames por segundo de propósito, num ecrã que atualiza 120 vezes por segundo, e o browser contava cada frame que saltávamos como uma falha. Podíamos facilmente ter passado um dia a otimizar contra esse número. Antes de correres atrás de um número, confirma o que ele quer dizer.
Um site pode ter personalidade e continuar rápido. O truque é tratar a parte divertida com a mesma disciplina das partes aborrecidas: testá-la num browser a sério, respeitar quem não quer movimento e mantê-la fora do caminho daquilo que a pessoa veio fazer.
Queres que o teu site pareça um bocadinho mais vivo?