Typography & motion
AnimatedNumber
Drives any displayed number with a requestAnimationFrame tween. Format-agnostic — pass `formatValue` to display currency, percentages, plain ints, anything.
AnimatedNumber is the count-up primitive. It drives the displayed value through an easeOutExpo tween via requestAnimationFrame — feels like a balance ticking up rather than a hard re-render. Tabular numerals are baked in so the layout doesn't jitter.
Format-agnostic: pass formatValue and you can render currency ($1,234.56), percentages, anything. The component itself never opinions on locale or symbols.
Live preview
$1,234.56
Example
tsx
import { AnimatedNumber } from '@kidcash/ui';
const currency = (n: number) =>
n.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
<AnimatedNumber value={1234.56} formatValue={currency} />Want all 27 in one place?
The home playground shows every component side-by-side. Or install @kidcash/ui and use AnimatedNumber in your own app.