Flip Digits

A departures-board digit roll — each digit lands on its new value with a snappy spring, for countdowns and stat reveals.

surfaces
number
countdown
odometer
stat

Quick usage

usage

import { FlipDigits } from "@pinky-ui/components";

<FlipDigits value={1249} size="lg" label="Members" />

Presets

Stat

A single rolling number.

value={1249} size={"lg"}

Countdown

A clock-style string with static colon separators.

value={"00:12:45"} size={"lg"}

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell

npm install @pinky-ui/components

shell

pnpm add @pinky-ui/components

shell

yarn add @pinky-ui/components

shell — copies source into your project

npx pinky-ui add flip-digits

Prefer to run the whole repository locally instead?

repository

git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

Prop	Type	Default	Description
value	number \| string	—	Required. A number rolls every digit; a string (e.g. "00:12:45") rolls only the digit characters and passes separators through statically.
padTo	number	—	Zero-pads a numeric value to this many digits before rolling.
size	"sm" \| "md" \| "lg"	"md"	Digit height and type size.
label	string	—	Prefixes the sr-only announced value, e.g. "Members: 1249".

Accessibility

The rolling digit strip is aria-hidden; a single sr-only span announces the settled value, so assistive tech never parses the ten stacked digits behind each column.

Reduced motion

Digits jump straight to the new value with no roll.

When to use

A number or countdown that should feel like it's physically landing on its new value, not smoothly counting up to it

When not to use

A live-updating dashboard number where a smooth count-up reads calmer — use Animated Number instead