# Motion Marquee

Service status ticker in the header of an operations dashboard.

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

## Install

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

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** continuous-marquee, pause-control, hover-focus-hold, offscreen-pause, bidirectional, personality-timing, reduced-motion-fallback, informative-state-preservation
- **Intents:** monitor-live, track-status, navigate
- **Suits domains:** saas, operations, devtools, finance, ecommerce, analytics
- **Interaction:** hover, click, keyboard-navigation
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Service status ticker in the header of an operations dashboard, Quote or indicator tape in a financial dashboard, Rotating list of capabilities or integrations on a product landing page
- **Avoid when:** Critical alerts the user must read in full and all at once (use a static list or a banner), Content that changes several times per second; the marquee is not a real-time feed, Forms or task flows where peripheral motion distracts
- **Preserve when adapting:** pause-button-and-hover-focus-hold, inert-aria-hidden-clones, offscreen-pause, static-wrapped-fallback
- **Replace when adapting:** item-content, domain-copy, speed-and-direction
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 8.5/10, accessibility 9/10, code 8.5/10
- **Uses primitives:** card, button, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion, lib-motion-personalities