Digit Roll

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/digit-roll.tsx.

Install the pastetaste component "Digit Roll" (digit-roll) into this Next.js project and use it.

What it is: Numbers whose digits are reels: they roll the short way round on every change, count up once when scrolled into view, and keep tabular width. Currency, percent, compact and units through Intl.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/digit-roll.json
   (it writes components/pastetaste/digit-roll.tsx; install any npm packages it reports: motion@^12.23.0).
2. Import it: import { DigitRoll } from "@/components/pastetaste/digit-roll" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- value: number — The number to show. Changing it rolls the reels, up when it rises and down when it falls.
- from: number — Start here and count up to value the first time the number is in view.
- duration: number = 1.2 — Seconds a roll takes; big jumps take a little longer.
- delay: number = 0 — Seconds to wait before the first count-up when from is set.
- stagger: number = 0.07 — Seconds between neighbouring digits starting to roll.
- staggerFrom: 'start' | 'end' = 'start' — Which digit starts first: the leftmost or the rightmost.
- spin: number = 1 — Extra full turns the lower digits make on big jumps, 0 to 3.
- direction: 'auto' | 'up' | 'down' = 'auto' — auto rolls up when the value rises and down when it falls.
- decimals: number — Fixed fraction digits. Without decimals and format the number is rounded to a whole number.
- format: Intl.NumberFormatOptions — Currency, percent, compact, unit, minimumIntegerDigits and so on. Keep it a stable object.
- locale: string = 'en-US' — BCP 47 locale; a fixed default keeps server and client output identical.
- prefix: ReactNode — Static content before the number.
- suffix: ReactNode — Static content after the number, for units.
- accent: string — The one accent: digits take this colour while they roll and cool back to the text colour. Off when unset.
- tracking: number = 0 — Extra space per digit in em; negative tightens big numbers.
- fade: boolean = true — Soft fade at the top and bottom edge of each reel.
- announce: 'off' | 'polite' = 'off' — Have screen readers announce changes; off by default so a ticking clock stays quiet.

Live preview: https://pastetaste.com/c/digit-roll
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 17