Text Reveal

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.

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

O texto fica fixo enquanto as linhas aparecem e somem conforme o avanço da rolagem.

Adicione um efeito "Sticky Text Fade" (também chamado sticky scroll text opacity fade) em [onde].
Enquanto a seção rola, o bloco de texto deve ficar fixo no lugar e as linhas devem aparecer e sumir uma de cada vez conforme o avanço da rolagem.
Ligue os fades diretamente à posição da rolagem para que se invertam ao voltar, e mantenha todas as linhas disponíveis para leitores de tela, qualquer que seja a opacidade.

O progresso da animação fica ligado diretamente à posição de rolagem, então rolar para a frente ou para trás a reproduz ou a rebobina.

Adicione uma "Scroll-Linked Animation" (também chamada de scroll-driven animation ou scroll scrub) em [onde].
A animação deve acompanhar exatamente a posição de rolagem: rolar para baixo a faz avançar e rolar para cima a rebobina na hora, sem easing próprio baseado em tempo.
Mapeie a animação inteira para um trecho de rolagem bem definido e mostre um estado estático adequado se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras de um título se embaralham ou se movem em sequência conforme o usuário rola pelas seções.

Adicione "Scrolling Letters" (também chamado on-scroll letter animations) em [onde].
Conforme o usuário rola pelas seções, as letras do título devem rolar para o próximo caractere uma após a outra, da esquerda para a direita, ligadas diretamente à posição da rolagem.
Ao rolar de volta para cima, elas devem voltar, e os leitores de tela devem receber o título atual como texto normal.

Mover o ponteiro sobre um card revela um texto oculto sob uma borda de máscara ou um holofote.

Adicione um efeito "Text Reveal Card" (também chamado de spotlight text reveal) em [onde].
Conforme o ponteiro se move pelo card, uma borda vertical deve segui-lo de perto e revelar um texto oculto de um dos lados, de forma suave e direta, sem atraso.
Em telas de toque, onde não há ponteiro para seguir, deixe que arrastar ou tocar revele o texto oculto, e torne esse texto disponível para leitores de tela.

O texto é substituído por caracteres aleatórios que se renovam e aos poucos se resolvem na palavra final.

Adicione um efeito de hover "Text Scramble" (também chamado de text decode ou encrypted text) em [onde].
Quando o ponteiro passar sobre o texto, cada letra deve piscar rapidamente entre caracteres aleatórios e parar na letra real, resolvendo uma após a outra da esquerda para a direita.
Evite que a largura do texto salte enquanto ele embaralha, mantenha os leitores de tela no texto real e mostre o mesmo efeito no foco do teclado.

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