fireworks-js
A simple fireworks library! | fireworks.js.org
Table of Contents
Warning
This readme refers to upcoming v2 version, read here for v1 documentation.
Features
- 🔥 Zero dependencies
- ⚙️ Flexible configuration
- 📦 Lightweight (~3.0kB gzipped)
- 📜 Supports TypeScript type definition
Browsers support
Edge | Firefox | Chrome | Safari | iOS Safari | Opera | Yandex |
---|---|---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Demo
You can play with fireworks-js
at fireworks.js.org or codesandbox.io
Installation
npm install fireworks-js
yarn add fireworks-js
pnpm add fireworks-js
Package | Status | Description |
---|---|---|
fireworks-js | Vanilla JS | |
@fireworks-js/react | React component | |
@fireworks-js/preact | Preact component | |
@fireworks-js/solid | Solid component | |
@fireworks-js/vue | Vue 3 component | |
@fireworks-js/svelte | Svelte component | |
@fireworks-js/angular | Angular component | |
@fireworks-js/web | Web components |
CDN
<!-- jsDelivr --><script src="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script>
<!-- UNPKG --><script src="https://unpkg.com/fireworks-js@2.x/dist/index.umd.js"></script>
<!-- Usage --><script> const container = document.querySelector('.fireworks') const fireworks = new Fireworks.default(container) fireworks.start()</script>
Usage
fireworks-js
import { Fireworks } from 'fireworks-js'
const container = document.querySelector('.container')const fireworks = new Fireworks(container, { /* options */ })fireworks.start()
@fireworks-js/react
npm install @fireworks-js/react
@fireworks-js/preact
npm install @fireworks-js/preact
@fireworks-js/solid
npm install @fireworks-js/solid
@fireworks-js/vue
npm install @fireworks-js/vue
@fireworks-js/svelte
npm install @fireworks-js/svelte
@fireworks-js/angular
npm install @fireworks-js/angular
@fireworks-js/web
npm install @fireworks-js/web
Documentation
Options
Note
The options is optional, as are each of its properties.
Property | Type | Default |
---|---|---|
hue | object | hue |
rocketsPoint | object | rocketsPoint |
mouse | object | mouse |
boundaries | object | boundaries |
sound | object | sound |
delay | object | delay |
brightness | object | brightness |
decay | object | decay |
lineWidth | object | lineWidth |
lineStyle | string | round |
explosion | number | 5 |
opacity | number | 0.5 |
acceleration | number | 1.05 |
friction | number | 0.95 |
gravity | number | 1.5 |
particles | number | 50 |
traceLength | number | 3 |
flickering | number | 50 |
intensity | number | 30 |
traceSpeed | number | 10 |
intensity | number | 30 |
autoresize | boolean | true |
The hue
, delay
, decay
, brightness
, lineWidth.explosion
, lineWidth.trace
, sound.volume
and rocketsPoint
options accept an object:
Property | Type |
---|---|
min | number |
max | number |
Note
Themin
andmax
properties are used to randomly select values from the range.
The mouse
options accept an object:
Property | Type | Default |
---|---|---|
click | boolean | false |
move | boolean | false |
max | number | 1 |
Note
Themax
property has no effect ifclick
is false.
The sound
options accept an object:
Property | Type | Default |
---|---|---|
enabled | boolean | false |
files | string[] | files |
volume | object | volume |
const fireworks = new Fireworks(container, { autoresize: true, opacity: 0.5, acceleration: 1.05, friction: 0.97, gravity: 1.5, particles: 50, traceLength: 3, traceSpeed: 10, explosion: 5, intensity: 30, flickering: 50, lineStyle: 'round', hue: { min: 0, max: 360 }, delay: { min: 30, max: 60 }, rocketsPoint: { min: 50, max: 50 }, lineWidth: { explosion: { min: 1, max: 3 }, trace: { min: 1, max: 2 } }, brightness: { min: 50, max: 80 }, decay: { min: 0.015, max: 0.03 }, mouse: { click: false, move: false, max: 1 }})
API
.start()
Start fireworks.
.launch(count)
Launching a specified number of fireworks.
Type: number
Default 1
.stop(dispose)
Stop fireworks.
Type: boolean
Default: false
.waitStop(dispose)
Asynchronous stopping of the fireworks.
Type: boolean
Default: false
.pause()
Start/stop fireworks.
.clear()
Cleaning the canvas from fireworks.
.currentOptions
Getting current fireworks options.
.updateOptions(options)
Force update fireworks options.
Type: options
.updateSize(sizes)
Force update canvas size.
Type: sizes
.updateBoundaries(boundaries)
Force update canvas boundaries.
Type: boundaries
Community
Star History
Author
License
Описание
🎆 A simple fireworks library! Ready to use components available for React, Vue 3, Svelte, Angular, Preact, Solid, and Web Components.
Языки
TypeScript
- CSS
- HTML
- Svelte
- JavaScript
- Vue