Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

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


fireworks-js

A simple fireworks library! | fireworks.js.org

GitHub Workflow Status npm npm npm bundle size CodeFactor Grade

Features | Demo | Installation | Usage | Options

Features

Demo

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

Edit fireworks-js

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

NameTypeDefaultDescription
rocketsPointnumber50-
opacitynumber0.5-
speednumber2-
accelerationnumber1.05-
frictionnumber0.95-
gravitynumber1.5-
particlesnumber50-
tracenumber3-
explosionnumber5-
autoresizebooleantrue-
hueobject{ min: 0, max: 360 }-
delayobject{ min: 15, max: 30 }-
boundariesobject{ visible: false, x: 50, y: 50, width: container.clientWidth, height: container.clientHeight }-
sound.enabledbooleanfalse-
sound.filesstring[][ 'explosion0.mp3', 'explosion1.mp3', 'explosion2.mp3' ]-
sound.volumeobject{ min: 1, max: 2 }-
mouseobject{ click: false, move: false, max: 3 }-
brightnessobject{ min: 50, max: 80 }-
brightness.decayobject{ min: 0.015, max: 0.03 }-

License

MIT License Β© 2021 Vitalij Ryndin