電路脈衝背景
電路板線路圖上流動的光脈衝，科技感裝飾背景。
以確定性演算法生成電路板風格的 SVG 走線（水平垂直折線與焊點節點），數道光脈衝沿路徑以 stroke-dashoffset 動畫流動並帶柔和光暈，適合作為技術產品 Hero、儀表板或功能區塊的裝飾背景。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
6
14
1
<CircuitLinesBackground />
安裝
npx shadcn@latest add https://webberui.com/r/circuit-lines-background.json或在 components.json 設定 registries 後，改用 @webberui/circuit-lines-background 安裝。
安裝依賴後，從 registry JSON（/r/circuit-lines-background.json 的 files[0].content）複製 circuit-lines-background.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { CircuitLinesBackground } from "@/components/ui/circuit-lines-background";
<CircuitLinesBackground
color="#22d3ee"
pulseCount={7}
className="rounded-2xl bg-neutral-950"
>
<div className="px-8 py-16 text-center text-neutral-50">
<h2 className="text-3xl font-semibold">即時資料管線</h2>
</div>
</CircuitLinesBackground>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
color | string | "#22d3ee" | 光脈衝與節點亮點的顏色 |
lineColor | string | "rgba(148, 163, 184, 0.3)" | 底層電路走線與節點的顏色，建議低對比半透明色 |
pulseCount | number | 6 | 同時在線路上流動的光脈衝數量 |
density | number | 14 | 電路走線的條數，數字越大電路越密 |
speed | number | 1 | 脈衝流動速度倍率，越大越快 |
children | React.ReactNode | — | 疊在電路背景之上的內容 |
className | string | — | 合併到外層容器的自訂 class |
可及性
- 背景 SVG 標記
aria-hidden="true"並套用pointer-events-none，不干擾輔助科技朗讀與滑鼠互動 - 使用者系統開啟「減少動態效果」時，脈衝停止流動，改以固定位置的靜態光段保留電路質感
- 走線與脈衝參數皆由索引種子確定性生成，SSR 與客戶端輸出一致，不會造成 hydration 錯誤
- 純裝飾背景元件，實際內容經由
children渲染於背景之上，語意結構不受影響