Creating a confetti explosion in JS in just a few seconds!

What for?

When working on user experience, one of the essential mechanics is rewarding the user.

Indeed, your application or your website is normally meant to bring value to the person who's going to use it, and therefore there must be a path as clear as possible from the beginning to the delivery of that value!

Every step must motivate the person to continue the experience, and this is achieved through a rewards system

A reward doesn't necessarily mean a gift, but can simply be a congratulatory message, a badge or... an animation! The advantage of an animation, accompanied by a personalized message, is that the visual effect is surprising, and therefore the positive emotion is reinforced.

What if such an animation could be integrated in just a few seconds?

The "canvas-confetti" library!

This library will let you trigger a confetti explosion on any of your web pages, by including a script (or an NPM package), and a blank canvas!

Here's what it looks like with the basic configuration:

Try me!

If you want to set it up, I recommend going straight to the project's GitHub documentation, where you'll find all the steps to get started, but most importantly plenty of settings to tweak the animation to your liking (colors, sizes, speed, direction,...)!

You can also find other demos right here!

Code example

Here's the exact code that implements the basic animation featured in this article, and as you'll see, it's very simple to use:

<!-- HTML -->
<button id="btn">Essayez-moi !</button>
<canvas id="confetti-canvas"></canvas>

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
<script type="text/javascript">
  const btn = document.querySelector('#btn');
  const canvas = document.querySelector('#confetti-canvas');
  function onButtonClick(){
    var myConfetti = confetti.create(canvas, {
      resize: true,
      useWorker: true
    });
    myConfetti({
      particleCount: 100,
      spread: 160
    });
  }
  btn.addEventListener('click', onButtonClick);
</script>

<!-- CSS -->
<style>
#confetti-canvas {
  position: fixed; 
  z-index: 999; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh; 
  pointer-events: none;
}
</style>

And there you go, you can now trigger confetti anytime!

Note that if you're using React, there's also a package called react-confetti, which offers a different implementation of the animation, and even lets you create custom confetti shapes!