Animated Number
Animates numeric values on change. Spring interpolates the number; digitReveal scrambles into the final string.
Spring
Default motion — interpolates the numeric value.
$420,830
Digit reveal
Progressive scramble that settles into the final value. Respects reduced motion.
digitReveal
$482,900
Inline with sparklines
Cash
$34k
Investments
$231k
Property
$177k
Loans
$21k
Developer
import { AnimatedNumber } from "@financial-tracking/design-system"API reference
| Prop | Type | Default |
|---|---|---|
valueRequired. | number | — |
formatStable ref recommended for spring motion. | (n: number) => string | — |
motion | "spring" | "digitReveal" | "spring" |
revealDurationMsdigitReveal only. | number | 400 |
minCharsdigitReveal only — min width in ch to limit layout shift. | number | — |