A simple fireworks library! | fireworks.js.org

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

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

Edge	Firefox	Chrome	Safari	iOS Safari	Opera	Yandex
✔	✔	✔	✔	✔	✔	✔

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

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

<!-- jsDelivr  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>

<!-- UNPKG -->
<script src="https://unpkg.com/[email protected]/dist/index.umd.js"></script>

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

import { Fireworks } from 'fireworks-js'

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

npm install @fireworks-js/react

npm install @fireworks-js/preact

npm install @fireworks-js/solid

npm install @fireworks-js/vue

npm install @fireworks-js/svelte

npm install @fireworks-js/angular

npm install @fireworks-js/web

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
  }
})

Start fireworks.

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

Stop fireworks.
Type: boolean
Default: false

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

Start/stop fireworks.

Cleaning the canvas from fireworks.

Getting current fireworks options.

Force update fireworks options.
Type: options

Force update canvas size.
Type: sizes

Force update canvas boundaries.
Type: boundaries

• crashmax

• MIT