磁力格線主視覺｜免費 React 元件

暗色科技格線主視覺：格點與連線受游標磁力牽引彎曲，點擊時從落點擴散出一圈漣漪波。

全幅 canvas 鋪著一張規則格網，格點以細線相連；游標在區塊內移動時，半徑內的格點被「吸向」游標，線段跟著彎折，靠近游標的點與線轉為霓虹強調色並帶光暈。點一下，從落點擴散出一圈漣漪，經過的格點被往外推 14px 後彈回、亮一下。每個格點都用彈簧積分回位，置中的文字後方有一層暗色徑向遮罩，格網再熱鬧標題也清楚可讀。

把這個效果裝進你的專案

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

npx webberui@latest add magnetic-lattice-hero

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

Playground

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

格點間距（px）gap

磁力半徑（px）radius

160

點擊漣漪ripple

底色surface

漣漪速度（px/s）rippleSpeed

600

進場時長（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">

編輯中的呼叫預設屬性

<MagneticLatticeHero/>

    </div>
  );
}

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

安裝

npx webberui@latest add https://webberui.com/r/magnetic-lattice-hero.json

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

使用

import { MagneticLatticeHero } from "@/components/ui/magnetic-lattice-hero";

<MagneticLatticeHero
  eyebrow="格點雲 2.0 開發者預覽"
  title="讓每一次部署都看得見"
  subtitle="服務、佇列與資料庫的連線狀態畫成一張即時拓樸圖。"
  primaryAction={{ label: "建立免費專案", href: "/signup" }}
  secondaryAction={{ label: "閱讀文件", href: "/docs" }}
  gap={36}
  radius={160}
  diagonal
/>

Props

Prop	型別	預設值	說明
`title`	`ReactNode`	—	主標題（必填）
`eyebrow`	`ReactNode`	—	標題上方的小標，以強調色膠囊顯示
`subtitle`	`ReactNode`	—	標題下方的副標
`primaryAction`	`MagneticLatticeHeroAction`	—	主要 CTA，背景為強調色並附箭頭圖示
`secondaryAction`	`MagneticLatticeHeroAction`	—	次要 CTA，外框樣式
`as`	`"h1" \| "h2"`	`"h1"`	標題層級；頁面已有 h1 時改用 `"h2"`
`minHeight`	`number`	`560`	區塊最小高度（px）
`gap`	`number`	`36`	格點間距（px）
`radius`	`number`	`160`	游標磁力半徑（px），範圍內的格點會被吸向游標
`strength`	`number`	`24`	最大吸引位移（px）；實際位移為 (1 - d/r)² × strength
`ripple`	`boolean`	`true`	點擊時是否從落點擴散漣漪
`diagonal`	`boolean`	`false`	加畫對角線，格網變成三角網
`surface`	`"dark" \| "auto"`	`"dark"`	`dark` 固定暗色；`auto` 跟隨網站深淺主題
`rippleSpeed`	`number`	—	漣漪擴張速度（px/s），寫入 `--wb-magnetic-lattice-hero-ripple-speed`；未提供時沿用 CSS 變數（預設 600）
`duration`	`number`	—	進場動畫時長（ms），寫入 `--wb-magnetic-lattice-hero-duration`；未提供時沿用 CSS 變數（預設 600）
`onRipple`	`(point: MagneticLatticeHeroRipplePoint) => void`	—	每次產生漣漪時呼叫
`className`	`string`	—	併入根 `section`

MagneticLatticeHeroAction

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

MagneticLatticeHeroRipplePoint

欄位	型別	預設值	說明
`x`	`number`	—	漣漪落點的水平座標（相對根 section，px）
`y`	`number`	—	漣漪落點的垂直座標（相對根 section，px）
`source`	`"pointer" \| "focus"`	—	由指標點擊或鍵盤聚焦 CTA 觸發

細節

每個格點都有靜止位置與目前位置，每幀以彈簧積分（stiffness 0.08、damping 0.82）追向目標；全部回位後迴圈自動停下，游標再移動才叫醒。
游標磁力只回應滑鼠與觸控筆：半徑內的點朝游標位移 (1 - d/r)² × strength，位移不會超過點到游標的距離；觸控拖曳不牽動格網，但輕點仍會產生漣漪。
漣漪環寬 40px，以 --wb-magnetic-lattice-hero-ripple-speed（預設 600px/s）擴張到落點最遠的角落；最多同時 4 個，超過時丟棄最舊的。
光暈（shadowBlur）只畫在發亮的格點上，整片格網用一次描邊畫完，降低每幀成本。canvas 的 DPR 上限為 2，ResizeObserver 重建格網，捲出視窗時以 IntersectionObserver 暫停，卸載時全部清理。
可覆寫的 CSS 變數：--wb-magnetic-lattice-hero-accent（dark 預設 #2dd4bf；auto 淺色 #0d9488、深色 #2dd4bf）、--wb-magnetic-lattice-hero-ripple-speed、--wb-magnetic-lattice-hero-duration。顏色在 effect 中讀取，surface="auto" 時會隨主題切換重讀。
進場依序：eyebrow、標題、副標、CTA 由下往上 16px 淡入，每段錯開 80ms，緩動 cubic-bezier(0.22,1,0.36,1)。

可及性

根元素是 <section aria-labelledby>，指向標題的 useId。
canvas 與徑向遮罩都是 aria-hidden，屬純裝飾；文字後方的遮罩確保標題與背景的對比。
CTA 是 <a> 或 type="button" 的按鈕，有 focus-visible 外框；鍵盤聚焦 CTA 時會在按鈕位置觸發一次裝飾性漣漪。
系統開啟「減少動態效果」時只畫靜態格網，不跟隨游標、不產生漣漪；進場改為 150ms 淡入且不錯開。

磁力格線主視覺

把這個效果裝進你的專案

本頁目錄