fireworks-js

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

1,074

View on GitHub View on NPM

Quick Overview

Fireworks-js is a lightweight JavaScript library for creating customizable fireworks animations on web pages. It provides an easy-to-use API for adding visually appealing firework effects to websites, making it ideal for celebrations, special events, or simply enhancing user experience.

Pros

Simple and intuitive API for quick implementation
Highly customizable with numerous options for colors, shapes, and behaviors
Lightweight and performant, with minimal impact on page load times
Compatible with both vanilla JavaScript and popular frameworks like React

Cons

Limited to 2D animations, lacking 3D fireworks effects
May not be suitable for accessibility-focused websites without proper considerations
Potential performance issues on low-end devices with many simultaneous fireworks

Code Examples

Basic usage:

import { Fireworks } from 'fireworks-js'

const container = document.querySelector('.fireworks-container')
const fireworks = new Fireworks(container)

fireworks.start()

Customizing fireworks options:

const fireworks = new Fireworks(container, {
  rocketsPoint: {
    min: 0,
    max: 100
  },
  hue: {
    min: 0,
    max: 360
  },
  delay: {
    min: 15,
    max: 30
  },
  speed: 2,
  acceleration: 1.05,
  friction: 0.95,
  gravity: 1.5,
  particles: 90,
  explosion: 6
})

React component usage:

import { ReactFireworks } from 'fireworks-js/dist/react'

function App() {
  return (
    <ReactFireworks
      options={{
        rocketsPoint: {
          min: 0,
          max: 100
        }
      }}
      style={{
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        position: 'fixed',
        background: '#000'
      }}
    />
  )
}

Getting Started

Install the package:
```
npm install fireworks-js
```

Import and initialize in your JavaScript file:

import { Fireworks } from 'fireworks-js'

const container = document.querySelector('.fireworks-container')
const fireworks = new Fireworks(container)

fireworks.start()

Add a container element in your HTML:

<div class="fireworks-container"></div>

Customize options as needed and enjoy the fireworks!

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

A simple fireworks library! | fireworks.js.org

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

Features
Browsers support
Demo
Installation
CDN
Usage
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 stackblitz.com

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

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Quick Overview

Pros

Cons

Code Examples

Getting Started

Convert designs to code with AI

README

Table of Contents

Features

Browsers support

Demo

Installation

CDN

Usage

Documentation

Options

API

.start()

.launch(count)

.stop(dispose)

.waitStop(dispose)

.pause()

.clear()

.currentOptions

.updateOptions(options)

.updateSize(sizes)

.updateBoundaries(boundaries)

Community

Star History

Author

License

Convert designs to code with AI

NPM DownloadsLast 30 Days

`.start()`

`.launch(count)`

`.stop(dispose)`

`.waitStop(dispose)`

`.pause()`

`.clear()`

`.currentOptions`

`.updateOptions(options)`

`.updateSize(sizes)`

`.updateBoundaries(boundaries)`