fireworks-js

A simple fireworks library! | fireworks.js.org

Features | Demo | Installation | Usage | Options

Features

• 🔥 Zero dependencies
• ⚙️ Flexible configuration
• 📦 Lightweight (~3.0kB gizpped)
• ☁️ Server-side rendering compatibility
• 📜 Supports TypeScript type definition

Demo

You can play with fireworks-js on fireworks.js.org or codesandbox.io

Installation

# with npm:
npm install fireworks-js

# or yarn:
yarn add fireworks-js

Usage

If you are using a module bundler like Webpack or Rollup, etc.., import fireworks-js into your project:

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

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

Using the CDN

<!-- jsdelivr  -->
<script src="https://cdn.jsdelivr.net/npm/fireworks-js@latest/dist/fireworks.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/fireworks-js@latest/dist/fireworks.js"></script>

Usage in React (with hook useFireworks)

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

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

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

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

Server-Side Rendering (with-no-ssr)

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

export default () => <Fireworks />

// pages/index.tsx
import dynamic from 'next/dynamic'

const FireworksWithNoSSR = dynamic(
  () => import('../components/Fireworks'),
  { ssr: false }
)

Options

Name	Type	Default	Description
rocketsPoint	number	50	-
opacity	number	0.5	-
speed	number	2	-
acceleration	number	1.05	-
friction	number	0.95	-
gravity	number	1.5	-
particles	number	50	-
trace	number	3	-
explosion	number	5	-
autoresize	boolean	true	-
hue	object	{ min: 0, max: 360 }	-
delay	object	{ min: 15, max: 30 }	-
boundaries	object	{ visible: false, x: 50, y: 50, width: container.clientWidth, height: container.clientHeight }	-
sound.enabled	boolean	false	-
sound.files	string[]	[ 'explosion0.mp3', 'explosion1.mp3', 'explosion2.mp3' ]	-
sound.volume	object	{ min: 1, max: 2 }	-
mouse	object	{ click: false, move: false, max: 3 }	-
brightness	object	{ min: 50, max: 80 }	-
brightness.decay	object	{ min: 0.015, max: 0.03 }	-

License

MIT License © 2021 Vitalij Ryndin