Lightning
程序生成分支閃電並發光，以 canvas 2D 分形演算法即時繪製暴風雷電背景。
以「線段中點位移」分形演算法程序生成分支閃電，主通道帶白色核心與外層發光暈，週期性擊發並淡出，全程用 2D canvas 繪製、無任何外部相依。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
2200
6
0.35
<Lightning />
安裝
npx shadcn@latest add https://webberui.com/r/lightning.json或在 components.json 設定 registries 後，改用 @webberui/lightning 安裝。
安裝依賴後，從 registry JSON（/r/lightning.json 的 files[0].content）複製 lightning.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { Lightning } from "@/components/ui/lightning";
<Lightning className="flex h-[320px] w-full items-center justify-center rounded-xl">
<h3 className="text-4xl font-bold text-white">Electrify.</h3>
</Lightning>容器需要自行給定高度（例如 h-[320px]），閃電會填滿整個容器並把 children 疊在其上。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
color | string | "#7dd3fc" | 閃電主色 |
glowColor | string | 同 color | 發光暈色 |
interval | number | 2200 | 平均擊發間隔（毫秒），實際在 0.6~1.4 倍間隨機 |
detail | number | 6 | 分形細分次數，越大鋸齒越細碎（建議 4~7） |
branchDensity | number | 0.35 | 分支生成機率 0~1，越大分岔越多 |
glow | boolean | true | 是否疊加發光暈 |
flash | boolean | true | 擊發瞬間是否讓整個容器閃一下 |
children | ReactNode | — | 疊在閃電之上的前景內容 |
className | string | — | 透傳到根容器，用來設定高度與佈局 |
可及性
- 使用者系統開啟「減少動態效果」時，只繪製一道靜態閃電，不啟動動畫迴圈
- Canvas 帶
aria-hidden且pointer-events-none，純裝飾、不干擾互動與輔助科技 - 元件離開畫面時會
cancelAnimationFrame並斷開ResizeObserver，不留下背景運算