Blueprint Process Section

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

載入預覽⋯

Playground

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

主標題title

方格紙格距gridSize

描繪時長（秒）drawDuration

0.65

標註間隔（秒）stagger

0.14

起始延遲（秒）delay

<BlueprintProcessSection />

安裝

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

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

安裝依賴後，從 registry JSON（/r/blueprint-process-section.json 的 files[0].content）複製 blueprint-process-section.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

圖示可用 lucide-react（示範用），並非元件本體必要依賴。

使用

以 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: "…" },
  ]}
/>;

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／識別（可選，預設用索引）

細節

每個工位以 ResizeObserver 量測所屬列的實際像素尺寸，標註層 <svg> 以 viewBox 做 1:1 座標對映，圓形與刻度縮放時皆不變形。
導軌、尺寸標註與剖面記號以 pathLength 由 0 描到 1 逐項浮現；虛線引線則以 scaleX 由節點向圖框展開，以保留虛線樣式（pathLength 會覆寫 strokeDasharray）。
導軌貫穿整列並在列間無縫相接，首列頂端與末列底端補上短蓋線，讀起來像一條連續的量測基準線。
方格紙底以 CSS 變數 --wb-grid 切換明暗格線色，格距由 gridSize 控制。

可及性

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

Blueprint Process Section

On this page