Firework Animation With JavaScript And Canvas – fireworks-js

Preview:

Description:

fireworks-js is a JavaScript library that adds a configurable firework animation with sound effects to your webpage.

Supports Vanilla JavaScript, React, Preact, Vue, Solid, Svelte, Angular, and Lit.

See It In Action:

How to use it (Vanilla JavaScript):

1. Install and import the fireworks-js as an ES module.

# Yarn
$ yarn add fireworks-js
# NPM
$ npm i fireworks-js
import { Fireworks } from 'fireworks-js'

2. Or load the fireworks.js JavaScript library from the dist folder.

<script src="dist/fireworks.js"></script>

3. Create a container on which you want to render the firework animation.

<div class="fireworks-example"></div>

4. Initialize the fireworks-js library on the container element and config the firework animation using the following props.

const container = document.querySelector('..fireworks-example')
const fireworks = new Fireworks(container, {
      rocketsPoint: {
        min: 50,
        max: 50
      },
      hue: {
        min: 0,
        max: 360
      },
      delay: {
        min: 0.015,
        max: 0.03
      },
      lineWidth: {
        explosion: {
          min: 1,
          max: 3
        },
        trace: {
          min: 1,
          max: 2
        }
      },
      lineStyle: 'round',
      speed: 2,
      acceleration: 1.05,
      friction: 0.95,
      gravity: 1.5,
      particles: 50,
      traceLength: 3,
      flickering: 50
      opacity: 0.5,
      explosion: 5,
      intensity: 30,
      traceSpeed: 10,
      autoresize: true,
      brightness: { 
        min: 50, 
        max: 80
      },
      decay = {
        min: 0.015,
        max: 0.03
      },
      mouse: { 
        click: false, 
        move: false, 
        max: 1 
      }
      boundaries: { 
        x: 50, 
        y: 50, 
        width: 0, 
        height: 0
      }
      sound: {
        enable: true,
        files: [
          'explosion0.mp3',
          'explosion1.mp3',
          'explosion2.mp3'
        ],
        volume: { min: 4, max: 8 },
      }
});

5. Start the firework animation.

fireworks.start();

6. Pause the firework animation.

fireworks.pause()

7. Stop the firework animation.

fireworks.stop()

8. Clear the firework animation.

fireworks.clear()

9. More API methods.

// update options
fireworks.updateOptions(options);
// update canvas size
fireworks.updateSize(sizesObject);
// update canvas boundaries
fireworks.updateBoundaries(boundaries);
// asynchronous stopping of the fireworks
fireworks.waitStop(dispose);
//
// launch a specified number of fireworks
fireworks.launch(count);

Changelog:

v2.10.1 (01/06/2023)

• update

v2.10.0 (12/04/2022)

• feat: options are no longer singleton

v2.9.0 (11/16/2022)

• feat: added launch method

v2.8.0 (11/04/2022)

• chore: refactor wrappers

v2.7.0 (11/04/2022)

• feat(packages/vue): improve vue wrapper

v2.6.0 (11/02/2022)

• update

v2.5.1 (10/16/2022)

• renamed option trace to traceLength

v2.5.0 (10/16/2022)

• renamed option trace to traceLength

v2.4.0 (10/15/2022)

• feat: raf fps property

v2.3.2 (10/15/2022)

• use pointer events

v2.3.1 (10/13/2022)

• refactor

v2.3.0 (10/04/2022)

• refactor

v2.2.1 (10/04/2022)

• feat: reduce size with esnext target

v2.2.0 (10/03/2022)

• feat: added waitStop

v2.1.0 (10/03/2022)

• feat: dispose canvas after stop
• feat: added useImperativeHandle for react, preact packages

v2.0.1 (08/14/2022)

• fix(packages/react): canvas will be added twice in react18 development env
• feat(packages): added web-components
• Bugfix/mouse and resize listeners

07/16/2022

• v2.0.0: API updated

07/15/2022

• v1.4.1: fix: event listeners not removed in unmount

05/01/2022

• v1.4.0: Various changes and improvements; Add intensity option

11/19/2021

• v1.3.5: add experimental explosion

11/17/2021

• v1.3.4: update

11/10/2021

• v1.3.3: refactor sounds

10/19/2021

• v1.2.3

10/16/2021

• v1.2.2

07/28/2021

• v1.2.1: Updated options and methods.

07/04/2021

• v1.2.0

06/28/2021

• v1.1.4