Animated Number

Smooth number transition animations.

On This Page

Smooth number transition animations.

Smoothly animates a numeric value whenever it changes, using Framer Motion springs.

Live CanvasInteractive

450

Controls(1)

value

number

Target number value to animate to

Generated JSX

import { AnimatedNumber } from "nexoreui"

<AnimatedNumber />

100

component.tsx

$12,450.75

component.tsx

87.4%

component.tsx

36.6°C

component.tsx

999,999

component.tsx

Property	Type	Default	Description
value	number	-	The numeric target value. Changing this triggers transition.
duration	number	-	Optional duration config (translated to spring dynamics).
formatFn	(value: number) => string	Math.round(v).toLocaleString()	Formatting function for rendering the numeric value to string.

On This Page