Electric Border
抖動電流能量邊框並發光，用 SVG 噪點位移扭曲描邊，能量從輪廓向外滲出。
用 feTurbulence 產生噪點、逐幀捲動再由 feDisplacementMap 扭曲描邊，讓邊框像高壓電流般不斷抖動，並以雙層光暈向外發光。把任何內容包進去即可。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add electric-borderElectric Border 是用 React 與 SVG 濾鏡做的電流邊框（發光邊框、glowing border）元件，抖動動畫由 SVG 內建的 animate 驅動，不使用 JavaScript 逐幀迴圈；Motion 只用來偵測「減少動態效果」設定。
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<ElectricBorder/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
適用情境
- 定價頁中凸顯推薦方案的卡片
- 遊戲、電競或活動頁的主視覺按鈕與報名卡
- 產品頁上標示新功能、限定版本的區塊
- 深色主題儀表板裡需要被注意到的警示卡片
- 不適合：同一頁需要大量並排的邊框效果，或想要較低調的光效，可以改用 Border Beam
安裝
npx webberui@latest add https://webberui.com/r/electric-border.json或在 components.json 設定 registries 後，改用 @webberui/electric-border 安裝。
使用
import { ElectricBorder } from "@/components/ui/electric-border";
<ElectricBorder color="#5b8cff" speed={1} chaos={1} borderRadius={18}>
<div className="rounded-[16px] bg-neutral-950 p-6 text-neutral-100">
Power Surge
</div>
</ElectricBorder>內容背景建議用實色並將圓角設為比 borderRadius 略小，讓抖動的描邊能露在內容外緣。
範例
做成推薦方案卡
內容用實色背景，圓角比 borderRadius 小一點，並用 padding 留出讓描邊抖動的空間。
<ElectricBorder color="#22d3ee" borderRadius={20} padding={3} className="w-72">
<div className="rounded-[17px] bg-neutral-950 p-6 text-neutral-100">
<p className="text-sm text-cyan-300">推薦方案</p>
<h3 className="mt-1 text-xl font-semibold">團隊版</h3>
<ul className="mt-4 space-y-1 text-sm text-neutral-300">
<li>最多 20 位成員</li>
<li>共用元件庫與權限管理</li>
</ul>
</div>
</ElectricBorder>包住按鈕
ElectricBorder 外層是一般的 div，可以包住任何元素；描邊與光暈層不接收滑鼠事件，按鈕照常可點。
<ElectricBorder color="#f43f5e" thickness={1.5} borderRadius={999} chaos={0.6}>
<button className="rounded-full bg-neutral-950 px-6 py-2.5 text-sm font-medium text-white">
立即報名
</button>
</ElectricBorder>依狀態開關電流
speed 為 0 時電流停止，只留下靜態發光邊框，可以用來表示「啟用中／未啟用」。
<ElectricBorder color="#a3e635" speed={isActive ? 1.5 : 0} chaos={isActive ? 1.2 : 1}>
<div className="rounded-[14px] bg-neutral-900 p-5 text-neutral-100">
{isActive ? "同步進行中" : "已暫停同步"}
</div>
</ElectricBorder>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
color | string | "#5b8cff" | 電流邊框與光暈顏色 |
speed | number | 1 | 動畫速度倍率，0 時靜止 |
chaos | number | 1 | 電流亂度（位移量倍率） |
thickness | number | 2 | 邊框粗細（px） |
borderRadius | number | 16 | 圓角半徑（px） |
padding | number | 2 | 內容與邊框的內距（px） |
children | ReactNode | — | 邊框內的內容 |
contentClassName | string | — | 內容容器的 className |
可及性
- 使用者系統開啟「減少動態效果」時，電流停止抖動並保留靜態發光邊框
- 描邊與光暈皆為
aria-hidden且pointer-events-none，不影響內容的互動與朗讀
常見問題
可以在 Next.js App Router 使用嗎？
可以。元件檔案開頭已有 "use client"，在 Server Component 頁面中照常 import 即可。電流動畫在掛載後才啟用，首次渲染是靜態邊框，與 SSR 輸出一致。
怎麼調整顏色、速度與亂度？
color 控制描邊與光暈顏色，speed 是速度倍率（0 為靜止），chaos 是位移量倍率（越大越亂），thickness 調整描邊粗細。背景暈染會在 color 後面接上透明度，所以建議用六位數的十六進位色碼，例如 "#5b8cff"。
元件尺寸改變時電流會不會脫框？
不會。元件以 ResizeObserver 監聽外層尺寸，依實際寬高更新噪點的捲動距離，讓電流維持無縫循環。
對效能有影響嗎？
動畫由 SVG 的 animate 元素在瀏覽器內執行，沒有 requestAnimationFrame 迴圈。不過位移濾鏡需要逐幀重繪，同一頁放很多個時建議只在重點區塊使用。
減少動態效果時會怎樣？
使用者開啟「減少動態效果」時，位移量歸零、抖動停止，保留較淡的靜態發光邊框。