Também chamada Staggered Animation, Cascade
Os itens de um grupo se animam um após o outro com um pequeno atraso, formando uma onda em vez de aparecerem todos de uma vez.
Onde usar
Listas, grades, menus de navegação e resultados de busca
Adicione uma animação "Stagger" (também chamada staggered animation ou cascata) em [onde].
Os itens devem aparecer subindo um após o outro com um atraso curto e uniforme, para que o grupo pareça uma onda rápida e não tudo de uma vez.
Mantenha a sequência curta mesmo em listas longas, reproduza só uma vez ao entrar na tela e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).
Também chamada Text Generate Effect
As palavras aparecem uma após a outra ao carregar a página, muitas vezes com um desfoque que se dissipa, como se estivessem sendo geradas.
Onde usar
Textos de introdução com estilo de IA
Adicione um efeito "Text Generate" em [onde].
As palavras devem aparecer uma após a outra enquanto um desfoque suave se dissipa em cada uma, como se o texto estivesse sendo gerado: constante e calmo.
Reproduza só uma vez ao carregar, deixe os leitores de tela lerem o texto completo desde o início e mostre sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).
Também chamada Line Mask Reveal, Split Text Overflow Hidden Reveal, Text Masking
O texto sobe de trás de uma linha de recorte, como se surgisse do nada.
Onde usar
Manchetes editoriais
Adicione uma entrada de texto "Mask Reveal" (também chamada line mask reveal ou text masking) em [onde].
Cada linha deve subir de trás de uma borda invisível, como se surgisse do nada, uma após a outra, rápida e suave, sem quique.
Reproduza só uma vez quando o texto entrar na tela ao rolar e mostre o texto direto, sem movimento, se o usuário preferir movimento reduzido (prefers-reduced-motion).
As letras sobem e descem em sequência, criando uma onda que percorre a palavra.
Onde usar
Títulos divertidos, indicadores de carregamento
Adicione um efeito "Wavy Text" (também chamado de text wave) em [onde].
As letras devem subir e descer uma após a outra para que uma onda suave e fluida percorra a palavra sem parar.
Faça o loop sem cortes, garanta que os leitores de tela leiam como uma só palavra e pare a onda se o usuário preferir movimento reduzido (prefers-reduced-motion).