CodeWithUsman0/fireworks-js

🎆 A simple fireworks library! Ready to use components available for React, Vue 3, Svelte, Angular, Preact, Solid, and Web Components.

A simple fireworks library! | fireworks.js.org

---

Table of Contents

Warning
This readme refers to upcoming v2 version, read here for v1 documentation.

• Features
• Browsers support
• Demo
• Installation
• CDN
• Usage
  • fireworks-js
  • @fireworks-js/react
  • @fireworks-js/preact
  • @fireworks-js/solid
  • @fireworks-js/vue
  • @fireworks-js/svelte
  • @fireworks-js/angular
  • @fireworks-js/web
• Documentation
  • Options
  • API
• Community

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
The min and max 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 if click 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

• crashmax

License

• MIT