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

Acompanho o trabalho do Emil Kowalski faz um bom tempo. Se o nome não te diz nada, deixa eu apresentar: ele é design engineer no Linear, passou pelo time de design da Vercel, e é o autor do Sonner e do Vaul. São o toast que aparece no canto da tela e a gaveta que sobe no celular. Somados, os dois passam de 50 milhões de downloads por semana no npm. Mesmo sem saber, você provavelmente usou alguma coisa que ele fez hoje.

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 do 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 do Emil. É melhor que isto aqui.