點擊火花效果 Click Spark｜免費 React 元件

在任意內容外層包一層，點擊時就會在游標位置以 canvas 迸發放射狀火花，作為輕量的互動回饋。

把這個效果裝進你的專案

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

npx webberui@latest add click-spark

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

Click Spark 是用 React 與 canvas 2D 做的點擊火花（click effect、點擊特效）元件，外層容器使用 Tailwind CSS，減少動態效果的偵測來自 Motion。動畫迴圈只在有火花時運轉，畫完就停。

Playground

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

火花顏色sparkColor

火花長度sparkSize

迸發半徑sparkRadius

火花數量sparkCount

動畫時長（毫秒）duration

400

緩動曲線easing

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<ClickSpark/>

    </div>
  );
}

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

適用情境

按讚、收藏、加入購物車等按鈕的點擊回饋
遊戲化介面、抽獎或打卡頁面，強化每次點擊的手感
作品集或個人網站，包住整個頁面區塊當作全域點擊效果
不適合：需要成功／失敗狀態的按鈕回饋，改用 Confetti Feedback 或 Stateful Button

安裝

npx webberui@latest add https://webberui.com/r/click-spark.json

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

使用

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，因此包住的任何互動元素都能照常運作。

範例

套用在整個區塊

把 ClickSpark 包在區塊最外層，區塊內任何位置點擊都會出現火花；裡面的連結與按鈕照常運作。

<ClickSpark sparkColor="#6366f1" className="min-h-screen">
  <main className="mx-auto max-w-3xl px-6 py-16">
    <h1 className="text-3xl font-semibold">作品集</h1>
    {/* 頁面內容 */}
  </main>
</ClickSpark>

加大火花的按讚按鈕

提高 sparkCount、sparkRadius 與 extraScale，讓迸發範圍更大；duration 拉長到 600ms。

<ClickSpark
  sparkColor="#f43f5e"
  sparkCount={12}
  sparkSize={14}
  sparkRadius={28}
  extraScale={1.3}
  duration={600}
  easing="ease-in-out"
  lineWidth={3}
  className="inline-block p-6"
>
  <button type="button" className="rounded-full bg-rose-50 px-4 py-2 text-sm font-medium text-rose-600">
    按讚 128
  </button>
</ClickSpark>

外層加上 p-6，是為了讓火花有空間射出，不會被容器邊緣裁掉。

跟隨文字色

不傳 sparkColor 時，火花使用容器的文字色；在 className 設定文字色即可。

<ClickSpark className="text-emerald-600 dark:text-emerald-400">
  <button type="button" className="rounded-md border px-4 py-2">完成打卡</button>
</ClickSpark>

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 清理動畫迴圈

常見問題

可以在 Next.js App Router 使用嗎？

可以。檔案開頭已經有 "use client"，在 Server Component 頁面裡照一般方式 import 即可。

為什麼火花在邊緣被切掉？

火花畫在與容器同尺寸的 canvas 上，超出容器範圍的部分不會顯示。替容器加上內距，或改包住更大的區塊即可。

切換深淺主題後火花顏色沒有跟著變？

未指定 sparkColor 時，元件在掛載時（以及 sparkColor 改變時）讀取一次容器的文字色，主題切換不會自動重讀。需要跟著主題變色時，直接依主題傳入 sparkColor。

會一直佔用 `requestAnimationFrame` 嗎？

不會。迴圈只在有火花時運轉，所有火花結束後就停止；元件卸載時也會呼叫 cancelAnimationFrame 清理。

有考慮減少動態效果嗎？

有。偵測到「減少動態效果」時，點擊不會產生火花，包住的內容照常可以點擊。

Click Spark

把這個效果裝進你的專案

本頁目錄