# RollingNumber

> A number that rolls into place like an odometer, and turns once more on hover. The real value is in an sr-only copy.

Section: Motion. Docs: https://entrepta.vercel.app/docs/components/rolling-number

## Install

```bash
npx @entrepta/cli@latest add rolling-number
```

Files: `motion/rolling-number.tsx`, `lib/motion.ts`.
npm packages: `motion`.
Comes with: `motion-lib`.

## Usage

```tsx
import { RollingNumber, useRollOnHover } from "@/components/entrepta/rolling-number"

function Stat() {
  const roll = useRollOnHover(0.2)
  return (
    <div {...roll.handlers} className="font-serif text-display-md">
      <RollingNumber value={128} cycle={roll.cycle} delay={roll.delay} height={44} />
    </div>
  )
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number \| string` | - | Whole number. Commas stay still |
| `cycle` | `number` | 0 | Change it to roll a full turn |
| `delay` | `number` | 0 | Entrance delay. 0 after interaction |
| `height` | `number` | 34 | Height of one digit in px |