También llamado Staggered Animation, Cascade
Los elementos de un grupo se animan uno tras otro con un pequeño retraso, formando una ola en lugar de aparecer todos a la vez.
Se usa en
Listas, cuadrículas, menús de navegación y resultados de búsqueda
Añade una animación "Stagger" (también llamada staggered animation o cascada) en [dónde].
Los elementos deben aparecer subiendo uno tras otro con un retraso corto y uniforme, para que el grupo se vea como una ola rápida y no todos a la vez.
Mantén la secuencia breve aunque la lista sea larga, reprodúcela una sola vez al entrar en pantalla y omite el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).
También llamado Text Generate Effect
Las palabras aparecen una tras otra al cargar la página, a menudo mientras se disipa un desenfoque, como si se estuvieran generando.
Se usa en
Textos de introducción con estilo de IA
Añade un efecto "Text Generate" en [dónde].
Las palabras deben aparecer una tras otra mientras se disipa un suave desenfoque en cada una, como si el texto se estuviera generando: constante y tranquilo.
Reprodúcelo una sola vez al cargar, deja que los lectores de pantalla lean el texto completo desde el principio y muéstralo sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).
También llamado Line Mask Reveal, Split Text Overflow Hidden Reveal, Text Masking
El texto sube desde detrás de una línea de recorte, como si surgiera de la nada.
Se usa en
Titulares editoriales
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).
También llamado Text Wave
Las letras suben y bajan en secuencia, creando una onda que recorre la palabra.
Se usa en
Títulos divertidos, indicadores de carga
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).