Count Up
Animated number counter with spring physics using Framer Motion
Preview
+
Components shipped
Overview
CountUp animates a number from one value to another using spring physics from Framer Motion. It triggers when the element scrolls into view and supports counting up or down with configurable duration and formatting.
Features
- Spring physics — natural motion with configurable damping and stiffness
- Viewport trigger — starts counting when scrolled into view via
useInView - Decimal support — handles fractional numbers with proper formatting
- Custom separator — format large numbers with commas, spaces, or any character
- Bidirectional — count up or down with the
directionprop
Usage
import CountUp from '@/components/count-up'
<CountUp from={0} to={500} separator="," className="text-5xl font-bold" />
<CountUp from={100} to={0} direction="down" duration={3} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
to | number | — | Target number (required) |
from | number | 0 | Starting number |
direction | 'up' | 'down' | 'up' | Count direction |
delay | number | 0 | Delay before counting starts (seconds) |
duration | number | 2 | Approximate animation duration (seconds) |
className | string | '' | CSS class for the span element |
startWhen | boolean | true | Additional condition to start the animation |
separator | string | '' | Thousands separator character |
onStart | () => void | — | Callback when counting begins |
onEnd | () => void | — | Callback when counting ends |