@tsparticles/configs 3.0.2 → 3.1.0

package/umd/g/gradients.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "gradients",
         name: "Gradients",
         particles: {
             number: {
@@ -86,6 +87,75 @@
                         },
                     ],
                 },
+                {
+                    type: "radial",
+                    colors: [
+                        {
+                            stop: 0.25,
+                            value: {
+                                value: "#ff0000",
+                                animation: {
+                                    enable: true,
+                                    speed: 60,
+                                    sync: true,
+                                },
+                            },
+                        },
+                        {
+                            stop: 0.5,
+                            value: {
+                                value: "#00ff00",
+                                animation: {
+                                    enable: true,
+                                    speed: 60,
+                                    sync: true,
+                                },
+                            },
+                        },
+                        {
+                            stop: 0.75,
+                            value: {
+                                value: "#0000ff",
+                                animation: {
+                                    enable: true,
+                                    speed: 60,
+                                    sync: true,
+                                },
+                            },
+                        },
+                        {
+                            stop: 1,
+                            value: "#000000",
+                            opacity: 0,
+                        },
+                    ],
+                },
+                {
+                    type: "linear",
+                    angle: {
+                        value: 0,
+                        direction: "random",
+                        animation: {
+                            enable: true,
+                            speed: 60,
+                            sync: true,
+                        },
+                    },
+                    colors: [
+                        {
+                            stop: 0,
+                            value: "#00ffff",
+                        },
+                        {
+                            stop: 0.5,
+                            value: "#ff00ff",
+                        },
+                        {
+                            stop: 1,
+                            value: "#ffff00",
+                        },
+                    ],
+                },
             ],
             shape: {
                 type: "circle",

package/umd/g/gravity.js

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

package/umd/g/growing.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "growing",
         name: "Growing",
         emitters: {
             direction: "top",

package/umd/h/hexagonPath.js

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

package/umd/h/hollowknight.js

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

package/umd/h/hyperspace.js

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

package/umd/i/imageMask.js

@@ -9,7 +9,8 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    const options = {
+    const minFilterValue = 30, minFilterAlpha = 0, options = {
+        key: "imageMask",
         name: "Image Mask",
         smooth: true,
         interactivity: {
@@ -57,7 +58,9 @@
             enable: true,
             scale: 5,
             pixels: {
-                filter: "pixelFilter",
+                filter: (pixel) => pixel.r < minFilterValue && pixel.g < minFilterValue && pixel.b < minFilterValue
+                    ? false
+                    : pixel.a > minFilterAlpha,
             },
             image: {
                 src: "https://particles.js.org/images/amongus_cyan.png",

package/umd/i/images.js

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

package/umd/i/imagesDirections.js

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

package/umd/i/infection.js

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

package/umd/l/life.js

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

package/umd/l/lightHover.js

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

package/umd/l/linkTriangles.js

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

package/umd/l/localPolygonMask.js

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

package/umd/m/manual.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "manual",
         name: "Manual Particles",
         manualParticles: [
             {

package/umd/m/motionDisable.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "motionDisable",
         name: "Motion Disable",
         motion: {
             disable: true,

package/umd/m/motionReduce.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "motionReduce",
         name: "Motion Reduce",
         motion: {
             disable: false,

package/umd/m/mouseAttract.js

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

package/umd/m/mouseBounce.js

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

package/umd/m/mouseFollow.js

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

package/umd/m/mouseTrail.js

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

package/umd/m/mouseTrailNoise.js

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

package/umd/m/moveAngle.js

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

package/umd/m/moveDistance.js

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

package/umd/m/moveInside.js

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

package/umd/m/moveOutside.js

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

package/umd/m/multipleClickEmitters.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "multipleClickEmitters",
         name: "Multiple Click Emitters",
         background: {
             color: "#f00",

package/umd/m/multiplePolygonMasks.js

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

package/umd/n/nasa.js

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

package/umd/n/noClear.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "noClear",
         name: "No Clear",
         clear: false,
         interactivity: {

package/umd/n/noConfig.js

@@ -10,6 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const options = {
+        key: "noConfig",
         name: "No Config",
     };
     exports.default = options;

package/umd/n/noisePlanes.js

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

package/umd/n/nyancat.js

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

package/umd/n/nyancat2.js

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

package/umd/o/orbit.js

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

package/umd/p/index.js

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./parallax.js", "./pathPolygonMask.js", "./pathSvg.js", "./planes.js", "./plasma.js", "./polygonMask.js", "./polygons.js", "./pop.js"], factory);
+        define(["require", "exports", "./parallax.js", "./pathPolygonMask.js", "./pathSvg.js", "./pathZigZag.js", "./planes.js", "./plasma.js", "./poisson.js", "./polygonMask.js", "./polygons.js", "./pop.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -15,8 +15,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     const parallax_js_1 = __importDefault(require("./parallax.js"));
     const pathPolygonMask_js_1 = __importDefault(require("./pathPolygonMask.js"));
     const pathSvg_js_1 = __importDefault(require("./pathSvg.js"));
+    const pathZigZag_js_1 = __importDefault(require("./pathZigZag.js"));
     const planes_js_1 = __importDefault(require("./planes.js"));
     const plasma_js_1 = __importDefault(require("./plasma.js"));
+    const poisson_js_1 = __importDefault(require("./poisson.js"));
     const polygonMask_js_1 = __importDefault(require("./polygonMask.js"));
     const polygons_js_1 = __importDefault(require("./polygons.js"));
     const pop_js_1 = __importDefault(require("./pop.js"));
@@ -24,8 +26,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
         parallax: parallax_js_1.default,
         pathPolygonMask: pathPolygonMask_js_1.default,
         pathSvg: pathSvg_js_1.default,
+        pathZigZag: pathZigZag_js_1.default,
         planes: planes_js_1.default,
         plasma: plasma_js_1.default,
+        poisson: poisson_js_1.default,
         polygonMask: polygonMask_js_1.default,
         polygons: polygons_js_1.default,
         pop: pop_js_1.default,

package/umd/p/parallax.js

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

package/umd/p/pathPolygonMask.js

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

package/umd/p/pathSvg.js

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

package/umd/p/pathZigZag.js

@@ -0,0 +1,57 @@
+(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: "pathZigZag",
+        name: "Path Zig Zag",
+        particles: {
+            color: {
+                value: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],
+            },
+            move: {
+                enable: true,
+                outModes: "out",
+                speed: { min: 1, max: 3 },
+                path: {
+                    enable: true,
+                    options: {
+                        waveLength: { min: 3, max: 7 },
+                        waveHeight: { min: 1, max: 5 },
+                    },
+                    generator: "zigZagPathGenerator",
+                },
+                trail: {
+                    enable: true,
+                    length: 20,
+                    fill: {
+                        color: "#000000",
+                    },
+                },
+            },
+            number: {
+                value: 80,
+            },
+            opacity: {
+                value: 1,
+            },
+            shape: {
+                type: "circle",
+            },
+            size: {
+                value: 3,
+            },
+        },
+        background: {
+            color: "#000000",
+        },
+    };
+    exports.default = options;
+});

package/umd/p/planes.js

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

package/umd/p/plasma.js

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

package/umd/p/poisson.js

@@ -0,0 +1,51 @@
+(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: "poisson",
+        name: "Poisson",
+        particles: {
+            number: {
+                value: 100,
+            },
+            color: {
+                value: "#ffffff",
+            },
+            links: {
+                enable: true,
+                distance: 200,
+            },
+            shape: {
+                type: "circle",
+            },
+            opacity: {
+                value: 1,
+            },
+            size: {
+                value: {
+                    min: 4,
+                    max: 6,
+                },
+            },
+            move: {
+                enable: true,
+                speed: 2,
+            },
+        },
+        background: {
+            color: "#000000",
+        },
+        poisson: {
+            enable: true,
+        },
+    };
+    exports.default = options;
+});

package/umd/p/polygonMask.js

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

package/umd/p/polygons.js

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

package/umd/p/pop.js

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

package/umd/r/random.js

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

package/umd/r/reactBubbles.js

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

package/umd/r/reactDefaults.js

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

package/umd/r/reactMultipleImages.js

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