@tsparticles/preset-fireworks 4.0.0-alpha.5 → 4.0.0-beta.0

package/README.md

@@ -12,7 +12,13 @@
 
 ## Sample
 
-[![demo](https://raw.githubusercontent.com/tsparticles/tsparticles/main/presets/fireworks/images/sample.png)](https://particles.js.org/samples/presets/fireworks)
+[![demo](https://raw.githubusercontent.com/tsparticles/presets/main/presets/fireworks/images/sample.png)](https://particles.js.org/samples/presets/fireworks)
+
+## Quick checklist
+
+1. Install `@tsparticles/engine` (or use the CDN bundle below)
+2. Call `loadFireworksPreset(tsParticles)` **before** `tsParticles.load(...)`
+3. Set `preset: "fireworks"` in options
 
 ## How to use it
 
@@ -66,6 +72,37 @@ Checkout the documentation in the component library repository and call the `loa
 
 The options shown above are valid for all the component libraries.
 
+## Dependencies
+
+This preset loads and combines the following packages:
+
+| Package                                     | Role in this preset                           | README                                                                    |
+| ------------------------------------------- | --------------------------------------------- | ------------------------------------------------------------------------- |
+| `@tsparticles/basic`                        | Base runtime bundle used by the preset        | <https://www.npmjs.com/package/@tsparticles/basic>                        |
+| `@tsparticles/effect-trail`                 | Adds a fading trail effect behind particles   | <https://www.npmjs.com/package/@tsparticles/effect-trail>                 |
+| `@tsparticles/engine`                       | tsParticles engine and preset registration    | <https://www.npmjs.com/package/@tsparticles/engine>                       |
+| `@tsparticles/plugin-emitters`              | Spawns particles from configurable emitters   | <https://www.npmjs.com/package/@tsparticles/plugin-emitters>              |
+| `@tsparticles/plugin-emitters-shape-square` | Adds square emitter areas for launches/bursts | <https://www.npmjs.com/package/@tsparticles/plugin-emitters-shape-square> |
+| `@tsparticles/plugin-sounds`                | Adds synchronized sound playback              | <https://www.npmjs.com/package/@tsparticles/plugin-sounds>                |
+| `@tsparticles/shape-line`                   | Adds line/spark particle shape                | <https://www.npmjs.com/package/@tsparticles/shape-line>                   |
+| `@tsparticles/updater-destroy`              | Removes particles when their stage ends       | <https://www.npmjs.com/package/@tsparticles/updater-destroy>              |
+| `@tsparticles/updater-life`                 | Controls particle life-cycle stages           | <https://www.npmjs.com/package/@tsparticles/updater-life>                 |
+| `@tsparticles/updater-rotate`               | Adds rotation animation                       | <https://www.npmjs.com/package/@tsparticles/updater-rotate>               |
+
+If you want to customize one specific behavior, start from the related package README above.
+
+## Common pitfalls
+
+- Calling `tsParticles.load(...)` before `loadFireworksPreset(tsParticles)`
+- Changing particle shape to one not included in the bundle without importing the shape package
+- Forgetting that the fireworks preset requires emitter, sounds, and trail packages — use the bundle to avoid missing dependencies
+
+## Related docs
+
+- All presets catalog: <https://github.com/tsparticles/presets>
+- Emitter options: <https://particles.js.org/docs/classes/Plugins_Emitters_Options_Classes_Emitter.Emitter.html>
+- Main tsParticles docs: <https://particles.js.org/docs/>
+
 ---
 
 ```mermaid

package/browser/index.js

@@ -1,10 +1,9 @@
 const presetName = "fireworks";
 export async function loadFireworksPreset(engine) {
     await engine.pluginManager.register(async (e) => {
-        const [{ loadBasic }, { loadEmittersPlugin }, { loadInteractivityPlugin }, { loadTrailEffect }, { loadEmittersShapeSquare }, { loadSoundsPlugin }, { loadLineShape }, { loadRotateUpdater }, { loadDestroyUpdater }, { loadLifeUpdater }, { loadStrokeColorUpdater }, { initOptions },] = await Promise.all([
+        const [{ loadBasic }, { loadEmittersPluginSimple }, { loadTrailEffect }, { loadEmittersShapeSquare }, { loadSoundsPlugin }, { loadLineShape }, { loadRotateUpdater }, { loadDestroyUpdater }, { loadLifeUpdater }, { initOptions },] = await Promise.all([
             import("@tsparticles/basic"),
-            import("@tsparticles/plugin-emitters"),
-            import("@tsparticles/plugin-interactivity"),
+            import("@tsparticles/plugin-emitters/plugin"),
             import("@tsparticles/effect-trail"),
             import("@tsparticles/plugin-emitters-shape-square"),
             import("@tsparticles/plugin-sounds"),
@@ -12,24 +11,21 @@ export async function loadFireworksPreset(engine) {
             import("@tsparticles/updater-rotate"),
             import("@tsparticles/updater-destroy"),
             import("@tsparticles/updater-life"),
-            import("@tsparticles/updater-stroke-color"),
             import("./options.js"),
-        ]);
+        ]), loadEmittersForFireworks = async (e) => {
+            await loadEmittersPluginSimple(e);
+            await loadEmittersShapeSquare(e);
+        };
         await Promise.all([
             loadBasic(e),
-            (async () => {
-                await loadInteractivityPlugin(e);
-                await loadEmittersPlugin(e);
-            })(),
+            loadEmittersForFireworks(e),
             loadTrailEffect(e),
             loadSoundsPlugin(e),
             loadLineShape(e),
             loadRotateUpdater(e),
             loadDestroyUpdater(e),
             loadLifeUpdater(e),
-            loadStrokeColorUpdater(e),
         ]);
-        await loadEmittersShapeSquare(e);
         e.pluginManager.addPreset(presetName, initOptions(), false);
     });
 }

package/browser/options.js

@@ -44,41 +44,12 @@ export function initOptions() {
         };
     }, fireworksOptions = [
         "#FF0000",
-        "#FF2A00",
-        "#FF5500",
         "#FF8000",
-        "#FFAA00",
-        "#FFD400",
         "#FFFF00",
-        "#D4FF00",
-        "#AAFF00",
-        "#80FF00",
-        "#55FF00",
-        "#2AFF00",
         "#00FF00",
-        "#00FF2A",
-        "#00FF55",
-        "#00FF80",
-        "#00FFAA",
-        "#00FFD4",
         "#00FFFF",
-        "#00D4FF",
-        "#00AAFF",
-        "#0080FF",
-        "#0055FF",
-        "#002AFF",
         "#0000FF",
-        "#2A00FF",
-        "#5500FF",
-        "#8000FF",
-        "#AA00FF",
-        "#D400FF",
         "#FF00FF",
-        "#FF00D4",
-        "#FF00AA",
-        "#FF0080",
-        "#FF0055",
-        "#FF002A",
     ]
         .map(color => {
         const rgb = hexToRgba(color);
@@ -93,18 +64,20 @@ export function initOptions() {
             max: 100,
         }, sRange = fixRange({ min: hsl.s - sOffset, max: hsl.s + sOffset }, sBounds.min, sBounds.max), lRange = fixRange({ min: hsl.l - lOffset, max: hsl.l + lOffset }, lBounds.min, lBounds.max);
         return {
-            fill: {
-                color: {
-                    value: {
-                        h: hsl.h,
-                        s: sRange,
-                        l: lRange,
+            paint: {
+                fill: {
+                    color: {
+                        value: {
+                            h: hsl.h,
+                            s: sRange,
+                            l: lRange,
+                        },
                     },
+                    enable: true,
+                },
+                stroke: {
+                    width: 0,
                 },
-                enable: true,
-            },
-            stroke: {
-                width: 0,
             },
             number: {
                 value: 0,
@@ -235,14 +208,16 @@ export function initOptions() {
             size: {
                 value: 1,
             },
-            stroke: {
-                color: {
-                    value: "#ffffff",
+            paint: {
+                stroke: {
+                    color: {
+                        value: "#ffffff",
+                    },
+                    width: 1,
+                },
+                fill: {
+                    enable: false,
                 },
-                width: 1,
-            },
-            fill: {
-                enable: false,
             },
             move: {
                 enable: true,

package/cjs/index.js

@@ -1,10 +1,9 @@
 const presetName = "fireworks";
 export async function loadFireworksPreset(engine) {
     await engine.pluginManager.register(async (e) => {
-        const [{ loadBasic }, { loadEmittersPlugin }, { loadInteractivityPlugin }, { loadTrailEffect }, { loadEmittersShapeSquare }, { loadSoundsPlugin }, { loadLineShape }, { loadRotateUpdater }, { loadDestroyUpdater }, { loadLifeUpdater }, { loadStrokeColorUpdater }, { initOptions },] = await Promise.all([
+        const [{ loadBasic }, { loadEmittersPluginSimple }, { loadTrailEffect }, { loadEmittersShapeSquare }, { loadSoundsPlugin }, { loadLineShape }, { loadRotateUpdater }, { loadDestroyUpdater }, { loadLifeUpdater }, { initOptions },] = await Promise.all([
             import("@tsparticles/basic"),
-            import("@tsparticles/plugin-emitters"),
-            import("@tsparticles/plugin-interactivity"),
+            import("@tsparticles/plugin-emitters/plugin"),
             import("@tsparticles/effect-trail"),
             import("@tsparticles/plugin-emitters-shape-square"),
             import("@tsparticles/plugin-sounds"),
@@ -12,24 +11,21 @@ export async function loadFireworksPreset(engine) {
             import("@tsparticles/updater-rotate"),
             import("@tsparticles/updater-destroy"),
             import("@tsparticles/updater-life"),
-            import("@tsparticles/updater-stroke-color"),
             import("./options.js"),
-        ]);
+        ]), loadEmittersForFireworks = async (e) => {
+            await loadEmittersPluginSimple(e);
+            await loadEmittersShapeSquare(e);
+        };
         await Promise.all([
             loadBasic(e),
-            (async () => {
-                await loadInteractivityPlugin(e);
-                await loadEmittersPlugin(e);
-            })(),
+            loadEmittersForFireworks(e),
             loadTrailEffect(e),
             loadSoundsPlugin(e),
             loadLineShape(e),
             loadRotateUpdater(e),
             loadDestroyUpdater(e),
             loadLifeUpdater(e),
-            loadStrokeColorUpdater(e),
         ]);
-        await loadEmittersShapeSquare(e);
         e.pluginManager.addPreset(presetName, initOptions(), false);
     });
 }

package/cjs/options.js

@@ -44,41 +44,12 @@ export function initOptions() {
         };
     }, fireworksOptions = [
         "#FF0000",
-        "#FF2A00",
-        "#FF5500",
         "#FF8000",
-        "#FFAA00",
-        "#FFD400",
         "#FFFF00",
-        "#D4FF00",
-        "#AAFF00",
-        "#80FF00",
-        "#55FF00",
-        "#2AFF00",
         "#00FF00",
-        "#00FF2A",
-        "#00FF55",
-        "#00FF80",
-        "#00FFAA",
-        "#00FFD4",
         "#00FFFF",
-        "#00D4FF",
-        "#00AAFF",
-        "#0080FF",
-        "#0055FF",
-        "#002AFF",
         "#0000FF",
-        "#2A00FF",
-        "#5500FF",
-        "#8000FF",
-        "#AA00FF",
-        "#D400FF",
         "#FF00FF",
-        "#FF00D4",
-        "#FF00AA",
-        "#FF0080",
-        "#FF0055",
-        "#FF002A",
     ]
         .map(color => {
         const rgb = hexToRgba(color);
@@ -93,18 +64,20 @@ export function initOptions() {
             max: 100,
         }, sRange = fixRange({ min: hsl.s - sOffset, max: hsl.s + sOffset }, sBounds.min, sBounds.max), lRange = fixRange({ min: hsl.l - lOffset, max: hsl.l + lOffset }, lBounds.min, lBounds.max);
         return {
-            fill: {
-                color: {
-                    value: {
-                        h: hsl.h,
-                        s: sRange,
-                        l: lRange,
+            paint: {
+                fill: {
+                    color: {
+                        value: {
+                            h: hsl.h,
+                            s: sRange,
+                            l: lRange,
+                        },
                     },
+                    enable: true,
+                },
+                stroke: {
+                    width: 0,
                 },
-                enable: true,
-            },
-            stroke: {
-                width: 0,
             },
             number: {
                 value: 0,
@@ -235,14 +208,16 @@ export function initOptions() {
             size: {
                 value: 1,
             },
-            stroke: {
-                color: {
-                    value: "#ffffff",
+            paint: {
+                stroke: {
+                    color: {
+                        value: "#ffffff",
+                    },
+                    width: 1,
+                },
+                fill: {
+                    enable: false,
                 },
-                width: 1,
-            },
-            fill: {
-                enable: false,
             },
             move: {
                 enable: true,

package/dist_browser_options_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.5
+ * v4.0.0-beta.0
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \*********************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   initOptions: () => (/* binding */ initOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../node_modules/.pnpm/@tsparticles+engine@4.0.0-beta.1/node_modules/@tsparticles/engine/browser/index.js\");\n\nfunction initOptions() {\n    const explodeSoundCheck = (args)=>{\n        const data = args.data;\n        return data.particle.options.move.gravity.inverse;\n    }, fixRange = (value, min, max)=>{\n        const minValue = 0, diffSMax = value.max > max ? value.max - max : minValue;\n        let res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.setRangeValue)(value);\n        if (diffSMax) {\n            res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.setRangeValue)(value.min - diffSMax, max);\n        }\n        const diffSMin = value.min < min ? value.min : minValue;\n        if (diffSMin) {\n            res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.setRangeValue)(minValue, value.max + diffSMin);\n        }\n        return res;\n    }, hexToRgba = (hex)=>{\n        let hexValue = hex;\n        const shortRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])([a-f\\d])?$/i;\n        if (shortRegex.test(hexValue)) {\n            hexValue = hexValue.replace(shortRegex, (_m, r, g, b, a)=>r + r + g + g + b + b + (a ? a + a : \"\"));\n        }\n        const regex = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})?$/i, result = regex.exec(hexValue);\n        if (!result) {\n            return undefined;\n        }\n        result.shift();\n        const indexes = {\n            a: 3,\n            b: 2,\n            g: 1,\n            r: 0\n        }, values = {\n            a: result[indexes.a],\n            b: result[indexes.b],\n            g: result[indexes.g],\n            r: result[indexes.r]\n        }, hexRadix = 16;\n        return {\n            r: values.r ? Number.parseInt(values.r, hexRadix) : _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.none,\n            g: values.g ? Number.parseInt(values.g, hexRadix) : _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.none,\n            b: values.b ? Number.parseInt(values.b, hexRadix) : _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.none,\n            a: values.a ? Number.parseInt(values.a, hexRadix) : _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.defaultAlpha\n        };\n    }, fireworksOptions = [\n        \"#FF0000\",\n        \"#FF2A00\",\n        \"#FF5500\",\n        \"#FF8000\",\n        \"#FFAA00\",\n        \"#FFD400\",\n        \"#FFFF00\",\n        \"#D4FF00\",\n        \"#AAFF00\",\n        \"#80FF00\",\n        \"#55FF00\",\n        \"#2AFF00\",\n        \"#00FF00\",\n        \"#00FF2A\",\n        \"#00FF55\",\n        \"#00FF80\",\n        \"#00FFAA\",\n        \"#00FFD4\",\n        \"#00FFFF\",\n        \"#00D4FF\",\n        \"#00AAFF\",\n        \"#0080FF\",\n        \"#0055FF\",\n        \"#002AFF\",\n        \"#0000FF\",\n        \"#2A00FF\",\n        \"#5500FF\",\n        \"#8000FF\",\n        \"#AA00FF\",\n        \"#D400FF\",\n        \"#FF00FF\",\n        \"#FF00D4\",\n        \"#FF00AA\",\n        \"#FF0080\",\n        \"#FF0055\",\n        \"#FF002A\"\n    ].map((color)=>{\n        const rgb = hexToRgba(color);\n        if (!rgb) {\n            return undefined;\n        }\n        const hsl = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rgbToHsl)(rgb), sOffset = 30, lOffset = 30, sBounds = {\n            min: 0,\n            max: 100\n        }, lBounds = {\n            min: 0,\n            max: 100\n        }, sRange = fixRange({\n            min: hsl.s - sOffset,\n            max: hsl.s + sOffset\n        }, sBounds.min, sBounds.max), lRange = fixRange({\n            min: hsl.l - lOffset,\n            max: hsl.l + lOffset\n        }, lBounds.min, lBounds.max);\n        return {\n            fill: {\n                color: {\n                    value: {\n                        h: hsl.h,\n                        s: sRange,\n                        l: lRange\n                    }\n                },\n                enable: true\n            },\n            stroke: {\n                width: 0\n            },\n            number: {\n                value: 0\n            },\n            opacity: {\n                value: {\n                    min: 0.1,\n                    max: 1\n                },\n                animation: {\n                    enable: true,\n                    speed: 0.7,\n                    sync: false,\n                    startValue: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.StartValueType.max,\n                    destroy: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.DestroyType.min\n                }\n            },\n            shape: {\n                type: \"circle\"\n            },\n            effect: {\n                type: \"trail\",\n                options: {\n                    trail: {\n                        length: {\n                            min: 5,\n                            max: 10\n                        }\n                    }\n                }\n            },\n            size: {\n                value: {\n                    min: 1,\n                    max: 2\n                },\n                animation: {\n                    enable: true,\n                    speed: 5,\n                    count: 1,\n                    sync: false,\n                    startValue: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.StartValueType.min,\n                    destroy: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.DestroyType.none\n                }\n            },\n            life: {\n                count: 1,\n                duration: {\n                    value: {\n                        min: 1,\n                        max: 2\n                    }\n                }\n            },\n            move: {\n                decay: {\n                    min: 0.075,\n                    max: 0.1\n                },\n                enable: true,\n                gravity: {\n                    enable: true,\n                    inverse: false,\n                    acceleration: 5\n                },\n                speed: {\n                    min: 5,\n                    max: 15\n                },\n                direction: \"none\",\n                outModes: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OutMode.destroy\n            }\n        };\n    }).filter((t)=>t !== undefined);\n    return {\n        detectRetina: true,\n        background: {\n            color: \"#000\"\n        },\n        fpsLimit: 120,\n        emitters: {\n            direction: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.MoveDirection.top,\n            rate: {\n                delay: 0.3,\n                quantity: 1\n            },\n            size: {\n                width: 100,\n                height: 0\n            },\n            position: {\n                y: 100,\n                x: 50\n            }\n        },\n        particles: {\n            number: {\n                value: 0\n            },\n            destroy: {\n                mode: \"split\",\n                bounds: {\n                    top: {\n                        min: 15,\n                        max: 35\n                    }\n                },\n                split: {\n                    sizeOffset: false,\n                    count: 1,\n                    factor: {\n                        value: 0.333333\n                    },\n                    rate: {\n                        value: {\n                            min: 75,\n                            max: 150\n                        }\n                    },\n                    particles: fireworksOptions\n                }\n            },\n            life: {\n                count: 1\n            },\n            shape: {\n                type: \"circle\"\n            },\n            effect: {\n                type: \"trail\",\n                options: {\n                    trail: {\n                        length: {\n                            min: 5,\n                            max: 15\n                        },\n                        minWidth: 1,\n                        maxWidth: 1\n                    }\n                }\n            },\n            size: {\n                value: 1\n            },\n            stroke: {\n                color: {\n                    value: \"#ffffff\"\n                },\n                width: 1\n            },\n            fill: {\n                enable: false\n            },\n            move: {\n                enable: true,\n                gravity: {\n                    acceleration: 15,\n                    enable: true,\n                    inverse: true,\n                    maxSpeed: 100\n                },\n                speed: {\n                    min: 10,\n                    max: 20\n                },\n                outModes: {\n                    default: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OutMode.destroy,\n                    top: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OutMode.none\n                }\n            }\n        },\n        sounds: {\n            enable: true,\n            events: [\n                {\n                    event: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.EventType.particleRemoved,\n                    filter: explodeSoundCheck,\n                    audio: [\n                        \"https://particles.js.org/audio/explosion0.mp3\",\n                        \"https://particles.js.org/audio/explosion1.mp3\",\n                        \"https://particles.js.org/audio/explosion2.mp3\"\n                    ]\n                }\n            ],\n            volume: 50\n        }\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/preset-fireworks/./dist/browser/options.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   initOptions: () => (/* binding */ initOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"../../node_modules/.pnpm/@tsparticles+engine@4.0.0-beta.11/node_modules/@tsparticles/engine/browser/index.js\");\n\nfunction initOptions() {\n    const explodeSoundCheck = (args)=>{\n        const data = args.data;\n        return data.particle.options.move.gravity.inverse;\n    }, fixRange = (value, min, max)=>{\n        const minValue = 0, diffSMax = value.max > max ? value.max - max : minValue;\n        let res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.setRangeValue)(value);\n        if (diffSMax) {\n            res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.setRangeValue)(value.min - diffSMax, max);\n        }\n        const diffSMin = value.min < min ? value.min : minValue;\n        if (diffSMin) {\n            res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.setRangeValue)(minValue, value.max + diffSMin);\n        }\n        return res;\n    }, hexToRgba = (hex)=>{\n        let hexValue = hex;\n        const shortRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])([a-f\\d])?$/i;\n        if (shortRegex.test(hexValue)) {\n            hexValue = hexValue.replace(shortRegex, (_m, r, g, b, a)=>r + r + g + g + b + b + (a ? a + a : \"\"));\n        }\n        const regex = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})?$/i, result = regex.exec(hexValue);\n        if (!result) {\n            return undefined;\n        }\n        result.shift();\n        const indexes = {\n            a: 3,\n            b: 2,\n            g: 1,\n            r: 0\n        }, values = {\n            a: result[indexes.a],\n            b: result[indexes.b],\n            g: result[indexes.g],\n            r: result[indexes.r]\n        }, hexRadix = 16;\n        return {\n            r: values.r ? Number.parseInt(values.r, hexRadix) : _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.none,\n            g: values.g ? Number.parseInt(values.g, hexRadix) : _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.none,\n            b: values.b ? Number.parseInt(values.b, hexRadix) : _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.none,\n            a: values.a ? Number.parseInt(values.a, hexRadix) : _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.defaultAlpha\n        };\n    }, fireworksOptions = [\n        \"#FF0000\",\n        \"#FF8000\",\n        \"#FFFF00\",\n        \"#00FF00\",\n        \"#00FFFF\",\n        \"#0000FF\",\n        \"#FF00FF\"\n    ].map((color)=>{\n        const rgb = hexToRgba(color);\n        if (!rgb) {\n            return undefined;\n        }\n        const hsl = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rgbToHsl)(rgb), sOffset = 30, lOffset = 30, sBounds = {\n            min: 0,\n            max: 100\n        }, lBounds = {\n            min: 0,\n            max: 100\n        }, sRange = fixRange({\n            min: hsl.s - sOffset,\n            max: hsl.s + sOffset\n        }, sBounds.min, sBounds.max), lRange = fixRange({\n            min: hsl.l - lOffset,\n            max: hsl.l + lOffset\n        }, lBounds.min, lBounds.max);\n        return {\n            paint: {\n                fill: {\n                    color: {\n                        value: {\n                            h: hsl.h,\n                            s: sRange,\n                            l: lRange\n                        }\n                    },\n                    enable: true\n                },\n                stroke: {\n                    width: 0\n                }\n            },\n            number: {\n                value: 0\n            },\n            opacity: {\n                value: {\n                    min: 0.1,\n                    max: 1\n                },\n                animation: {\n                    enable: true,\n                    speed: 0.7,\n                    sync: false,\n                    startValue: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.StartValueType.max,\n                    destroy: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.DestroyType.min\n                }\n            },\n            shape: {\n                type: \"circle\"\n            },\n            effect: {\n                type: \"trail\",\n                options: {\n                    trail: {\n                        length: {\n                            min: 5,\n                            max: 10\n                        }\n                    }\n                }\n            },\n            size: {\n                value: {\n                    min: 1,\n                    max: 2\n                },\n                animation: {\n                    enable: true,\n                    speed: 5,\n                    count: 1,\n                    sync: false,\n                    startValue: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.StartValueType.min,\n                    destroy: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.DestroyType.none\n                }\n            },\n            life: {\n                count: 1,\n                duration: {\n                    value: {\n                        min: 1,\n                        max: 2\n                    }\n                }\n            },\n            move: {\n                decay: {\n                    min: 0.075,\n                    max: 0.1\n                },\n                enable: true,\n                gravity: {\n                    enable: true,\n                    inverse: false,\n                    acceleration: 5\n                },\n                speed: {\n                    min: 5,\n                    max: 15\n                },\n                direction: \"none\",\n                outModes: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OutMode.destroy\n            }\n        };\n    }).filter((t)=>t !== undefined);\n    return {\n        detectRetina: true,\n        background: {\n            color: \"#000\"\n        },\n        fpsLimit: 120,\n        emitters: {\n            direction: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.MoveDirection.top,\n            rate: {\n                delay: 0.3,\n                quantity: 1\n            },\n            size: {\n                width: 100,\n                height: 0\n            },\n            position: {\n                y: 100,\n                x: 50\n            }\n        },\n        particles: {\n            number: {\n                value: 0\n            },\n            destroy: {\n                mode: \"split\",\n                bounds: {\n                    top: {\n                        min: 15,\n                        max: 35\n                    }\n                },\n                split: {\n                    sizeOffset: false,\n                    count: 1,\n                    factor: {\n                        value: 0.333333\n                    },\n                    rate: {\n                        value: {\n                            min: 75,\n                            max: 150\n                        }\n                    },\n                    particles: fireworksOptions\n                }\n            },\n            life: {\n                count: 1\n            },\n            shape: {\n                type: \"circle\"\n            },\n            effect: {\n                type: \"trail\",\n                options: {\n                    trail: {\n                        length: {\n                            min: 5,\n                            max: 15\n                        },\n                        minWidth: 1,\n                        maxWidth: 1\n                    }\n                }\n            },\n            size: {\n                value: 1\n            },\n            paint: {\n                stroke: {\n                    color: {\n                        value: \"#ffffff\"\n                    },\n                    width: 1\n                },\n                fill: {\n                    enable: false\n                }\n            },\n            move: {\n                enable: true,\n                gravity: {\n                    acceleration: 15,\n                    enable: true,\n                    inverse: true,\n                    maxSpeed: 100\n                },\n                speed: {\n                    min: 10,\n                    max: 20\n                },\n                outModes: {\n                    default: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OutMode.destroy,\n                    top: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OutMode.none\n                }\n            }\n        },\n        sounds: {\n            enable: true,\n            events: [\n                {\n                    event: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.EventType.particleRemoved,\n                    filter: explodeSoundCheck,\n                    audio: [\n                        \"https://particles.js.org/audio/explosion0.mp3\",\n                        \"https://particles.js.org/audio/explosion1.mp3\",\n                        \"https://particles.js.org/audio/explosion2.mp3\"\n                    ]\n                }\n            ],\n            volume: 50\n        }\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/preset-fireworks/./dist/browser/options.js?\n}");
 
 /***/ }
 

package/esm/index.js

@@ -1,10 +1,9 @@
 const presetName = "fireworks";
 export async function loadFireworksPreset(engine) {
     await engine.pluginManager.register(async (e) => {
-        const [{ loadBasic }, { loadEmittersPlugin }, { loadInteractivityPlugin }, { loadTrailEffect }, { loadEmittersShapeSquare }, { loadSoundsPlugin }, { loadLineShape }, { loadRotateUpdater }, { loadDestroyUpdater }, { loadLifeUpdater }, { loadStrokeColorUpdater }, { initOptions },] = await Promise.all([
+        const [{ loadBasic }, { loadEmittersPluginSimple }, { loadTrailEffect }, { loadEmittersShapeSquare }, { loadSoundsPlugin }, { loadLineShape }, { loadRotateUpdater }, { loadDestroyUpdater }, { loadLifeUpdater }, { initOptions },] = await Promise.all([
             import("@tsparticles/basic"),
-            import("@tsparticles/plugin-emitters"),
-            import("@tsparticles/plugin-interactivity"),
+            import("@tsparticles/plugin-emitters/plugin"),
             import("@tsparticles/effect-trail"),
             import("@tsparticles/plugin-emitters-shape-square"),
             import("@tsparticles/plugin-sounds"),
@@ -12,24 +11,21 @@ export async function loadFireworksPreset(engine) {
             import("@tsparticles/updater-rotate"),
             import("@tsparticles/updater-destroy"),
             import("@tsparticles/updater-life"),
-            import("@tsparticles/updater-stroke-color"),
             import("./options.js"),
-        ]);
+        ]), loadEmittersForFireworks = async (e) => {
+            await loadEmittersPluginSimple(e);
+            await loadEmittersShapeSquare(e);
+        };
         await Promise.all([
             loadBasic(e),
-            (async () => {
-                await loadInteractivityPlugin(e);
-                await loadEmittersPlugin(e);
-            })(),
+            loadEmittersForFireworks(e),
             loadTrailEffect(e),
             loadSoundsPlugin(e),
             loadLineShape(e),
             loadRotateUpdater(e),
             loadDestroyUpdater(e),
             loadLifeUpdater(e),
-            loadStrokeColorUpdater(e),
         ]);
-        await loadEmittersShapeSquare(e);
         e.pluginManager.addPreset(presetName, initOptions(), false);
     });
 }

package/esm/options.js

@@ -44,41 +44,12 @@ export function initOptions() {
         };
     }, fireworksOptions = [
         "#FF0000",
-        "#FF2A00",
-        "#FF5500",
         "#FF8000",
-        "#FFAA00",
-        "#FFD400",
         "#FFFF00",
-        "#D4FF00",
-        "#AAFF00",
-        "#80FF00",
-        "#55FF00",
-        "#2AFF00",
         "#00FF00",
-        "#00FF2A",
-        "#00FF55",
-        "#00FF80",
-        "#00FFAA",
-        "#00FFD4",
         "#00FFFF",
-        "#00D4FF",
-        "#00AAFF",
-        "#0080FF",
-        "#0055FF",
-        "#002AFF",
         "#0000FF",
-        "#2A00FF",
-        "#5500FF",
-        "#8000FF",
-        "#AA00FF",
-        "#D400FF",
         "#FF00FF",
-        "#FF00D4",
-        "#FF00AA",
-        "#FF0080",
-        "#FF0055",
-        "#FF002A",
     ]
         .map(color => {
         const rgb = hexToRgba(color);
@@ -93,18 +64,20 @@ export function initOptions() {
             max: 100,
         }, sRange = fixRange({ min: hsl.s - sOffset, max: hsl.s + sOffset }, sBounds.min, sBounds.max), lRange = fixRange({ min: hsl.l - lOffset, max: hsl.l + lOffset }, lBounds.min, lBounds.max);
         return {
-            fill: {
-                color: {
-                    value: {
-                        h: hsl.h,
-                        s: sRange,
-                        l: lRange,
+            paint: {
+                fill: {
+                    color: {
+                        value: {
+                            h: hsl.h,
+                            s: sRange,
+                            l: lRange,
+                        },
                     },
+                    enable: true,
+                },
+                stroke: {
+                    width: 0,
                 },
-                enable: true,
-            },
-            stroke: {
-                width: 0,
             },
             number: {
                 value: 0,
@@ -235,14 +208,16 @@ export function initOptions() {
             size: {
                 value: 1,
             },
-            stroke: {
-                color: {
-                    value: "#ffffff",
+            paint: {
+                stroke: {
+                    color: {
+                        value: "#ffffff",
+                    },
+                    width: 1,
+                },
+                fill: {
+                    enable: false,
                 },
-                width: 1,
-            },
-            fill: {
-                enable: false,
             },
             move: {
                 enable: true,

package/node_modules_pnpm_tsparticles_basic_4_0_0-beta_11_node_modules_tsparticles_basic_browser_index_js.js

@@ -0,0 +1,30 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v4.0.0-beta.0
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_preset_fireworks"] = this["webpackChunk_tsparticles_preset_fireworks"] || []).push([["node_modules_pnpm_tsparticles_basic_4_0_0-beta_11_node_modules_tsparticles_basic_browser_index_js"],{
+
+/***/ "../../node_modules/.pnpm/@tsparticles+basic@4.0.0-beta.11/node_modules/@tsparticles/basic/browser/index.js"
+/*!******************************************************************************************************************!*\
+  !*** ../../node_modules/.pnpm/@tsparticles+basic@4.0.0-beta.11/node_modules/@tsparticles/basic/browser/index.js ***!
+  \******************************************************************************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadBasic: () => (/* binding */ loadBasic)\n/* harmony export */ });\nasync function loadBasic(engine) {\n    engine.checkVersion(\"4.0.0-beta.11\");\n    await engine.pluginManager.register(async (e) => {\n        const [{ loadHexColorPlugin }, { loadHslColorPlugin }, { loadRgbColorPlugin }, { loadMovePlugin }, { loadCircleShape }, { loadPaintUpdater }, { loadOpacityUpdater }, { loadOutModesUpdater }, { loadSizeUpdater },] = await Promise.all([\n            __webpack_require__.e(/*! import() */ \"node_modules_pnpm_tsparticles_plugin-hex-color_4_0_0-beta_11__tsparticles_engine_4_0_0-beta_1-b0d0ee\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/plugin-hex-color */ \"../../node_modules/.pnpm/@tsparticles+plugin-hex-color@4.0.0-beta.11_@tsparticles+engine@4.0.0-beta.11/node_modules/@tsparticles/plugin-hex-color/browser/index.js\")),\n            __webpack_require__.e(/*! import() */ \"node_modules_pnpm_tsparticles_plugin-hsl-color_4_0_0-beta_11__tsparticles_engine_4_0_0-beta_1-a6d106\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/plugin-hsl-color */ \"../../node_modules/.pnpm/@tsparticles+plugin-hsl-color@4.0.0-beta.11_@tsparticles+engine@4.0.0-beta.11/node_modules/@tsparticles/plugin-hsl-color/browser/index.js\")),\n            __webpack_require__.e(/*! import() */ \"node_modules_pnpm_tsparticles_plugin-rgb-color_4_0_0-beta_11__tsparticles_engine_4_0_0-beta_1-f22022\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/plugin-rgb-color */ \"../../node_modules/.pnpm/@tsparticles+plugin-rgb-color@4.0.0-beta.11_@tsparticles+engine@4.0.0-beta.11/node_modules/@tsparticles/plugin-rgb-color/browser/index.js\")),\n            __webpack_require__.e(/*! import() */ \"node_modules_pnpm_tsparticles_plugin-move_4_0_0-beta_11__tsparticles_engine_4_0_0-beta_11_nod-e1bc4b\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/plugin-move */ \"../../node_modules/.pnpm/@tsparticles+plugin-move@4.0.0-beta.11_@tsparticles+engine@4.0.0-beta.11/node_modules/@tsparticles/plugin-move/browser/index.js\")),\n            __webpack_require__.e(/*! import() */ \"node_modules_pnpm_tsparticles_shape-circle_4_0_0-beta_11__tsparticles_engine_4_0_0-beta_11_no-b06fc7\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/shape-circle */ \"../../node_modules/.pnpm/@tsparticles+shape-circle@4.0.0-beta.11_@tsparticles+engine@4.0.0-beta.11/node_modules/@tsparticles/shape-circle/browser/index.js\")),\n            __webpack_require__.e(/*! import() */ \"node_modules_pnpm_tsparticles_updater-paint_4_0_0-beta_11__tsparticles_engine_4_0_0-beta_11_n-b1f330\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/updater-paint */ \"../../node_modules/.pnpm/@tsparticles+updater-paint@4.0.0-beta.11_@tsparticles+engine@4.0.0-beta.11/node_modules/@tsparticles/updater-paint/browser/index.js\")),\n            __webpack_require__.e(/*! import() */ \"node_modules_pnpm_tsparticles_updater-opacity_4_0_0-beta_11__tsparticles_engine_4_0_0-beta_11-da77ce\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/updater-opacity */ \"../../node_modules/.pnpm/@tsparticles+updater-opacity@4.0.0-beta.11_@tsparticles+engine@4.0.0-beta.11/node_modules/@tsparticles/updater-opacity/browser/index.js\")),\n            __webpack_require__.e(/*! import() */ \"node_modules_pnpm_tsparticles_updater-out-modes_4_0_0-beta_11__tsparticles_engine_4_0_0-beta_-df7144\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/updater-out-modes */ \"../../node_modules/.pnpm/@tsparticles+updater-out-modes@4.0.0-beta.11_@tsparticles+engine@4.0.0-beta.11/node_modules/@tsparticles/updater-out-modes/browser/index.js\")),\n            __webpack_require__.e(/*! import() */ \"node_modules_pnpm_tsparticles_updater-size_4_0_0-beta_11__tsparticles_engine_4_0_0-beta_11_no-d2508a\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/updater-size */ \"../../node_modules/.pnpm/@tsparticles+updater-size@4.0.0-beta.11_@tsparticles+engine@4.0.0-beta.11/node_modules/@tsparticles/updater-size/browser/index.js\")),\n        ]);\n        await Promise.all([\n            loadHexColorPlugin(e),\n            loadHslColorPlugin(e),\n            loadRgbColorPlugin(e),\n            loadMovePlugin(e),\n            loadCircleShape(e),\n            loadPaintUpdater(e),\n            loadOpacityUpdater(e),\n            loadOutModesUpdater(e),\n            loadSizeUpdater(e),\n        ]);\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/preset-fireworks/../../node_modules/.pnpm/@tsparticles+basic@4.0.0-beta.11/node_modules/@tsparticles/basic/browser/index.js?\n}");
+
+/***/ }
+
+}]);

package/{node_modules_pnpm_tsparticles_effect-trail_4_0_0-beta_1_node_modules_tsparticles_effect-trail-8ed413.js → node_modules_pnpm_tsparticles_effect-trail_4_0_0-beta_11__tsparticles_engine_4_0_0-beta_11_no-8a5947.js}

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.5
+ * v4.0.0-beta.0
  */
 "use strict";
 /*
@@ -15,15 +15,15 @@
  * or disable the default devtool with "devtool: false".
  * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
  */
-(this["webpackChunk_tsparticles_preset_fireworks"] = this["webpackChunk_tsparticles_preset_fireworks"] || []).push([["node_modules_pnpm_tsparticles_effect-trail_4_0_0-beta_1_node_modules_tsparticles_effect-trail-8ed413"],{
+(this["webpackChunk_tsparticles_preset_fireworks"] = this["webpackChunk_tsparticles_preset_fireworks"] || []).push([["node_modules_pnpm_tsparticles_effect-trail_4_0_0-beta_11__tsparticles_engine_4_0_0-beta_11_no-8a5947"],{
 
-/***/ "../../node_modules/.pnpm/@tsparticles+effect-trail@4.0.0-beta.1/node_modules/@tsparticles/effect-trail/browser/index.js"
-/*!*******************************************************************************************************************************!*\
-  !*** ../../node_modules/.pnpm/@tsparticles+effect-trail@4.0.0-beta.1/node_modules/@tsparticles/effect-trail/browser/index.js ***!
-  \*******************************************************************************************************************************/
+/***/ "../../node_modules/.pnpm/@tsparticles+effect-trail@4.0.0-beta.11_@tsparticles+engine@4.0.0-beta.11/node_modules/@tsparticles/effect-trail/browser/index.js"
+/*!******************************************************************************************************************************************************************!*\
+  !*** ../../node_modules/.pnpm/@tsparticles+effect-trail@4.0.0-beta.11_@tsparticles+engine@4.0.0-beta.11/node_modules/@tsparticles/effect-trail/browser/index.js ***!
+  \******************************************************************************************************************************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadTrailEffect: () => (/* binding */ loadTrailEffect)\n/* harmony export */ });\nasync function loadTrailEffect(engine) {\n    engine.checkVersion(\"4.0.0-beta.1\");\n    await engine.pluginManager.register(e => {\n        e.pluginManager.addEffect(\"trail\", async (container) => {\n            const { TrailDrawer } = await __webpack_require__.e(/*! import() */ \"node_modules_pnpm_tsparticles_effect-trail_4_0_0-beta_1_node_modules_tsparticles_effect-trail-aabdff\").then(__webpack_require__.bind(__webpack_require__, /*! ./TrailDrawer.js */ \"../../node_modules/.pnpm/@tsparticles+effect-trail@4.0.0-beta.1/node_modules/@tsparticles/effect-trail/browser/TrailDrawer.js\"));\n            return new TrailDrawer(container);\n        });\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/preset-fireworks/../../node_modules/.pnpm/@tsparticles+effect-trail@4.0.0-beta.1/node_modules/@tsparticles/effect-trail/browser/index.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadTrailEffect: () => (/* binding */ loadTrailEffect)\n/* harmony export */ });\nasync function loadTrailEffect(engine) {\n    engine.checkVersion(\"4.0.0-beta.11\");\n    await engine.pluginManager.register(e => {\n        e.pluginManager.addEffect(\"trail\", async (container) => {\n            const { TrailDrawer } = await __webpack_require__.e(/*! import() */ \"node_modules_pnpm_tsparticles_effect-trail_4_0_0-beta_11__tsparticles_engine_4_0_0-beta_11_no-cb9e7e\").then(__webpack_require__.bind(__webpack_require__, /*! ./TrailDrawer.js */ \"../../node_modules/.pnpm/@tsparticles+effect-trail@4.0.0-beta.11_@tsparticles+engine@4.0.0-beta.11/node_modules/@tsparticles/effect-trail/browser/TrailDrawer.js\"));\n            return new TrailDrawer(container);\n        });\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/preset-fireworks/../../node_modules/.pnpm/@tsparticles+effect-trail@4.0.0-beta.11_@tsparticles+engine@4.0.0-beta.11/node_modules/@tsparticles/effect-trail/browser/index.js?\n}");
 
 /***/ }