Underline Draw

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.

Ao passar o mouse, uma linha cresce acima do texto a partir da esquerda, do centro ou da direita.

Adicione um efeito de hover "Overline Grow" em [onde].
Uma linha acima do texto deve crescer do centro para os dois lados enquanto o ponteiro estiver sobre ele, e encolher de volta ao centro quando sair: rápido e suave.
Reserve espaço para a linha para o texto não se mexer, e mostre o mesmo efeito no foco do teclado.

Uma faixa colorida no estilo marca-texto é desenhada sobre uma frase para destacá-la.

Adicione um efeito marca-texto (Text Highlighter) em [onde], também chamado de highlight marker ou marker underline.
Uma faixa colorida no estilo marca-texto deve passar suavemente por trás da frase-chave, da esquerda para a direita, como se alguém a destacasse com uma caneta.
Reproduza só uma vez quando a frase entrar na tela ao rolar, mantenha o texto legível sobre a faixa e faça a faixa acompanhar a frase corretamente quando ela quebrar em duas linhas.

Um traço SVG parece ser desenhado ao longo do caminho conforme o deslocamento do tracejado é animado.

Adicione uma animação "Line Drawing" (também chamada path drawing ou self-drawing SVG) em [onde].
Cada traço deve parecer se desenhar sozinho, suavemente, ao longo do caminho do início ao fim, e um segundo traço, como um sinal de visto, deve vir logo depois do primeiro.
Reproduza só uma vez ao entrar na tela, sem repetir, e mostre as linhas já desenhadas se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras ficam suavemente mais grossas ou mais finas (ou mudam de largura ou inclinação) usando os eixos de uma fonte variável.

Adicione um efeito de hover "Variable Font Weight Animation" (também chamado de font weight shift) em [onde].
Enquanto o ponteiro estiver sobre o texto, as letras devem engrossar uma após a outra em uma onda suave da esquerda para a direita e afinar de novo quando o ponteiro sair.
Use uma fonte variável para o peso mudar suavemente em vez de saltar, evite que o título empurre o conteúdo próximo ao alargar e mostre o mesmo efeito no foco do teclado.

Letras grandes funcionam como uma janela que mostra um vídeo em reprodução dentro delas.

Adicione um efeito "Video Text" (também chamado de text video mask) em [onde].
Letras grandes e grossas devem funcionar como uma janela para um vídeo em reprodução, de modo que as imagens em movimento apareçam só dentro das formas das letras.
Mantenha o vídeo mudo e em loop, sem controles, ofereça as palavras como texto real para leitores de tela e mostre um quadro estático 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).