# Motion Chart Live Stream

DevOps status page with API gateway requests per second sliding over the last 30 seconds.

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

## Install

```bash
agentic-ui add motion-chart-live-stream
npx shadcn@4.17.0 add @agentic-ui/motion-chart-live-stream
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** streaming-timeseries, compositor-sliding-window, point-ease-in, line-and-bars-variants, pause-control, offscreen-pause, throttled-live-region, reduced-motion-fallback, informative-state-preservation
- **Intents:** monitor-live, compare-over-time, track-status
- **Suits domains:** devtools, operations, analytics, finance, saas, ai-workspace
- **Interaction:** pause-resume, read-only
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** DevOps status page with API gateway requests per second sliding over the last 30 seconds, Error rate bars next to the request rate chart, spiking during an incident, Token throughput or queue depth of an AI inference service updated every second
- **Avoid when:** A single "this is live" signal is enough (use motion-live-pulse next to the value), Data arrives less than once every few seconds or in irregular batches (render a static chart and refresh it), Historical ranges that users zoom and inspect point by point (use an interactive timeseries chart with a tooltip)
- **Preserve when adapting:** compositor-slide-one-slot-per-sample, pause-control, throttled-polite-announcement, one-refresh-per-second-without-motion
- **Replace when adapting:** labels, format, y-domain, window-size, interval
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** chart, button, badge
- **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