Waypoint
Live agent plan checklist — status markers on a vertical rail where one continuous accent line grows like mercury to the active step, which pings softly. Done steps draw a check and dim, skipped go dashed, failed turn rust; when the plan is revised, inserted steps expand in and dropped ones collapse out. Rolling counter, progress bar, ordered-list semantics with aria-current and polite announcements.
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/waypointManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Plan" | Plan heading. |
| steps | WaypointStep[] | a static sample plan | The plan's current state (controlled). Drive it from your agent's events; change the array (insert/remove ids) to animate a re-plan. |
| collapsedDone | boolean | true | Hide details and sub-steps of completed steps. |
| accentColor | string | "#a78bfa" (ion violet) | Accent for the rail fill, active marker, and progress bar. |
| showHeader | boolean | true | Show the header (title, rolling counter, progress bar). |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "title"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.