← All components
Text / effect
Count Up
A spring counter that brings figures into focus.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Duration tunes the original physical spring; settling can take longer than that number of seconds. Zero duration snaps to the final value.
- Starts once in view, excludes hidden/paused time, and stops at completion. Reduced motion shows the exact target.
- Values are bounded to ±1e12 and12 decimal places; scientific notation is formatted correctly.
- The included Demo.tsx and styles recreate the full preview.
React 19framer-motion@12.42.2
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
to (required) | number | required | Target value |
from | number | 0 | Starting value |
direction | up|down | up | Direction |
duration | number | 2 | Spring duration |
delay | number | 0 | Start delay |
separator | string | '' | Thousands separator |
startWhen | boolean | true | Start when visible |
className | string | '' | Additional outer classes. |
onStart | () => void | undefined | Called when the visible count begins. |
onEnd | () => void | undefined | Called once after the spring reaches the exact target. |
paused | boolean | false | Freeze the current presentation. |
replayToken | number | 0 | Change to replay/reset the component. |