粒子場主視覺｜免費 React 元件

互動粒子場背景上的主視覺：粒子緩慢漂移並在鄰近時連線，游標靠近會推開粒子，標題清楚浮在上方。

全幅 canvas 粒子場鋪在背景：粒子以 seed 決定初始位置與方向，每幀以 0.15–0.4px 緩慢漂移、碰邊反彈，距離小於 linkDistance 的兩顆粒子以強調色連線，越遠越淡；游標進入 120px 內會把粒子推開，離開後自然回到漂移。標題下方墊一層由背景色漸變到透明的徑向遮罩，粒子再密也不會干擾文字對比；需要時可在右側放一張玻璃邊框的攝影卡。

把這個效果裝進你的專案

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

npx webberui@latest add particle-field-hero

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

Playground

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

粒子數量上限count

連線距離（px）linkDistance

110

游標斥力repel

粒子速度倍率speed

進場時長（ms）duration

600

import * as React from "react";

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

編輯中的呼叫預設屬性

<ParticleFieldHero/>

    </div>
  );
}

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

安裝

npx webberui@latest add https://webberui.com/r/particle-field-hero.json

或在 components.json 設定 registries 後，改用 @webberui/particle-field-hero 安裝。

使用

import { ParticleFieldHero } from "@/components/ui/particle-field-hero";

<ParticleFieldHero
  eyebrow="潮汐感測平台 · 公開測試中"
  title="把每一個感測點連成一張網"
  subtitle="千台裝置的即時讀數在同一個畫面流動。"
  primaryAction={{ label: "申請試用", href: "/signup" }}
  secondaryAction={{ label: "看架構說明", href: "/docs" }}
  count={100}
  linkDistance={120}
  showMedia
  images={[{ src: "/hero/sensor.jpg", alt: "海岸邊的感測站" }]}
/>

Props

Prop	型別	預設值	說明
`title`	`ReactNode`	—	主標題（必填）
`eyebrow`	`ReactNode`	—	標題上方的小標，以強調色顯示
`subtitle`	`ReactNode`	—	標題下方的副標
`primaryAction`	`ParticleFieldHeroAction`	—	主要 CTA，背景為強調色並附箭頭圖示
`secondaryAction`	`ParticleFieldHeroAction`	—	次要 CTA，外框樣式
`as`	`"h1" \| "h2"`	`"h1"`	標題層級；頁面已有 h1 時改用 `"h2"`
`minHeight`	`number`	`560`	區塊最小高度（px）
`align`	`"center" \| "left"`	`"center"`	文字對齊；開啟 `showMedia` 時一律靠左
`count`	`number`	`80`	粒子數量上限；實際數量依面積降到每 12,000px² 最多一顆
`linkDistance`	`number`	`110`	兩粒子距離小於此值（px）時畫連線，透明度隨距離衰減；設 0 不畫連線
`repel`	`boolean`	`true`	游標 120px 內推開粒子
`speed`	`number`	—	粒子速度倍率，寫入 `--wb-particle-field-hero-speed`；未提供時沿用 CSS 變數（預設 1）
`duration`	`number`	—	文字進場時長（ms），寫入 `--wb-particle-field-hero-duration`；未提供時沿用 CSS 變數（預設 600）
`seed`	`number`	`1`	初始位置與方向的亂數種子；同一個 seed 構圖相同
`showMedia`	`boolean`	`false`	在右側顯示一張玻璃邊框的攝影卡
`images`	`ParticleFieldHeroImage[]`	—	攝影卡圖片，只取第一張；沒有 `src` 時畫漸層 + SVG 幾何佔位
`className`	`string`	—	併入根 `section`

ParticleFieldHeroAction

欄位	型別	預設值	說明
`label`	`string`	—	按鈕文字
`href`	`string`	—	提供時渲染為 `<a>`，否則為 `<button type="button">`
`onClick`	`(event: React.MouseEvent<HTMLElement>) => void`	—	點擊回呼

ParticleFieldHeroImage

欄位	型別	預設值	說明
`src`	`string`	—	你自己的圖片網址；省略時顯示佔位圖
`alt`	`string`	—	替代文字（必填）

細節

粒子以 mulberry32 依 seed 產生，位置與方向每次一致；改 speed 不會重新播種，粒子不會跳位。
斥力只是繪製時的位移，不寫回粒子本身，所以游標離開後粒子直接接著原本的路徑漂移；游標座標與斥力強度每幀以 0.12 插值，進出都很平滑。只回應滑鼠與觸控筆，觸控拖曳不觸發。
顏色在 effect 中以 getComputedStyle 讀取：粒子是 canvas 的 currentColor（淺色 neutral-400、深色 neutral-500），連線是強調色 25% 透明；切換深淺主題時會重讀。
canvas 解析度上限 DPR 2，以 ResizeObserver 跟隨尺寸；捲出視窗（IntersectionObserver）或切到背景分頁（visibilitychange）時暫停 rAF，卸載時全部清理。
可覆寫的 CSS 變數：--wb-particle-field-hero-accent（預設 #0d9488，深色模式 #2dd4bf）、--wb-particle-field-hero-speed、--wb-particle-field-hero-duration。
進場：canvas 800ms 淡入；eyebrow、標題、副標、CTA 由下往上 16px 淡入，每段錯開 80ms，緩動 cubic-bezier(0.22,1,0.36,1)。

可及性

根元素是 <section aria-labelledby>，指向標題的 useId。
canvas 與徑向遮罩都是 aria-hidden，屬純裝飾；佔位攝影卡以 role="img" 搭配 alt 文字。
CTA 是 <a> 或 type="button" 的按鈕，有 focus-visible 外框。
系統開啟「減少動態效果」時只畫一幀靜態粒子與連線、不跑 rAF、不做斥力；文字進場改為 150ms 淡入且不錯開。

粒子場主視覺

把這個效果裝進你的專案

本頁目錄