Emoji Burst Reaction

Clicking a reaction button bursts a stream of emoji particles that float upward, doubling on rapid clicks.

Clicking the reaction button bursts a stream of emoji particles from the center of the button at random angles, rotations, and sizes, which float upward, fade out, and clean themselves up. Clicking rapidly within a time window builds up a combo streak and the particle count doubles along with it, which suits instant feedback on post likes, comment reactions, and the like.

Loading preview…

npx shadcn@latest add https://webberui.com/r/emoji-burst-reaction.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Emojiemoji

Button labellabel

Burst particle countcount

Initial reaction countinitialCount

Combo window (ms)comboWindow

900

<EmojiBurstReaction />

Installation

npx shadcn@latest add https://webberui.com/r/emoji-burst-reaction.json

Or, once registries are configured in components.json, install it as @webberui/emoji-burst-reaction.

Usage

import { EmojiBurstReaction } from "@/components/ui/emoji-burst-reaction";

<div className="flex gap-2">
  <EmojiBurstReaction emoji="👏" label="Applaud" initialCount={18} />
  <EmojiBurstReaction
    emoji="🎉"
    label="Celebrate"
    burstEmojis={["🎉", "🎊", "✨"]}
    onReact={(total, combo) => console.log(total, combo)}
  />
</div>

Props

Prop	Type	Default	Description
`emoji`	`string`	`"🎉"`	The emoji shown on the button, and the one burst by default
`label`	`string`	—	The button's label text, shown to the right of the emoji
`count`	`number`	`12`	Number of particles burst per click (a rapid-click combo adds a further bonus, capped at three times)
`initialCount`	`number`	`0`	Initial reaction count, shown to the right of the button and incremented on click
`burstEmojis`	`string[]`	`[emoji]`	The list of emoji the burst particles pick from at random
`comboWindow`	`number`	`900`	Time window for detecting a rapid-click combo (milliseconds); the combo resets to zero once it lapses
`onReact`	`(total: number, combo: number) => void`	—	Callback fired on each click, carrying the accumulated reaction count and the current combo count
`className`	`string`	—	Forwarded and merged into the button

Accessibility

Uses a native <button> element, which is keyboard focusable and can be triggered with Enter / Space
The aria-label carries both the reaction name and the current accumulated count, so a screen reader can grasp the state completely
The burst particles and the combo streak badge are decorative only, marked aria-hidden so they do not interfere with assistive technology
When the user has "reduce motion" enabled at the system level, no particles burst and the number transition drops its animation, leaving only the count feedback