藍圖風流程區塊 Blueprint Process Section｜免費 React 元件

工程藍圖風格的 how-it-works 版面：方格紙底上每個步驟是帶編號的標註工位，滾動時虛線引線、尺寸標註與剖面記號以 SVG 描邊動畫依序繪出。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add blueprint-process-section

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

主標題title

方格紙格距gridSize

描繪時長（秒）drawDuration

0.65

標註間隔（秒）stagger

0.14

起始延遲（秒）delay

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>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

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

或在 components.json 設定 registries 後，改用 @webberui/blueprint-process-section 安裝。

使用

以 steps 陣列描述流程，元件會自動把每一步編號為工位 01…n，並在滾入視口時依序描繪導軌、引線、尺寸標註與剖面記號。

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

<BlueprintProcessSection
  eyebrow="How it works"
  title="出圖四步"
  description="像讀一張工程藍圖那樣，順著導軌逐站理解流程。"
  steps={[
    { title: "測繪與需求", description: "從語意化 token 量起。" },
    { title: "描圖與原型", description: "把草圖轉成可運行原型。" },
    { title: "組裝與整合", description: "源碼直接落地到專案。" },
    { title: "發佈與驗收", description: "內建 reduced-motion 支援。" },
  ]}
/>;

巢狀捲動容器

若元件放在自訂 overflow-y-auto 容器內，把該容器的 ref 傳給 root，視口偵測才會以容器為基準（而非整個視窗）：

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

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

標籤與圖示

每個步驟可覆寫尺寸標註牌上的 tag（預設 STEP 0n），並以 icon 帶入 lucide 圖示：

import { Ruler } from "lucide-react";

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

尺寸標註 `DimensionCallout`

同檔另外具名匯出 DimensionCallout：兩端箭頭的尺寸線＋延伸線＋數值標籤，進場時線段以 pathLength 依序描繪、數值淡入。可放在方格紙上任一元素旁——不填 length 時水平撐滿父層寬度（垂直撐滿高度），extensionSide 決定延伸線朝哪一側指向被量測的元素。

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

<div className="w-60">
  <DimensionCallout value="240 px" />
  <div className="h-20 rounded border">卡片元件</div>
</div>;

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

Props

`BlueprintProcessSection`

Prop	型別	預設值	說明
`steps`	`BlueprintStep[]`	—	步驟清單，依序自動編號為工位 01…n
`eyebrow`	`React.ReactNode`	—	標題區上緣的工程風眉標（等寬字）
`title`	`React.ReactNode`	—	區塊主標題
`description`	`React.ReactNode`	—	區塊說明
`gridSize`	`number`	`22`	方格紙底格線的格距（px）
`drawDuration`	`number`	`0.65`	單一標註描繪時長（秒）
`stagger`	`number`	`0.14`	同一工位內各標註依序描繪的間隔（秒）
`delay`	`number`	`0`	工位進入視口後的起始延遲（秒）
`once`	`boolean`	`true`	只在第一次進入視口時播放描繪動畫
`root`	`React.RefObject<HTMLElement \| null>`	—	巢狀捲動容器 ref，作為視口偵測根
`className`	`string`	—	外層 `section` 的自訂類別

`BlueprintStep`

欄位	型別	說明
`title`	`React.ReactNode`	步驟標題
`description`	`React.ReactNode`	步驟說明（可選）
`tag`	`string`	尺寸標註牌上的短標籤（可選，預設 `STEP 0n`）
`icon`	`React.ReactNode`	標題前的小圖示（可選）
`id`	`string`	自訂 key／識別（可選，預設用索引）

`DimensionCallout`

Prop	型別	預設值	說明
`value`	`React.ReactNode`	—	數值標籤，例如 `320 px`；以真實文字呈現
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	尺寸線方向：水平量寬度、垂直量高度
`length`	`number`	—	尺寸線長度（px）；不填則撐滿父層
`extension`	`number`	`10`	延伸線長度（px），即尺寸線到被量測元素的距離
`extensionSide`	`"start" \| "end"`	`"end"`	延伸線指向被量測元素的方向：`end` 為下／右，`start` 為上／左
`drawDuration`	`number`	`0.6`	線段描繪時長（秒）
`delay`	`number`	`0`	進入視口後的起始延遲（秒）
`once`	`boolean`	`true`	只在第一次進入視口時播放描繪動畫
`root`	`React.RefObject<HTMLElement \| null>`	—	巢狀捲動容器 ref，作為視口偵測根
`className`	`string`	—	外層容器的自訂類別

細節

每個工位以 ResizeObserver 量測所屬列的實際像素尺寸，標註層 <svg> 以 viewBox 做 1:1 座標對映，圓形與刻度縮放時皆不變形。
導軌、尺寸標註與剖面記號以 pathLength 由 0 描到 1 逐項浮現；虛線引線則以 scaleX 由節點向圖框展開，以保留虛線樣式（pathLength 會覆寫 strokeDasharray）。
導軌貫穿整列並在列間無縫相接，首列頂端與末列底端補上短蓋線，讀起來像一條連續的量測基準線。
方格紙底以 CSS 變數 --wb-grid 切換明暗格線色，格距由 gridSize 控制。
DimensionCallout 依延伸線 → 尺寸線 → 箭頭的順序以 pathLength 描繪，間隔取 drawDuration 的一部分，數值在線段描到一半後淡入；數值底板蓋住尺寸線中段，像製圖時把數字寫在斷開的尺寸線上。未指定 length 時以 ResizeObserver 量測父層，量到之前不繪線段。

可及性

步驟以 <ol> / <li> 語意排列、標題為 <h3>，閱讀順序即工位順序；標註層（導軌、引線、尺寸、剖面記號）皆為裝飾（aria-hidden），不干擾螢幕報讀。
節點編號、標籤與剖面代號都畫在裝飾 <svg> 內，語意由清單順序與標題承載，不重複報讀。
DimensionCallout 的線段為裝飾 <svg>（aria-hidden），數值是一般文字，螢幕報讀會讀到；需要更完整語意時可在 value 寫成「寬 240 px」。
使用者系統開啟「減少動態效果」時，所有標註（含 DimensionCallout）直接以最終狀態呈現、不播放描繪動畫，內容與版面完全不變。

Blueprint Process Section

把這個效果裝進你的專案

本頁目錄