Stats
Stats - Count-up
A row of statistics whose numbers count up from zero when scrolled into view.
- Count-up animation
- whileInView
- rAF easing
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
A row of headline numbers starts at zero, and when the section scrolls into view a viewport hook triggers each value to count up to its target. The count is driven frame by frame with requestAnimationFrame and an easing curve, so the numbers decelerate as they approach the final figure rather than ticking linearly.
When to use it
- A metrics or impact section showing user counts, revenue, or growth figures
- A homepage band where animated numbers make achievements feel earned
- Any place where you want a statistic to land with a small moment of drama
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 400-3000ms
durationCount-up duration
Related components
Using this block
Buy it, then copy components/blocks/stats-counter/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.