Blueprint Process Section

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<BlueprintProcessSection/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/blueprint-process-section.en.json

Usage

Describe the process as a steps array; the component numbers each step as station 01…n automatically and draws the rail, leader lines, dimension callouts, and section marks in order as it scrolls into the viewport.

import { BlueprintProcessSection } from "@/components/ui/blueprint-process-section";

<BlueprintProcessSection
  eyebrow="How it works"
  title="Four steps to the drawing"
  description="Follow the rail station by station, the way you would read an engineering blueprint."
  steps={[
    { title: "Survey and requirements", description: "Start measuring from semantic tokens." },
    { title: "Tracing and prototype", description: "Turn the sketch into a running prototype." },
    { title: "Assembly and integration", description: "The source lands straight in your project." },
    { title: "Ship and sign-off", description: "reduced-motion support is built in." },
  ]}
/>;

Nested scroll container

If the component sits inside a custom overflow-y-auto container, pass that container's ref to root so viewport detection uses the container (rather than the whole window) as its basis:

const scrollerRef = React.useRef<HTMLDivElement>(null);

<div ref={scrollerRef} className="h-[300px] overflow-y-auto">
  <BlueprintProcessSection root={scrollerRef} steps={steps} />
</div>;

Labels and icons

Each step can override the tag on its dimension callout plate (STEP 0n by default) and bring in a lucide icon through icon:

import { Ruler } from "lucide-react";

<BlueprintProcessSection
  steps={[
    { title: "Survey", tag: "A-01", icon: <Ruler />, description: "…" },
  ]}
/>;

Dimension callout DimensionCallout

The same file also exports DimensionCallout by name: a dimension line with arrowheads at both ends, extension lines, and a value label. On entry the lines draw in order via pathLength and the value fades in. Place it beside any element on the graph paper — without length it fills the parent's width horizontally (or height vertically), and extensionSide sets which side the extension lines point toward the measured element.

import { DimensionCallout } from "@/components/ui/blueprint-process-section";

<div className="w-60">
  <DimensionCallout value="240 px" />
  <div className="h-20 rounded border">Card component</div>
</div>;

<DimensionCallout value="80" orientation="vertical" extensionSide="start" length={80} />;

Props

BlueprintProcessSection

BlueprintStep

DimensionCallout

How it works

• Each station measures the real pixel dimensions of its own row with a ResizeObserver, and the annotation layer <svg> maps coordinates 1:1 through its viewBox, so circles and tick marks never distort when scaled.
• The rail, dimension callouts, and section marks appear one by one as pathLength draws from 0 to 1; the dashed leader lines instead expand from the node toward the drawing frame with scaleX, which preserves the dash pattern (pathLength would override strokeDasharray).
• The rail runs through the full height of a row and joins seamlessly between rows, with short cap lines added at the top of the first row and the bottom of the last, so it reads as one continuous measurement datum line.
• The graph-paper ground switches its light/dark grid line color through the CSS variable --wb-grid, and the grid spacing is controlled by gridSize.
• DimensionCallout draws extension lines → dimension line → arrowheads in order with pathLength, spaced by a fraction of drawDuration, and the value fades in once the lines are half drawn; the value plate covers the middle of the dimension line, like writing the number into a broken dimension line on a drawing. Without length it measures its parent with a ResizeObserver and draws no lines until measured.

Accessibility

• The steps are laid out semantically as <ol> / <li> with <h3> titles, so the reading order is the station order; the annotation layer (rail, leader lines, dimensions, section marks) is decorative (aria-hidden) and does not interfere with screen readers.
• Node numbers, labels, and section codes are all drawn inside the decorative <svg>; the semantics are carried by the list order and the headings, so nothing is announced twice.
• The lines of DimensionCallout are a decorative <svg> (aria-hidden); the value is plain text that screen readers announce — write something like "Width 240 px" in value when you need fuller semantics.
• When the user has "reduce motion" enabled at the system level, all annotations (including DimensionCallout) are shown directly in their final state with no drawing animation, and the content and layout are completely unchanged.