Cool Confetti Explosion In Vue

Install & Download:

# Yarn
$ yarn add vue-confetti-explosion
# NPM
$ npm i vue-confetti-explosion

Description:

A Vue component to create an awesome confetti explosion on your application.

How to use it:

1. Import the Confetti Explosion component.

import ConfettiExplosion from "vue-confetti-explosion";

2. Add the <ConfettiExplosion /> component to the template.

<template>
  <ConfettiExplosion />
</template>

3. Specify the number of confetti particles to create. Default: 150.

<ConfettiExplosion :particleCount="100" />

4. Define an array of colors applied to the confetti particles.

<ConfettiExplosion :colors=['#fff', '#000', '#333', '#444'] />

5. More component props.

const ROTATION_SPEED_MIN = 200; // minimum possible duration of single particle full rotation
const ROTATION_SPEED_MAX = 800; // maximum possible duration of single particle full rotation
const CRAZY_PARTICLES_FREQUENCY = 0.1; // 0-1 frequency of crazy curvy unpredictable particles
const CRAZY_PARTICLE_CRAZINESS = 0.3; // 0-1 how crazy these crazy particles are
const BEZIER_MEDIAN = 0.5; // utility for mid-point bezier curves, to ensure smooth motion paths
const FORCE = 0.5; // 0-1 roughly the vertical force at which particles initially explode
const SIZE = 12; // max height for particle rectangles, diameter for particle circles
const FLOOR_HEIGHT = 800; // pixels the particles will fall from initial explosion point
const FLOOR_WIDTH = 1600; // horizontal spread of particles in pixels
const PARTICLE_COUNT = 150;
const DURATION = 3500;
const COLORS = ["#FFC700", "#FF0000", "#2E3191", "#41BBC7"];
particleCount: {
  type: Number,
  default: PARTICLE_COUNT,
},
particleSize: {
  type: Number,
  default: SIZE,
},
duration: {
  type: Number,
  default: DURATION,
},
colors: {
  type: Array as PropType<Array<string>>,
  default: COLORS,
},
force: {
  type: Number,
  default: FORCE,
},
stageHeight: {
  type: Number,
  default: FLOOR_HEIGHT,
},
stageWidth: {
  type: Number,
  default: FLOOR_WIDTH,
},
shouldDestroyAfterDone: {
  type: Boolean,
  default: true,
},