🎆 A simple fireworks library! Ready to use components available for React, Vue 3, Svelte, Angular, Preact, Solid, and Web Components.
MIT License
Warning This readme refers to upcoming v2 version, read here for v1 documentation.
Edge | Firefox | Chrome | Safari | iOS Safari | Opera | Yandex |
---|---|---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
You can play with fireworks-js
at fireworks.js.org or stackblitz.com
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 |
<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>
<!-- UNPKG -->
<script src="https://unpkg.com/[email protected]/dist/index.umd.js"></script>
<!-- Usage -->
<script>
const container = document.querySelector('.fireworks')
const fireworks = new Fireworks.default(container)
fireworks.start()
</script>
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
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 The
min
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 The
max
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
}
})
.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