Drawbench
A pinned how-it-works section: scroll advances a step list while a beam draws down its rail and each step's illustration assembles on a blueprint stage — dashed wireframe boxes resolving into a filled UI vignette (form, chart, toggles, team). Steps double as a keyboard tablist that jumps the scroll.
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/drawbenchManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title | React.ReactNode | Section heading (h2) pinned above the steps. | |
| steps | DrawbenchStep[] | a four-step setup flow | The process, 3–5 steps reads best. |
| pinLength | number | 0.7 × steps.length | Pinned scroll distance, in multiples of the scroller's viewport height. Larger = more scrolling per step. |
| accentColor | string | "#8b9dff" | Single accent hue for the beam, step markers and vignette highlights. |
| scroller | React.RefObject<HTMLElement | null> | the window | Scroll container to pin inside instead of the window. Pass a ref to an overflow-y-auto ancestor (e.g. a boxed preview). |
| ref | React.Ref<DrawbenchHandle> | Imperative handle — goTo(index). | |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"section">, "children" | "title"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.