A simple fireworks library! | fireworks.js.org

  <img src="https://r3-dev.github.io/brand/badge-dark.svg" />

Table of Contents

Warning\ This readme refers to upcoming v2 version, read here for v1 documentation.

• Features
• Browsers support
• Demo
• Installation
• CDN
• Usage
• fireworks-js
• @fireworks-js/react
• @fireworks-js/preact
• @fireworks-js/solid
• @fireworks-js/vue
• @fireworks-js/svelte
• @fireworks-js/angular
• @fireworks-js/web
• Documentation
• Options
• API
• Community

Features

• 🔥 Zero dependencies
• ⚙️ Flexible configuration
• 📦 Lightweight (~3.0kB gzipped)
• 📜 Supports TypeScript type definition

Browsers support

|

Edge |

Firefox |

Chrome |

Safari |

iOS Safari |

Opera |

Yandex | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔

Demo

You can play with fireworks-js at fireworks.js.org or codesandbox.io

Installation

npm install fireworks-js

yarn add fireworks-js

pnpm add fireworks-js

Package	Status	Description
fireworks-js		Vanilla JS
@fireworks-js/react		React component
@fireworks-js/preact		Preact component
@fireworks-js/solid		Solid component
@fireworks-js/vue		Vue 3 component
@fireworks-js/svelte		Svelte component
@fireworks-js/angular		Angular component
@fireworks-js/web		Web components

CDN

<script src="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script>


<script src="https://unpkg.com/fireworks-js@2.x/dist/index.umd.js"></script>


<script>
  const container = document.querySelector('.fireworks')
  const fireworks = new Fireworks.default(container)
  fireworks.start()
</script>

Usage

fireworks-js

import { Fireworks } from 'fireworks-js'

const container = document.querySelector('.container')
const fireworks = new Fireworks(container, { /* options */ })
fireworks.start()

@fireworks-js/react

npm install @fireworks-js/react

@fireworks-js/preact

npm install @fireworks-js/preact

@fireworks-js/solid

npm install @fireworks-js/solid

@fireworks-js/vue

npm install @fireworks-js/vue

@fireworks-js/svelte

npm install @fireworks-js/svelte

@fireworks-js/angular

npm install @fireworks-js/angular

@fireworks-js/web

npm install @fireworks-js/web

Documentation

Options

Note\ The options is optional, as are each of its properties.

The hue, delay, decay, brightness, lineWidth.explosion, lineWidth.trace, sound.volume and rocketsPoint options accept an object:

Note\ The min and max properties are used to randomly select values from the range.

The mouse options accept an object:

Note\ The max property has no effect if click is false.

The sound options accept an object:

const fireworks = new Fireworks(container, {
  autoresize: true,
  opacity: 0.5,
  acceleration: 1.05,
  friction: 0.97,
  gravity: 1.5,
  particles: 50,
  traceLength: 3,
  traceSpeed: 10,
  explosion: 5,
  intensity: 30,
  flickering: 50,
  lineStyle: 'round',
  hue: {
    min: 0,
    max: 360
  },
  delay: {
    min: 30,
    max: 60
  },
  rocketsPoint: {
    min: 50,
    max: 50
  },
  lineWidth: {
    explosion: {
      min: 1,
      max: 3
    },
    trace: {
      min: 1,
      max: 2
    }
  },
  brightness: {
    min: 50,
    max: 80
  },
  decay: {
    min: 0.015,
    max: 0.03
  },
  mouse: {
    click: false,
    move: false,
    max: 1
  }
})

API

.start()

Start fireworks.

.launch(count)

Launching a specified number of fireworks.\ Type: number\ Default 1

.stop(dispose)

Stop fireworks.\ Type: boolean\ Default: false

.waitStop(dispose)

Asynchronous stopping of the fireworks.\ Type: boolean\ Default: false

.pause()

Start/stop firework