Animations/Count Up
Count Up
Animate a number counting up from zero (or any value) when it enters the viewport. Perfect for stats sections and dashboards.
import { CountUp } from "@animui/ui"Basic
0
Users
0.0%
Uptime
$0
MRR
Prefix & Suffix
$0
Revenue
0.0%
Satisfaction
x0.0
Growth
Custom duration
0
500ms — fast
0
2000ms — default
0
5000ms — slow
Props
| Prop | Type | Default | Description |
|---|---|---|---|
to | number | — | The target number to count up to. |
from | number | 0 | Starting value. |
duration | number | 2000 | Animation duration in milliseconds. |
prefix | string | — | String prepended to the number (e.g. '$'). |
suffix | string | — | String appended to the number (e.g. '%'). |
decimals | number | 0 | Number of decimal places to display. |
separator | string | "," | Thousands separator character. |
easing | "linear" | "ease-out" | "ease-in-out" | "ease-out" | Easing function for the count animation. |
triggerOnce | boolean | true | Whether the animation fires only once when entering the viewport. |
className | string | — | Additional classes for the span element. |