A simple fireworks library! | fireworks.js.org
Features | Demo | Installation | Usage | Options
- π₯ Zero dependencies
- βοΈ Flexible configuration
- π¦ Lightweight (~3.0kB gzipped)
- βοΈ Server-side rendering compatibility
- π Supports TypeScript type definition
You can play with fireworks-js on fireworks.js.org or codesandbox.io
# with npm:
npm install fireworks-js
# or yarn:
yarn add fireworks-jsIf 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 }})<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/fireworks-js@1.x/dist/fireworks.js"></script>
<!-- unpkg -->
<script src="https://unpkg.com/fireworks-js@1.x/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 }
)| Name | Type | Default | Description |
|---|---|---|---|
| hue | object | { min: 0, max: 360 } | - |
| rocketsPoint | number | 50 | - |
| opacity | number | 0.5 | - |
| acceleration | number | 1.05 | - |
| friction | number | 0.95 | - |
| gravity | number | 1.5 | - |
| particles | number | 50 | - |
| trace | number | 3 | - |
| explosion | number | 5 | - |
| autoresize | boolean | true | - |
| mouse | object | { click: false, move: false, max: 3 } | - |
| 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 } | - |
| delay | object | { min: 15, max: 30 } | - |
| brightness | object | { min: 50, max: 80, decay } | - |
| brightness.decay | object | { min: 0.015, max: 0.03 } | - |
| flickering | number | 50 | - |
| intensity | number | 30 | - |
| traceSpeed | number | 10 | - |
| lineWidth | object | { explosion: { min: 0, max: 0 }, trace: { min: 0, max: 0 } } | - |
| lineStyle | 'round' | 'square' | 'round' | - |
MIT License Β© 2021 Vitalij Ryndin
![@dependabot[bot]](https://cdn.statically.io/img/avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
