Emoji BurstA button that explodes emojis outward in all directions.

Add to your project

One command adds this component to your project.

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

About Emoji Burst

Emoji Burst is a button that explodes a cluster of emojis outward in every direction every time you click it, then cycles through five different emoji sets so repeated taps feel rewarding rather than repetitive. Each burst is choreographed with Motion: randomized angles, staggered fade-outs, and a soft bounce so the emojis settle naturally before they fade. Use it for reactions, applause, end-of-flow celebrations, or anywhere an empty state could use a moment of delight.

Built with

Frequently asked questions

Is Emoji Burst free to use?

Yes. Emoji Burst is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.

How do I install Emoji Burst?

One command: npx shadcn@latest add https://aicanvas.me/r/emoji-burst.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Emoji Burst for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.

What is Emoji Burst built with?

Emoji Burst is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.

Where would I use Emoji Burst?

Common uses include Reactions, Onboarding, and Empty state. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Emoji Burst with AI?

Yes. Emoji Burst ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.

Featured in collections