Particle Field
互動粒子場：粒子自由漂移並在鄰近時連線，游標可排斥或吸引，以 canvas 2D 繪製。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
60
2
0.5
130
<ParticleField />
安裝
npx shadcn@latest add https://webberui.com/r/particle-field.json或在 components.json 設定 registries 後，改用 @webberui/particle-field 安裝。
安裝依賴後，打開 particle-field.json，把 files[0].content 的內容複製到你的 components/ui/particle-field.tsx：
npm install motion clsx tailwind-merge使用
粒子場是裝飾性背景，放進 relative 容器並自行決定高度；前景內容疊在其上即可：
import { ParticleField } from "@/components/ui/particle-field";
<div className="relative h-[320px] overflow-hidden rounded-xl">
<ParticleField />
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
<h2 className="text-2xl font-semibold">Hero 標題</h2>
</div>
</div>調整密度、顏色與互動模式：
<ParticleField
quantity={90}
color="#22d3ee"
mode="attract"
linkDistance={150}
/>只要純漂移、不要連線：
<ParticleField links={false} interactive={false} />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
quantity | number | 60 | 粒子數量；越多連線越密，效能成本以 O(n²) 增長 |
color | string | 隨主題的 neutral 色 | 粒子與連線顏色；未指定時淺色用 neutral-400、深色用 neutral-600 |
particleSize | number | 2 | 靜止時每顆粒子的半徑（px） |
speed | number | 0.5 | 漂移速度倍率；每幀位移約落在 ±speed |
links | boolean | true | 是否在鄰近粒子間繪製連線 |
linkDistance | number | 130 | 連線的最大距離（px），越近線越實 |
influence | number | 120 | 游標影響半徑（px），此範圍內的粒子才被作用 |
mode | "repel" | "attract" | "repel" | 游標互動模式：排斥或吸引粒子 |
interactive | boolean | true | 是否啟用游標互動（僅滑鼠指標生效，觸控不作用） |
className | string | — | 附加到最外層容器的 class |
細節
- canvas 2D 單層繪製。 所有粒子與連線畫在同一張
<canvas>上，每幀clearRect後重繪，不產生大量 DOM 節點，密集連線也維持穩定幀率 - 粒子以隨機初速自由漂移，碰到容器邊界即反彈，維持整體密度均勻；初始座標只在
useEffect（僅客戶端）產生，不會造成 SSR 水合不一致 - 游標互動採「繪製位移」而非持久速度：
influence範圍內的粒子依距離計算位移量，repel推離、attract拉近（並夾住位移避免穿越游標）；游標離開後strength平滑衰減回 0，粒子自然回到漂移軌跡 - 連線先於粒子繪製並依距離淡出（
globalAlpha），距離越近越實；連線用「本幀繪製位置」計算，因此排斥／吸引時網格會跟著扭曲 - 以
devicePixelRatio（上限 2）設定實際畫布尺寸再用setTransform縮放，Retina 螢幕維持銳利；ResizeObserver監看容器變化，尺寸改變時把越界粒子夾回範圍 - 未指定
color時讀取 canvas 的currentColor（由text-neutral-*class 解析），並以MutationObserver監看<html>的 class 變化，深淺主題切換時即時重讀顏色
可及性
- 容器帶
aria-hidden，作為純裝飾背景不干擾輔助科技朗讀 - 使用者系統開啟「減少動態效果」時，rAF 迴圈與游標互動全部停用，僅渲染一張靜態粒子場，DOM 結構不變
- 前景內容請自行維持足夠對比；粒子層預設為 neutral 低對比色，不會影響其上文字的可讀性