Electric Border

抖動電流能量邊框並發光，用 SVG 噪點位移扭曲描邊，能量從輪廓向外滲出。

用 feTurbulence 產生噪點、逐幀捲動再由 feDisplacementMap 扭曲描邊，讓邊框像高壓電流般不斷抖動，並以雙層光暈向外發光。把任何內容包進去即可。

載入預覽⋯

Playground

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

電流顏色color

動畫速度speed

電流亂度chaos

邊框粗細thickness

圓角半徑borderRadius

<ElectricBorder />

安裝

npx shadcn@latest add https://webberui.com/r/electric-border.json

或在 components.json 設定 registries 後，改用 @webberui/electric-border 安裝。

安裝依賴後，從 registry JSON（/r/electric-border.json 的 files[0].content）複製 electric-border.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

使用

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 略小，讓抖動的描邊能露在內容外緣。

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，不影響內容的互動與朗讀

Playground

安裝

使用

Props

可及性

On this page