js-confetti

🎉 JavaScript Confetti library

💥 Supports emojies as confetties
⚡️ 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!

Customise confetties

Use emojies as confetties:

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

Customize confetties colors:

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

Customize confetties radius:

jsConfetti.addConfetti({
  confettiRadius: 6,
})

Customize confetties number:

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

Combine different properties:

jsConfetti.addConfetti({
  emojies: ['🦄'],
  confettiRadius: 100,
  confettiesNumber: 30,
})

License

MIT