Uma landing page pode contar uma história conforme o visitante rola a tela e ainda oferecer uma leitura completa com movimento reduzido. O ponto de partida é montar uma sequência que funcione em fluxo normal, com títulos, imagens, legendas e links na ordem de leitura. Depois, a equipe acrescenta efeitos onde eles ajudam a explicar uma relação. Quando o visitante pede menos movimento, a página mantém a mesma informação, oferece os mesmos caminhos e respeita o ritmo de leitura escolhido por ele.

A Figma inclui narrativas ligadas à rolagem em sua seleção de tendências de web design para 2026. Essa é uma leitura editorial do setor. Para uma equipe que está planejando um lançamento, a pergunta prática é quais trechos realmente precisam de movimento e como entregar a mesma explicação quando os efeitos são desativados. Tendências de web design da Figma.

O que muda quando o visitante prefere movimento reduzido?

Em uma página com scrollytelling, a rolagem ajuda a revelar etapas de uma narrativa. Um gráfico pode mostrar o avanço de um projeto, por exemplo, enquanto o texto explica cada fase. Com movimento reduzido, o visitante continua rolando normalmente. A diferença aparece nos efeitos adicionais, como zoom, parallax, deslocamentos laterais e a fixação prolongada de elementos na tela. Cada etapa pode aparecer em seu lugar definitivo, com um título próprio e uma imagem que registre o estado relevante.

O critério 2.3.3 da WCAG 2.2, de nível AAA, trata da possibilidade de desativar animações de movimento acionadas por interações, com exceção das essenciais para a função ou para a informação. A rolagem comum continua disponível. Em um projeto editorial, uma boa pergunta é se a pessoa consegue reconstruir a sequência inteira ao ler apenas os títulos, as legendas e as imagens estáticas. Orientação do W3C sobre animações acionadas por interações.

Transforme o roteiro animado em capítulos legíveis

Imagine uma página de lançamento de uma luminária ajustável. A cena proposta fixa a foto do produto enquanto a rolagem gira a cúpula e troca a luz do ambiente. Antes de produzir a animação, escreva o que cada etapa precisa comunicar. A primeira mostra a luz direcionada sobre a mesa. A segunda demonstra como o ajuste amplia a área iluminada. A terceira informa quais regulagens o comprador pode fazer. Essa divisão também orienta a escolha das fotos e a posição da ficha técnica.

Na versão com movimento reduzido, mostre as duas configurações em imagens com o mesmo enquadramento e legendas que identifiquem a diferença. No celular, empilhe as fotos na ordem em que o texto as menciona. Se a animação enfatiza o ponto de articulação, use um detalhe ampliado em uma imagem separada. Coloque o link para a ficha técnica logo depois da explicação. Assim, quem chega de uma busca específica consegue localizar o dado e seguir para o próximo passo sem percorrer a apresentação inteira.

Faça essa adaptação no roteiro, antes de fechar o protótipo. Uma maneira de revisar cada cena é registrar em uma linha o que ela comunica, qual recurso visual carrega a informação e como a mesma ideia aparece na versão estática. Isso também ajuda a separar as cenas que precisam de novos materiais das que podem aproveitar a fotografia existente. Para estruturar a sequência de capítulos, consulte o guia do blog sobre narrativa guiada pela rolagem.

Como aplicar prefers-reduced-motion em um site?

Comece com HTML que já apresente os capítulos em ordem, inclusive quando nenhum script de animação for executado. No CSS, use prefers-reduced-motion: no-preference para limitar os efeitos opcionais ao cenário em que o dispositivo não sinaliza preferência por menos movimento. Se a animação usa JavaScript, consulte a mesma condição com matchMedia antes de ativar o efeito. Verifique também a troca de preferência durante a sessão. Se uma cena estiver fixada, desmonte a fixação e recoloque os elementos no fluxo normal.

Em cenas de entrada, deixe o texto visível por padrão. Se o efeito avançado depender de um recurso indisponível, de um arquivo que demora a carregar ou de uma biblioteca que falha, a pessoa ainda poderá ler a página. Ao desativar o movimento, retire também o espaço extra reservado para a cena. Uma seção pode perder a animação e continuar ocupando várias telas vazias se a altura reservada ficar ativa. Documentação da MDN sobre prefers-reduced-motion.

Quatro testes para fazer antes de publicar

  1. Abra a página com movimento reduzido ativado no dispositivo. Compare títulos, legendas e ações entre as duas versões. Se uma diferença entre estados só aparece na animação, acrescente uma legenda ou uma imagem que a torne explícita.
  2. Entre por um link direto para um capítulo. Confirme que o título aparece na altura esperada e que o conteúdo pode ser lido sem rolar para trás para iniciar a cena. Repita o teste com a página recarregada no meio da narrativa.
  3. Navegue com teclado e com toque. Use Tab para percorrer os links na ordem de leitura e veja se o foco permanece visível. No celular, faça uma rolagem rápida e depois inverta a direção. Os capítulos devem acompanhar a leitura sem capturar o gesto.
  4. Simule uma falha no carregamento da animação. Bloqueie o script de efeitos no ambiente de teste. Confira se as imagens têm dimensões reservadas e se as ações principais continuam acessíveis. Aproveite para procurar trechos invisíveis que esperavam uma classe adicionada pelo script.

No protótipo, simule também um visitante que entra com uma pergunta específica. Na página da luminária, peça que encontre o tipo de ajuste e abra a ficha técnica. Observe onde ele hesita ou volta. Se a ação só aparece depois de um longo trecho fixado, vale antecipar o link ou reduzir o espaço ocupado pela demonstração. O guia sobre rolagem em protótipos no Figma ajuda a ensaiar esses caminhos antes da implementação.

É preciso oferecer um botão para reduzir animações?

A preferência do dispositivo é um bom ponto de partida. Um controle na própria página pode dar autonomia a quem deseja ajustar apenas aquela experiência. Em páginas com várias cenas extensas, coloque esse controle antes da primeira animação, use um rótulo claro, como “Reduzir animações”, e mantenha a escolha nas demais páginas que oferecem o mesmo recurso. Teste a troca enquanto o visitante está no meio de uma cena, com atenção à posição de leitura e ao foco do teclado.

Quando vale manter uma cena animada?

Compare o que o visitante aprende na versão animada com o que consegue entender na sequência estática. Na página da luminária, mostrar a articulação em movimento pode esclarecer como uma peça gira sem que a base saia do lugar. Se a transição só dá entrada a um título, experimente usar o espaço para antecipar uma informação ou mostrar uma foto mais descritiva. Para aprovar a cena, peça a duas pessoas que encontrem a mesma resposta pelas duas versões e indiquem o próximo passo. A diferença nas respostas ajuda a localizar o que precisa ser ajustado antes do lançamento.

Registre o resultado junto do protótipo ou da documentação da página. Inclua quais cenas têm uma versão estática, onde ficam as imagens correspondentes e quais links precisam continuar disponíveis. Quando a equipe atualizar o produto, ela poderá conferir se mudou também a legenda, a ordem dos capítulos ou a ficha técnica. Esse cuidado evita que as duas versões passem a contar histórias diferentes depois de uma revisão de conteúdo.