# Motion Line Draw

MRR KPI detail page whose area draws in on view and morphs between the last 12 months and the previous 12 months.

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

## Install

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

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** chart-entrance, in-view-trigger, line-draw, area-reveal, data-morph, multi-series, series-toggle, change-summary, data-table-fallback, replay, offscreen-pause, reduced-motion-fallback
- **Intents:** compare-over-time, track-status, explore-detail
- **Suits domains:** saas, analytics, finance, ecommerce, marketing, operations
- **Interaction:** filter, toggle, read-only
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** MRR KPI detail page whose area draws in on view and morphs between the last 12 months and the previous 12 months, Revenue by plan with three series that morph when the reader switches from revenue to account counts, Churn or conversion trend on a report page drawn once when it scrolls into view
- **Avoid when:** Streaming data that arrives every second (use motion-chart-live-stream), A single-measure bar or line chart that only needs a one-off entrance with per-point keyboard inspection (use motion-chart-enter-series), Dense time series with hundreds of points or zoom and brush interaction (use a canvas timeseries chart)
- **Preserve when adapting:** pen-draw-on-first-view, morph-same-point-count, text-summary-and-data-table, series-rendered-in-place-without-motion
- **Replace when adapting:** labels, format, y-domain, series-colors, height
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** chart, button, 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