Skip to content

crashmax-dev/fireworks-js

master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

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

.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