Text Tilt

Una tarjeta gira en perspectiva hacia el cursor, con contenido en capas que se separa de la superficie.

Añade un efecto "3D Tilt" (también llamado perspective tilt o tilt card) en [dónde].
La tarjeta debe inclinarse en perspectiva hacia el cursor mientras se mueve, con sus capas internas separándose de la superficie a distintas profundidades, y volver a quedar plana con suavidad cuando el cursor sale: suave y sutil.
Mantén la inclinación leve para que el texto siga legible y deja la tarjeta plana en pantallas táctiles y si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El texto se escala, se mueve o gira como un elemento gráfico en movimiento en lugar de ser texto estático.

Añade tipografía cinética (Kinetic Typography, también llamada kinetic text) en [dónde].
Filas de texto grande y repetido deben deslizarse de lado en direcciones alternas a un ritmo lento y constante, convirtiendo las palabras en un gráfico en movimiento.
Haz que cada fila se repita sin saltos visibles, que los lectores de pantalla lean el texto una sola vez y detén el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Los caracteres aparecen de uno en uno como si se tecleasen, normalmente seguidos de un cursor parpadeante.

Añade un efecto de máquina de escribir (Typewriter) en [dónde], también llamado typing animation o typing text.
Los caracteres deben aparecer de uno en uno a un ritmo de tecleo constante, con un cursor justo después del último carácter escrito que parpadee unas cuantas veces al terminar.
Reprodúcelo una sola vez en lugar de en bucle, deja que los lectores de pantalla lean el texto completo desde el principio y muestra el texto completo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Al pasar el ratón, un subrayado crece desde un lado o desde el centro bajo un enlace.

Añade un efecto hover de subrayado animado (Underline Draw) en [dónde], también llamado animated underline o hover underline animation.
Cuando el puntero esté sobre el enlace, un subrayado debe crecer suavemente de izquierda a derecha bajo el texto y encogerse de nuevo cuando el puntero salga: rápido y sutil.
Evita que el subrayado desplace el diseño de alrededor y muestra el mismo efecto con el foco del teclado.

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.