# Motion Number Morph

Pricing card whose price morphs between monthly and yearly billing and between currencies.

- id: `motion-number-morph`
- Page: https://agentic-ui-kit.com/components/motion-number-morph
- Live preview: https://agentic-ui-kit.com/live/component/motion-number-morph

## Install

```bash
agentic-ui add motion-number-morph
npx shadcn@4.17.0 add @agentic-ui/motion-number-morph
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** formatted-value-transition, per-intl-part-animation, digits-slide-variant, digits-fade-variant, currency-swap-variant, score-tick-variant, price-period-toggle, currency-switch, unit-switch, reserved-width, tabular-numerals, single-polite-announcement, reduced-motion-fallback
- **Intents:** compare-over-time, configure, monitor-live
- **Suits domains:** billing, saas, ecommerce, finance, ai-workspace, analytics
- **Interaction:** toggle, select, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Pricing card whose price morphs between monthly and yearly billing and between currencies, Plan limits that switch between gigabytes and terabytes, Eval dashboard where accuracy, cost per 1K runs and p95 latency tick to the next run
- **Avoid when:** The number keeps counting on its own as a live KPI with a delta (use motion-counter-ticker-odometer), Only a background flash is needed to signal that a cell changed (use motion-value-change-flash), Long prose or non-numeric text switches (use a text transition)
- **Preserve when adapting:** one-polite-announcement-of-the-final-value, aria-hidden-animated-parts, tabular-numerals-and-reserved-width, instant-value-without-motion, transform-and-opacity-only
- **Replace when adapting:** values-and-formats, locale, label, variant, duration
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, radio-group, select
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion