覆蓋層與回饋
表情噴發回饋
點擊反應按鈕噴發一串上飄表情粒子，連點加倍。
點擊反應按鈕，從按鈕中心噴發一串隨機角度、旋轉與大小的表情粒子，上飄淡出後自動清理；在時間窗內快速連點會累積 combo 連擊，粒子數量隨之加倍，適合貼文按讚、留言反應等即時回饋場景。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add emoji-burst-reactionPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
12
0
900
編輯中的呼叫預設屬性
<EmojiBurstReaction/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/emoji-burst-reaction.json或在 components.json 設定 registries 後，改用 @webberui/emoji-burst-reaction 安裝。
使用
import { EmojiBurstReaction } from "@/components/ui/emoji-burst-reaction";
<div className="flex gap-2">
<EmojiBurstReaction emoji="👏" label="鼓掌" initialCount={18} />
<EmojiBurstReaction
emoji="🎉"
label="慶祝"
burstEmojis={["🎉", "🎊", "✨"]}
onReact={(total, combo) => console.log(total, combo)}
/>
</div>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
emoji | string | "🎉" | 按鈕上顯示、也是預設噴發的表情符號 |
label | string | — | 按鈕的標籤文字，顯示在表情右側 |
count | number | 12 | 每次點擊噴發的粒子數量（連點 combo 會再加成，上限為三倍） |
initialCount | number | 0 | 初始反應數，顯示於按鈕右側並隨點擊累加 |
burstEmojis | string[] | [emoji] | 噴發粒子隨機取用的表情清單 |
comboWindow | number | 900 | 判定連點 combo 的時間窗（毫秒），逾時 combo 歸零 |
onReact | (total: number, combo: number) => void | — | 每次點擊的回呼，帶入累計反應數與目前 combo 數 |
className | string | — | 透傳合併到按鈕 |
可及性
- 使用原生
<button>元素，可鍵盤聚焦，Enter / Space 皆可觸發 aria-label帶出反應名稱與目前累計次數，螢幕閱讀器可完整理解狀態- 噴發粒子與 combo 連擊徽章皆為純裝飾，標記
aria-hidden不干擾輔助科技 - 使用者系統開啟「減少動態效果」時，不噴發粒子、數字切換也取消動畫，僅保留計數回饋