/fireworks-js

🎆 A simple fireworks library! Ready to use components available for React, Vue 3, Svelte, Angular, Preact, Solid, and Web Components.

Primary LanguageTypeScriptMIT LicenseMIT

A simple fireworks library! | fireworks.js.org

GitHub Workflow Status GitHub npm npm npm bundle size

Table of Contents

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

Features

Browsers support

IE / Edge
Edge		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari		 iOS Safari
iOS Safari		 Opera
Opera		 Yandex
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

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

Warning
StrictMode in React 18 will lead useEffect called twice.
Fireworks speed will be broken (in development mode).

@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.

Property Type Default
hue object hue
rocketsPoint object rocketsPoint
mouse object mouse
boundaries object boundaries
sound object sound
delay object delay
brightness object brightness
decay object decay
lineWidth object lineWidth
lineStyle string round
explosion number 5
opacity number 0.5
acceleration number 1.05
friction number 0.95
gravity number 1.5
particles number 50
trace number 3
flickering number 50
intensity number 30
traceSpeed number 10
intensity number 30
autoresize boolean true

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

Property Type
min number
max number

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

The mouse options accept an object:

Property Type Default
click boolean false
move boolean false
max number 1

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

The sound options accept an object:

Property Type Default
enabled boolean false
files string[] files
volume object volume 
const fireworks = new Fireworks(container, {
  autoresize: true,
  opacity: 0.5,
  acceleration: 1.05,
  friction: 0.97,
  gravity: 1.5,
  particles: 50,
  trace: 3,
  traceSpeed: 10,
  explosion: 5,
  intensity: 30,
  flickering: 50,
  lineStyle: 'round',
  hue: {
    min: 0,
    max: 360
  },
  delay: {
    min: 15,
    max: 30
  },
  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.

.stop()

Stop fireworks.

.pause()

Start/stop fireworks.

.clear()

Cleaning the canvas from fireworks.

.updateOptions(options)

Force update fireworks options.
Type: options

.updateSize(sizes)

Force update canvas size.
Type: sizes

.updateBoundaries(boundaries)

Force update canvas boundaries.
Type: boundaries

Community

Author

License