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 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.
También llamadoCount Up, Animated Counter, Number Counter, countUp
Un número cuenta desde un valor inicial hasta un valor objetivo cuando se vuelve visible.
Se usa en
Estadísticas y bloques de KPI
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).
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 llamadoRotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
Una palabra de la frase se cambia por la siguiente de una lista con un deslizamiento, un giro o un fundido.
Se usa en
Eslóganes hero
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).
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).
Las barras horizontales intercambian posiciones con el tiempo a medida que cambian los valores.
Se usa en
Relatos con series temporales
Añade un gráfico de carrera de barras (Bar Chart Race) en [dónde], también llamado racing bar chart.
Las barras horizontales deben crecer y encogerse a medida que cambian los valores con el tiempo y deslizarse con suavidad unas junto a otras cada vez que cambie su posición, cada una con su etiqueta.
Mueve las barras con transformaciones en lugar de reordenar el marcado para que los intercambios se deslicen en vez de saltar, y da a los usuarios una forma de pausarlo.