@tsparticles/configs 3.0.0-beta.3 → 3.0.0-beta.4

package/cjs/e/emitterShapes.js

@@ -1,5 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const rate = {
+    delay: 0.1,
+    quantity: 3,
+};
+const generateEmitter = (shape, options, fill, position) => {
+    return {
+        shape: {
+            type: shape,
+            options,
+        },
+        position: position,
+        size: {
+            width: 200,
+            height: 200,
+            mode: "precise",
+        },
+        life: {
+            duration: 10,
+            delay: 0.5,
+            count: 1,
+        },
+        rate,
+        fill,
+    };
+};
+const path = [
+    { x: 0, y: 0 },
+    { x: 0, y: 50 },
+    { x: 25, y: 50 },
+    { x: 0, y: 100 },
+    { x: 50, y: 100 },
+    { x: 50, y: 75 },
+    { x: 100, y: 100 },
+    { x: 100, y: 50 },
+    { x: 75, y: 50 },
+    { x: 100, y: 0 },
+    { x: 50, y: 0 },
+    { x: 50, y: 25 },
+];
 const options = {
     name: "Emitter Shapes",
     particles: {
@@ -23,76 +62,23 @@ const options = {
         color: "#fff",
     },
     emitters: [
-        {
-            shape: "square",
-            position: {
-                x: 33,
-                y: 33,
-            },
-            size: {
-                width: 200,
-                height: 200,
-                mode: "precise",
-            },
-            life: {
-                duration: 10,
-                delay: 0.5,
-                count: 1,
-            },
-        },
-        {
-            shape: "circle",
-            position: {
-                x: 67,
-                y: 33,
-            },
-            size: {
-                width: 200,
-                height: 200,
-                mode: "precise",
-            },
-            life: {
-                duration: 10,
-                delay: 0.5,
-                count: 1,
-            },
-        },
-        {
-            fill: false,
-            shape: "square",
-            position: {
-                x: 33,
-                y: 67,
-            },
-            size: {
-                width: 200,
-                height: 200,
-                mode: "precise",
-            },
-            life: {
-                duration: 10,
-                delay: 0.5,
-                count: 1,
-            },
-        },
-        {
-            fill: false,
-            shape: "circle",
-            position: {
-                x: 67,
-                y: 67,
-            },
-            size: {
-                width: 200,
-                height: 200,
-                mode: "precise",
-            },
-            life: {
-                duration: 10,
-                delay: 0.5,
-                count: 1,
-            },
-        },
+        generateEmitter("square", {}, true, { x: 25, y: 25 }),
+        generateEmitter("circle", {}, true, { x: 50, y: 25 }),
+        generateEmitter("polygon", {
+            angle: -18,
+            sides: 5,
+        }, true, { x: 75, y: 25 }),
+        generateEmitter("square", {}, false, { x: 25, y: 50 }),
+        generateEmitter("circle", {}, false, { x: 50, y: 50 }),
+        generateEmitter("polygon", {
+            sides: 6,
+        }, false, { x: 75, y: 50 }),
+        generateEmitter("path", {
+            points: path,
+        }, true, { x: 25, y: 75 }),
+        generateEmitter("path", {
+            points: path,
+        }, false, { x: 50, y: 75 }),
     ],
 };
 exports.default = options;

package/cjs/e/emitterTextShape.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const rate = {
+    delay: 0.1,
+    quantity: 100,
+};
+const generateEmitter = (shape, options, fill, position) => {
+    return {
+        shape: {
+            type: shape,
+            options,
+        },
+        position: position,
+        size: {
+            width: 500,
+            height: 500,
+            mode: "precise",
+        },
+        startCount: 300,
+        rate,
+        fill,
+    };
+};
+const options = {
+    name: "Emitter Text Shape",
+    particles: {
+        number: {
+            value: 0,
+        },
+        color: {
+            value: [
+                "#f44336",
+                "#e91e63",
+                "#9c27b0",
+                "#673ab7",
+                "#3f51b5",
+                "#2196f3",
+                "#03a9f4",
+                "#00bcd4",
+                "#009688",
+                "#4CAF50",
+                "#8BC34A",
+                "#CDDC39",
+                "#FFEB3B",
+                "#FFC107",
+                "#FF9800",
+                "#FF5722",
+            ],
+        },
+        life: {
+            count: 1,
+            duration: {
+                value: 1.5,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 0.5,
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: { min: 1, max: 10 },
+            animation: {
+                enable: true,
+                speed: 30,
+                sync: true,
+                startValue: "min",
+                count: 2,
+            },
+        },
+    },
+    background: {
+        color: "#fff",
+    },
+    emitters: [
+        generateEmitter("canvas", {
+            scale: 1,
+            pixels: {
+                filter: "pixelTextFilter",
+                offset: 4,
+            },
+            text: {
+                color: "#ff0000",
+                font: {
+                    size: 500,
+                    family: "Verdana",
+                },
+                text: "Particles",
+                lines: {
+                    separator: "\n",
+                    spacing: 10,
+                },
+            },
+        }, true, { x: 50, y: 50 }),
+    ],
+};
+exports.default = options;

package/cjs/e/emitterTextStrokeShape.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const rate = {
+    delay: 0.1,
+    quantity: 100,
+};
+const generateEmitter = (shape, options, fill, position) => {
+    return {
+        shape: {
+            type: shape,
+            options,
+        },
+        position: position,
+        size: {
+            width: 500,
+            height: 500,
+            mode: "precise",
+        },
+        startCount: 300,
+        rate,
+        fill,
+    };
+};
+const options = {
+    name: "Emitter Text Stroke Shape",
+    particles: {
+        number: {
+            value: 0,
+        },
+        color: {
+            value: [
+                "#f44336",
+                "#e91e63",
+                "#9c27b0",
+                "#673ab7",
+                "#3f51b5",
+                "#2196f3",
+                "#03a9f4",
+                "#00bcd4",
+                "#009688",
+                "#4CAF50",
+                "#8BC34A",
+                "#CDDC39",
+                "#FFEB3B",
+                "#FFC107",
+                "#FF9800",
+                "#FF5722",
+            ],
+        },
+        life: {
+            count: 1,
+            duration: {
+                value: 1.5,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 0.5,
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: { min: 1, max: 10 },
+            animation: {
+                enable: true,
+                speed: 30,
+                sync: true,
+                startValue: "min",
+                count: 2,
+            },
+        },
+    },
+    background: {
+        color: "#fff",
+    },
+    emitters: [
+        generateEmitter("canvas", {
+            scale: 1,
+            pixels: {
+                filter: "pixelTextFilter",
+                offset: 4,
+            },
+            text: {
+                color: "#ff0000",
+                font: {
+                    size: 500,
+                    family: "Verdana",
+                },
+                text: "Particles",
+                lines: {
+                    separator: "\n",
+                    spacing: 10,
+                },
+            },
+        }, false, { x: 50, y: 50 }),
+    ],
+};
+exports.default = options;

package/cjs/e/index.js

@@ -3,17 +3,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const effectBubble_js_1 = __importDefault(require("./effectBubble.js"));
+const effectTrail_js_1 = __importDefault(require("./effectTrail.js"));
 const emitter_js_1 = __importDefault(require("./emitter.js"));
 const emitterAbsorber_js_1 = __importDefault(require("./emitterAbsorber.js"));
 const emitterAngled_js_1 = __importDefault(require("./emitterAngled.js"));
+const emitterImageShape_js_1 = __importDefault(require("./emitterImageShape.js"));
 const emitterImages_js_1 = __importDefault(require("./emitterImages.js"));
 const emitterPaths_js_1 = __importDefault(require("./emitterPaths.js"));
 const emitterShapes_js_1 = __importDefault(require("./emitterShapes.js"));
+const emitterTextShape_js_1 = __importDefault(require("./emitterTextShape.js"));
+const emitterTextStrokeShape_js_1 = __importDefault(require("./emitterTextStrokeShape.js"));
 exports.default = {
+    effectBubble: effectBubble_js_1.default,
+    effectTrail: effectTrail_js_1.default,
     emitter: emitter_js_1.default,
     emitterAbsorber: emitterAbsorber_js_1.default,
     emitterAngled: emitterAngled_js_1.default,
+    emitterImageShape: emitterImageShape_js_1.default,
     emitterImages: emitterImages_js_1.default,
     emitterPaths: emitterPaths_js_1.default,
     emitterShapes: emitterShapes_js_1.default,
+    emitterTextShape: emitterTextShape_js_1.default,
+    emitterTextStrokeShape: emitterTextStrokeShape_js_1.default,
 };

package/cjs/f/fontawesome.js

@@ -50,7 +50,6 @@ const options = {
             density: {
                 enable: true,
             },
-            limit: 0,
             value: 80,
         },
         opacity: {

package/cjs/g/gifs.js

@@ -25,7 +25,7 @@ const options = {
         },
         number: {
             value: 20,
-            limit: 30,
+            limit: { value: 30 },
         },
         opacity: {
             value: 1,

package/cjs/h/hollowknight.js

@@ -68,7 +68,6 @@ const options = {
             density: {
                 enable: false,
             },
-            limit: 0,
             value: 400,
         },
         opacity: {

package/cjs/i/images.js

@@ -37,7 +37,6 @@ const options = {
             density: {
                 enable: true,
             },
-            limit: 0,
             value: 80,
         },
         opacity: {

package/cjs/l/localPolygonMask.js

@@ -40,7 +40,6 @@ const options = {
             density: {
                 enable: false,
             },
-            limit: 0,
             value: 200,
         },
         opacity: {

package/cjs/m/index.js

@@ -10,6 +10,7 @@ const mouseAttract_js_1 = __importDefault(require("./mouseAttract.js"));
 const mouseBounce_js_1 = __importDefault(require("./mouseBounce.js"));
 const mouseFollow_js_1 = __importDefault(require("./mouseFollow.js"));
 const mouseTrail_js_1 = __importDefault(require("./mouseTrail.js"));
+const mouseTrailNoise_js_1 = __importDefault(require("./mouseTrailNoise.js"));
 const moveAngle_js_1 = __importDefault(require("./moveAngle.js"));
 const moveDistance_js_1 = __importDefault(require("./moveDistance.js"));
 const moveInside_js_1 = __importDefault(require("./moveInside.js"));
@@ -24,6 +25,7 @@ exports.default = {
     mouseBounce: mouseBounce_js_1.default,
     mouseFollow: mouseFollow_js_1.default,
     mouseTrail: mouseTrail_js_1.default,
+    mouseTrailNoise: mouseTrailNoise_js_1.default,
     moveAngle: moveAngle_js_1.default,
     moveDistance: moveDistance_js_1.default,
     moveInside: moveInside_js_1.default,

package/cjs/m/mouseTrailNoise.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const options = {
+    name: "Mouse Trail Noise",
+    particles: {
+        number: {
+            value: 0,
+        },
+        color: {
+            value: ["#ff0000", "#00ff00", "#0000ff"],
+            animation: {
+                enable: true,
+                speed: 360,
+                sync: false,
+            },
+        },
+        shape: {
+            type: "triangle",
+        },
+        opacity: {
+            value: { min: 0, max: 1 },
+            animation: {
+                enable: true,
+                speed: 1,
+                sync: false,
+                destroy: "min",
+            },
+        },
+        size: {
+            value: {
+                min: 4,
+                max: 8,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 6,
+            outModes: "destroy",
+            path: {
+                enable: true,
+                options: {
+                    size: 64,
+                    draw: false,
+                    increment: 0.005,
+                },
+                delay: {
+                    value: 0,
+                },
+                generator: "perlinNoise",
+            },
+        },
+        rotate: {
+            value: {
+                min: 0,
+                max: 360,
+            },
+            direction: "random",
+            move: true,
+            animation: {
+                enable: true,
+                speed: 60,
+            },
+        },
+        tilt: {
+            direction: "random",
+            enable: true,
+            move: true,
+            value: {
+                min: 0,
+                max: 360,
+            },
+            animation: {
+                enable: true,
+                speed: 60,
+            },
+        },
+        roll: {
+            darken: {
+                enable: true,
+                value: 30,
+            },
+            enlighten: {
+                enable: true,
+                value: 30,
+            },
+            enable: true,
+            mode: "both",
+            speed: {
+                min: 15,
+                max: 25,
+            },
+        },
+        wobble: {
+            distance: 30,
+            enable: true,
+            move: true,
+            speed: {
+                min: -15,
+                max: 15,
+            },
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "trail",
+            },
+        },
+        modes: {
+            trail: {
+                delay: 0.01,
+            },
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+};
+exports.default = options;

package/cjs/m/multiplePolygonMasks.js

@@ -74,7 +74,6 @@ const options = {
             speed: 1,
         },
         number: {
-            limit: 0,
             value: 200,
         },
         opacity: {

package/cjs/o/orbit.js

@@ -14,7 +14,7 @@ const options = {
             density: {
                 enable: true,
             },
-            limit: 300,
+            limit: { value: 300 },
             value: 100,
         },
         opacity: {

package/cjs/p/index.js

@@ -10,6 +10,7 @@ const planes_js_1 = __importDefault(require("./planes.js"));
 const plasma_js_1 = __importDefault(require("./plasma.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"));
 exports.default = {
     parallax: parallax_js_1.default,
     pathPolygonMask: pathPolygonMask_js_1.default,
@@ -18,4 +19,5 @@ exports.default = {
     plasma: plasma_js_1.default,
     polygonMask: polygonMask_js_1.default,
     polygons: polygons_js_1.default,
+    pop: pop_js_1.default,
 };

package/cjs/p/pathPolygonMask.js

@@ -35,7 +35,6 @@ const options = {
             speed: 1,
         },
         number: {
-            limit: 0,
             value: 80,
         },
         opacity: {

package/cjs/p/pathSvg.js

@@ -34,7 +34,6 @@ const options = {
             },
         },
         number: {
-            limit: 0,
             value: 80,
         },
         opacity: {

package/cjs/p/polygonMask.js

@@ -74,7 +74,6 @@ const options = {
             speed: 1,
         },
         number: {
-            limit: 0,
             value: 200,
         },
         opacity: {

package/cjs/p/pop.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const options = {
+    name: "Pop",
+    particles: {
+        number: {
+            limit: {
+                value: 80,
+                mode: "wait",
+            },
+            value: 80,
+        },
+        color: {
+            value: ["#3998D0", "#2EB6AF", "#A9BD33", "#FEC73B", "#F89930", "#F45623", "#D62E32", "#EB586E", "#9952CF"],
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: {
+                min: 10,
+                max: 15,
+            },
+        },
+        collisions: {
+            enable: true,
+            mode: "bounce",
+        },
+        move: {
+            enable: true,
+            speed: 3,
+        },
+    },
+    interactivity: {
+        events: {
+            onClick: {
+                enable: true,
+                mode: "pop",
+            },
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+    emitters: {
+        direction: "none",
+        life: {
+            count: 0,
+            duration: 0.1,
+            delay: 0.1,
+        },
+        rate: {
+            delay: 0.1,
+            quantity: 1,
+        },
+        size: {
+            width: 100,
+            height: 100,
+        },
+        position: {
+            x: 50,
+            y: 50,
+        },
+    },
+};
+exports.default = options;

package/cjs/r/random.js

@@ -71,7 +71,7 @@ const options = {
             density: {
                 enable: true,
             },
-            limit: 500,
+            limit: { value: 500 },
             value: 300,
         },
         opacity: {