Animated numbers
Six ways for a value to change, always read out as the exact number.
AnimatedNumbernumberStylerenderValue
AnimatedNumber takes a numeric value, an optional format function or Intl.NumberFormat, and a variant: count (the default) counts the value itself, pop swaps the number with a small bounce, slide moves changed digits in the direction of change, roll turns each digit like an odometer, flow uses NumberFlow's spinning digits (it needs an Intl.NumberFormat, which cards supply), and scramble cycles figures before they land. Symbols such as a currency sign hold still, and every variant keeps moving while a pointer scrubs a chart. The accessible reading is always the exact value, motion="none" turns movement off, and reduced-motion preferences are respected automatically. Cards take the same choice as numberStyle. Legend values stay static unless you render one through renderValue.
TypeScript
import { AnimatedNumber, Legend } from '@lilt-ui/charts';
const currency = new Intl.NumberFormat('en-US', {
style: 'currency', currency: 'USD', maximumFractionDigits: 0,
});
<AnimatedNumber value={55610} format={currency} />
<Legend model={model} renderValue={(entry) => entry.value === null
? 'No data'
: <AnimatedNumber value={entry.value} format={currency} variant="roll" />
} />