@tsparticles/fireworks - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

browser/FireworkOptions.js

 import { isArray, setRangeValue, } from "@tsparticles/engine";
 export class FireworkOptions {
     constructor() {
+        this.background = "none";
         this.brightness = {
@@ -14,3 +15,3 @@ min: -30,
         };
-        this.rate = 20;
+        this.rate = 10;
         this.saturation = {
@@ -31,2 +32,5 @@ min: -30,
         }
+        if (data.background !== undefined) {
+            this.background = data.background;
+        }
         if (data.colors !== undefined) {
@@ -33,0 +37,0 @@ if (isArray(data.colors)) {

browser/fireworks.js

@@ -6,2 +6,3 @@ import { getRangeMax, getRangeMin, isNumber, isSsr, isString, setRangeValue, tsParticles, } from "@tsparticles/engine";
 import { loadEmittersPlugin } from "@tsparticles/plugin-emitters";
+import { loadEmittersShapeSquare } from "@tsparticles/plugin-emitters-shape-square";
 import { loadLifeUpdater } from "@tsparticles/updater-life";
@@ -12,2 +13,3 @@ import { loadLineShape } from "@tsparticles/shape-line";
 import { loadStrokeColorUpdater } from "@tsparticles/updater-stroke-color";
+import { loadTrailEffect } from "@tsparticles/effect-trail";
 let initialized = false;
@@ -17,3 +19,3 @@ let initializing = false;
     const data = args.data;
-    return data.particle.shape === "line";
+    return data.particle.shape === "circle" && !!data.particle.splitCount && data.particle.splitCount < 2;
 };
@@ -51,2 +53,3 @@ class FireworksInstance {
     await loadEmittersPlugin(tsParticles, false);
+    await loadEmittersShapeSquare(tsParticles, false);
     await loadSoundsPlugin(tsParticles, false);
@@ -58,2 +61,3 @@ await loadLineShape(tsParticles, false);
     await loadStrokeColorUpdater(tsParticles, false);
+    await loadTrailEffect(tsParticles, false);
     await loadBasic(tsParticles, false);
@@ -78,5 +82,5 @@ initializing = false;
         background: {
-            color: "#000",
+            color: options.background,
         },
-        fpsLimit: 120,
+        fpsLimit: 60,
         emitters: {
@@ -109,3 +113,3 @@ direction: "top",
             color: {
-                value: options.colors,
+                value: "#fff",
             },
@@ -131,4 +135,4 @@ destroy: {
                     particles: {
-                        stroke: {
-                            width: 0,
+                        color: {
+                            value: options.colors,
                         },
@@ -145,3 +149,3 @@ number: {
                                 enable: true,
-                                speed: 0.7,
+                                speed: 1,
                                 sync: false,
@@ -152,2 +156,13 @@ startValue: "max",
                         },
+                        effect: {
+                            type: "trail",
+                            options: {
+                                trail: {
+                                    length: {
+                                        min: 5,
+                                        max: 10,
+                                    },
+                                },
+                            },
+                        },
                         shape: {
@@ -194,28 +209,23 @@ type: "circle",
             },
-            shape: {
-                type: "line",
+            effect: {
+                type: "trail",
                 options: {
-                    line: {
-                        cap: "round",
+                    trail: {
+                        length: {
+                            min: 10,
+                            max: 30,
+                        },
+                        minWidth: 1,
+                        maxWidth: 1,
                     },
                 },
             },
+            shape: {
+                type: "circle",
+            },
             size: {
-                value: {
-                    min: 0.1,
-                    max: 50,
-                },
-                animation: {
-                    enable: true,
-                    sync: true,
-                    speed: 90,
-                    startValue: "max",
-                    destroy: "min",
-                },
+                value: 1,
             },
-            stroke: {
-                color: {
-                    value: "#ffffff",
-                },
-                width: 0.5,
+            opacity: {
+                value: 0.5,
             },
@@ -241,9 +251,2 @@ rotate: {
                 },
-                trail: {
-                    fill: {
-                        color: "#000",
-                    },
-                    enable: true,
-                    length: 10,
-                },
             },
@@ -255,3 +258,3 @@ },
                 {
-                    event: "particleRemoved",
+                    event: "particleDestroyed",
                     filter: explodeSoundCheck,
@@ -258,0 +261,0 @@ audio: [

cjs/FireworkOptions.js

@@ -7,2 +7,3 @@ "use strict";
     constructor() {
+        this.background = "none";
         this.brightness = {
@@ -18,3 +19,3 @@ min: -30,
         };
-        this.rate = 20;
+        this.rate = 10;
         this.saturation = {
@@ -35,2 +36,5 @@ min: -30,
         }
+        if (data.background !== undefined) {
+            this.background = data.background;
+        }
         if (data.colors !== undefined) {
@@ -37,0 +41,0 @@ if ((0, engine_1.isArray)(data.colors)) {

cjs/fireworks.js

@@ -9,2 +9,3 @@ "use strict";
 const plugin_emitters_1 = require("@tsparticles/plugin-emitters");
+const plugin_emitters_shape_square_1 = require("@tsparticles/plugin-emitters-shape-square");
 const updater_life_1 = require("@tsparticles/updater-life");
@@ -15,2 +16,3 @@ const shape_line_1 = require("@tsparticles/shape-line");
 const updater_stroke_color_1 = require("@tsparticles/updater-stroke-color");
+const effect_trail_1 = require("@tsparticles/effect-trail");
 let initialized = false;
@@ -20,3 +22,3 @@ let initializing = false;
     const data = args.data;
-    return data.particle.shape === "line";
+    return data.particle.shape === "circle" && !!data.particle.splitCount && data.particle.splitCount < 2;
 };
@@ -54,2 +56,3 @@ class FireworksInstance {
     await (0, plugin_emitters_1.loadEmittersPlugin)(engine_1.tsParticles, false);
+    await (0, plugin_emitters_shape_square_1.loadEmittersShapeSquare)(engine_1.tsParticles, false);
     await (0, plugin_sounds_1.loadSoundsPlugin)(engine_1.tsParticles, false);
@@ -61,2 +64,3 @@ await (0, shape_line_1.loadLineShape)(engine_1.tsParticles, false);
     await (0, updater_stroke_color_1.loadStrokeColorUpdater)(engine_1.tsParticles, false);
+    await (0, effect_trail_1.loadTrailEffect)(engine_1.tsParticles, false);
     await (0, basic_1.loadBasic)(engine_1.tsParticles, false);
@@ -81,5 +85,5 @@ initializing = false;
         background: {
-            color: "#000",
+            color: options.background,
         },
-        fpsLimit: 120,
+        fpsLimit: 60,
         emitters: {
@@ -112,3 +116,3 @@ direction: "top",
             color: {
-                value: options.colors,
+                value: "#fff",
             },
@@ -134,4 +138,4 @@ destroy: {
                     particles: {
-                        stroke: {
-                            width: 0,
+                        color: {
+                            value: options.colors,
                         },
@@ -148,3 +152,3 @@ number: {
                                 enable: true,
-                                speed: 0.7,
+                                speed: 1,
                                 sync: false,
@@ -155,2 +159,13 @@ startValue: "max",
                         },
+                        effect: {
+                            type: "trail",
+                            options: {
+                                trail: {
+                                    length: {
+                                        min: 5,
+                                        max: 10,
+                                    },
+                                },
+                            },
+                        },
                         shape: {
@@ -197,28 +212,23 @@ type: "circle",
             },
-            shape: {
-                type: "line",
+            effect: {
+                type: "trail",
                 options: {
-                    line: {
-                        cap: "round",
+                    trail: {
+                        length: {
+                            min: 10,
+                            max: 30,
+                        },
+                        minWidth: 1,
+                        maxWidth: 1,
                     },
                 },
             },
+            shape: {
+                type: "circle",
+            },
             size: {
-                value: {
-                    min: 0.1,
-                    max: 50,
-                },
-                animation: {
-                    enable: true,
-                    sync: true,
-                    speed: 90,
-                    startValue: "max",
-                    destroy: "min",
-                },
+                value: 1,
             },
-            stroke: {
-                color: {
-                    value: "#ffffff",
-                },
-                width: 0.5,
+            opacity: {
+                value: 0.5,
             },
@@ -244,9 +254,2 @@ rotate: {
                 },
-                trail: {
-                    fill: {
-                        color: "#000",
-                    },
-                    enable: true,
-                    length: 10,
-                },
             },
@@ -258,3 +261,3 @@ },
                 {
-                    event: "particleRemoved",
+                    event: "particleDestroyed",
                     filter: explodeSoundCheck,
@@ -261,0 +264,0 @@ audio: [

esm/FireworkOptions.js

 import { isArray, setRangeValue, } from "@tsparticles/engine";
 export class FireworkOptions {
     constructor() {
+        this.background = "none";
         this.brightness = {
@@ -14,3 +15,3 @@ min: -30,
         };
-        this.rate = 20;
+        this.rate = 10;
         this.saturation = {
@@ -31,2 +32,5 @@ min: -30,
         }
+        if (data.background !== undefined) {
+            this.background = data.background;
+        }
         if (data.colors !== undefined) {
@@ -33,0 +37,0 @@ if (isArray(data.colors)) {

esm/fireworks.js

@@ -6,2 +6,3 @@ import { getRangeMax, getRangeMin, isNumber, isSsr, isString, setRangeValue, tsParticles, } from "@tsparticles/engine";
 import { loadEmittersPlugin } from "@tsparticles/plugin-emitters";
+import { loadEmittersShapeSquare } from "@tsparticles/plugin-emitters-shape-square";
 import { loadLifeUpdater } from "@tsparticles/updater-life";
@@ -12,2 +13,3 @@ import { loadLineShape } from "@tsparticles/shape-line";
 import { loadStrokeColorUpdater } from "@tsparticles/updater-stroke-color";
+import { loadTrailEffect } from "@tsparticles/effect-trail";
 let initialized = false;
@@ -17,3 +19,3 @@ let initializing = false;
     const data = args.data;
-    return data.particle.shape === "line";
+    return data.particle.shape === "circle" && !!data.particle.splitCount && data.particle.splitCount < 2;
 };
@@ -51,2 +53,3 @@ class FireworksInstance {
     await loadEmittersPlugin(tsParticles, false);
+    await loadEmittersShapeSquare(tsParticles, false);
     await loadSoundsPlugin(tsParticles, false);
@@ -58,2 +61,3 @@ await loadLineShape(tsParticles, false);
     await loadStrokeColorUpdater(tsParticles, false);
+    await loadTrailEffect(tsParticles, false);
     await loadBasic(tsParticles, false);
@@ -78,5 +82,5 @@ initializing = false;
         background: {
-            color: "#000",
+            color: options.background,
         },
-        fpsLimit: 120,
+        fpsLimit: 60,
         emitters: {
@@ -109,3 +113,3 @@ direction: "top",
             color: {
-                value: options.colors,
+                value: "#fff",
             },
@@ -131,4 +135,4 @@ destroy: {
                     particles: {
-                        stroke: {
-                            width: 0,
+                        color: {
+                            value: options.colors,
                         },
@@ -145,3 +149,3 @@ number: {
                                 enable: true,
-                                speed: 0.7,
+                                speed: 1,
                                 sync: false,
@@ -152,2 +156,13 @@ startValue: "max",
                         },
+                        effect: {
+                            type: "trail",
+                            options: {
+                                trail: {
+                                    length: {
+                                        min: 5,
+                                        max: 10,
+                                    },
+                                },
+                            },
+                        },
                         shape: {
@@ -194,28 +209,23 @@ type: "circle",
             },
-            shape: {
-                type: "line",
+            effect: {
+                type: "trail",
                 options: {
-                    line: {
-                        cap: "round",
+                    trail: {
+                        length: {
+                            min: 10,
+                            max: 30,
+                        },
+                        minWidth: 1,
+                        maxWidth: 1,
                     },
                 },
             },
+            shape: {
+                type: "circle",
+            },
             size: {
-                value: {
-                    min: 0.1,
-                    max: 50,
-                },
-                animation: {
-                    enable: true,
-                    sync: true,
-                    speed: 90,
-                    startValue: "max",
-                    destroy: "min",
-                },
+                value: 1,
             },
-            stroke: {
-                color: {
-                    value: "#ffffff",
-                },
-                width: 0.5,
+            opacity: {
+                value: 0.5,
             },
@@ -241,9 +251,2 @@ rotate: {
                 },
-                trail: {
-                    fill: {
-                        color: "#000",
-                    },
-                    enable: true,
-                    length: 10,
-                },
             },
@@ -255,3 +258,3 @@ },
                 {
-                    event: "particleRemoved",
+                    event: "particleDestroyed",
                     filter: explodeSoundCheck,
@@ -258,0 +261,0 @@ audio: [

package.json

 {
   "name": "@tsparticles/fireworks",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
@@ -102,11 +102,13 @@ "homepage": "https://particles.js.org",
   "dependencies": {
-    "@tsparticles/basic": "^3.0.1",
-    "@tsparticles/engine": "^3.0.1",
-    "@tsparticles/plugin-emitters": "^3.0.1",
-    "@tsparticles/plugin-sounds": "^3.0.1",
-    "@tsparticles/shape-line": "^3.0.1",
-    "@tsparticles/updater-destroy": "^3.0.1",
-    "@tsparticles/updater-life": "^3.0.1",
-    "@tsparticles/updater-rotate": "^3.0.1",
-    "@tsparticles/updater-stroke-color": "^3.0.1"
+    "@tsparticles/basic": "^3.0.2",
+    "@tsparticles/effect-trail": "^3.0.2",
+    "@tsparticles/engine": "^3.0.2",
+    "@tsparticles/plugin-emitters": "^3.0.2",
+    "@tsparticles/plugin-emitters-shape-square": "^3.0.2",
+    "@tsparticles/plugin-sounds": "^3.0.2",
+    "@tsparticles/shape-line": "^3.0.2",
+    "@tsparticles/updater-destroy": "^3.0.2",
+    "@tsparticles/updater-life": "^3.0.2",
+    "@tsparticles/updater-rotate": "^3.0.2",
+    "@tsparticles/updater-stroke-color": "^3.0.2"
   },
@@ -113,0 +115,0 @@ "publishConfig": {

README.md

@@ -13,4 +13,6 @@ [![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
 - [@tsparticles/engine](https://github.com/tsparticles/tsparticles/tree/main/engine)
+- [@tsparticles/effect-trail](https://github.com/tsparticles/tsparticles/tree/main/effects/trail)
 - [@tsparticles/move-base](https://github.com/tsparticles/tsparticles/tree/main/move/base)
 - [@tsparticles/plugin-emitters](https://github.com/tsparticles/tsparticles/tree/main/plugins/emitters)
+- [@tsparticles/plugin-emitters-shape-square](https://github.com/tsparticles/tsparticles/tree/main/plugins/emitters/shape/square)
 - [@tsparticles/plugin-sounds](https://github.com/tsparticles/tsparticles/tree/main/plugins/sounds)
@@ -82,2 +84,3 @@ - [@tsparticles/shape-circle](https://github.com/tsparticles/tsparticles/tree/main/shapes/circle)
 
+- `background` String: The background color of the canvas, it can be any valid CSS color, can be transparent as well.
 - `brightness` Number or { min: number; max: number; }: The brightness offset applied to the particles color, from -100
@@ -84,0 +87,0 @@ to 100.

tsparticles.fireworks.bundle.min.js.LICENSE.txt

@@ -1,1 +0,1 @@
-/*! tsParticles Fireworks v3.0.1 by Matteo Bruni */
+/*! tsParticles Fireworks v3.0.2 by Matteo Bruni */

tsparticles.fireworks.js

@@ -7,14 +7,14 @@ /*!
  * How to use? : Check the GitHub README
- * v3.0.1
+ * v3.0.2
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("@tsparticles/engine"), require("@tsparticles/basic"), require("@tsparticles/updater-destroy"), require("@tsparticles/plugin-emitters"), require("@tsparticles/updater-life"), require("@tsparticles/shape-line"), require("@tsparticles/updater-rotate"), require("@tsparticles/plugin-sounds"), require("@tsparticles/updater-stroke-color"));
+		module.exports = factory(require("@tsparticles/engine"), require("@tsparticles/basic"), require("@tsparticles/updater-destroy"), require("@tsparticles/plugin-emitters"), require("@tsparticles/plugin-emitters-shape-square"), require("@tsparticles/updater-life"), require("@tsparticles/shape-line"), require("@tsparticles/updater-rotate"), require("@tsparticles/plugin-sounds"), require("@tsparticles/updater-stroke-color"), require("@tsparticles/effect-trail"));
 	else if(typeof define === 'function' && define.amd)
-		define(["@tsparticles/engine", "@tsparticles/basic", "@tsparticles/updater-destroy", "@tsparticles/plugin-emitters", "@tsparticles/updater-life", "@tsparticles/shape-line", "@tsparticles/updater-rotate", "@tsparticles/plugin-sounds", "@tsparticles/updater-stroke-color"], factory);
+		define(["@tsparticles/engine", "@tsparticles/basic", "@tsparticles/updater-destroy", "@tsparticles/plugin-emitters", "@tsparticles/plugin-emitters-shape-square", "@tsparticles/updater-life", "@tsparticles/shape-line", "@tsparticles/updater-rotate", "@tsparticles/plugin-sounds", "@tsparticles/updater-stroke-color", "@tsparticles/effect-trail"], factory);
 	else {
-		var a = typeof exports === 'object' ? factory(require("@tsparticles/engine"), require("@tsparticles/basic"), require("@tsparticles/updater-destroy"), require("@tsparticles/plugin-emitters"), require("@tsparticles/updater-life"), require("@tsparticles/shape-line"), require("@tsparticles/updater-rotate"), require("@tsparticles/plugin-sounds"), require("@tsparticles/updater-stroke-color")) : factory(root["window"], root["window"], root["window"], root["window"], root["window"], root["window"], root["window"], root["window"], root["window"]);
+		var a = typeof exports === 'object' ? factory(require("@tsparticles/engine"), require("@tsparticles/basic"), require("@tsparticles/updater-destroy"), require("@tsparticles/plugin-emitters"), require("@tsparticles/plugin-emitters-shape-square"), require("@tsparticles/updater-life"), require("@tsparticles/shape-line"), require("@tsparticles/updater-rotate"), require("@tsparticles/plugin-sounds"), require("@tsparticles/updater-stroke-color"), require("@tsparticles/effect-trail")) : factory(root["window"], root["window"], root["window"], root["window"], root["window"], root["window"], root["window"], root["window"], root["window"], root["window"], root["window"]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(this, (__WEBPACK_EXTERNAL_MODULE__533__, __WEBPACK_EXTERNAL_MODULE__574__, __WEBPACK_EXTERNAL_MODULE__344__, __WEBPACK_EXTERNAL_MODULE__68__, __WEBPACK_EXTERNAL_MODULE__84__, __WEBPACK_EXTERNAL_MODULE__137__, __WEBPACK_EXTERNAL_MODULE__59__, __WEBPACK_EXTERNAL_MODULE__490__, __WEBPACK_EXTERNAL_MODULE__204__) => {
+})(this, (__WEBPACK_EXTERNAL_MODULE__533__, __WEBPACK_EXTERNAL_MODULE__574__, __WEBPACK_EXTERNAL_MODULE__344__, __WEBPACK_EXTERNAL_MODULE__68__, __WEBPACK_EXTERNAL_MODULE__787__, __WEBPACK_EXTERNAL_MODULE__84__, __WEBPACK_EXTERNAL_MODULE__137__, __WEBPACK_EXTERNAL_MODULE__59__, __WEBPACK_EXTERNAL_MODULE__490__, __WEBPACK_EXTERNAL_MODULE__204__, __WEBPACK_EXTERNAL_MODULE__20__) => {
 return /******/ (() => { // webpackBootstrap
@@ -31,2 +31,9 @@ /******/ 	"use strict";
 
+/***/ 20:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__20__;
+
+/***/ }),
+
 /***/ 533:
@@ -46,2 +53,9 @@ /***/ ((module) => {
 
+/***/ 787:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__787__;
+
+/***/ }),
+
 /***/ 490:
@@ -162,2 +176,3 @@ /***/ ((module) => {
   constructor() {
+    this.background = "none";
     this.brightness = {
@@ -173,3 +188,3 @@ min: -30,
     };
-    this.rate = 20;
+    this.rate = 10;
     this.saturation = {
@@ -193,2 +208,5 @@ min: -30,
     }
+    if (data.background !== undefined) {
+      this.background = data.background;
+    }
     if (data.colors !== undefined) {
@@ -233,2 +251,4 @@ if ((0,engine_root_window_.isArray)(data.colors)) {
 var plugin_emitters_root_window_ = __webpack_require__(68);
+// EXTERNAL MODULE: external {"commonjs":"@tsparticles/plugin-emitters-shape-square","commonjs2":"@tsparticles/plugin-emitters-shape-square","amd":"@tsparticles/plugin-emitters-shape-square","root":"window"}
+var plugin_emitters_shape_square_root_window_ = __webpack_require__(787);
 // EXTERNAL MODULE: external {"commonjs":"@tsparticles/updater-life","commonjs2":"@tsparticles/updater-life","amd":"@tsparticles/updater-life","root":"window"}
@@ -244,2 +264,4 @@ var updater_life_root_window_ = __webpack_require__(84);
 var updater_stroke_color_root_window_ = __webpack_require__(204);
+// EXTERNAL MODULE: external {"commonjs":"@tsparticles/effect-trail","commonjs2":"@tsparticles/effect-trail","amd":"@tsparticles/effect-trail","root":"window"}
+var effect_trail_root_window_ = __webpack_require__(20);
 ;// CONCATENATED MODULE: ./dist/browser/fireworks.js
@@ -256,2 +278,4 @@
 
+
+
 let initialized = false;
@@ -261,3 +285,3 @@ let initializing = false;
   const data = args.data;
-  return data.particle.shape === "line";
+  return data.particle.shape === "circle" && !!data.particle.splitCount && data.particle.splitCount < 2;
 };
@@ -295,2 +319,3 @@ class FireworksInstance {
   await (0,plugin_emitters_root_window_.loadEmittersPlugin)(engine_root_window_.tsParticles, false);
+  await (0,plugin_emitters_shape_square_root_window_.loadEmittersShapeSquare)(engine_root_window_.tsParticles, false);
   await (0,plugin_sounds_root_window_.loadSoundsPlugin)(engine_root_window_.tsParticles, false);
@@ -302,2 +327,3 @@ await (0,shape_line_root_window_.loadLineShape)(engine_root_window_.tsParticles, false);
   await (0,updater_stroke_color_root_window_.loadStrokeColorUpdater)(engine_root_window_.tsParticles, false);
+  await (0,effect_trail_root_window_.loadTrailEffect)(engine_root_window_.tsParticles, false);
   await (0,basic_root_window_.loadBasic)(engine_root_window_.tsParticles, false);
@@ -321,5 +347,5 @@ initializing = false;
     background: {
-      color: "#000"
+      color: options.background
     },
-    fpsLimit: 120,
+    fpsLimit: 60,
     emitters: {
@@ -353,3 +379,3 @@ direction: "top",
       color: {
-        value: options.colors
+        value: "#fff"
       },
@@ -375,4 +401,4 @@ destroy: {
           particles: {
-            stroke: {
-              width: 0
+            color: {
+              value: options.colors
             },
@@ -389,3 +415,3 @@ number: {
                 enable: true,
-                speed: 0.7,
+                speed: 1,
                 sync: false,
@@ -396,2 +422,13 @@ startValue: "max",
             },
+            effect: {
+              type: "trail",
+              options: {
+                trail: {
+                  length: {
+                    min: 5,
+                    max: 10
+                  }
+                }
+              }
+            },
             shape: {
@@ -444,28 +481,23 @@ type: "circle"
       },
-      shape: {
-        type: "line",
+      effect: {
+        type: "trail",
         options: {
-          line: {
-            cap: "round"
+          trail: {
+            length: {
+              min: 10,
+              max: 30
+            },
+            minWidth: 1,
+            maxWidth: 1
           }
         }
       },
+      shape: {
+        type: "circle"
+      },
       size: {
-        value: {
-          min: 0.1,
-          max: 50
-        },
-        animation: {
-          enable: true,
-          sync: true,
-          speed: 90,
-          startValue: "max",
-          destroy: "min"
-        }
+        value: 1
       },
-      stroke: {
-        color: {
-          value: "#ffffff"
-        },
-        width: 0.5
+      opacity: {
+        value: 0.5
       },
@@ -490,9 +522,2 @@ rotate: {
           top: "none"
-        },
-        trail: {
-          fill: {
-            color: "#000"
-          },
-          enable: true,
-          length: 10
         }
@@ -504,3 +529,3 @@ }
       events: [{
-        event: "particleRemoved",
+        event: "particleDestroyed",
         filter: explodeSoundCheck,
@@ -507,0 +532,0 @@ audio: ["https://particles.js.org/audio/explosion0.mp3", "https://particles.js.org/audio/explosion1.mp3", "https://particles.js.org/audio/explosion2.mp3"]

tsparticles.fireworks.min.js

 /*! For license information please see tsparticles.fireworks.min.js.LICENSE.txt */
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"),require("@tsparticles/basic"),require("@tsparticles/updater-destroy"),require("@tsparticles/plugin-emitters"),require("@tsparticles/updater-life"),require("@tsparticles/shape-line"),require("@tsparticles/updater-rotate"),require("@tsparticles/plugin-sounds"),require("@tsparticles/updater-stroke-color"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine","@tsparticles/basic","@tsparticles/updater-destroy","@tsparticles/plugin-emitters","@tsparticles/updater-life","@tsparticles/shape-line","@tsparticles/updater-rotate","@tsparticles/plugin-sounds","@tsparticles/updater-stroke-color"],t);else{var s="object"==typeof exports?t(require("@tsparticles/engine"),require("@tsparticles/basic"),require("@tsparticles/updater-destroy"),require("@tsparticles/plugin-emitters"),require("@tsparticles/updater-life"),require("@tsparticles/shape-line"),require("@tsparticles/updater-rotate"),require("@tsparticles/plugin-sounds"),require("@tsparticles/updater-stroke-color")):t(e.window,e.window,e.window,e.window,e.window,e.window,e.window,e.window,e.window);for(var i in s)("object"==typeof exports?exports:e)[i]=s[i]}}(this,((e,t,s,i,r,a,o,n,l)=>(()=>{"use strict";var p={574:e=>{e.exports=t},533:t=>{t.exports=e},68:e=>{e.exports=i},490:e=>{e.exports=n},137:e=>{e.exports=a},344:e=>{e.exports=s},84:e=>{e.exports=r},59:e=>{e.exports=o},204:e=>{e.exports=l}},u={};function c(e){var t=u[e];if(void 0!==t)return t.exports;var s=u[e]={exports:{}};return p[e](s,s.exports,c),s.exports}c.d=(e,t)=>{for(var s in t)c.o(t,s)&&!c.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var d={};return(()=>{c.r(d),c.d(d,{fireworks:()=>h});var e=c(533);class t{constructor(){this.brightness={min:-30,max:30},this.colors=["#ff595e","#ffca3a","#8ac926","#1982c4","#6a4c93"],this.gravity=5,this.minHeight={min:10,max:30},this.rate=20,this.saturation={min:-30,max:30},this.sounds=!0,this.speed={min:5,max:15},this.splitCount={min:75,max:150}}load(t){t&&(void 0!==t.colors&&((0,e.isArray)(t.colors)?this.colors=[...t.colors]:this.colors=t.colors),void 0!==t.brightness&&(this.brightness=(0,e.setRangeValue)(t.brightness)),void 0!==t.gravity&&(this.gravity=(0,e.setRangeValue)(t.gravity)),void 0!==t.minHeight&&(this.minHeight=(0,e.setRangeValue)(t.minHeight)),void 0!==t.rate&&(this.rate=(0,e.setRangeValue)(t.rate)),void 0!==t.saturation&&(this.saturation=(0,e.setRangeValue)(t.saturation)),void 0!==t.sounds&&(this.sounds=t.sounds),void 0!==t.speed&&(this.speed=(0,e.setRangeValue)(t.speed)),void 0!==t.splitCount&&(this.splitCount=(0,e.setRangeValue)(t.splitCount)))}}var s=c(574),i=c(344),r=c(68),a=c(84),o=c(137),n=c(59),l=c(490),p=c(204);let u=!1,m=!1;const f=e=>"line"===e.data.particle.shape;class g{constructor(e){this._container=e}pause(){this._container.pause()}play(){this._container.play()}stop(){this._container.stop()}}async function h(c,d){let h;await async function(){if(!u){if(m)return new Promise((e=>{const t=setInterval((()=>{u&&(clearInterval(t),e())}),100)}));m=!0,await(0,r.loadEmittersPlugin)(e.tsParticles,!1),await(0,l.loadSoundsPlugin)(e.tsParticles,!1),await(0,o.loadLineShape)(e.tsParticles,!1),await(0,n.loadRotateUpdater)(e.tsParticles,!1),await(0,i.loadDestroyUpdater)(e.tsParticles,!1),await(0,a.loadLifeUpdater)(e.tsParticles,!1),await(0,p.loadStrokeColorUpdater)(e.tsParticles,!1),await(0,s.loadBasic)(e.tsParticles,!1),m=!1,u=!0}}();const v=new t;(0,e.isString)(c)?(h=c,v.load(d)):(h="fireworks",v.load(c));const y={detectRetina:!0,background:{color:"#000"},fpsLimit:120,emitters:{direction:"top",life:{count:0,duration:.1,delay:.1},rate:{delay:(0,e.isNumber)(v.rate)?1/v.rate:{min:1/(0,e.getRangeMin)(v.rate),max:1/(0,e.getRangeMax)(v.rate)},quantity:1},size:{width:100,height:0},position:{y:100,x:50}},particles:{number:{value:0},color:{value:v.colors},destroy:{mode:"split",bounds:{top:(0,e.setRangeValue)(v.minHeight)},split:{sizeOffset:!1,count:1,factor:{value:.333333},rate:{value:v.splitCount},colorOffset:{s:v.saturation,l:v.brightness},particles:{stroke:{width:0},number:{value:0},opacity:{value:{min:.1,max:1},animation:{enable:!0,speed:.7,sync:!1,startValue:"max",destroy:"min"}},shape:{type:"circle"},size:{value:{min:1,max:2},animation:{enable:!0,speed:5,count:1,sync:!1,startValue:"min",destroy:"none"}},life:{count:1,duration:{value:{min:.25,max:.5}}},move:{decay:{min:.05,max:.1},enable:!0,gravity:{enable:!0,inverse:!1,acceleration:(0,e.setRangeValue)(v.gravity)},speed:(0,e.setRangeValue)(v.speed),direction:"none",outModes:"destroy"}}}},life:{count:1},shape:{type:"line",options:{line:{cap:"round"}}},size:{value:{min:.1,max:50},animation:{enable:!0,sync:!0,speed:90,startValue:"max",destroy:"min"}},stroke:{color:{value:"#ffffff"},width:.5},rotate:{path:!0},move:{enable:!0,gravity:{acceleration:15,enable:!0,inverse:!0,maxSpeed:100},speed:{min:10,max:20},outModes:{default:"destroy",top:"none"},trail:{fill:{color:"#000"},enable:!0,length:10}}},sounds:{enable:v.sounds,events:[{event:"particleRemoved",filter:f,audio:["https://particles.js.org/audio/explosion0.mp3","https://particles.js.org/audio/explosion1.mp3","https://particles.js.org/audio/explosion2.mp3"]}],volume:50}},w=await e.tsParticles.load({id:h,options:y});if(w)return new g(w)}h.version=e.tsParticles.version,(0,e.isSsr)()||(window.fireworks=h)})(),d})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"),require("@tsparticles/basic"),require("@tsparticles/updater-destroy"),require("@tsparticles/plugin-emitters"),require("@tsparticles/plugin-emitters-shape-square"),require("@tsparticles/updater-life"),require("@tsparticles/shape-line"),require("@tsparticles/updater-rotate"),require("@tsparticles/plugin-sounds"),require("@tsparticles/updater-stroke-color"),require("@tsparticles/effect-trail"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine","@tsparticles/basic","@tsparticles/updater-destroy","@tsparticles/plugin-emitters","@tsparticles/plugin-emitters-shape-square","@tsparticles/updater-life","@tsparticles/shape-line","@tsparticles/updater-rotate","@tsparticles/plugin-sounds","@tsparticles/updater-stroke-color","@tsparticles/effect-trail"],t);else{var i="object"==typeof exports?t(require("@tsparticles/engine"),require("@tsparticles/basic"),require("@tsparticles/updater-destroy"),require("@tsparticles/plugin-emitters"),require("@tsparticles/plugin-emitters-shape-square"),require("@tsparticles/updater-life"),require("@tsparticles/shape-line"),require("@tsparticles/updater-rotate"),require("@tsparticles/plugin-sounds"),require("@tsparticles/updater-stroke-color"),require("@tsparticles/effect-trail")):t(e.window,e.window,e.window,e.window,e.window,e.window,e.window,e.window,e.window,e.window,e.window);for(var s in i)("object"==typeof exports?exports:e)[s]=i[s]}}(this,((e,t,i,s,r,a,o,n,l,p,c)=>(()=>{"use strict";var u={574:e=>{e.exports=t},20:e=>{e.exports=c},533:t=>{t.exports=e},68:e=>{e.exports=s},787:e=>{e.exports=r},490:e=>{e.exports=l},137:e=>{e.exports=o},344:e=>{e.exports=i},84:e=>{e.exports=a},59:e=>{e.exports=n},204:e=>{e.exports=p}},d={};function m(e){var t=d[e];if(void 0!==t)return t.exports;var i=d[e]={exports:{}};return u[e](i,i.exports,m),i.exports}m.d=(e,t)=>{for(var i in t)m.o(t,i)&&!m.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},m.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),m.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var f={};return(()=>{m.r(f),m.d(f,{fireworks:()=>y});var e=m(533);class t{constructor(){this.background="none",this.brightness={min:-30,max:30},this.colors=["#ff595e","#ffca3a","#8ac926","#1982c4","#6a4c93"],this.gravity=5,this.minHeight={min:10,max:30},this.rate=10,this.saturation={min:-30,max:30},this.sounds=!0,this.speed={min:5,max:15},this.splitCount={min:75,max:150}}load(t){t&&(void 0!==t.background&&(this.background=t.background),void 0!==t.colors&&((0,e.isArray)(t.colors)?this.colors=[...t.colors]:this.colors=t.colors),void 0!==t.brightness&&(this.brightness=(0,e.setRangeValue)(t.brightness)),void 0!==t.gravity&&(this.gravity=(0,e.setRangeValue)(t.gravity)),void 0!==t.minHeight&&(this.minHeight=(0,e.setRangeValue)(t.minHeight)),void 0!==t.rate&&(this.rate=(0,e.setRangeValue)(t.rate)),void 0!==t.saturation&&(this.saturation=(0,e.setRangeValue)(t.saturation)),void 0!==t.sounds&&(this.sounds=t.sounds),void 0!==t.speed&&(this.speed=(0,e.setRangeValue)(t.speed)),void 0!==t.splitCount&&(this.splitCount=(0,e.setRangeValue)(t.splitCount)))}}var i=m(574),s=m(344),r=m(68),a=m(787),o=m(84),n=m(137),l=m(59),p=m(490),c=m(204),u=m(20);let d=!1,g=!1;const h=e=>{const t=e.data;return"circle"===t.particle.shape&&!!t.particle.splitCount&&t.particle.splitCount<2};class v{constructor(e){this._container=e}pause(){this._container.pause()}play(){this._container.play()}stop(){this._container.stop()}}async function y(m,f){let y;await async function(){if(!d){if(g)return new Promise((e=>{const t=setInterval((()=>{d&&(clearInterval(t),e())}),100)}));g=!0,await(0,r.loadEmittersPlugin)(e.tsParticles,!1),await(0,a.loadEmittersShapeSquare)(e.tsParticles,!1),await(0,p.loadSoundsPlugin)(e.tsParticles,!1),await(0,n.loadLineShape)(e.tsParticles,!1),await(0,l.loadRotateUpdater)(e.tsParticles,!1),await(0,s.loadDestroyUpdater)(e.tsParticles,!1),await(0,o.loadLifeUpdater)(e.tsParticles,!1),await(0,c.loadStrokeColorUpdater)(e.tsParticles,!1),await(0,u.loadTrailEffect)(e.tsParticles,!1),await(0,i.loadBasic)(e.tsParticles,!1),g=!1,d=!0}}();const w=new t;(0,e.isString)(m)?(y=m,w.load(f)):(y="fireworks",w.load(m));const x={detectRetina:!0,background:{color:w.background},fpsLimit:60,emitters:{direction:"top",life:{count:0,duration:.1,delay:.1},rate:{delay:(0,e.isNumber)(w.rate)?1/w.rate:{min:1/(0,e.getRangeMin)(w.rate),max:1/(0,e.getRangeMax)(w.rate)},quantity:1},size:{width:100,height:0},position:{y:100,x:50}},particles:{number:{value:0},color:{value:"#fff"},destroy:{mode:"split",bounds:{top:(0,e.setRangeValue)(w.minHeight)},split:{sizeOffset:!1,count:1,factor:{value:.333333},rate:{value:w.splitCount},colorOffset:{s:w.saturation,l:w.brightness},particles:{color:{value:w.colors},number:{value:0},opacity:{value:{min:.1,max:1},animation:{enable:!0,speed:1,sync:!1,startValue:"max",destroy:"min"}},effect:{type:"trail",options:{trail:{length:{min:5,max:10}}}},shape:{type:"circle"},size:{value:{min:1,max:2},animation:{enable:!0,speed:5,count:1,sync:!1,startValue:"min",destroy:"none"}},life:{count:1,duration:{value:{min:.25,max:.5}}},move:{decay:{min:.05,max:.1},enable:!0,gravity:{enable:!0,inverse:!1,acceleration:(0,e.setRangeValue)(w.gravity)},speed:(0,e.setRangeValue)(w.speed),direction:"none",outModes:"destroy"}}}},life:{count:1},effect:{type:"trail",options:{trail:{length:{min:10,max:30},minWidth:1,maxWidth:1}}},shape:{type:"circle"},size:{value:1},opacity:{value:.5},rotate:{path:!0},move:{enable:!0,gravity:{acceleration:15,enable:!0,inverse:!0,maxSpeed:100},speed:{min:10,max:20},outModes:{default:"destroy",top:"none"}}},sounds:{enable:w.sounds,events:[{event:"particleDestroyed",filter:h,audio:["https://particles.js.org/audio/explosion0.mp3","https://particles.js.org/audio/explosion1.mp3","https://particles.js.org/audio/explosion2.mp3"]}],volume:50}},b=await e.tsParticles.load({id:y,options:x});if(b)return new v(b)}y.version=e.tsParticles.version,(0,e.isSsr)()||(window.fireworks=y)})(),f})()));

tsparticles.fireworks.min.js.LICENSE.txt

@@ -1,1 +0,1 @@
-/*! tsParticles Fireworks v3.0.1 by Matteo Bruni */
+/*! tsParticles Fireworks v3.0.2 by Matteo Bruni */

types/FireworkOptions.d.ts

 import { type IOptionLoader, type RangeValue, type RecursivePartial, type SingleOrMultiple } from "@tsparticles/engine";
 import type { IFireworkOptions } from "./IFireworkOptions.js";
 export declare class FireworkOptions implements IFireworkOptions, IOptionLoader<IFireworkOptions> {
+    background: string;
     brightness: RangeValue;
@@ -5,0 +6,0 @@ colors: SingleOrMultiple<string>;

types/IFireworkOptions.d.ts

 import type { RangeValue, SingleOrMultiple } from "@tsparticles/engine";
 export interface IFireworkOptions {
+    background: string;
     brightness: RangeValue;
@@ -4,0 +5,0 @@ colors: SingleOrMultiple<string>;

umd/FireworkOptions.js

@@ -16,2 +16,3 @@ (function (factory) {
         constructor() {
+            this.background = "none";
             this.brightness = {
@@ -27,3 +28,3 @@ min: -30,
             };
-            this.rate = 20;
+            this.rate = 10;
             this.saturation = {
@@ -44,2 +45,5 @@ min: -30,
             }
+            if (data.background !== undefined) {
+                this.background = data.background;
+            }
             if (data.colors !== undefined) {
@@ -46,0 +50,0 @@ if ((0, engine_1.isArray)(data.colors)) {

umd/fireworks.js

@@ -7,3 +7,3 @@ (function (factory) {
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@tsparticles/engine", "./FireworkOptions.js", "@tsparticles/basic", "@tsparticles/updater-destroy", "@tsparticles/plugin-emitters", "@tsparticles/updater-life", "@tsparticles/shape-line", "@tsparticles/updater-rotate", "@tsparticles/plugin-sounds", "@tsparticles/updater-stroke-color"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./FireworkOptions.js", "@tsparticles/basic", "@tsparticles/updater-destroy", "@tsparticles/plugin-emitters", "@tsparticles/plugin-emitters-shape-square", "@tsparticles/updater-life", "@tsparticles/shape-line", "@tsparticles/updater-rotate", "@tsparticles/plugin-sounds", "@tsparticles/updater-stroke-color", "@tsparticles/effect-trail"], factory);
     }
@@ -19,2 +19,3 @@ })(function (require, exports) {
     const plugin_emitters_1 = require("@tsparticles/plugin-emitters");
+    const plugin_emitters_shape_square_1 = require("@tsparticles/plugin-emitters-shape-square");
     const updater_life_1 = require("@tsparticles/updater-life");
@@ -25,2 +26,3 @@ const shape_line_1 = require("@tsparticles/shape-line");
     const updater_stroke_color_1 = require("@tsparticles/updater-stroke-color");
+    const effect_trail_1 = require("@tsparticles/effect-trail");
     let initialized = false;
@@ -30,3 +32,3 @@ let initializing = false;
         const data = args.data;
-        return data.particle.shape === "line";
+        return data.particle.shape === "circle" && !!data.particle.splitCount && data.particle.splitCount < 2;
     };
@@ -64,2 +66,3 @@ class FireworksInstance {
         await (0, plugin_emitters_1.loadEmittersPlugin)(engine_1.tsParticles, false);
+        await (0, plugin_emitters_shape_square_1.loadEmittersShapeSquare)(engine_1.tsParticles, false);
         await (0, plugin_sounds_1.loadSoundsPlugin)(engine_1.tsParticles, false);
@@ -71,2 +74,3 @@ await (0, shape_line_1.loadLineShape)(engine_1.tsParticles, false);
         await (0, updater_stroke_color_1.loadStrokeColorUpdater)(engine_1.tsParticles, false);
+        await (0, effect_trail_1.loadTrailEffect)(engine_1.tsParticles, false);
         await (0, basic_1.loadBasic)(engine_1.tsParticles, false);
@@ -91,5 +95,5 @@ initializing = false;
             background: {
-                color: "#000",
+                color: options.background,
             },
-            fpsLimit: 120,
+            fpsLimit: 60,
             emitters: {
@@ -122,3 +126,3 @@ direction: "top",
                 color: {
-                    value: options.colors,
+                    value: "#fff",
                 },
@@ -144,4 +148,4 @@ destroy: {
                         particles: {
-                            stroke: {
-                                width: 0,
+                            color: {
+                                value: options.colors,
                             },
@@ -158,3 +162,3 @@ number: {
                                     enable: true,
-                                    speed: 0.7,
+                                    speed: 1,
                                     sync: false,
@@ -165,2 +169,13 @@ startValue: "max",
                             },
+                            effect: {
+                                type: "trail",
+                                options: {
+                                    trail: {
+                                        length: {
+                                            min: 5,
+                                            max: 10,
+                                        },
+                                    },
+                                },
+                            },
                             shape: {
@@ -207,28 +222,23 @@ type: "circle",
                 },
-                shape: {
-                    type: "line",
+                effect: {
+                    type: "trail",
                     options: {
-                        line: {
-                            cap: "round",
+                        trail: {
+                            length: {
+                                min: 10,
+                                max: 30,
+                            },
+                            minWidth: 1,
+                            maxWidth: 1,
                         },
                     },
                 },
+                shape: {
+                    type: "circle",
+                },
                 size: {
-                    value: {
-                        min: 0.1,
-                        max: 50,
-                    },
-                    animation: {
-                        enable: true,
-                        sync: true,
-                        speed: 90,
-                        startValue: "max",
-                        destroy: "min",
-                    },
+                    value: 1,
                 },
-                stroke: {
-                    color: {
-                        value: "#ffffff",
-                    },
-                    width: 0.5,
+                opacity: {
+                    value: 0.5,
                 },
@@ -254,9 +264,2 @@ rotate: {
                     },
-                    trail: {
-                        fill: {
-                            color: "#000",
-                        },
-                        enable: true,
-                        length: 10,
-                    },
                 },
@@ -268,3 +271,3 @@ },
                     {
-                        event: "particleRemoved",
+                        event: "particleDestroyed",
                         filter: explodeSoundCheck,
@@ -271,0 +274,0 @@ audio: [

No alert changes

Improved metrics

Total package byte prevSize

803530

increased by2.1%

Lines of code

10787

increased by2.29%

Number of lines in readme file

96

increased by3.23%

Worsened metrics

Dependency count

11

increased by22.22%

Dependency changes

• + Added@tsparticles/effect-trail@^3.0.2

• + Added@tsparticles/plugin-emitters-shape-square@^3.0.2

• + Added@tsparticles/effect-trail@3.4.0(transitive)

• + Added@tsparticles/plugin-emitters-shape-square@3.4.0(transitive)

• Updated@tsparticles/basic@^3.0.2

• Updated@tsparticles/engine@^3.0.2

• Updated@tsparticles/plugin-emitters@^3.0.2

• Updated@tsparticles/plugin-sounds@^3.0.2

• Updated@tsparticles/shape-line@^3.0.2

• Updated@tsparticles/updater-destroy@^3.0.2

• Updated@tsparticles/updater-life@^3.0.2

• Updated@tsparticles/updater-rotate@^3.0.2

• Updated@tsparticles/updater-stroke-color@^3.0.2