Docs
→Basic Number Ticker
Basic Number Ticker
A component that animates a number from one value to another.
0%
Installation
npx shadcn@latest add "https://fancycomponents.dev/r/basic-number-ticker.json"
Examples
Controlling the animation from outside the component
To start the animation from outside the component, you can use the startAnimation
function that is exposed via the ref. In this example, the animation (re)start when the component enters the viewport.
Revenue
$0
Conversion Rate
0%
Bounce Rate
100%
Avg. Session Duration
0s
New Users
0
Active Users
0
Props
Prop | Type | Default | Description |
---|---|---|---|
from* | number | 0 | Starting value of the animation |
target* | number | 100 | End value of the animation |
transition | ValueAnimationTransition | { duration: 3, type: "tween", ease: "easeInOut" } | Animation configuration, refer to motion docs for more details |
className | string | undefined | Additional CSS classes for styling |
onStart | () => void | undefined | Callback function when animation starts |
onComplete | () => void | undefined | Callback function when animation completes |
autoStart | boolean | true | Whether to start the animation automatically |