loonywizard / js-confetti

JS Confetti library that supports emojis 🦄 🎉 ⚡️

🎉 JavaScript Confetti library

💥 Supports emojis as confetti
⚡️ Zero dependencies used
🦄 Works without any config, yet configurable
🛠 Has TypeScript typings
🧩 Confetti speed adapts to user screen width

Links: GitHub | NPM | Demo

Install

You can install library from NPM using yarn or npm

yarn add js-confetti

Alternatively you can download script from CDN

<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>

and then access JSConfetti global variable

Usage

Initialize instance of JSConfetti class and call addConfetti method

import JSConfetti from 'js-confetti'

const jsConfetti = new JSConfetti()

jsConfetti.addConfetti()

NOTE new JSConfetti() creates HTML Canvas element and adds it to page, so call it only once!

If need to use custom canvas element, you can pass canvas arg to JSConfetti constructor (example)

const canvas = document.getElementById('your_custom_canvas_id')

const jsConfetti = new JSConfetti({ canvas })

Customise confetti

Use emojis as confetti:

jsConfetti.addConfetti({
   emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'],
})

Customize confetti colors:

jsConfetti.addConfetti({
  confettiColors: [
    '#ff0a54', '#ff477e', '#ff7096', '#ff85a1', '#fbb1bd', '#f9bec7',
  ],
})

Customize confetti radius:

jsConfetti.addConfetti({
  confettiRadius: 6,
})

Customize confetti number:

jsConfetti.addConfetti({
  confettiRadius: 6,
  confettiNumber: 500,
})

Combine different properties:

jsConfetti.addConfetti({
  emojis: ['🦄'],
  emojiSize: 100,
  confettiNumber: 30,
})

clearCanvas()

Call clearCanvas method to clear canvas

Example:

const jsConfetti = new JSConfetti()

jsConfetti.addConfetti()

// ... 
jsConfetti.clearCanvas()

addConfetti Promise

addConfetti method returns Promise, which is resolved when added confetti dissapears from the user screen due to the gravity physics of confetti

Example:

// async/await
await jsConfetti.addConfetti()
console.log('Confetti animation completed!')

// Promise.then
jsConfetti.addConfetti()
   .then(() => console.log('Confetti animation completed!'))

How to run locally

Install dependencies by Yarn or NPM

yarn install

Run dev script with website build

yarn run dev

License

MIT

js-confetti's Issues

emojiSize not working

I tried to adapt the size of the emojis, but with no success. Both codesnippets have the same result. Is that expected or a bug?

new JSConfetti().addConfetti({
    confettiNumber: 250,
    emojis: ['🗺️', '🐣', '🥳', '📍', '✨'],
    emojiSize: 1,
});

// Same effect although size increased
new JSConfetti().addConfetti({
    confettiNumber: 250,
    emojis: ['🗺️', '🐣', '🥳', '📍', '✨'],
    emojiSize: 100,
});

Better cleanup

hey Vladimir,
Thanks for the neat little lib!

Saw the implementation of clearCanvas() based on #46, but this is not exactly what @lifenautjoe was asking for, I think.

clearCanvas() removes the confetti but the canvases keep stacking. So if you have a button that shows confetti you'll get a bunch of empty canvases.

Maybe we need a destroyCanvas() or something like that? Alternatively clearCanvas() could also remove the canvas element from the DOM.
Happy to raise a PR if you want to get it in.

Add support for config

Feature request

Add support for config arg

Configurable options

• Radius of confetti
• Number of confetties for each side of screen

Performance Enhancement

Thank you, Great lib, but some performance issues which keeps me from using it. Maybe try using a webworking/ animation frame like https://github.com/catdad/canvas-confetti does.

Are images supported?

It looks like there might be image support alongside the emoji support, but I see no documentation about how to use images. Am I missing something?

Is it possible to use a custom svg?

Hi! I want to use this library for a website, though I want to use this for the effect -- though it isn't a unicode emoji. Is there a way I could use it?

Allow to set custom direction

Hello! I'm testing the tool and is amazing!

I've a quick question: is possible to change the direction, ex: from bottom to top like as facebook reactions on live events?

Thanks!

Add colors array to addConfetti config

Feature request

Add colors array to addConfetti config

Group confetties by color to optimize canvas drawing

Group confetties by color to optimize canvas drawing, batch same-color confetties drawing togheter

MDN Optimizing canvas

Feature Request - CSS / custom fonts

I don't know much about canvas, but could it have a class & be targeted by CSS? That would allow the use of logo fonts like Font Awesome and open out the range of possible symbols hugely!

(Specifically, I want an explosion of batman logos - I haven't yet found the font, but I expect one exists!)

Slow down the animation

Is it possible to slow down the animation? In other words, the confetti to linger longer on the screen?

I tried adding more numbers but that is not the effect I'm looking for.

how to pause/stop animation?

is there a way to pause/stop animation?

thanks.

yPosition of confetti should be customizable

@loonywizard love the project; thank you for your work.

It looks like rightConfettiPosition and leftConfettiPosition use the following variable to determine the vertical launch location of the confetti:

var yPosition = canvasHeight * 5 / 7;

I don't know why those specific numbers are used, but I'm assuming the intention is to get a position that is a bit above the bottom of the canvas so the confetti effect appears more natural. However, it would be nice to be able to control where the confetti launches vertically.

We should be able to pass a float that gets used to calculate yPosition. Example of potential usage:

// In front-end 

jsConfetti.addConfetti({
    confettiColors: ['#ff0a54', '#ff477e', '#ff7096', '#ff85a1', '#fbb1bd', '#f9bec7'],
    emojiSize: 50,
    confettiNumber: 20,
    yPositionMultiplier: 0.5
});

// In node module

var yPosition = canvasHeight * yPositionMultiplier;

Add typings to the library

Feature request

• Add typings for the library
• Add link to typings in package.json

Feature request - Configure Rotation speed

I'd like to be able to configure rotation somehow - ideally through a single variable rotationSpeed.

I noticed in consts

const MIN_INITIAL_ROTATION_SPEED = 0.03
const MAX_INITIAL_ROTATION_SPEED = 0.07

Perhaps the min and max could be calculated from a single config value, for example if it had an initial value of r=0.05, MIN would be r*0.6, and MAX r*1.4.

Just a suggestion ☺ Thanks for your hard work making this.

Emit from Mouse Source [Request]

Is there any way to emit confetti from the mouse source rather than the sides of the canvas? It would be very cool if it can look like: https://rainbow.me

Happy to help with any research or ease complexity if you decide to pursue this.

Fix plural words for Emoji and Confetti

Hey @loonywizard this looks like a super fun library, and I'm gonna take it for a spin on a project I have.

One thing I've noticed is the spelling of emojis as emojies which I think should be marked as incorrect.

It seems that emojis is the accepted plural of emoji.

Also confetti is already plural, and wouldn't be pluralized as confetties in properties like confettiesNumber. That would still be confettiNumber.

How to clean up?

Hi @loonywizard !

Thanks for the nice library!

Question I couldn't find anywhere, how do I clean up the created canvas? Is this done automatically?

Thanks!

Rap Airhorn Sound

Not really an issue, just a relevant note to people who may be using this. I added a rap airhorn sound in my fork for even more celebration. https://dzoba.github.io/js-confetti/

Custom canvas element will return error in Typescript

const jsConfetti = new JSConfetti({ canvas })

The line of code above will return error in Typescript.
Expected 0 arguments, but got 1.

text confetti properties

I was happy I was able to do this:

using:

const jsConfetti = new JSConfetti();

document.addEventListener('click', () => {
   jsConfetti.addConfetti({
     emojis: [...'5alidshammout'.repeat(10), '👨🏻‍💻'],
     confettiNumber: '5alidshammout'.length,
     confettiRadius: 1,
   });
});

but I want to change the font, color and size of the text, can you do that please?

Deploy PR-48

Can you please make a new NPM deploy for #48 so it can be used publicly.