Kinetic Typography

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

As letras sobem e descem em sequência, criando uma onda que percorre a palavra.

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

Uma palavra é duplicada em várias cópias empilhadas que se deslocam com a rolagem.

Adicione um efeito "Text Repetition" (também chamado de repeated text scroll) em [onde].
Uma palavra deve ser copiada em uma pilha de cópias em contorno mais apagadas que se abrem por trás dela conforme o usuário rola, e se fecham de novo ao rolar para cima.
Vincule a abertura diretamente à posição de rolagem e esconda as cópias extras dos leitores de tela para que a palavra seja lida só uma vez.

O texto gira em perspectiva 3D acompanhando a posição do mouse.

Adicione um efeito "Text Tilt" (também chamado de perspective text tilt) em [onde].
O texto deve se inclinar levemente em 3D na direção do ponteiro enquanto ele se move, acompanhando com suavidade, e voltar a ficar reto suavemente quando o ponteiro sair.
Mantenha a inclinação sutil para o texto continuar legível, e deixe o texto reto em telas de toque e se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras se espalham no hover e voltam, ou explodem para fora na entrada.

Adicione um efeito de hover "Letter Scatter" (também chamado de scatter gather letters ou explosive letter burst) em [onde].
Quando o ponteiro passar sobre o texto, cada letra deve voar um pouco na própria direção com um leve giro e depois se reagrupar suavemente na palavra quando o ponteiro sair.
Mantenha fixo o espaço da palavra no layout enquanto as letras se movem, faça os leitores de tela lerem como uma só palavra e mostre o mesmo efeito no foco do teclado.

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