Projetar movimento, assinatura e narrativas por rolagem

Um movimento entra no site quando passa num teste de utilidade e fica no degrau mais barato que o executa. A escada vai do CSS puro ao GSAP, e quase toda tela de negócio vive nos dois primeiros degraus. Quem aprova ou constrói o próprio site sai decidindo cada efeito em segundos, sem instalar pacote por hábito.

O teste tem um critério só: o movimento serve a quem usa a tela. Três casos passam. Retorno de ação, como o botão que afunda ao ser pressionado. Transição de estado, como o item que desliza ao entrar na lista. Orientação espacial, como o painel que vem da direita e mostra de onde veio.

Reprovam o texto que aparece letra por letra, o elemento que gira sem motivo e a animação que segura o conteúdo refém até terminar.

A skill frontend-design (o guia que o agente de IA lê antes de desenhar) foi atualizada pela Anthropic em 03/09/2026 com a mesma régua. Movimento sem gatilho da pessoa serve só para chamar atenção, e um único momento orquestrado vale mais que efeitos espalhados.

O padrão genérico é o contrário desse teste. Cada seção entra com fade e slide (surge do transparente e sobe) e cada cartão reage ao hover (a cor que troca sob o cursor). A skill chama isso de assinatura de página gerada por máquina, e quem visita reconhece de longe.

Guarde o movimento sem gatilho para um momento só, a sequência de abertura ou a revelação de uma peça. O resto responde à ação da pessoa, ao abrir, expandir ou confirmar, e aí ele mostra o que mudou.

A escada de custo ordena o gasto. O primeiro degrau é o CSS puro. A transition (a instrução que suaviza a troca de estado) cuida do botão que escurece; os keyframes cuidam do cartão que entra e do círculo que gira. Peso baixado: zero.

O segundo degrau é o recurso nativo: dialog, popover, @starting-style, rolagem como linha do tempo e WAAPI (a animação escrita em script, sem pacote). Também custa zero de download.

Nesse degrau, a rolagem como linha do tempo é a exceção. Em 7 de setembro de 2026 ela seguia em Limited Availability: Chrome 115 e Safari 26 implementam, o Firefox não. Ela entra atrás de uma consulta de suporte e respeitando a preferência por menos movimento.

Suba ao terceiro degrau só quando o de baixo falhar: gesto que herda a velocidade do dedo, mola física e entradas coordenadas em React. O pacote é o Motion, na versão 13.1, que absorveu o Popmotion e o Motion One; instale só o pacote motion e ignore os nomes antigos.

A 13.1 reordena listas em duas dimensões, detecta o eixo do arrasto e respeita a escrita da direita para a esquerda.

O quarto degrau é o GSAP, para linha do tempo longa amarrada à rolagem e peça de espetáculo. Ele é 100% gratuito sob a Webflow desde abril de 2025, e o SplitText, que divide texto em palavras e linhas para animar, foi reescrito com acessibilidade. O custo passou a ser só tempo de estudo.

Fora da escada ficam ferramentas de nicho, cada uma com um caso. O Rive roda máquinas de estado (o personagem que reage ao toque) em arquivo menor que o Lottie, o vetor animado no After Effects com catálogo no LottieFiles. Anime.js 4.5 é a biblioteca leve com física, Theatre.js é o sequenciador visual e Lenis suaviza a rolagem.

O react-spring 10 entra quando o efeito precisa parecer físico, como o cartão que balança ao ser solto. Para celebrar uma compra, o canvas-confetti, com seis quilobytes e sem dependência, é o padrão. O tsparticles entra só quando o fundo animado é parte do produto, e o party.js quando o efeito nasce de um elemento, como o botão de aprovar.

Scrollama segue a referência para narrativa por rolagem, a reportagem em que o gráfico muda enquanto o texto desce. Cursor customizado fica em vitrine e em storytelling; em fluxo transacional ele esconde o que é clicável, e a pessoa erra o botão de pagar.

Duas preferências do sistema valem em qualquer degrau. Com prefers-reduced-motion (a pessoa pediu menos movimento), corte deslocamento longo e giro e mantenha cor e opacidade. Com prefers-contrast (a pessoa pediu mais contraste), o estado marcado só por um tom claro ganha borda ou cor forte, porque a diferença sutil some.

Instalar Motion ou GSAP sem um dos três sinais só soma peso e mais uma peça para manter atualizada. Os sinais são gesto herdado, mola física e sequência longa amarrada à rolagem. Uma lista de orçamentos que revela cada linha ao rolar cabe inteira no primeiro degrau, em keyframes puro.

Antes de aprovar a tela, abra a mesma seção com o script de animação desligado e confira que todo o conteúdo continua visível e completo. Escreva a entrada de cada movimento novo em translate e opacity, com o opacity zero dentro do @keyframes, nunca preso à classe.

Depois ligue prefers-reduced-motion e prefers-contrast no sistema e recarregue: nada pode sumir e todo estado precisa se distinguir parado.

A rolagem como linha do tempo e a entrada suave sem biblioteca

O segundo degrau da escada cobre hoje rolagem, entrada suave, troca de tela e número que muda, sem pacote. Quem revisa o que o agente (a IA que escreve código a seu pedido) entrega sai com o critério para recusar a biblioteca. O degrau seguinte, o vídeo gerado por código, fica nomeado para o dia em que o pedido chegar.

A rolagem vira a linha do tempo da animação com duas linhas de folha de estilo. A caixa que rola ganha um nome, e o elemento que anima aponta para esse nome em vez de contar segundos.

Cada cartão de indicador cresce sozinho quando entra na área visível, sem observador de interseção e sem script. Em 7 de setembro de 2026 o recurso seguia em Limited Availability, com Chrome 115 e Safari 26 implementando e o Firefox fora.

Por isso o movimento fica atrás de um teste de suporte: sem ele, o navegador antigo mostra a barra parada no zero e a pessoa acha que a página travou.

O elemento que aparece após um clique entra e sai suave com @starting-style (a regra do estado de partida, antes do primeiro quadro) e uma transição de display. Antes, sumir com suavidade exigia uma peça só para segurar o elemento na tela até o fim; agora o navegador segura sozinho.

O par com interpolate-size fecha o degrau que faltava entre CSS puro e Motion. O navegador passa a animar a altura até auto, e o detalhamento de um pedido, um menu ou uma sanfona abrem com transição escrita em duas linhas. Chrome e Edge 129 já rodam o recurso; onde ele falta, o bloco abre na hora, inteiro e legível.

A troca de tela no mesmo documento saiu do território das bibliotecas. View Transitions entrou em Baseline Newly Available em 14 de outubro de 2025, quando o Firefox 144 fechou o conjunto. Ele vem antes de instalar uma peça de transição.

A foto da vitrine continua na página de detalhe, em vez de a tela piscar em branco.

Entre documentos, a versão de várias páginas segue em Limited Availability. Chrome 126 ou posterior e Safari 18.2 ou posterior implementam, e o Firefox bloqueia o status. A navegação precisa funcionar sem o cruzamento, que entra como bônus onde existe.

O number-flow anima o número dígito a dígito, na direção certa, quando o faturamento do dia sobe no painel. Ele atende React, Vue, Svelte e vanilla (JavaScript sem base de código), com porta para React Native desde abril. Use em indicador ao vivo; o número que muda uma vez por página fica no contador em CSS do laboratório.

Vídeo gerado por código é o degrau acima: vídeo de produto, relatório animado e peça de rede social que saem em série a partir de dados. O Remotion, na linha 4.0, escreve o vídeo em React e ganhou um Studio com keyframes e editor de easing (a curva de aceleração do movimento).

A mudança de licença prevista para a v5 pede leitura antes de assinar. O Motion Canvas 3.x faz o mesmo em TypeScript puro, com linha do tempo por geradores e sem React; o Revideo é a terceira opção da categoria. Nenhum dos três substitui um player: eles renderizam o arquivo que o player da aula sobre vídeo vai servir.

Canvas criativo é parente da mesma família. O p5.js 2.0 vira a versão padrão do editor depois de agosto de 2026, então material escrito para a 1.x precisa de revisão.

O Rough.js entrega estética desenhada à mão, útil em ilustração de rascunho. O PixiJS v8 desenha muitos objetos em alta taxa de quadros por WebGL (a placa de vídeo acessada pelo navegador), para jogo e visualização com milhares de peças.

Peça cada um desses recursos atrás do teste de suporte e da preferência por menos movimento. Numa página de produto: a nota da avaliação cresce ao entrar na tela, o aviso de estoque entra com @starting-style e o contador do painel muda dígito a dígito com number-flow.

Antes de aprovar a seção, ligue a preferência de menos movimento no sistema e recarregue. Barras, números e avisos continuam visíveis e completos, apenas parados.

Nenhuma biblioteca de gesto ou mola entra sem um pedido de arraste, mola física ou sequência longa amarrada à rolagem.

Uma assinatura de movimento: shader e cena sem pesar a página

Um fundo animado no herói derrubou o Lighthouse, a nota de velocidade do Google, para 94 no computador e 91 no celular, num caso publicado em janeiro de 2026. Quatro parâmetros regulados no mesmo contêiner devolveram a nota a 100 e 99.

Uma página inteira pede um único momento de movimento memorável, com cena viva no herói, a primeira dobra, e velocidade intacta. O resto responde ao que a pessoa faz. A cena se fabrica numa ferramenta visual, embutida com os botões de custo regulados e com imagem de reserva para quem pediu menos movimento.

O movimento genérico tem receita conhecida: entrada com opacidade zero e deslize de 20 px em cada seção, sempre com a mesma curva suave. Os outros sinais andam juntos: revelação ao rolar com o mesmo tempo em toda seção, escalonamento de 0,1 s por filho e botão sem estado de clique.

O agente (a IA que escreve código a seu pedido) escolhe essa receita porque ela é a mais frequente no que ele leu. A pessoa reconhece a ferramenta antes da marca, e o efeito que era para impressionar vira o sinal de que ninguém decidiu.

A convergência tem explicação medida. Modelos ajustados por preferência humana reduzem a diversidade do texto que ajudam a produzir, e o modelo base sem esse ajuste não reduz (Padmakumar e He, ICLR, 2024). O mesmo mecanismo puxa o movimento de sites diferentes para a mesma receita.

A regra da skill frontend-design (o roteiro de projeto visual que o agente lê) cabe numa frase: gaste a ousadia em um lugar. Um momento orquestrado, uma sequência de carga ou uma revelação, rende a memória que dez efeitos espalhados dispersam. Hover em cada cartão e fade em cada seção leem como IA.

Movimento que responde a uma ação é bem-vindo quando mostra o que mudou. Abrir um menu, expandir um pedido, confirmar um agendamento: o movimento explica a mudança e some. Movimento que dispara sozinho, só para chamar atenção, gasta a cota da assinatura.

A assinatura se fabrica numa ferramenta de cena, e o Unicorn Studio é a referência da categoria. Ele empilha mais de 75 efeitos, disparados por tempo (aparecer, rolar) ou pela pessoa (hover, mouse). Um agente de shader cria e edita o efeito a partir de uma descrição em prosa.

Shader é o programa que a placa de vídeo roda para pintar cada pixel, como um filtro de foto calculado ao vivo. A cena sai como componente (a peça pronta que você encaixa na página) para Framer, Webflow, Figma ou app próprio.

O plano gratuito dá todos os efeitos, até oito publicações com o logotipo da ferramenta e vídeo até 720p a 30 fps.

O plano Legend custa US$ 14 por mês no anual (US$ 20 no mensal). Ele tira o logotipo, dá licença comercial e 200 créditos de IA por mês e exporta em JSON para hospedar por conta própria.

Cada camada de efeito é uma passagem de shader a mais na conta. Os mais caros: forma 3D, rastro e ondulação de mouse, bloom, godrays, bokeh e luz 2D. A cena exige WebGL 2.0, a porta do navegador para a placa de vídeo, e a biblioteca de execução que a página baixa pesa cerca de 50 kB comprimidos.

Por isso o embed vem com botões de custo no próprio contêiner da cena. A tabela abaixo mostra cada um, a faixa, quando usar e o que acontece se ele ficar no valor de fábrica.

O ajuste que devolveu a nota naquele caso foi script em defer, cena só na página inicial, carga preguiçosa, produção e escala 0,25. Hospedar a biblioteca no próprio domínio é permitido, pela propriedade sdkUrl, e a cena pausa sozinha fora da tela.

As variáveis publicadas aceitam a cor da marca e a intensidade, e por elas a cena lê o DESIGN.md (o arquivo com as cores e regras da marca).

Quem pediu menos movimento no sistema recebe a imagem estática. A regra prefers-reduced-motion (a preferência de menos animação que a pessoa liga no aparelho) esconde a cena e mostra a foto de reserva. O exemplo oficial do Unicorn reduz o brilho de 0,65 para 0,15 quando a preferência está ligada.

Para pedido menor, o Framer Marketplace tem Lenis (rolagem suave), ShaderGradient, Reveal Text e Scroll Zoom Reveal. No 21st.dev, a categoria que mais cresce é a de heróis animados, shaders e líquido e metal. O critério vale para todas: uma assinatura por página.

Deixe a assinatura num lugar só, com produção, escala 0,5, dpi 1, 30 fps e rótulo acessível no contêiner. Se a página acumula mais de uma cena ou um efeito que dispara sem ação da pessoa, a assinatura já virou ruído: duas cenas dividem a atenção e dobram o custo.

Antes de publicar, rode o Lighthouse no computador e no celular, com a cena embutida e com ela desligada. Confira que as duas notas voltam ao patamar de antes do embed; se não voltarem, corte camada de efeito ou baixe escala e dpi antes de medir de novo.