Sustituye [dónde] por la parte de tu página y pega el prompt en tu agente de IA. Cada prompt incluye el nombre de la animación, así la próxima vez puedes pedirla solo por su nombre.
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.
También llamadoTyping Animation, Typewriter Effect, Typing Text
Los caracteres aparecen de uno en uno como si se tecleasen, normalmente seguidos de un cursor parpadeante.
Se usa en
Titulares hero, eslóganes
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 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).
H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
También llamadoText Flipping Board, Flip Board, Vestaboard display
Los caracteres giran como en un panel de salidas de aeropuerto hasta quedarse en la letra final.
Se usa en
Paneles de estado y pantallas retro
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).
El texto tiembla con cortes desplazados y separaciones de color rojo y cian, como una señal averiada.
Se usa en
Titulares cyberpunk o de videojuegos
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 gira en perspectiva 3D siguiendo la posición del ratón.
Se usa en
Títulos hero
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).
También llamadoAnimated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
Al pasar el ratón, un subrayado crece desde un lado o desde el centro bajo un enlace.
Se usa en
Enlaces de navegación, enlaces en línea
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.