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.
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} />Try it live
← Back to the playground to see AnimatedNumber rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.