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 contador animado (Number Ticker) en [dónde], también llamado count up o animated counter.
Cuando el número entre en pantalla, debe contar desde cero hasta su objetivo, rápido al principio y frenando con suavidad al llegar.
Usa dígitos de ancho fijo para que nada alrededor tiemble, cuenta una sola vez y da el valor final de inmediato a los lectores de pantalla y si el usuario prefiere movimiento reducido (prefers-reduced-motion).
También llamadoRolling Numbers, Animated Number, AnimateNumber, Slot-Machine Digits
Cada dígito rueda en vertical hasta el nuevo valor cuando cambia un número.
Se usa en
Contadores en vivo y precios
Añade una animación de números "Odometer" (también llamada rolling numbers o slot-machine digits) en [dónde].
Cuando cambie el valor, cada dígito debe rodar en vertical hasta su nuevo dígito, siempre hacia delante, con un ligero escalonado entre dígitos y un pequeño asentamiento al final.
Mantén todos los dígitos del mismo ancho para que el número no se desplace, y expón solo el valor final a los lectores de pantalla.
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.
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).
También llamadoWorld Map Animated Lines, Globe Arcs
Líneas y puntos se animan entre ubicaciones de un mapa o un globo terráqueo.
Se usa en
Visuales de alcance global
Añade "Animated Map Arcs" (también llamado globe arcs) en [dónde].
Unas líneas curvas deben dibujarse una tras otra entre ubicaciones de un mapa de puntos y luego recogerse hacia su destino mientras allí late un anillo suave: tranquilo y constante.
Escalona los arcos para que nunca se muevan a la vez, mantén el bucle sin cortes y páusalo si el usuario prefiere movimiento reducido (prefers-reduced-motion).
También llamadoAnimated Bar Chart, Bar Chart Entrance
Las barras suben desde altura cero hasta sus valores.
Se usa en
Paneles e informes
Añade un gráfico de barras animado (Bar Chart Grow) en [dónde], también llamado animated bar chart o bar chart entrance.
Cada barra debe subir desde la línea base hasta su valor una tras otra con un escalonado rápido, desacelerando con suavidad al asentarse.
Reprodúcelo una sola vez cuando el gráfico entre en pantalla y muestra el gráfico terminado de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).