Text Generate

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).

Las palabras de un párrafo pasan de atenuadas a opacidad total a medida que el usuario hace scroll.

Añade un efecto "Text Reveal" (también llamado scroll text reveal o word-by-word reveal) en [dónde].
El párrafo debe empezar atenuado y, a medida que el usuario hace scroll, cada palabra debe iluminarse del todo una tras otra, vinculada a la posición del scroll.
Al volver a subir, las palabras deben atenuarse de nuevo, y el párrafo completo debe seguir disponible para los lectores de pantalla sea cual sea su atenuación.

El elemento empieza muy desenfocado y se va enfocando, a menudo mientras se desliza o aparece.

Añade una animación de entrada "Blur In" (también llamada text focus in, focus in o blur text reveal) en [dónde].
El contenido debe empezar muy desenfocado y transparente, y luego enfocarse en su sitio: suave y más bien lento, sin desplazamiento.
Reprodúcela una sola vez y muestra el texto nítido de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un título se divide en caracteres, palabras o líneas que se animan una tras otra con un pequeño retraso.

Añade una entrada "Split Text Stagger" (también llamada letter stagger o staggered text reveal) en [dónde].
Divide el título en letras que suban y aparezcan una tras otra con un breve retraso entre ellas, rápido y suave, sin rebote.
Reprodúcela una sola vez cuando el título entre en pantalla, haz que los lectores de pantalla lo lean como una sola palabra y muéstralo sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

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.

Una palabra con contorno se rellena o se ilumina con un degradado que sigue al puntero o la recorre de lado a lado.

Añade un "Text Hover Effect" (también llamado text fill on hover o gradient outline text hover) en [dónde].
La palabra debe empezar solo con contorno y, mientras el puntero esté encima, un relleno sólido debe entrar suavemente de izquierda a derecha y retirarse cuando el puntero salga.
Mantén legible la palabra con contorno antes del relleno y muestra el mismo efecto con el foco del teclado.

El texto sigue una trayectoria curva y avanza por ella a medida que el usuario hace scroll.

Añade un efecto "Text Path Scroll" (también llamado text path curve scroll animation) en [dónde].
El texto debe apoyarse en una línea curva y deslizarse por ella a medida que el usuario hace scroll, avanzando al bajar y retrocediendo al subir.
Vincula el movimiento directamente a la posición del scroll sin retraso y mantén el texto legible como texto normal para los lectores de pantalla.