Vinte anos de design oscilando no mesmo fio: imitar matéria ou assumir a tela. O pêndulo está parado no humanismo editorial. Empurre e ele volta ao eixo. Puxe forte e ele sai.
Cada estilo foi uma reação ao anterior, mas quase todos se moveram numa linha só: quanto a interface finge ser um objeto. O skeuomorfismo imitava couro; o flat assumiu a tela; os gradientes e o vidro voltaram a fingir luz e matéria; o brutalismo e o pixel assumiram a máquina de novo; o humanismo editorial voltou a fingir papel. Nenhum mudou o que a página faz. Todos continuaram imagens paradas.
O diagrama desta seção virou o hero: embaixo do pêndulo, a linha do tempo dos sete estilos, com a haste para cima nos que imitaram matéria e para baixo nos que assumiram a tela. O tracejado nas pontas é o traço da oscilação. Leitura minha, não medida: posições indicam para que lado cada estilo puxou, não quanto. O Liquid Glass da Apple (2025) tentou sair pelo lado da luz e da refração e bateu na legibilidade; a própria Apple recuou na WWDC 2026.
A onda contra o "AI slop" está forte: textura, grão, feito à mão, colagem, nostalgia de interface. É uma reação justa, mas continua no eixo da imagem, e já está sendo copiada: papel creme, serifa e terracota viraram, eles mesmos, o visual padrão de IA.
A saída é tratar a interface como material com propriedades físicas: massa, tensão, viscosidade, crescimento. O calor vem de como a coisa responde, não de parecer papel. E o material só se mexe quando você mexe nele; em repouso, a página é legível e quieta. É o oposto do Liquid Glass, que se mexe e refrata o tempo todo e cobra isso da leitura.
Mola, inércia e viscosidade no lugar de grão de papel. O calor está na resposta ao gesto.
Nada se mexe sozinho a ponto de atrapalhar. Puxa, estica, volta. Com movimento reduzido, fica parado e continua completo.
Nada de blob decorativo como em 2019. A forma orgânica é calculada a partir de algo real do cliente.
Elástico, fractal ou viscoso. Escolher um e deixar o resto em silêncio editorial.
Fontes variáveis como matéria: largura e peso reagem, mas a palavra nunca fica ilegível.
Ruído determinístico, não aleatório: a mesma borda irregular toda vez, como uma assinatura.
Cada letra é um corpo com mola. Perto do cursor, a largura da fonte variável (eixo wdth da Roboto Flex, de 25 a 151) cresce e o peso sobe; longe, tudo volta ao desenho original, com um leve balanço.
O raio da lente soma 40 harmônicas com amplitude que cai como 1/k. O resultado é um contorno de costa, igual em toda escala. A semente é fixa: a borda é sempre a mesma, como uma assinatura, e gira devagar.
Duas gotas azuis sob um filtro que funde formas próximas (metaball). A menor segue o cursor com atraso de mola; ao encostar na maior, as duas se ligam por um pescoço viscoso e se fundem. Soltou, ela volta ao lugar.
Forma orgânica sem significado vira decoração de Dribbble. A regra 3 existe para isso: a forma precisa sair de um dado ou de uma ideia do cliente.
Tudo mexendo o tempo todo é o erro do Liquid Glass. Um material por página, só no toque, e prefers-reduced-motion respeitado.
Sem cursor, a física depende do dedo e do scroll. Cada espécime precisa de um estado de repouso bonito e de um gatilho por toque.
Máscara SVG por quadro e filtro de desfoque custam CPU em tela grande. Limitar a área animada e parar a animação fora da tela.
← Caderno de pesquisa · stickybit.com.br