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 "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.
Animaciones parecidas
A
Q
J
P
N
V
Y
HB
K
M
L
Z
W
T
XC
R
G
Q
J
P
N
VD
Y
H
K
M
L
Z
WE
T
X
R
G
Q
J
PF
N
V
Y
H
K
M
L
También llamadoScrambleText, Text Decode, Encrypted Text, Text Unscramble, Hyper Text
El texto se sustituye por caracteres aleatorios que cambian y se resuelven poco a poco en la palabra final.
Se usa en
Títulos hero de estilo tecnológico, hover en enlaces
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.
La opacidad del elemento parpadea de forma irregular, como una luz que falla.
Se usa en
Efectos de neón y glitch
Añade un efecto "Flicker" (también llamado flickering) en [dónde].
El elemento debe mantenerse estable la mayor parte del tiempo y atenuarse en breves tartamudeos irregulares, como un neón que falla.
Mantén un ritmo irregular en lugar de uniforme, evita destellos rápidos a plena intensidad y detenlo para los usuarios que prefieren movimiento reducido.
Un título se corta en franjas horizontales que se desplazan de lado unas contra otras al hacer scroll.
Se usa en
Hero editorial
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.
Q
R
U
P
D
H
LY
O
S
G
K
X
BA
F
J
Z
V
M
EH
L
C
N
W
T
IX
B
Q
R
U
P
DM
E
Y
O
S
G
KT
I
A
F
J
Z
VP
D
H
L
C
N
W
Caracteres verdes caen en columnas, como la lluvia de código de Matrix.
Se usa en
Temáticas hacker
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).
El texto muestra reflejos iridiscentes de lámina holográfica que se mueven con el puntero o con el tiempo.
Se usa en
Tarjetas premium
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.
Se usa en
Secciones hero de marca
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).
También llamadoExplosive Letter Burst, Scatter Gather Letters
Las letras salen volando al pasar el puntero y regresan, o estallan hacia fuera al entrar.
Se usa en
Enlaces lúdicos
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.