Letter Scatter

Um título é dividido em caracteres, palavras ou linhas que se animam um após o outro com um pequeno atraso.

Adicione uma entrada "Split Text Stagger" (também chamada letter stagger ou staggered text reveal) em [onde].
Divida o título em letras que sobem e aparecem uma após a outra com um atraso curto entre elas, rápido e suave, sem quique.
Reproduza só uma vez quando o título entrar na tela, faça os leitores de tela lerem como uma única palavra e mostre sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Pedaços de papel coloridos explodem e caem para comemorar um sucesso.

Adicione uma comemoração de confete (Confetti) em [onde], também chamada confetti burst.
Pequenos pedaços de papel coloridos devem explodir rapidamente do botão e depois girar e cair flutuando enquanto desaparecem, em uma chuva curta e animada.
Dispare uma vez por sucesso em vez de repetir em loop, não deixe bloquear os cliques na página e não mostre se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras começam bem espaçadas e apagadas e se aproximam até o espaçamento normal enquanto aparecem.

Adicione uma animação de texto "Tracking In" (também chamada text tracking in ou letter-spacing in) em [onde].
As letras devem começar bem espaçadas e apagadas e se aproximar até o espaçamento normal enquanto ficam totalmente visíveis: suave, desacelerando no fim.
Mantenha o texto centralizado e em uma única linha enquanto o espaçamento muda, para o layout ao redor não se mexer, e mostre-o com espaçamento normal se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma sombra listrada ou deslocada atrás das letras se anima em uma direção.

Adicione um efeito "Line Shadow Text" (também chamado de text shadow animation ou dancing shadow) em [onde].
Atrás das letras, uma sombra deslocada feita de listras diagonais finas deve deslizar devagar e sem parar, enquanto as próprias letras ficam paradas e nítidas.
Faça o movimento das listras repetir sem emendas e deixe a sombra parada se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras se enchem de um líquido que sobe e ondula.

Adicione um efeito "Liquid Fill Text" (também chamado de water fill text) em [onde].
As letras contornadas devem se encher de um líquido cuja superfície ondulada rola para o lado enquanto o nível sobe e desce devagar, em um loop suave e contínuo.
Mantenha a palavra disponível como texto real para leitores de tela e deixe o líquido em um nível parado se o usuário preferir movimento reduzido (prefers-reduced-motion).

O texto sobe de trás de uma linha de recorte, como se surgisse do nada.

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).