Animated numbers, toggles and pills: micro-motion that earns attention
The smallest motion changes the meaning of a number. A live count-up, a toggle that snaps, a pill that fades between states — three micro-motion patterns that turn data into attention and attention into action.
6 min read
Numbers are the least animated thing on your dashboard
A static 1,284 reads as data. A 1,284 that counts up from 1,000 in 400ms reads as a story. Count-up is the cheapest way to make a dashboard feel alive — the key is easing out, never linear, and pausing respect for the user's attention.
Three micro-motion patterns
- Count-up — for metrics and stats. 300–600ms, ease-out, respect reduced motion with a one-frame swap.
- Toggle snap — a switch that snaps 200ms with a slight overshoot feels physical; a 400ms ease feels lazy.
- Status pill — crossfade between states in 150ms; never jump-cut a status color, it reads as a glitch.
Motion is communication. Use it to say 'this changed', not just 'this moved'.