Alpine Confetti Demo

This plugin adds zero-config celebration effects to your web app using canvas-confetti and Alpine.js.

Check out the README on GitHub → for more information.

Confetti

Use $confetti to celebrate an interaction with your Alpine component. By default it creates a burst of confetti originating from the target element, but you can create custom effects by passing an object with options.


              <button x-on:click="$confetti()"> ... </button>

Starbust

Use the $starburst preset to add a little magic to your UI. Specify the number of stars, or pass an object for more control and customization.


              <button x-on:click="$starburst(10)"> ... </button>

Emojify

Use $emojify to surprise and/or annoy your users. Pass an array of emojis or an object to customize further. Use responsibly! (Or not... 🤪)


              <button x-on:click="$emojify(['😎', '🚀'])"> ... </button>