# Motion Value Change Flash

Trading order book where each size cell flashes when its level changes, at most twice a second.

- id: `motion-value-change-flash`
- Page: https://agentic-ui-kit.com/components/motion-value-change-flash
- Live preview: https://agentic-ui-kit.com/live/component/motion-value-change-flash

## Install

```bash
agentic-ui add motion-value-change-flash
npx shadcn@4.17.0 add @agentic-ui/motion-value-change-flash
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** value-change-highlight, direction-arrow-and-colour, stream-rate-limit, cell-badge-inline-variants, positive-direction-tone, signed-change-text, reduced-motion-fallback, informative-state-preservation
- **Intents:** monitor-live, track-status, compare-over-time
- **Suits domains:** finance, analytics, operations, ecommerce, devtools, saas
- **Interaction:** read-only
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Trading order book where each size cell flashes when its level changes, at most twice a second, Watchlist table with last price, 24h change badge and volume that highlight on every quote, Operations badge for p95 latency where a drop is shown as good news with positive set to down
- **Avoid when:** Values that change only on page load (a static delta badge is enough), Screens that must announce every change to assistive technology (pair it with a single summary live region), Dense tables updating dozens of cells many times per second where even rate-limited flashes become noise (show the arrow and colour only with motion none)
- **Preserve when adapting:** arrow-plus-text-direction, no-live-region-per-cell, per-value-rate-limit, opacity-only-flash
- **Replace when adapting:** labels, icons, format, positive
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, table
- **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