A journey line that draws itself through your milestones as you scroll, with a glowing comet head and a blurred trail. Each node lights up and drops its label card the moment the line reaches it.
npx shadcn@latest add https://hyperblur.dev/r/motion-path-draw.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/motion-path-draw.tsx.
import { MotionPathDraw } from "@/components/hyperblur/motion-path-draw"
<MotionPathDraw milestones={[{ date: "Q1", label: "Idea", x: 0.05, y: 0.7 }, { date: "Q2", label: "Beta", x: 0.5, y: 0.3 }, { date: "Q4", label: "Launch", x: 0.95, y: 0.5 }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Our first year" | Small label above the headline. |
| title | string | "From a weekend repo to a 1.0" | Headline at the top of the stage. |
| milestones | { date: string; label: string; x: number; y: number }[] | 5 milestones | Points the line passes through, with x and y as fractions of the drawing area. |
| accent | string | "#2f7bff" | Accent color for highlights, rails and glows. |
| progress | number | undefined | Controlled progress from 0 to 1. When set, scroll tracking and autoplay are ignored. |
| autoPlay | boolean | false | Loops the progress by itself, forward, hold, then back. Use it for previews where nobody scrolls. |
| duration | number | 6 | Seconds for one forward pass of the autoplay loop. |
| length | number | 3 | Scroll distance in stage heights while the section is pinned. Ignored with progress or autoPlay. |
| height | string | "100vh" | Height of the pinned stage. Use a pixel value when the section lives inside a scrolling container. |