A simple fireworks library! | fireworks.js.org
Features | Demo | Installation | Usage | Options
## Features - 🔥 Zero [dependencies](https://www.npmjs.com/package/fireworks-js?activeTab=dependents) - ⚙️ Flexible [configuration](#options) - 📦 Lightweight ([~3.0kB gizpped](https://bundlephobia.com/package/fireworks-js)) - ☁️ [Server-side rendering](#server-side-rendering-with-no-ssr) compatibility - 📜 Supports [TypeScript](https://www.typescriptlang.org) type definition ## Demo You can play with `fireworks-js` on [fireworks.js.org](https://fireworks.js.org) or [codesandbox.io](https://codesandbox.io/s/fireworks-js-qxihw) [](https://codesandbox.io/s/fireworks-js-qxihw) ## Installation ```sh # 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: ```js 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 ```html ``` ## Usage in React (with hook [useFireworks](examples/react.tsx)) ```js 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| 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 } | - |