Number ticker
A number whose digits roll like a counter, in pixel steps. Each digit is a CSS-transformed column (no JavaScript animation); screen readers read the formatted value once. Reduced motion shows the value without rolling.
import { Button } from "pixelbits/button";
import { NumberTicker } from "pixelbits/number-ticker";
import { useState } from "react";
export default function Demo() {
const [n, setN] = useState(12840);
return (
<div className="flex items-baseline gap-5">
<NumberTicker
value={n}
locale="en"
className="text-5xl font-light tracking-tight"
/>
<Button size="sm" onClick={() => setN(Math.round(Math.random() * 99999))}>
Random
</Button>
</div>
);
}Installation
import { NumberTicker } from "pixelbits/number-ticker";npx shadcn add https://pixelbits.ali-moradi-develop.com/r/number-ticker.jsonAPI
<NumberTicker>
A number whose digits roll like a counter, in pixel steps. Each digit is a CSS-transformed column (no JavaScript animation); screen readers read the formatted value once. Reduced motion shows the value without rolling.
<NumberTicker value={128000} format={{ notation: "compact" }} className="text-6xl font-light" />| Prop | Type | Default | Description |
|---|---|---|---|
| value* | number | — | The number to show. Changing it rolls the digits to the new value. |
| format | Intl.NumberFormatOptions | — |
|
| locale | string | the browser's locale | Locale for formatting. |
| fromZero | boolean | true | Roll in from zero when it first scrolls into view. |
Also accepts every prop of Omit<HTMLAttributes<HTMLSpanElement>, "children">.