Letter Scatter

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

Trozos de papel de colores salen disparados y caen para celebrar un éxito.

Añade una celebración de confeti (Confetti) en [dónde], también llamada confetti burst.
Pequeños trozos de papel de colores deben salir disparados rápidamente del botón y luego girar y caer flotando mientras se desvanecen, en una lluvia breve y animada.
Lánzala una vez por cada éxito en lugar de repetirla en bucle, evita que bloquee los clics en la página y omítela si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras empiezan muy separadas y tenues, y se juntan hasta el espaciado normal mientras aparecen.

Añade una animación de texto "Tracking In" (también llamada text tracking in o letter-spacing in) en [dónde].
Las letras deben empezar muy separadas y tenues, y juntarse hasta el espaciado normal mientras se vuelven totalmente visibles: suave, frenando al final.
Mantén el texto centrado y en una sola línea mientras cambia el espaciado para que el diseño de alrededor no se mueva, y muéstralo con el espaciado normal si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una sombra a rayas o desplazada detrás de las letras se anima en una dirección.

Añade un efecto "Line Shadow Text" (también llamado text shadow animation o dancing shadow) en [dónde].
Detrás de las letras, una sombra desplazada hecha de finas rayas diagonales debe deslizarse de forma lenta y continua, mientras las letras se quedan quietas y nítidas.
Haz que el movimiento de las rayas se repita sin cortes y deja la sombra quieta si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras se llenan de un líquido que sube y ondula.

Añade un efecto "Liquid Fill Text" (también llamado water fill text) en [dónde].
Las letras con contorno deben llenarse de un líquido cuya superficie ondulada avanza de lado mientras el nivel sube y baja despacio, en un bucle suave y continuo.
Mantén la palabra como texto real para los lectores de pantalla y deja el líquido en un nivel fijo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El texto sube desde detrás de una línea de recorte, como si surgiera de la nada.

Añade una entrada de texto "Mask Reveal" (también llamada line mask reveal o text masking) en [dónde].
Cada línea debe subir desde detrás de un borde invisible, como si surgiera de la nada, una tras otra, rápida y suave, sin rebote.
Reprodúcela una sola vez cuando el texto entre en pantalla al hacer scroll y muestra el texto directamente, sin movimiento, si el usuario prefiere movimiento reducido (prefers-reduced-motion).