Rolling Number

New

An odometer. Each digit rolls on its own spring whenever the value changes.

motionutils@soultel/use-reduced-motion-safe

0123456789012345678901234567890123456789

Installation

$ pnpm dlx shadcn@latest add @soultel/rolling-number

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/rolling-number.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion
```
2. Copy the source from the Code tab into components/rolling-number.tsx.

Usage

example.tsx5 lines

import { RollingNumber } from "@/components/rolling-number"

export function Example({ count }: { count: number }) {
  return <RollingNumber value={count} className="text-4xl font-semibold" />
}

Props

Prop	Type	Default	Description
value	number	-	The number to show. Non-negative integers.
minDigits	number	1	Pads with leading zeros.