Refiz meu portfólio pra ele chamar menos atenção

Acompanho o trabalho de Emil Kowalski faz um bom tempo. Ele é design engineer no Linear, passou pelo time de design da Vercel e escreveu o Sonner e o Vaul, o toast que aparece no canto da tela e a gaveta que sobe no celular. Juntos passam de 50 milhões de downloads por semana no npm.

Ele também escreve, e escreve bem. Textos curtos sobre a parte da interface que ninguém consegue colocar num ticket: como uma coisa parece, como ela reage, por que um botão te dá vontade de clicar de novo.

Voltei a pensar nele agora, construindo este portfólio do zero.

O padrão que eu queria evitar

Tem um jeito de fazer portfólio que virou padrão: ultraprodução. Scroll que dispara efeito, número que sobe sozinho, transição entre seção, cursor customizado. É bonito e dá trabalho. Só que no fim o portfólio vira o produto. Você lembra do site, não do que a pessoa construiu.

Eu não queria isso. Queria que os produtos aparecessem: o app de flashcards, o site do festival, as coisas que eu faço de verdade no dia a dia. O site é a moldura, não o quadro.

O problema é que "menos" é mais difícil de decidir do que parece. Foi aí que um texto de Emil me ajudou.

A ideia

O texto chama You Don't Need Animations, e o argumento é mais ou menos assim: animação não é enfeite, é comunicação. Se ela não está explicando nada, ela só está te fazendo esperar.

Parece óbvio escrito desse jeito. Não é, não. Porque a gente não testa animação do jeito que as pessoas usam. Quando eu decido uma transição, eu abro, fecho, abro de novo, acho bonitinho e sigo a vida. Nesse teste, quase tudo passa. 240ms com uma curva macia é gostoso. Uma vez.

Só que ninguém usa nada uma vez.

Animação não custa por vez que acontece. Custa por vez que acontece vezes quantas vezes acontece. Trezentos milissegundos numa tela que a pessoa abre uma vez por mês? Manda ver. Os mesmos trezentos num gesto repetido oitenta vezes seguidas viram vinte e quatro segundos de espera, picados em pedaços pequenos demais pra alguém reclamar. Ninguém abre chamado dizendo "sua transição está lenta". A pessoa só acha o app pesado e não sabe explicar por quê.

Onde eu escolhi gastar

Aí vem a parte que parece contradição: tem uma coisa lenta neste site.

A home tem um campo de pixels que reage ao mouse. 650ms depois que você passa o cursor, o brilho do rastro ainda está em um terço do que era. Lentíssimo pra padrão de interface.

Ele pode ser lento porque acontece uma vez, logo na primeira tela, e não está na frente de nada. Mas "pode ser lento" não é "vale tudo": trava em 24 fps, congela no celular e perde opacidade perto de texto pra não brigar com a leitura. Escolhi um lugar pra ter graça e cuidei pra ele não atrapalhar o resto.

E o resto é rápido. Todo hover do site dura 150ms, porque hover é a coisa que mais acontece por aqui.

O que ficou

Hoje, antes de escrever transition, eu escrevo um número: quantas vezes isso vai acontecer? Uma ou duas, pode ter graça. Umas vinte, só o suficiente pra explicar. Cinquenta ou mais, quase invisível.

A parte chata é que isso não aparece. Interface sem animação parece menos trabalhada quando você olha o commit. Ninguém elogia o que não se mexe. Mas era exatamente o que eu queria daqui: sair da vitrine e deixar os produtos falarem.

Enfim, vai ler o site de Emil. É melhor que isto aqui.