Projetar movimento, assinatura e narrativas por rolagem

Um movimento só entra no site quando passa num teste de utilidade, e então fica no degrau mais barato que o executa. Animação é qualquer coisa que muda sozinha na tela, como o botão que afunda ao ser apertado. A escada vai do CSS puro ao GSAP, e quase toda tela de negócio resolve tudo nos dois primeiros degraus.

O teste tem um critério só: o movimento ajuda quem usa a tela a entender o que acabou de acontecer. Três casos passam. Retorno de ação, como o botão que afunda quando é apertado. 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 até terminar. Esses três atrasam a leitura do preço, e quem está com pressa desiste antes de chegar ao botão de comprar.

A skill frontend-design, o guia que o agente de IA lê antes de desenhar, foi atualizada pela Anthropic com a mesma régua. Movimento que dispara sozinho serve só para chamar atenção, por isso um único momento bem escolhido rende mais que efeitos espalhados pela página.

O padrão genérico faz o contrário. Cada seção entra com fade e slide, ou seja, surge transparente e sobe, e cada cartão muda de cor sob o cursor. A skill chama isso de assinatura de página feita por máquina, e quem visita reconhece a fórmula de longe, antes mesmo de reparar na marca.

Guarde o movimento que dispara sozinho para um momento só, a abertura da página ou a revelação de uma peça. Todo o resto responde a uma ação da pessoa, ao abrir, expandir ou confirmar, porque aí o movimento explica o que mudou na tela.

A escada ordena o gasto, e o primeiro degrau é o CSS puro, a linguagem que já vem no navegador. A transition, que é a instrução para suavizar a troca de estado, cuida do botão que escurece, e os keyframes cuidam do cartão que entra. Peso baixado pelo visitante: zero.

O segundo degrau são os recursos que o próprio navegador já traz prontos: janela, aviso flutuante, rolagem usada como linha do tempo e animação escrita em script. Eles também custam zero de download, porque nada de novo desce para o celular de quem visita.

A rolagem como linha do tempo é a exceção do degrau, porque o Firefox ainda não a executa. Por isso ela entra sempre atrás de um teste de suporte. E respeita a preferência por menos movimento, que é o ajuste do aparelho de quem passa mal com animação.

Suba ao terceiro degrau só quando o de baixo falhar na sua tela. Três sinais autorizam: gesto que herda a velocidade do dedo, mola física e várias entradas coordenadas. O pacote é o Motion, e ele custa um arquivo a mais no que o visitante baixa.

O quarto degrau é o GSAP, reservado à linha do tempo longa amarrada à rolagem, quando a animação é o próprio produto. Ele ficou gratuito, então o custo virou tempo de estudo. Fora desses casos, instalar biblioteca de animação só soma peso e mais uma peça para manter atualizada.

Os três sinais do terceiro degrau cabem numa mesa de teste, montada no laboratório abaixo. Cada sinal tem o próprio controle: os quatro orçamentos entram em sequência, o botão afunda e volta pela mola, e o cartão solto continua na velocidade do dedo. Mexa na rigidez e no amortecimento e veja a mesma mola frear o botão e o cartão.

Repare no que o CSS puro deixa de fazer: ele não conhece a velocidade do gesto nem coordena quatro entradas com uma linha só. Se a sua tela pede um desses comportamentos, o pacote se paga. Se pede só o fade e o hover, fique no primeiro degrau e guarde o laboratório como prova.

Fora da escada ficam ferramentas de nicho, cada uma com um caso só. O Rive anima personagem que reage ao toque, em arquivo menor que o Lottie, que é o desenho animado exportado do After Effects. Anime.js traz física leve, Theatre.js monta a sequência numa linha do tempo visual e Lenis suaviza a rolagem.

O react-spring 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 é o padrão, porque pesa seis quilobytes e não arrasta nenhuma outra peça junto. O tsparticles só se justifica quando o fundo animado é parte do produto.

Já o Scrollama é a referência para narrativa por rolagem, a reportagem em que o gráfico muda enquanto o texto desce. Cursor desenhado sob medida cabe em vitrine, nunca em página de pagamento, porque ele esconde o que é clicável e a pessoa erra o botão.

Duas preferências do aparelho valem em qualquer degrau. Quando a pessoa liga o movimento reduzido, corte deslocamento longo e giro, e mantenha só mudança de cor. Quando ela liga o contraste alto, o estado marcado por um tom claro ganha borda, porque a diferença sutil some na tela dela.

Uma lista de orçamentos que revela cada linha ao rolar cabe inteira no primeiro degrau, em CSS puro. Comece sempre por ali, e só suba quando aquela tela específica falhar na sua mão.

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. Depois ligue o movimento reduzido e o contraste alto no aparelho e recarregue a página.

O critério de pronto é este: nada some, todo texto continua legível e cada estado se distingue com a tela parada. Se alguma informação depender da animação para aparecer, o movimento virou obstáculo e sai antes de publicar.

Animar rolagem, aviso e troca de tela sem instalar biblioteca

Com o teste de utilidade e a escada de custo em mãos, a rolagem e a troca de tela ganham movimento por recurso nativo do navegador.

O navegador já anima rolagem, aviso, troca de tela e número que muda, sem instalar nada. Quem revisa o que o agente entrega, ou seja, a IA que escreve código a seu pedido, ganha o critério para recusar a biblioteca que ele sugere. O degrau seguinte é o vídeo montado por programa.

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 passa a olhar essa rolagem em vez de contar segundos no relógio.

Cada cartão de indicador cresce sozinho quando entra na área visível, sem script nenhum. O Firefox ainda não executa esse recurso, por isso ele entra atrás de um teste de suporte. Sem esse teste, o navegador antigo mostra a barra parada no zero, e a pessoa acha que a página travou.

O aviso que aparece depois de um clique entra e sai suave com @starting-style. Essa regra descreve o estado de partida do elemento, como a posição da porta antes de alguém abrir. Antes dela, sumir com suavidade exigia uma peça só para segurar o elemento na tela até o fim.

Esse mesmo navegador passa a animar a altura de um bloco que abre. O detalhamento de um pedido, um menu ou uma sanfona ganham transição escrita em duas linhas. Onde o recurso falta, o bloco abre na hora, inteiro e legível, então ninguém perde informação.

A troca de tela dentro da mesma página saiu do território das bibliotecas. O recurso chamado View Transitions já roda nos três navegadores principais, por isso ele vem antes de instalar qualquer peça de transição.

O efeito é o da foto da vitrine que continua na tela ao abrir o detalhe do produto, em vez de a tela piscar em branco. Quem compra segue com o olho no mesmo objeto, e a sensação de erro some.

Entre páginas diferentes, o mesmo cruzamento ainda falta no Firefox. Por isso a navegação precisa funcionar sem ele, e o efeito entra como bônus onde o navegador já entende.

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 serve em indicador que muda ao vivo, porque o olho acompanha a subida e entende que o valor é recente. O número que muda uma vez só por página fica no contador em CSS do laboratório acima.

Vídeo montado por programa é o degrau acima. Em vez de alguém arrastar clipes num editor, o computador monta o vídeo a partir de uma receita escrita. É como a máquina de etiquetas que imprime mil variações do mesmo modelo, cada uma com o nome de um cliente.

Serve para vídeo de produto, relatório animado e peça de rede social que saem em série a partir de dados. O Remotion escreve esse vídeo em React e traz um estúdio visual para ajustar a curva de aceleração do movimento.

A licença do Remotion muda na próxima versão maior, então leia as condições antes de assinar. O Motion Canvas faz o mesmo sem React, e o Revideo é a terceira opção. Nenhum dos três substitui um player: eles produzem o arquivo que o player vai servir na página.

Canvas criativo é parente da mesma família. O p5.js serve a arte generativa e ao ensino, e o material antigo pede revisão porque o editor trocou de versão padrão. O Rough.js dá estética de desenho à mão, útil em rascunho. O PixiJS usa a placa de vídeo pelo navegador para desenhar milhares de peças sem travar.

O arquivo que o Remotion gera só vira aula ou anúncio dentro de um player. A regra da casa é dura: a etiqueta video crua, com o atributo controls, nunca entra em página pública. Ela esconde da página a velocidade, a legenda e o estado da tela cheia, e cada navegador desenha os controles do seu jeito.

O laboratório abaixo monta o Vidstack, o player pronto que o curso usa, com a vídeo-aula da trilha 1 e a legenda em português. O painel ao lado lê o estado que o player publica: tempo, velocidade, legenda ativa e tela cheia. Essa leitura liga o botão de compartilhar e o teclado, e o vídeo cru não a oferece.

Peça cada um desses recursos atrás do teste de suporte e do movimento reduzido. Numa página de produto isso vira três pedidos. A nota da avaliação cresce ao entrar na tela, o aviso de estoque entra suave e o contador do painel muda dígito a dígito.

Antes de aprovar a seção, ligue o movimento reduzido no aparelho e recarregue a página. O critério de pronto é que barras, números e avisos continuem visíveis e completos, apenas parados.

Nenhuma biblioteca de gesto ou mola entra sem um pedido de arraste, de mola física ou de sequência longa amarrada à rolagem. Sem esse sinal, ela só acrescenta peso ao que o cliente baixa.

Criar a cena de movimento que marca a página sem pesar

O movimento funcional já está coberto, e resta escolher o único momento em que a página assina, fabricar a cena e regular o que pesa na velocidade.

Um fundo animado no herói derrubou o Lighthouse, a nota de velocidade que o Google dá à página, para 94 no computador e 91 no celular. Quatro parâmetros regulados no mesmo trecho de código devolveram a nota a 100 e 99, sem tirar o movimento da tela.

Uma página inteira comporta um único momento de movimento memorável, e ele mora no herói, a primeira tela que aparece. Cena aqui é esse fundo que se mexe, montado como um aquário digital: uma imagem viva que roda sozinha atrás do texto. Todo o resto da página responde ao que a pessoa faz.

O movimento genérico tem receita conhecida. Cada seção surge transparente e sobe 20 px, sempre com a mesma curva e o mesmo tempo. Os cartões acendem um a cada 0,1 s, e o botão não muda ao ser clicado.

Essa receita vem do agente porque é a mais frequente no material que ele leu. O efeito que deveria impressionar vira o sinal de que ninguém decidiu nada, e o visitante reconhece a ferramenta antes de reconhecer a sua marca.

A convergência tem explicação medida. Modelos ajustados por preferência humana reduzem a variedade 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.

Na skill frontend-design, o roteiro de projeto visual que o agente lê, a regra cabe numa frase: gaste a ousadia em um lugar só. Um momento bem orquestrado rende a lembrança que dez efeitos espalhados dispersam, porque a atenção de quem visita é uma só.

Movimento ajuda a venda quando responde a uma ação e mostra o que mudou. Abrir um menu, expandir um pedido, confirmar um agendamento: ali o movimento explica a mudança e some. Movimento que dispara sozinho, só para impressionar, atrasa a leitura e 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 pelo tempo ou pela pessoa, e um agente de shader cria o efeito a partir de uma descrição em prosa.

Shader é o programa que a placa de vídeo roda para pintar cada ponto da tela, como um filtro de foto refeito trinta vezes por segundo. Por isso ele custa energia do aparelho, e é essa conta que os parâmetros abaixo regulam.

A cena sai como componente, a peça pronta que você encaixa na página, para Framer, Webflow, Figma ou aplicativo próprio. O plano gratuito libera todos os efeitos, até oito publicações com o logotipo da ferramenta e vídeo em qualidade média.

O plano pago tira o logotipo da ferramenta, dá licença comercial e exporta a cena em arquivo para você hospedar no próprio domínio. Ele custa US$ 14 por mês no plano anual.

Cada camada de efeito acrescenta uma passagem de shader à conta, e as mais caras são forma 3D, rastro de mouse, bloom, godrays e bokeh. A biblioteca que faz a cena rodar pesa cerca de 50 kB, o que a página baixa uma vez.

Por isso o trecho que embute a cena vem com botões de custo no próprio código. A tabela abaixo dá cada um deles, a faixa de valor, quando usar e o que acontece com a página se ele ficar no valor de fábrica.

O ajuste que devolveu a nota naquele caso foi simples: a cena ficou só na página inicial, com escala 0,25, carregamento adiado e modo de produção ligado. A cena também pausa sozinha quando sai da tela, então ela para de gastar bateria.

As variáveis publicadas aceitam a cor da marca e a intensidade do efeito. Por elas a cena lê o DESIGN.md, o arquivo onde ficam as cores e as regras visuais do negócio, e o fundo passa a ser reconhecidamente seu.

Quem ligou o movimento reduzido no aparelho recebe uma imagem parada no lugar da cena. Movimento reduzido é o ajuste que existe em todo celular e computador para quem sente tontura ou enjoo com animação, e respeitá-lo evita perder essa visita.

Para pedido menor, o Framer Marketplace traz peças prontas de rolagem suave e de revelação de texto. No 21st.dev, a categoria que mais cresce é a de heróis animados. O critério vale para todas: uma assinatura por página.

Deixe a assinatura num lugar só, com modo de produção, escala 0,5, dpi 1, 30 quadros por segundo e rótulo acessível. Se a página acumula duas cenas, a assinatura já virou ruído, porque elas dividem a atenção e dobram o custo.

Antes de publicar, rode o Lighthouse no computador e no celular, com a cena ligada e com ela desligada. O critério de pronto é as duas notas voltarem ao patamar de antes da cena.

Se elas não voltarem, corte uma camada de efeito ou baixe a escala e o dpi, e meça de novo antes de pôr no ar.

Guia prático: calibrar o movimento antes de pedir ao agente

Movimento pedido por adjetivo sai errado: suave para você pode ser lento para quem usa. O que o agente executa bem é número: a curva, a duração, o intervalo entre itens, o ponto da rolagem em que a cena começa. Três ferramentas gratuitas do Annnimate, biblioteca de componentes animados do estúdio Good Fella, deixam você achar esses números mexendo num controle, sem cadastro e sem código.

O visualizador de curvas desenha as 31 curvas de aceleração do GSAP, a biblioteca de animação que este capítulo apresenta, compara duas lado a lado e copia o resultado em dois formatos: o nome da curva para o GSAP e a função linear() do CSS, que reproduz a mesma curva sem biblioteca nenhuma. O ajuste de escalonamento mostra numa grade o atraso entre um item e o seguinte. O construtor de gatilho de rolagem ajusta início, fim, fixação (o elemento fica parado enquanto a página rola) e o vínculo com a rolagem diante de uma prévia que rola.

A mesma casa publica guias de conceito gratuitos sobre o GSAP, e dois deles viram regra de bolso. O vínculo com a rolagem, chamado scrub, aceita um atraso em segundos: de 0,5 a 1 para revelações e profundidade, de 1,5 a 2 para efeitos de atmosfera, e acima de 2 o movimento parece desligado do gesto. E a propriedade will-change, que avisa o navegador para preparar o elemento com antecedência, ao custo de memória, serve a quem se move o tempo todo; aplicada a uma lista de 100 itens parados, derruba o navegador do celular.

Os componentes prontos da biblioteca são outra conversa, com preço. São 113 peças em React, Vue e HTML com CSS e JavaScript, das quais 15 gratuitas; o plano individual custava 29 euros por mês em cobrança trimestral, ou 249 euros por ano, em 06/10/2026, com uso comercial liberado e reembolso em 14 dias. A assinatura inclui um servidor MCP, a ponte que deixa o agente buscar um componente pelo nome e colar o código no seu framework. Antes de assinar, vale o teste deste capítulo: o movimento ajuda quem usa a tela a entender o que aconteceu? As ferramentas e os guias gratuitos resolvem a maior parte dos casos de uma página de negócio.

Guia prático: uma timeline só, dirigida por dados e sempre igual

Quando cada efeito da página tem o próprio temporizador, ninguém sabe dizer o que está na tela no segundo 2. O curso de edição estudado em 07/10/2026 monta vídeos como páginas web e, por isso, precisa dessa resposta para cada quadro. A disciplina que ele usa serve igual a uma landing.

São quatro regras. Primeira: toda animação entra numa única timeline criada pausada, e cada bloco visível tem início e duração escritos num objeto de dados, sem setTimeout espalhado. Segunda: anime só transformações (mover, girar, escalar) e opacidade; o verificador do HyperFrames reprova movimento feito com left e top, e o guia de animação do web.dev mostra por quê, com cerca de 50% de quadros perdidos no exemplo com top e left contra cerca de 1% com transform. Terceira: determinismo. Nada de aleatório em tempo de execução; quando precisar de variação, como uma nuvem de pontos, gere com semente fixa antes e grave no código. Quarta: granulado é imagem, não filtro. No material, o ruído feito com filtro SVG vazou e deixou um véu cinza de 14 a 19% sobre a imagem da câmera; uma textura PNG leve resolveu.

A lição: estado da tela como função do tempo. Com isso você consegue pular para qualquer instante, testar, capturar a tela e repetir o resultado sem surpresa.

Guia prático: cascata sem script, player que reage à pausa e troca de tela pelo React

A aula colocou o movimento no degrau mais barato da escada. De agosto a outubro de 2026, o degrau do CSS ganhou duas peças nos três navegadores: sibling-index(), que dá a cada item a própria posição para a cascata de entrada, e :paused, que deixa o player mudar de visual quando o vídeo para. No React 19.3, de setembro, o componente ViewTransition ficou estável. Você sai daqui pedindo as três coisas sem biblioteca de animação e com o movimento reduzido respeitado.

Aplicar os recursos ao projeto