Plotter
A self-drawing chart — line, area, or bar — that performs its data on scroll-in: axes and gridlines fade in first like ruled paper, lines trace left to right behind a bright pen tip with the gradient fill sweeping beneath, bars spring from the baseline and settle. Dataset changes morph the marks, and a tooltipTour mode walks an active tooltip across the points once after the draw.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/plotterManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| labels | string[] | X-axis category labels — one per data point. | |
| series | PlotterSeries[] | The series to plot. Multi-series draws one at a time with overlapping tails. | |
| type | PlotterType | "line" | Chart form. |
| drawDuration | number | 1.8 | Seconds a single series takes to draw. |
| drawEasing | PlotterEasing | "ease-in-out" | Easing for the pen stroke (named or a custom 0–1 function). |
| stagger | number | 1.1 | Seconds between series starts — smaller overlaps the tails more. |
| trigger | PlotterTrigger | "view" | What starts the draw: scroll into view, mount, or the play prop. |
| inViewThreshold | number | 0.35 | IntersectionObserver threshold for trigger="view". |
| play | boolean | false | Starts the draw when trigger="manual". |
| morph | boolean | true | Morph existing marks to new values on data change (vs. snapping). |
| morphSpring | { stiffness?: number; damping?: number } | { stiffness: 120, damping: 20 } | Spring driving the morph. |
| gridLead | number | 0.6 | Seconds the axes + gridlines fade in before any ink lands. |
| tooltipTour | boolean | false | Walk an active tooltip across the data once after the draw. |
| tourDwell | number | 0.6 | Seconds the tour dwells on each stop (tour visits at most 12 stops). |
| colors | string[] | Fallback palette for series without an explicit color. | |
| format | (value: number) => string | compact en-US | Number formatting for axis ticks and tooltip values. |
| yTicks | number | 4 | Approximate horizontal gridline count. |
| paused | boolean | false | Freezes all animation in place. |
Also accepts all props of Omit<React.HTMLAttributes<HTMLDivElement>, "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.