Underline Draw (subrayado animado)

Una línea entra deslizándose desde el borde inferior o superior hasta su lugar para subrayar o sobrerrayar el elemento.

Añade un efecto hover "Underline Reveal" (también llamado overline reveal o reveal) en [dónde].
Una línea de ancho completo debe subir deslizándose hasta su lugar desde justo debajo del borde inferior mientras el cursor está sobre el elemento, y bajar de nuevo fuera de la vista cuando sale: rápido y suave.
Recorta la línea en el borde para que aparezca deslizándose y no con un fundido ni creciendo, y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, una línea crece sobre el texto desde la izquierda, el centro o la derecha.

Añade un efecto hover "Overline Grow" en [dónde].
Una línea sobre el texto debe crecer desde el centro hacia ambos lados mientras el puntero esté encima, y encogerse de vuelta hacia el centro al salir: rápido y suave.
Reserva espacio para la línea para que el texto no se mueva, y muestra el mismo efecto con el foco del teclado.

Una franja de color tipo rotulador se dibuja sobre una frase para resaltarla.

Añade un efecto "Text Highlighter" (también llamado highlight marker o marker underline) en [dónde].
Una franja de color tipo rotulador debe pasar suavemente por detrás de la frase clave de izquierda a derecha, como si alguien la resaltara con un marcador.
Reprodúcelo una sola vez cuando la frase entre en pantalla al hacer scroll, mantén el texto legible sobre la franja y haz que la franja siga bien la frase cuando se divida en dos líneas.

Un trazo SVG parece dibujarse a lo largo de su recorrido al animar el desplazamiento del guion.

Añade una animación "Line Drawing" (también llamada path drawing o self-drawing SVG) en [dónde].
Cada trazo debe parecer dibujarse solo con suavidad a lo largo de su recorrido de principio a fin, y un segundo trazo, como una marca de verificación, debe seguir justo después del primero.
Reprodúcela una sola vez al entrar en pantalla en lugar de repetirla, y muestra las líneas ya dibujadas si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras se vuelven más gruesas o más finas con suavidad (o cambian de ancho o inclinación) mediante los ejes de una fuente variable.

Añade un efecto hover "Variable Font Weight Animation" (también llamado font weight shift) en [dónde].
Mientras el puntero esté sobre el texto, las letras deben engrosarse una tras otra en una onda suave de izquierda a derecha y volver a adelgazar cuando el puntero salga.
Usa una fuente variable para que el grosor cambie con suavidad en lugar de saltar, evita que el título empuje el contenido cercano al ensancharse y muestra el mismo efecto con el foco del teclado.

Unas letras grandes funcionan como una ventana que muestra un vídeo en reproducción dentro de ellas.

Añade un efecto "Video Text" (también llamado text video mask) en [dónde].
Unas letras grandes y gruesas deben funcionar como una ventana a un vídeo en reproducción, de modo que la imagen en movimiento solo se vea dentro de la forma de las letras.
Mantén el vídeo silenciado y en bucle sin controles, ofrece las palabras como texto real para los lectores de pantalla y muestra un fotograma fijo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras suben y bajan en secuencia, creando una onda que recorre la palabra.

Añade un efecto "Wavy Text" (también llamado text wave) en [dónde].
Las letras deben subir y bajar una tras otra para que una onda suave y fluida recorra la palabra sin parar.
Haz el bucle sin cortes, que los lectores de pantalla lo lean como una sola palabra y detén la onda si el usuario prefiere movimiento reducido (prefers-reduced-motion).