Animação de scroll em CSS puro e como usar prompts do MotionSites

Um post viral mostra um site animado, com efeitos que reagem ao scroll, feito com um único prompt. O prompt vem do MotionSites, uma biblioteca criada por Viktor Odainyi (@viktoroddy). Antes de sair copiando, vale entender o que ela é, quanto custa e como funciona a animação por trás do resultado.

Segundo o site oficial, o MotionSites é uma biblioteca de prompts para sites feitos com IA. A página descreve prompts para Lovable, Bolt, Cursor e Claude, em categorias como Hero, Landing Page, SaaS, 3D, Portfolio e Ecommerce, além de uma seção de fundos animados. A promessa do site é copiar, colar e publicar. O número de mais de 600 prompts citado no post não aparece na página inicial, então não conseguimos confirmar essa contagem.

O MotionSites não é grátis para uso completo. A página inicial funciona como vitrine, com prévias dos projetos, mas a página de planos lista apenas opções pagas: assinaturas e um plano vitalício, além de pacotes avulsos de prompts. Os valores e o que cada plano inclui mudam, então confira na página oficial. A política de reembolso diz que as compras costumam ser definitivas depois da entrega, pois o acesso é imediato. Leia essa política antes de pagar.

Para usar um prompt, o caminho é simples. Escolha um modelo na biblioteca, copie o texto, abra a sua ferramenta de IA para código (Claude, Cursor, Lovable, Bolt ou outra) e cole o prompt em um projeto novo. A ferramenta gera os arquivos do site. Depois você abre no navegador, testa e pede ajustes por conversa. Os termos de uso permitem publicar ou vender os sites que você criar, mas proíbem republicar o texto dos prompts.

O que não dá para esperar: o próprio termo de uso do MotionSites diz que o resultado depende da ferramenta de IA e de como você usa o prompt, e que não há garantia de um resultado específico. O mesmo prompt pode gerar sites diferentes em modelos diferentes. O post cita um modelo específico, mas isso não foi confirmado e não importa para você. Teste, compare e revise o código. Efeitos pesados podem deixar o site lento no celular, e o resultado pode não ser acessível.

Agora a técnica. O CSS tem as animações guiadas por scroll (scroll-driven animations). Em vez de durar alguns segundos, a animação avança conforme você rola a página. Ela usa a propriedade animation-timeline, que liga a animação ao scroll em vez do relógio. Segundo o MDN, a função scroll() acompanha a posição de rolagem de um contêiner, e a função view() acompanha quanto um elemento já apareceu na área visível.

Exemplo mínimo, tirado da documentação do Chrome: uma barra de progresso de leitura. No HTML, coloque um elemento com id progress dentro do body. No CSS, defina os quadros-chave @keyframes grow-progress com from { transform: scaleX(0); } e to { transform: scaleX(1); }. Depois estilize #progress com position: fixed, left: 0, top: 0, width: 100%, height: 1em, background: red, transform-origin: 0 50%, animation: grow-progress auto linear e animation-timeline: scroll(). A barra cresce conforme você rola, sem JavaScript.

Para revelar um elemento quando ele entra na tela, troque scroll() por view(). O exemplo da mesma documentação usa animation: auto linear reveal both, animation-timeline: view() e animation-range: entry 25% cover 50%. O animation-range define em que trecho da rolagem a animação acontece. Nos quadros-chave, o elemento vai de opacity: 0 para opacity: 1. Mude os valores do intervalo e veja a diferença.

Cuidados importantes. Quem tem sensibilidade a movimento pode passar mal com animações grandes ligadas ao scroll. O MDN explica que a media query prefers-reduced-motion detecta quem pediu menos movimento no aparelho, e você deve reduzir ou desligar o efeito nesse caso. Verifique também o suporte nos navegadores: o MDN marca animation-timeline com view() como disponível em todos os navegadores principais recentes, mas navegadores antigos podem não animar. Confira a tabela de compatibilidade do MDN e garanta que o conteúdo apareça mesmo sem a animação.

Resumo prático. Se você quer o efeito pronto, o MotionSites oferece prompts pagos e você decide se vale o valor. Se quer aprender, comece pelos dois exemplos acima em CSS puro, que são grátis e funcionam em qualquer projeto. Em ambos os casos, revise o que a IA gerou, teste no celular e respeite quem prefere menos movimento.