Click Spark
於點擊處迸發火花／粒子的回饋效果。
在任意內容外層包一層，點擊時就會在游標位置以 canvas 迸發放射狀火花，作為輕量的互動回饋。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
10
15
8
400
<ClickSpark />
安裝
npx shadcn@latest add https://webberui.com/r/click-spark.json或在 components.json 設定 registries 後，改用 @webberui/click-spark 安裝。
安裝依賴後，從 registry JSON（/r/click-spark.json 的 files[0].content）複製 click-spark.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { ClickSpark } from "@/components/ui/click-spark";
<ClickSpark sparkColor="#f59e0b" sparkCount={10}>
<button className="rounded-md bg-black px-4 py-2 text-white">點我</button>
</ClickSpark>火花層以 pointer-events-none 疊在內容之上，不會攔截點擊；容器本身監聽 onClick，因此包住的任何互動元素都能照常運作。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
sparkColor | string | currentColor | 火花顏色，未指定時跟隨文字色 |
sparkSize | number | 10 | 每根火花線段的長度（px） |
sparkRadius | number | 15 | 火花射出的最大半徑（px） |
sparkCount | number | 8 | 每次點擊迸發的火花數量 |
duration | number | 400 | 單次迸發的時長（毫秒） |
easing | "linear" | "ease-in" | "ease-out" | "ease-in-out" | "ease-out" | 半徑推進的緩動曲線 |
extraScale | number | 1 | 尾段額外放大係數 |
lineWidth | number | 2 | 火花線段寬度（px） |
可及性
- 使用者系統開啟「減少動態效果」時，點擊不再迸發火花
- 火花以 canvas 繪製並標記
aria-hidden，純屬視覺回饋，不影響輔助科技朗讀 - 元件卸載時會
cancelAnimationFrame清理動畫迴圈