Back

NumberFlow

Click to randomize the number

Key Props

valuenumber — the value to animate
formatIntl.NumberFormatOptions
localeslocale string(s) for formatting
prefix / suffixstatic text around the number
transformTiming{ duration, easing } for layout
spinTiming{ duration, easing } for digit spin
opacityTiming{ duration, easing } for fade
trend1 | -1 | 0 | function — spin direction
plugins[continuous] for fluid scrolling
willChangeboolean — optimize for animation
isolateboolean — prevent layout shift
digitsper-digit max constraints

Powered by NumberFlow by @mbarvian

Component Code (Next.js)

Use Copy Code to load the current local source for the NumberFlow demos.

Claude / Codex Prompt

Build a NumberFlow showcase page in Next.js using @number-flow/react (by Maxwell Barvian) with 8 interactive variants in tabs:

1. Basic — click to randomize a number with smooth digit transitions
2. Currency — format as USD/EUR/GBP/JPY with currency switcher pills
3. Percent — slider-controlled percentage with minimumFractionDigits
4. Compact — compact notation (1.2M, 56.8K) with preset value buttons
5. Countdown — live HH:MM:SS countdown using NumberFlowGroup to sync three NumberFlow instances, with trend={-1} and digits constraints
6. Input — stepper with +/- buttons, animated number in the center
7. Continuous — continuous plugin for fluid intermediate number scrolling, controlled by a range slider
8. Trend — custom trend function that spins digits up/down based on value direction, with increase/decrease buttons

Requirements:
- Install: npm install @number-flow/react
- Use tabular-nums for countdown alignment
- All demos responsive (text-3xl on mobile, text-5xl on desktop)
- Each variant in its own tab pill
- Wrap in ComponentShell with credit link
- Credit: https://number-flow.barvian.me by @mbarvian