Motion

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.

Preview

hover to roll

Installation

terminal

bash

npx @entrepta/cli@latest add rolling-number

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

rolling-number.tsx

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