@neuralabs/confetti-party

NOTE: This is a port of the js-confetti library (which no longer seems to be maintained).

🎉 JavaScript Confetti library

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

Install

You can install this library from NPM using yarn or npm

npm install @neuralabs/confetti-party

Alternatively you can download script from CDN and then access ConfettiParty global variable

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

Usage

Initialize instance of ConfettiParty class and call addConfetti method

import ConfettiParty from '@neuralabs/confetti-party'

const confettiParty = new ConfettiParty()

confettiParty.addConfetti()

NOTE new ConfettiParty() creates HTML Canvas element with id="confetti-party" and adds it to page, if there is already element with such id, it will be used instead.

If need to use custom canvas element, you can pass canvas el to ConfettiParty constructor or directly canvasId (example)

const canvas = document.getElementById('canvas_id')

const ConfettiParty = new ConfettiParty({ canvas })

// or

const ConfettiParty = new ConfettiParty({ canvasId: 'canvas_id' })

Customise confetti

Customize confetti config:

ConfettiParty.addConfetti({
  confettiRadius: 8, // Confetti size in pixels, default: 6
  confettiNumber: 500, // Number of confetti per "explosion", default: 250
  confettiColors: [
    // Array of hex colors, can be ommited
    '#ff0a54',
    '#ff477e',
    '#ff7096',
    '#ff85a1',
    '#fbb1bd',
    '#f9bec7'
  ]
})

Use emojis as confetti:

ConfettiParty.addConfetti({
  emojis: ['🦄', '⚡️', '💥', '✨', '💫', '🌸'],
  emojiSize: 100, // Size of emojis in pixels, default: 80
  confettiNumber: 30 // Number of emojis per "explosion", default: 40
})

clearCanvas()

Call clearCanvas method to clear canvas

Example:

const ConfettiParty = new ConfettiParty()

ConfettiParty.addConfetti()

// ...
ConfettiParty.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 ConfettiParty.addConfetti()
console.log('Confetti animation completed!')

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

How to run locally

Install dependencies by Yarn or NPM

npm install && npm --prefix ./site install

Run dev script to start development server

npm run dev