Text Highlighter (marca-texto)

Uma seta de ponteiro desenha uma caixa de destaque em volta de uma palavra quando o texto entra na tela.

Adicione um efeito "Pointer Highlight" em [onde].
Quando o texto entrar na tela ao rolar, uma caixa deve se desenhar em volta da palavra-chave da esquerda para a direita enquanto uma pequena seta de ponteiro percorre o canto dela, suave e constante, como se alguém marcasse a palavra à mão.
Desenhe só na primeira vez que aparecer, sem deslocar o texto, e mostre a caixa pronta de imediato se o usuário preferir movimento reduzido (prefers-reduced-motion).

Ao passar o mouse, um sublinhado cresce a partir de um lado ou do centro sob um link.

Adicione um efeito de hover "Underline Draw" (também chamado de animated underline ou hover underline animation) em [onde].
Quando o ponteiro estiver sobre o link, um sublinhado deve crescer suavemente da esquerda para a direita sob o texto e encolher de novo quando o ponteiro sair: rápido e sutil.
Evite que o sublinhado desloque o layout ao redor e mostre o mesmo efeito no foco do teclado.

Uma linha desliza a partir da borda inferior ou superior até o lugar, sublinhando ou sobrelinhando o elemento.

Adicione um efeito de hover "Underline Reveal" (também chamado overline reveal ou reveal) em [onde].
Uma linha de largura total deve subir deslizando até o lugar a partir de logo abaixo da borda inferior enquanto o ponteiro estiver sobre o elemento, e descer de volta para fora da vista quando sair: rápido e suave.
Recorte a linha na borda para que ela apareça deslizando, e não com fade ou crescendo, e mostre o mesmo efeito no foco do teclado.

Uma palavra em contorno é preenchida ou iluminada por um degradê que segue o ponteiro ou passa por ela.

Adicione um "Text Hover Effect" (também chamado de text fill on hover ou gradient outline text hover) em [onde].
A palavra deve começar só com o contorno e, enquanto o ponteiro estiver sobre ela, um preenchimento sólido deve entrar suavemente da esquerda para a direita e recuar quando o ponteiro sair.
Mantenha a palavra em contorno legível antes do preenchimento e mostre o mesmo efeito no foco do teclado.

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.