crashmax-dev / 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/[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>

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

fireworks-js's Issues

@fireworks-js/react

https://www.npmjs.com/package/@fireworks-js/react

use ResizeObserver instead on resize listener

Description

• we use container/canvas for target

Which package are you using?

fireworks-js

fireworks-js version

latest

Browser

all

How to make use of the API (start, waitStop) when using the Vue wrapper?

Issue

I'm using the Vue wrapper and there doesn't seem to be a way to start the fireworks in "stopped" mode, there is a "autostart" option that seems to be missing.

I'd like to use waitStop in order to have a graceful finish after a few seconds of fireworks.

Would really appreciate an example that makes use of Vue that showcases a start/waitStop flow.

Many thanks! Love your plugin!

event listeners not removed in unmount

looks like copy-paste error, why events added and not removed here?

unmount(): void {
window.removeEventListener('resize', this.windowResize)
this._canvas.addEventListener('mousedown', this.mouseDown)
this._canvas.addEventListener('mouseup', this.mouseUp)
this._canvas.addEventListener('mousemove', this.mouseMove)
}

Error: Module Not Found

Description

When I do ng serve in my project, it generates an error. My angular is version 13.3.0

Error message below:

./src/app/app.module.ts:42:0-82 - Error: Module not found: Error: Package path ./lib/ng-fireworks.module is not exported from package C:\Dev-world\new-website\node_modules\@fireworks-js\angular (see exports field in C:\Dev-world\new-website\node_modules\@fireworks-js\angular\package.json)

Error: node_modules/@fireworks-js/angular/lib/ng-fireworks.directive.d.ts:11:18 - error TS2314: Generic type 'ɵɵDirectiveDeclaration' requires 6 type argument(s).

11     static ɵdir: i0.ɵɵDirectiveDeclaration<FireworksDirective, "[ngFireworks], ng-fireworks", ["ngF

11     static ɵdir: i0.ɵɵDirectiveDeclaration<FireworksDirective, "[ngFireworks], ng-fireworks", ["ngFireworks"], { "options": "options"; }, {}, never, never, false>;

Does anyone know what the issue is?

Which package are you using?

@fireworks-js/angular

fireworks-js version

2.10.5

Browser

Chrome Version 114.0.5735.134 (Official Build) (64-bit)

If repeated, it does not work after the second time.

Description

const container = document.querySelector(".fireworks-container");
if (container) {
  const fireworks = new Fireworks(container, {
    acceleration: 1.0,
    delay: {
      min: 10,
      max: 100,
    },
    sound: {
      enabled: true,
      files: [
        "fireworks_0.mp3",
        "fireworks_1.mp3",
        "fireworks_2.mp3",
      ],
      volume: {
        min: 60,
        max: 80,
      },
    },
  });

  fireworks.start();
  setTimeout(() => {
    fireworks.stop();
  }, 10000);
}

If repeated, it does not work after the second time.
Sound is produced.

Which package are you using?

@fireworks-js/react

fireworks-js version

2.0.4

Browser

chrome latest

Svelte support

Discussion in comments 👇

Improve documentation

• Detailed description of all available parameters.
• Add links to usage examples:
  • Without using frameworks: (jsfiddle.net or codepen.io)
  • React: (codesandbox.io or stackblitz.com)
  • Maybe in the future there will be fireworks components for #16, #17 and #18

Show the firework as the HTML background

Hello,

Is it possible to show the firework as the background of the whole website??

Make parameters independent of rendering speed

Several parameters (such as the decay time) are currently dependent on the rendering time. This means that the output is significantly different for a different frame rate. I.e. with 60 fps the rays decay earlier than with 30 fps (twice as fast). In fact it should take the time since the last rendering into account.

To do so, the additional 'timestamp' from the requestAnimationFrame call can be used. This must only be compared to the previous timestamp. The initial timestamp can be retrieved by using window.now

CDN link for v2.x?

Description

what's the CDN link for v2?
the following link:
https://unpkg.com/fireworks-js@latest/dist/fireworks.js
results in:
Cannot find "/dist/fireworks.js" in [email protected]
and
https://cdn.jsdelivr.net/npm/fireworks-js@latest/dist/fireworks.js
links to v1.4.1

Which package are you using?

fireworks-js

fireworks-js version

1.4.1

Browser

Chrome

@fireworks-js/angular

How to change the color of fireworks ？

Issue

Hello，What should I do if I want to change the color of the fireworks?

Cannot find module './sound' or its corresponding type declarations.

I have installed the latest version v1.1.1 in my angular project, I am facing the below error while building.

ERROR in node_modules/fireworks-js/dist/fireworks.d.ts:1:30 - error TS2307: Cannot find module './sound' or its corresponding type declarations.
Import { SoundOptions } from './sound';

angular-core: ^10.0.0
typescript: ~3.9.5

non-working boundaries after `2.10.0` update

Description

I came across one example in #90 that allowed to limit the boundaries of explosions.

I wanted to reproduce this "feature" in my project and it didn't seem to work. I then noticed that the working example uses version 2.9.0 and my non-working project was using the newest 2.10.2 version.
Then I figured out that some changes made in the 2.10.0 version broke the boundaries setting.

Working boundaries (2.9.0): https://codesandbox.io/s/fireworks-js-launch-2-9-0-5k1ypf?file=/src/index.ts
Non-working boundaries (2.10.0): https://codesandbox.io/s/fireworks-js-launch-2-10-0-zyxj43?file=/src/index.ts

The only difference in the above examples is the package version of fireworks-js in package.json.

Which package are you using?

fireworks-js

fireworks-js version

2.10.0

Browser

any

Graceful stop

Feature Proposal

Thanks for your work on this library! It's pretty cool.

When calling stop(), the effect is pretty abrupt: everything associated with the fireworks just suddenly disappears from the screen.
Instead, it would be nice to have "stop" mean more like what it does in real fireworks shows: no more rockets are launched, but the ones already in flight and the glowing particles already falling continue on course.

Motivation

I have fireworks going for only a limited time, and when they stop, it's a bit jarring.

Example

Now:

if(endAfterSeconds !== null) {
	await wait(endAfterSeconds*1000);
	fireworks.stop();
}

Future code could be the same with new behavior, or for better backwards compatibility:

if(endAfterSeconds !== null) {
	await wait(endAfterSeconds*1000);
	fireworks.stopLaunching();
        //The existing animations continue to be displayed, but no new fireworks are launched.
        //A startLaunching() function might resume.
}

[react] - Is it possible to load toggled off?

Issue

By default the fireworks start on load; I'd like to only start them on demand (and not have to immediately call .stop() on load).

Is this currently possible?

Paola sei la mia felicità

Feature Proposal

Paola sei la mia felicità

Motivation

No response

Example

No response

[OUTDATED] Boundaries debug mode

• The border does not work correctly, at certain border sizes, the fireworks fly to the left vertical.
  

@fireworks-js/solid

https://www.npmjs.com/package/@fireworks-js/solid

Event listeners aren't removed after cleanup

Description

Those mouse and resize handlers are not cleared after .stop() or .pause() method is called.

Which package are you using?

fireworks-js

fireworks-js version

2.0.0

Browser

chrome latest

what's proper procedure for cleanup?

I see that canvas element is added on start, but I don't see it's removal on stop or some cleanup procedure

[OUTDATED] @fireworks-js/helpers

https://www.npmjs.com/package/@fireworks-js/helpers

Add descriptions on options

• Update README.md
• JSDoc annotations

Add `jsdelivr` and `unpkg` to package.json

Feature Proposal

to have the correct files in cdn's

Motivation

No response

Example

No response

launch a firework explosion at [x,y] without any trace?

Issue

Would it be possible to make just an explosion at certain coordinates without the firework trace?

Example: make an immediate explosion anywhere the user clicks

@fireworks-js/preact

https://www.npmjs.com/package/@fireworks-js/preact

@fireworks-js/svelte

https://www.npmjs.com/package/@fireworks-js/svelte

@fireworks-js/lit

https://www.npmjs.com/package/@fireworks-js/lit

Improve React component

We need to decide which is better pattern: props getters or custom hooks 🤔

So far i cannot give such conclusions...

React cleanup on event listener is not happening on unmount

This autosize listener is not cleared when react unmount is called

GitHub Actions

Giving up Travis CI in favor of Github CI

Features:

• Deploy gh-pages
• Deploy npm package

Vue support

Discussion in comments 👇

Update webpack to v5

React fireworks - no fireworks is showing

I tried the following implementation and I just get a black square with no fireworks showing up whatsoever. Any idea why ?

import { FireworksOptions } from "fireworks-js/dist/fireworks";
import { Fireworks } from "fireworks-js/dist/react";
import React, { CSSProperties } from "react";


const UserScoreScreen = ({
}: {
}) => {
  const options: FireworksOptions = {
    speed: 3,
  };
  const FireworksStyle: CSSProperties = {
    width: "400px",
    height: "400px",
    background: "#000",
    position: "absolute",
  };

  return (
    <>
      <div className="relative flex flex-col items-center h-full p-4 border-2 border-white border-opacity-30 bg-glassomorphism3 rounded-10">
        <div className="z-40">
          <Fireworks options={options} style={FireworksStyle} />
        </div>
      </div>
    </>
  );
};


export default UserScoreScreen;

fireworks-js 2.0 iteration plan

Packages

• #55
• #56
• #57
• #65
• #64
• #58
• #62
• #66
• #59

Examples:

• with-basic
• with-react
• with-preact
• with-solid
• with-vue
• with-svelte
• with-lit
• with-angular

Repository

• #40
• CONTRIBUTING.md
• CODE_OF_CONDUCT.md
• Issue templates
• Pull request template

Bugs

• #53
• #23

Fireworks for limited amount of time

Feature Proposal

option 1: a variable in the options object to set the amount of seconds that the library will generate projectiles.
option 2: A function that when called will stop generating new projectiles.

the pause & stop function doesn't satisfy this because:

• the pause function freezes the canvas instantly
• the stop function clears the canvas instantly

the goal is to make the transition from fireworks all around to no fireworks seem natural.

Motivation

I want fireworks to blast for a limited amount of time. I have fireworks in the background of a cta/feature div.
By keeping the fireworks on indefinitely the screen looks very busy and is hard to read. But i like the attention it grabs in the beginning.

Example

const fireworks = new Fireworks(container,
                {
                    traceSpeed: 1,
                    acceleration: 1.01,
                    rocketsPoint: 25,
                    explosion: 3,
                    trace: 2,
                    delay: { min: 20, max: 30 },
                    generationMs: 5000 //5 seconds
                });

fireworks.start();

//option2
let stopped = false;
window.addEventListener('scroll', function() { //lets say fireworks is at the top of my page and i want to disable it on scrolling.
        if (!stopped){
                stopped = true;
                fireworks.stopGenerating(); 
        }
}

Can I get a vanilla JS copy or do i have to compile the TS version

It's an awesome program but I don't use TypeScript

Error when building Next project

Due to the type imports in react.d.ts the project crashes when building Next project.
Works if import is done like this:
import type { FireworksOptions } from './fireworks';
instead of:
import { type FireworksOptions } from './fireworks';
I have TS version 4.4.4 and next 12.1.4

[OUTDATED] @fireworks-js/vanilla

feat(react): add "use client" directive

Feature Proposal

Improve RSC support by marking @fireworks-js/react as client component.

output as svg?

So nice and pretty project，i am very interesting with this can show up in a svg format?

Thanks so much!

How to change the angle of fireworks ?

Issue

No response

New demo website (React app)

Rewriting the demo website.

Libraries:

• dat.GUI
• stats.JS

Work branch: fireworks-js/tree/demo

How to switch different packages in dev module

Issue

I run npm run dev.
And I have open browser of this url for http://127.0.0.1:8081/. But It were svelte package, I don't know how to switch different package.

@fireworks-js/vue

https://www.npmjs.com/package/@fireworks-js/vue

About Firework Shapes

Feature Proposal

Thanks for this fun library, the fireworks look so pretty!

I was wondering if I could provide more firework shapes, such as circles, pentagrams, etc.
Even similar to fireworks in reality, they can show some simple text after they explode.

Motivation

No response

Example

No response

Angular support

Discussion in comments 👇

Fire function

Feature Proposal

Can you add a fire function, which will render a single firework at random position or specified position on the screen?

Motivation

No response

Example

No response

[Safari] Can't find variable: AudioContext

Plugin doesn't support in Safari browser.

ReferenceError: Can't find variable: AudioContext