Text

Texto relleno con un degradado cuyos colores cambian o fluyen sin parar.

Añade un efecto de texto con degradado animado (Animated Gradient Text, también llamado aurora text o rainbow text sweep) en [dónde].
Las letras deben rellenarse con un degradado cuyos colores fluyan lenta y suavemente por el texto en un bucle infinito y sin cortes.
Mantén el texto legible sobre su fondo en todo momento y deja los colores quietos si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El texto tiembla con cortes desplazados y separaciones de color rojo y cian, como una señal averiada.

Añade un efecto hover "Glitch Text" (también llamado text glitch o RGB split glitch) en [dónde].
Mientras el puntero esté sobre el texto, debe temblar en ráfagas rápidas y secas: finas franjas horizontales saltan de lado y dos copias de color se separan como una señal averiada, y luego vuelve a su sitio cuando el puntero se va.
Deja el texto real una sola vez en el documento para que los lectores de pantalla no lean las copias, y muestra el mismo efecto con el foco del teclado.

El texto muestra reflejos iridiscentes de lámina holográfica que se mueven con el puntero o con el tiempo.

Añade un efecto hover "Holographic Text" (también llamado holographic foil text) en [dónde].
Mientras el puntero esté sobre el texto, una franja de colores como de lámina holográfica debe deslizarse lenta y suavemente de un lado a otro sobre las letras, y el texto debe volver a su aspecto normal cuando el puntero se vaya.
Mantén las letras legibles en todo momento del brillo y muestra el mismo efecto con el foco del teclado.

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

Las letras salen volando al pasar el puntero y regresan, o estallan hacia fuera al entrar.

Añade un efecto hover "Letter Scatter" (también llamado scatter gather letters o explosive letter burst) en [dónde].
Cuando el puntero pase sobre el texto, cada letra debe salir disparada un poco en su propia dirección con un leve giro, y luego volver a reunirse suavemente en la palabra cuando el puntero se vaya.
Mantén fijo el espacio de la palabra en el diseño mientras las letras se mueven, haz que los lectores de pantalla la lean como una sola palabra y muestra el mismo efecto con el foco del teclado.

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

Caracteres verdes caen en columnas, como la lluvia de código de Matrix.

Añade un efecto "Matrix Text" (también llamado digital rain text) en [dónde].
Columnas de caracteres deben caer de forma constante a velocidades ligeramente distintas, cada una con un carácter brillante al frente y una estela que se desvanece detrás.
Trátalo como decoración oculta para los lectores de pantalla, mantenlo ligero y detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras gotean y se estiran hacia abajo como si se derritieran.

Añade un efecto "Melting Text" en [dónde].
Las letras deben hundirse lentamente mientras unas gotas se estiran por debajo, como si se derritieran, y quedarse quietas con un aspecto derretido.
Reprodúcelo una sola vez cuando el texto entre en pantalla, mantén la palabra legible al final y omite el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una palabra se difumina y se funde con la siguiente en el mismo lugar.

Añade un efecto "Morphing Text" (también llamado text morph) en [dónde].
Una palabra debe difuminarse y fundirse con la siguiente en el mismo lugar, con una mezcla suave y viscosa, y quedarse quieta un momento antes del siguiente cambio.
Recorre las palabras sin cortes, deja que los lectores de pantalla lean las palabras como texto normal y detén el ciclo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El texto brilla como un tubo de neón y parpadea o late.

Añade un efecto "Neon Glow Text" (un texto neón, también llamado neon sign flicker o glowing text) en [dónde].
El texto debe brillar como un tubo de neón con una luz suave y constante y, de vez en cuando, apagarse un instante como un letrero real.
Que el parpadeo sea ocasional y no rápido, porque los destellos rápidos pueden hacer daño a algunos usuarios, y mantén el brillo fijo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras de un título se barajan o se mueven en secuencia a medida que el usuario recorre las secciones con el scroll.

Añade "Scrolling Letters" (también llamado on-scroll letter animations) en [dónde].
A medida que el usuario recorre las secciones con el scroll, las letras del título deben girar hacia su siguiente carácter una tras otra de izquierda a derecha, ligadas directamente a la posición del scroll.
Al volver hacia arriba deben girar de vuelta, y los lectores de pantalla deben recibir el título actual como texto normal.

Un brillo recorre las letras una y otra vez.

Añade un efecto "Shimmer Text" (también llamado animated shiny text o metallic shimmer text) en [dónde].
Una franja de luz debe recorrer las letras con suavidad de izquierda a derecha y repetirse tras una breve pausa.
Mantén el texto legible bajo el brillo y déjalo quieto si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un título se corta en franjas horizontales que se desplazan de lado unas contra otras al hacer scroll.

Añade un efecto "Sliced Text" (también llamado on-scroll sliced text) en [dónde].
Un título grande debe cortarse en franjas horizontales que se deslizan de lado unas contra otras al hacer scroll, alineadas formando la palabra completa al principio.
Liga el desplazamiento directamente a la posición del scroll para que al volver se invierta, y mantén el título como un solo texto legible para los lectores de pantalla.

El texto se dispone alrededor de un círculo que gira sin parar.

Añade "Spinning Text" (también llamado circular text o text on circle) en [dónde].
Las letras deben repartirse de forma uniforme alrededor de un círculo que gira lento y constante, sin salto cuando el bucle vuelve a empezar.
Da el texto a los lectores de pantalla una sola vez como texto normal y detén la rotación 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).

Los caracteres giran como en un panel de salidas de aeropuerto hasta quedarse en la letra final.

Añade un efecto "Split-Flap Text" (también llamado text flipping board o flip board) en [dónde].
Cada casilla de carácter debe pasar rápidamente por el alfabeto hasta quedarse en su letra final, y las casillas deben ir asentándose una tras otra de izquierda a derecha.
Ejecútalo una vez cada vez que el texto aparezca o cambie, anuncia solo el texto final a los lectores de pantalla y muestra el texto final sin giros si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Los bordes de las letras ondulan como si estuvieran dibujados a mano, con un filtro de desplazamiento SVG.

Añade un efecto "Squiggly Text" (también llamado wobbly text o turbulence text) en [dónde].
Los bordes de las letras deben temblar ligeramente como si se dibujaran a mano y se redibujaran varias veces por segundo: un hervor sutil y nervioso, no una onda suave.
Mantén el texto legible y déjalo quieto si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El texto queda fijo mientras sus líneas aparecen y desaparecen según el avance del scroll.

Añade un efecto "Sticky Text Fade" (también llamado sticky scroll text opacity fade) en [dónde].
Mientras la sección avanza con el scroll, el bloque de texto debe quedarse fijo en su sitio y sus líneas deben aparecer y desaparecer una a una según el avance del scroll.
Liga los fundidos directamente a la posición del scroll para que al volver se inviertan, y mantén todas las líneas disponibles para los lectores de pantalla, sea cual sea su opacidad.

Los contornos de las letras se dibujan como un trazo antes de que aparezca el relleno.

Añade un efecto "Stroke Text Draw" (también llamado draw in text o animated stroke text) en [dónde].
Los contornos de las letras deben dibujarse solos con suavidad y, una vez completos, el relleno debe aparecer con un fundido.
Reprodúcelo una sola vez al cargar, mantén la palabra accesible como texto real y muestra el texto ya relleno si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras o palabras giran en 3D sobre un eje para mostrar el siguiente texto en su cara trasera.

Añade un efecto hover "Text 3D Flip" (también llamado 3D flip text reveal) en [dónde].
Cuando el puntero esté sobre el texto, cada letra debe girar en 3D sobre su eje horizontal para mostrar una letra nueva en su otra cara, una tras otra en un barrido rápido y suave, y volver cuando el puntero salga.
Mantén el mismo tamaño de la caja de texto durante el giro y muestra el mismo efecto con el foco del teclado.

El texto se deforma y ondula de forma orgánica, impulsado por el scroll o el movimiento del puntero.

Añade un efecto "Text Distortion" (también llamado organic text distortion) en [dónde].
Una fila de texto debe fluir de lado sin fin y deformarse y ondular de forma orgánica mientras se mueve, como vista a través de agua en movimiento, con el flujo impulsado por el scroll del usuario.
Mantén la distorsión lo bastante ligera para que el texto siga siendo legible, que vaya fluida en dispositivos más lentos y desactívala si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las palabras aparecen una tras otra al cargar la página, a menudo mientras se disipa un desenfoque, como si se estuvieran generando.

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

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.

Una palabra se duplica en muchas copias apiladas que se desplazan con el scroll.

Añade un efecto "Text Repetition" (también llamado repeated text scroll) en [dónde].
Una palabra debe copiarse en una pila de copias de contorno más tenues que se abren desde detrás de ella a medida que el usuario hace scroll, y se vuelven a juntar al subir.
Vincula la apertura directamente a la posición del scroll y oculta las copias extra a los lectores de pantalla para que la palabra se lea una sola vez.

El texto existente sale con una animación y se reemplaza por un contenido nuevo.

Añade un efecto "Text Replacement" (también llamado text swap) en [dónde].
Cuando cambie el texto, los caracteres antiguos deben deslizarse hacia arriba y salir mientras los nuevos entran desde abajo, carácter a carácter, en una onda rápida y suave.
Evita que la caja del texto cambie de tamaño de golpe durante el cambio y anuncia solo el texto nuevo a los lectores de pantalla.

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.

Al mover el puntero sobre una tarjeta se descubre un texto oculto bajo un borde de máscara o un foco de luz.

Añade un efecto "Text Reveal Card" (también llamado spotlight text reveal) en [dónde].
Al mover el puntero por la tarjeta, un borde vertical debe seguirlo de cerca y descubrir un texto oculto en uno de sus lados, suave y directo, sin retraso.
En pantallas táctiles, donde no hay puntero que seguir, deja que un arrastre o un toque revele el texto oculto, y haz que ese texto esté disponible para los lectores de pantalla.

El texto se sustituye por caracteres aleatorios que cambian y se resuelven poco a poco en la palabra final.

Añade un efecto hover "Text Scramble" (también llamado text decode o encrypted text) en [dónde].
Cuando el puntero pase sobre el texto, cada letra debe parpadear rápido entre caracteres aleatorios y asentarse en su letra real, resolviéndose una tras otra de izquierda a derecha.
Evita que el ancho del texto salte mientras se desordena, mantén a los lectores de pantalla en el texto real y muestra el mismo efecto con el foco del teclado.

El texto gira en perspectiva 3D siguiendo la posición del ratón.

Añade un efecto "Text Tilt" (también llamado perspective text tilt) en [dónde].
El texto debe inclinarse suavemente en 3D hacia el puntero mientras se mueve, siguiéndolo con fluidez, y volver a quedar plano con suavidad cuando el puntero salga.
Mantén la inclinación sutil para que el texto siga legible, y deja el texto plano en pantallas táctiles y 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.

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

Una palabra de la frase se cambia por la siguiente de una lista con un deslizamiento, un giro o un fundido.

Añade un efecto "Word Rotate" (también llamado rotating words o flip words) en [dónde].
Una palabra de la línea debe deslizarse hacia arriba y salir mientras la siguiente palabra de una lista entra desde abajo, deteniéndose en cada palabra antes del siguiente cambio.
Evita que el resto de la línea salte cuando las palabras tengan anchos distintos, no hagas que los lectores de pantalla anuncien cada cambio y detén la rotación si el usuario prefiere movimiento reducido (prefers-reduced-motion).