# Drawbench — Animated Section Block for React

> 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.

- Page: https://crucibleui.com/components/sections/drawbench
- Category: [sections](https://crucibleui.com/components/sections)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: motion
- npm dependencies: motion

## Install

```bash
npx shadcn@latest add @crucible/drawbench
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/drawbench`.

## Props (`DrawbenchProps`)

| 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: `Omit<React.ComponentPropsWithoutRef<"section">, "children" | "title">`.

## Usage example

```tsx
"use client";

import * as React from "react";

import { Drawbench } from "@/components/crucible/drawbench";

export default function DrawbenchDemo() {
  const scrollerRef = React.useRef<HTMLDivElement>(null);

  return (
    <div className="relative isolate h-[560px] w-full overflow-hidden rounded-xl bg-neutral-950">
      <div ref={scrollerRef} className="absolute inset-0 overflow-x-hidden overflow-y-auto">
        <Drawbench scroller={scrollerRef} />
        <div className="flex h-40 items-center justify-center text-sm text-neutral-600">
          That&apos;s the whole flow.
        </div>
      </div>
      <p className="pointer-events-none absolute inset-x-0 bottom-3 z-10 flex justify-center">
        <span className="rounded-full border border-white/10 bg-neutral-950/80 px-3 py-1 text-[11px] font-medium text-neutral-400 backdrop-blur">
          Scroll down — or pick a step.
        </span>
      </p>
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through.