/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

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

import { Fireworks } from 'fireworks-js'

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

Edit @fireworks-js/react

npm install @fireworks-js/react

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

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

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

.clear()

Cleaning the canvas from fireworks.

.currentOptions

Getting current fireworks options.

.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

Star History

Star History Chart

Author

License