Text Hover Effect

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.

Os contornos das letras são desenhados como um traço antes de o preenchimento aparecer.

Adicione um efeito "Stroke Text Draw" (também chamado draw in text ou animated stroke text) em [onde].
Os contornos das letras devem se desenhar sozinhos com suavidade e, quando estiverem completos, o preenchimento deve aparecer com um fade.
Reproduza só uma vez ao carregar, mantenha a palavra acessível como texto real e mostre o texto já preenchido 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 segue um caminho curvo e percorre esse caminho conforme o usuário rola a página.

Adicione um efeito "Text Path Scroll" (também chamado de text path curve scroll animation) em [onde].
O texto deve ficar sobre uma linha curva e deslizar por ela conforme o usuário rola, avançando ao rolar para baixo e voltando ao rolar para cima.
Vincule o movimento diretamente à posição de rolagem, sem atraso, e mantenha o texto legível como texto comum para leitores de tela.

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 existente sai com uma animação e é substituído por um novo conteúdo.

Adicione um efeito "Text Replacement" (também chamado de text swap) em [onde].
Quando o texto mudar, os caracteres antigos devem deslizar para cima e sair enquanto os novos entram por baixo, um caractere após o outro, em uma onda rápida e suave.
Evite que a caixa de texto mude de tamanho bruscamente durante a troca e anuncie só o texto novo aos leitores de tela.