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

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

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

Thanks so much!

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

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

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)

Discussion in comments 👇

Issue

No response

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!

• Update README.md
• JSDoc annotations

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(); 
        }
}

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

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.

This autosize listener is not cleared when react unmount is called

Giving up Travis CI in favor of Github CI

Features:

• Deploy gh-pages
• Deploy npm package

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

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

Issue

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

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;

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

Rewriting the demo website.

Libraries:

• dat.GUI
• stats.JS

Work branch: fireworks-js/tree/demo

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

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)
}

Feature Proposal

to have the correct files in cdn's

Motivation

No response

Example

No response

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

Description

• we use container/canvas for target

Which package are you using?

fireworks-js

fireworks-js version

latest

Browser

all

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

So far i cannot give such conclusions...

Discussion in comments 👇

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

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

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

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.
}

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

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

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

Feature Proposal

Paola sei la mia felicità

Motivation

No response

Example

No response

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

Feature Proposal

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

Hello,

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

• 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

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

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

Plugin doesn't support in Safari browser.

ReferenceError: Can't find variable: AudioContext

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

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?

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

Discussion in comments 👇