zelmaru / fireworks-js

🎆 A simple fireworks library!

Fireworks.js

A simple fireworks library!

Demo

https://crashmax-dev.github.io/fireworks-js/

Installation

# with npm:
npm install fireworks-js

# or yarn:
yarn add fireworks-js

Usage

import { Fireworks } from 'fireworks-js'

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

fireworks.start()
fireworks.pause()
fireworks.clear()

// stop and clear fireworks
fireworks.stop()

// changing the container canvas size (used on constructor)
fireworks.setSize({ height: 500, width: 500 })

// after initialization you can change the fireworks parameters
fireworks.setOptions('delay', { min: 10, max: 15 })

// show/hide border firework boundaries
fireworks.visibleBoudaries()

// changing the boundaries of fireworks (used on constructor)
fireworks.setBoudaries()

<!-- including in your html page -->
<script src="https://unpkg.com/fireworks-js@latest/dist/fireworks.js"></script>

For React.js (see detailed usage here)

import { Fireworks } from 'fireworks-js/dist/react'

export const App = () => {
  const options = {
    speed: 3
  }

  const style = {
    left: 0,
    top: 0,
    width: '100%',
    height: '100%',
    position: 'fixed',
    background: '#000'
  }

  return <Fireworks options={options} style={style} />
}

Options

key	default values
rocketsPoint	50 // bottom center
speed	2
acceleration	1.05
friction	0.95
gravity	1.5
particles	50
trace	3
explosion	5
autoresize	true
hue	{ min: 0, max: 360 }
delay	{ min: 15, max: 30 }
boundaries	{ x: 50, y: 50, width: container.clientWidth, height: container.clientHeight }
sound	{ enable: false }
sound.files	[ '*.mp3', '*.ogg', '*.wav' ]
sound.volume	{ min: 1, max: 2 }
mouse	{ click: false, move: false, max: 3 }
brightness	{ min: 50, max: 80 }
brightness.decay	{ min: 0.015, max: 0.03 }