@tsparticles/configs 3.0.3 → 3.2.0

package/types/b/index.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     backgroundMask: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
+    backgroundMaskImage: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     basic: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     big: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     blackHole: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;

package/types/e/emitterSpawnColor.d.ts

@@ -0,0 +1,3 @@
+import { type ISourceOptions } from "@tsparticles/engine";
+declare const options: ISourceOptions;
+export default options;

package/types/e/index.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
     emitterImages: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     emitterPaths: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     emitterShapes: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
+    emitterSpawnColor: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     emitterTextShape: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     emitterTextStrokeShape: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
 };

package/types/f/fireworks2.d.ts

@@ -1,3 +1,3 @@
-import type { ISourceOptions } from "@tsparticles/engine";
+import { type ISourceOptions } from "@tsparticles/engine";
 declare const options: ISourceOptions;
 export default options;

package/types/g/gradients.d.ts

@@ -1,3 +1,3 @@
-import type { ISourceOptions } from "@tsparticles/engine";
+import { type ISourceOptions } from "@tsparticles/engine";
 declare const options: ISourceOptions;
 export default options;

package/types/index.d.ts

@@ -60,8 +60,10 @@ declare const configs: {
     parallax: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     pathPolygonMask: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     pathSvg: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
+    pathZigZag: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     planes: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     plasma: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
+    poisson: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     polygonMask: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     polygons: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     pop: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
@@ -78,6 +80,8 @@ declare const configs: {
     mouseAttract: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     mouseBounce: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     mouseFollow: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
+    mouseParticle: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
+    mouseParticle2: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     mouseTrail: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     mouseTrailNoise: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     moveAngle: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
@@ -115,6 +119,7 @@ declare const configs: {
     emitterImages: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     emitterPaths: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     emitterShapes: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
+    emitterSpawnColor: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     emitterTextShape: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     emitterTextStrokeShape: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     dataImages: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
@@ -136,6 +141,7 @@ declare const configs: {
     connect: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     curlNoise: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     backgroundMask: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
+    backgroundMaskImage: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     basic: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     big: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     blackHole: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;

package/types/m/index.d.ts

@@ -5,6 +5,8 @@ declare const _default: {
     mouseAttract: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     mouseBounce: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     mouseFollow: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
+    mouseParticle: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
+    mouseParticle2: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     mouseTrail: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     mouseTrailNoise: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     moveAngle: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;

package/types/m/mouseParticle.d.ts

@@ -0,0 +1,3 @@
+import type { ISourceOptions } from "@tsparticles/engine";
+declare const options: ISourceOptions;
+export default options;

package/types/m/mouseParticle2.d.ts

@@ -0,0 +1,3 @@
+import type { ISourceOptions } from "@tsparticles/engine";
+declare const options: ISourceOptions;
+export default options;

package/types/p/index.d.ts

@@ -2,8 +2,10 @@ declare const _default: {
     parallax: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     pathPolygonMask: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     pathSvg: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
+    pathZigZag: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     planes: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     plasma: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
+    poisson: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     polygonMask: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     polygons: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;
     pop: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions>;

package/types/p/pathZigZag.d.ts

@@ -0,0 +1,3 @@
+import type { ISourceOptions } from "@tsparticles/engine";
+declare const options: ISourceOptions;
+export default options;

package/types/p/poisson.d.ts

@@ -0,0 +1,3 @@
+import type { ISourceOptions } from "@tsparticles/engine";
+declare const options: ISourceOptions;
+export default options;

package/umd/a/absorbers.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "absorbers",
         name: "Absorbers",
         particles: {
             number: {

package/umd/a/amongUs.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "amongUs",
         name: "Among Us",
         particles: {
             groups: {

package/umd/b/backgroundMask.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "backgroundMask",
         name: "Background Mask",
         particles: {
             number: {
@@ -72,10 +73,12 @@
         backgroundMask: {
             enable: true,
             cover: {
-                value: {
-                    r: 255,
-                    g: 255,
-                    b: 255,
+                color: {
+                    value: {
+                        r: 255,
+                        g: 255,
+                        b: 255,
+                    },
                 },
             },
         },

package/umd/b/backgroundMaskImage.js

@@ -0,0 +1,82 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    const options = {
+        key: "backgroundMaskImage",
+        name: "Background Mask Image",
+        particles: {
+            number: {
+                value: 100,
+            },
+            color: {
+                value: "#ffffff",
+            },
+            shape: {
+                type: "circle",
+            },
+            opacity: {
+                value: 1,
+            },
+            size: {
+                value: {
+                    min: 10,
+                    max: 50,
+                },
+                animation: {
+                    enable: true,
+                    speed: 25,
+                },
+            },
+            move: {
+                enable: true,
+                speed: 2,
+                direction: "none",
+            },
+        },
+        interactivity: {
+            events: {
+                onHover: {
+                    enable: true,
+                    mode: "bubble",
+                },
+                onClick: {
+                    enable: true,
+                    mode: "push",
+                },
+            },
+            modes: {
+                bubble: {
+                    distance: 400,
+                    size: 100,
+                    duration: 2,
+                    opacity: 1,
+                },
+                push: {
+                    quantity: 4,
+                },
+            },
+        },
+        backgroundMask: {
+            enable: true,
+            cover: {
+                image: "https://particles.js.org/images/background2.jpg",
+            },
+        },
+        background: {
+            color: "#ffffff",
+            image: "url('https://particles.js.org/images/background3.jpg')",
+            position: "50% 50%",
+            repeat: "no-repeat",
+            size: "cover",
+        },
+    };
+    exports.default = options;
+});

package/umd/b/basic.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "basic",
         name: "Basic",
         particles: {
             number: {

package/umd/b/big.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "big",
         name: "Big Particles",
         particles: {
             number: {

package/umd/b/blackHole.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "blackHole",
         name: "Black Hole",
         particles: {
             number: {

package/umd/b/bubble.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "bubble",
         name: "Bubble",
         particles: {
             number: {

package/umd/b/index.js

@@ -7,18 +7,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./backgroundMask.js", "./basic.js", "./big.js", "./blackHole.js", "./bubble.js"], factory);
+        define(["require", "exports", "./backgroundMask.js", "./backgroundMaskImage.js", "./basic.js", "./big.js", "./blackHole.js", "./bubble.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const backgroundMask_js_1 = __importDefault(require("./backgroundMask.js"));
+    const backgroundMaskImage_js_1 = __importDefault(require("./backgroundMaskImage.js"));
     const basic_js_1 = __importDefault(require("./basic.js"));
     const big_js_1 = __importDefault(require("./big.js"));
     const blackHole_js_1 = __importDefault(require("./blackHole.js"));
     const bubble_js_1 = __importDefault(require("./bubble.js"));
     exports.default = {
         backgroundMask: backgroundMask_js_1.default,
+        backgroundMaskImage: backgroundMaskImage_js_1.default,
         basic: basic_js_1.default,
         big: big_js_1.default,
         blackHole: blackHole_js_1.default,

package/umd/c/cards.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "cards",
         name: "Cards",
         particles: {
             number: {

package/umd/c/chars.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "chars",
         name: "Chars",
         particles: {
             number: {

package/umd/c/clickConfetti.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "clickConfetti",
         name: "Click Confetti",
         fpsLimit: 60,
         interactivity: {

package/umd/c/clickPause.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "clickPause",
         name: "Click Pause",
         particles: {
             number: {

package/umd/c/collisionsAbsorb.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "collisionsAbsorb",
         name: "Collisions Absorb",
         particles: {
             number: {

package/umd/c/collisionsBounce.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "collisionsBounce",
         name: "Collisions Bounce",
         particles: {
             number: {

package/umd/c/collisionsDestroy.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "collisionsDestroy",
         name: "Collisions Destroy",
         particles: {
             number: {

package/umd/c/colorAnimation.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "colorAnimation",
         name: "Color Animation",
         particles: {
             number: {
@@ -21,10 +22,21 @@
             color: {
                 value: "#ff0000",
                 animation: {
-                    count: 1,
-                    enable: true,
-                    speed: 60,
-                    sync: true,
+                    h: {
+                        enable: true,
+                        speed: { min: 30, max: 60 },
+                        sync: true,
+                    },
+                    s: {
+                        enable: true,
+                        speed: { min: 5, max: 10 },
+                        sync: true,
+                    },
+                    l: {
+                        enable: true,
+                        speed: { min: 5, max: 10 },
+                        sync: true,
+                    },
                 },
             },
             stroke: {
@@ -32,10 +44,21 @@
                 color: {
                     value: "#0000ff",
                     animation: {
-                        count: 1,
-                        enable: true,
-                        speed: 60,
-                        sync: true,
+                        h: {
+                            enable: true,
+                            speed: { min: 30, max: 60 },
+                            sync: true,
+                        },
+                        s: {
+                            enable: true,
+                            speed: { min: 5, max: 10 },
+                            sync: true,
+                        },
+                        l: {
+                            enable: true,
+                            speed: { min: 5, max: 10 },
+                            sync: true,
+                        },
                     },
                 },
             },

package/umd/c/connect.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "connect",
         name: "Connect",
         interactivity: {
             events: {

package/umd/c/curlNoise.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "curlNoise",
         name: "Curl Noise",
         particles: {
             number: {

package/umd/d/dataImages.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "dataImages",
         name: "Data URI Images",
         interactivity: {
             events: {

package/umd/d/delay.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "delay",
         name: "Delay",
         delay: 5,
         particles: {

package/umd/d/delayColor.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "delayColor",
         name: "Delay Color",
         background: {
             color: {

package/umd/d/delayOpacity.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "delayOpacity",
         name: "Delay Opacity",
         background: {
             color: {

package/umd/d/delaySize.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "delaySize",
         name: "Delay Size",
         background: {
             color: {

package/umd/d/delayStrokeColor.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "delayStrokeColor",
         name: "Delay Stroke Color",
         background: {
             color: {

package/umd/d/destroy.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "destroy",
         name: "Destroy",
         particles: {
             number: {

package/umd/d/disappearing.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "disappearing",
         name: "Disappearing",
         background: {
             color: {

package/umd/d/divEvents.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "divEvents",
         name: "Div Events",
         background: {
             color: "#0d47a1",

package/umd/e/effectBubble.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "effectBubble",
         name: "Effect Bubble",
         particles: {
             number: {

package/umd/e/effectTrail.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "effectTrail",
         name: "Effect Trail",
         particles: {
             number: {

package/umd/e/emitter.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "emitter",
         name: "Emitter",
         particles: {
             number: {

package/umd/e/emitterAbsorber.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "emitterAbsorber",
         name: "Emitter and Absorber",
         particles: {
             number: {

package/umd/e/emitterAngled.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "emitterAngled",
         name: "Emitter Angled",
         particles: {
             number: {

package/umd/e/emitterImageShape.js

@@ -9,11 +9,10 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    const rate = {
+    const minFilterValue = 30, minFilterAlpha = 0, rate = {
         delay: 0.1,
         quantity: 100,
-    };
-    const generateEmitter = (shape, options, fill, position) => {
+    }, generateEmitter = (shape, options, fill, position) => {
         return {
             shape: {
                 replace: {
@@ -33,8 +32,8 @@
             rate,
             fill,
         };
-    };
-    const options = {
+    }, options = {
+        key: "emitterImageShape",
         name: "Emitter Image Shape",
         particles: {
             number: {
@@ -94,7 +93,9 @@
             generateEmitter("canvas", {
                 scale: 5,
                 pixels: {
-                    filter: "pixelFilter",
+                    filter: (pixel) => pixel.r < minFilterValue && pixel.g < minFilterValue && pixel.b < minFilterValue
+                        ? false
+                        : pixel.a > minFilterAlpha,
                     offset: 4,
                 },
                 image: {

package/umd/e/emitterImages.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "emitterImages",
         name: "Emitter Images",
         particles: {
             move: {

package/umd/e/emitterPaths.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "emitterPaths",
         name: "Emitter Paths",
         particles: {
             number: {

package/umd/e/emitterShapes.js

@@ -49,6 +49,7 @@
         { x: 50, y: 25 },
     ];
     const options = {
+        key: "emitterShapes",
         name: "Emitter Shapes",
         particles: {
             number: {