easy-confetti

easy-confetti

EasyConfetti is designed to create confetti animations and provides flexible, customisable confetti animations that can be easily integrated into a web page to create visual effects.

^{1.5kB gzipped}

Demo

➤ Install

yarn add easy-confetti

➤ Import

import EasyConfetti from 'easy-confetti';

➤ Usage

const easyConfetti = new EasyConfetti();

easyConfetti.init();

Initialization with specified parameters

const confettiParams = {
  particleCount: 70,
  particleSizeRange: {
    width: [5, 20],
    height: [10, 18],
  },
  initialSpeed: 25,
  gravity: 0.65,
  airResistance: 0.08,
  maxFallSpeed: 6,
  flipFrequency: 0.017,
  colors: [
    { front: '#4C9E14', back: '#30610A' },
    { front: '#CC7600', back: '#874900' },
    { front: '#FF4E44', back: '#AA302B' },
    { front: '#E6427E', back: '#933155' },
    { front: '#7D61A1', back: '#49306C' },
    { front: '#4A5F9A', back: '#2A3B5C' },
    { front: '#00A3A3', back: '#006969' },
  ],
};

const easyConfetti = new EasyConfetti(confettiParams);

easyConfetti.sprinkle();

Triggering the animation multiple times with a specified interval

const sprinkleMultiple = (times, interval) => {
  let count = 0;

  const intervalId = setInterval(() => {
    easyConfetti.sprinkle();

    count++;

    if (count === times) {
      clearInterval(intervalId);
    }
  }, interval);
};

➤ Parameters

Option	Type	Default	Description
particleCount	number	70	This parameter determines the number of confetti particles to be generated.
particleSizeRange	{ width: [number, number], height: [number, number] }	{ width: [5, 20], height: [10, 18] }	This parameter sets the range for the width and height of the confetti particles.
initialSpeed	number	25	This parameter defines the initial speed at which the confetti particles are launched.
gravity	number	0.65	This parameter sets the gravity effect on the confetti particles, influencing how quickly they fall.
airResistance	number	0.08	This parameter determines the air resistance effect on the confetti particles, affecting how quickly they decelerate.
maxFallSpeed	number	6	This parameter sets the maximum fall speed of the confetti particles.
flipFrequency	number	0.017	This parameter defines the frequency of the confetti particles flipping between their front and back colors.
colors	Array<{ front: string, back: string }>	[ { front: '#FF5733', back: '#C70039' }, { front: '#DAF7A6', back: '#FFC300' } ]	This parameter is an array of color pairs for the confetti particles, where each particle can flip between a front and a back color.

➤ License

easy-confetti is released under MIT license