Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
Add an "Odometer" number animation (also called rolling numbers or slot-machine digits) to [where].
When the value changes, each digit should roll vertically to its new digit, always rolling forward, with a slight stagger across digits and a small settle at the end.
Keep every digit the same width so the number does not shift, and expose only the final value to screen readers.
Also calledCount Up, Animated Counter, Number Counter, countUp
A number counts from a start value to a target value when it becomes visible.
Use for
Stats, KPI blocks
Add a "Number Ticker" (also called count up or an animated counter) to [where].
When the number comes into view, it should count up from zero to its target, fast at first and slowing gently as it lands.
Use fixed-width digits so nothing around it jitters, count only once, and give screen readers and users who prefer reduced motion the final value right away.
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
Also calledText Flipping Board, Flip Board, Vestaboard display
Characters flip like an airport departure board until they land on the target letter.
Use for
Status boards, retro displays
Add a "Split-Flap Text" effect (also called a text flipping board or flip board) to [where].
Each character tile should flip quickly through the alphabet until it lands on its target letter, with the tiles settling one after another from left to right.
Run it once each time the text appears or changes, announce only the final text to screen readers, and show the final text without flipping for users who prefer reduced motion.
Also calledRotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
One word in a sentence is swapped for the next word in a list with a slide, flip or fade.
Use for
Hero taglines
Add a "Word Rotate" effect (also called rotating words or flip words) to [where].
One word in the line should slide up and out while the next word from a list slides in from below, pausing on each word before the next change.
Keep the rest of the line from jumping when the words have different widths, don't make screen readers announce every change, and stop rotating for users who prefer reduced motion.
Lines and dots animate between locations on a map or globe.
Use for
Global reach visuals
Add "Animated Map Arcs" (also called globe arcs) to [where].
Curved lines should draw themselves between locations on a dotted map one after another, then retract toward their destination while a soft ring pulses there: calm and steady.
Stagger the arcs so they never move in unison, keep the loop seamless, and pause it for users who prefer reduced motion.
Add a "Bar Chart Grow" animation (also called an animated bar chart or bar chart entrance) to [where].
Each bar should rise from the baseline to its value one after another in a quick stagger, easing out smoothly as it settles.
Play it once when the chart comes into view, and show the finished chart right away to users who prefer reduced motion.
Horizontal bars swap ranks over time as values change.
Use for
Time-series storytelling
Add a "Bar Chart Race" (also called a racing bar chart) to [where].
Horizontal bars should grow and shrink as values change over time and slide smoothly past each other whenever their rank changes, each keeping its label.
Move the bars with transforms instead of re-ordering the markup so swaps glide rather than jump, and give users a way to pause it.