Skip to content

Roll Number

CSS

Each digit is its own column, so only the digits that change move.

Tokens processed today1,284,903

Install

$ npx shadcn@latest add https://spotcheckui.com/r/roll-number.json

No motion engine needed.

Usage

Pass a number and it's formatted for you. Pass text for anything already formatted: digits roll and every other character stays still.

import { RollNumber } from "@/components/spotcheck/roll-number"

<RollNumber value={tokens} className="text-7xl" />
<RollNumber text="₹1,990" />

It inherits its size from the surrounding text, and it works in server components.

Props

  • valuenumberDefault 0A number to format. Ignored when `text` is set.
  • textstringDefault —Preformatted text such as "₹1,990". Digits roll, everything else stays still.
  • localestringDefault en-USThe locale used to format `value`.
  • formatOptionsNumberFormatOptionsDefault —Passed to Intl.NumberFormat, for currency or decimal places.
  • durationnumberDefault 900Roll time in milliseconds.

Keyboard

Nothing to operate: this component displays information.

Reduced motion

Digits change instantly, with no transition.