CDN

July 16, 2024 · View on GitHub

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
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 stackblitz.com

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

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

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

<!-- Usage -->
<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.

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
`traceLength`	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,
  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
  }
})