# Motion Bar Race

Marketing channel share of signups quarter by quarter.

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

## Install

```bash
agentic-ui add motion-bar-race
npx shadcn@4.17.0 add @agentic-ui/motion-bar-race
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** ranking-over-time, flip-reorder, value-counting, play-pause, step-through, scrubber, loop-playback, frame-global-or-fixed-scale, top-n, frame-announcement, semantic-colour-token, reduced-motion-fallback
- **Intents:** compare-over-time, show-composition
- **Suits domains:** analytics, saas, ecommerce, finance, social, operations
- **Interaction:** play-pause, step-through, scrubber, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Marketing channel share of signups quarter by quarter, Top products by revenue month by month in a store report, Leaderboard of regions or teams over a season in a review deck
- **Avoid when:** Exact comparison of many values at once (use a static bar chart or table), Series where rank rarely changes, so the playback shows nothing new, Dense operational dashboards where one expressive piece per viewport is already used
- **Preserve when adapting:** transform-and-opacity-only, rank-order-matches-reading-order, final-value-for-assistive-technology, step-through-without-motion, work-only-while-playing-in-view
- **Replace when adapting:** series, frames, format, labels, variant, scale
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** button, slider, chart
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion