Animates a number to its target value with spring physics when scrolled into view.
pnpm dlx shadcn@latest add "https://myndui.design/r/number-ticker.json"
NumberTicker animates only once, when it scrolls into view. It renders
tabular-nums so the width stays stable while the digits change.
import { NumberTicker } from "@/components/myndui/number-ticker";
NumberTicker is an inline <span> that inherits the surrounding font size,
weight, and color. Style the element directly:
<NumberTicker value={100} className="text-6xl font-bold tracking-tight" />
<NumberTicker value={1984.42} decimalPlaces={2} />
Set direction="down" to count from value to startValue.
<NumberTicker value={100} direction="down" />
delay is in seconds and starts once the element is in view.
<NumberTicker value={5000} delay={0.5} />
| Prop | Type | Default | Description |
|---|
value | number | — | Target value the ticker animates to (or from, when counting down). |
startValue | number | 0 | Value the counter starts at. |
direction | "up" | "down" | "up" | "up" counts toward value; "down" counts from value. |
delay | number | 0 | Delay in seconds before the animation begins once in view. |
decimalPlaces | number | 0 | Number of decimal places to render. |
damping | number | 60 | Spring damping — higher is less bouncy. |
stiffness | number | 100 | Spring stiffness — higher is faster. |
NumberTicker also forwards every standard <span> attribute (className,
style, id, …) to the root element.