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

package/cjs/l/localPolygonMask.js

@@ -40,7 +40,6 @@ const options = {
             density: {
                 enable: false,
             },
-            limit: 0,
             value: 200,
         },
         opacity: {
@@ -56,8 +55,11 @@ const options = {
     polygon: {
         draw: {
             enable: true,
-            lineColor: "rgba(255,255,255,1)",
-            lineWidth: 1,
+            stroke: {
+                color: "#fff",
+                width: 0.5,
+                opacity: 0.2,
+            },
         },
         enable: true,
         move: {

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: {
@@ -98,8 +97,11 @@ const options = {
     polygon: {
         draw: {
             enable: true,
-            lineColor: "rgba(255,255,255,0.2)",
-            lineWidth: 0.5,
+            stroke: {
+                color: "#fff",
+                width: 0.5,
+                opacity: 0.2,
+            },
         },
         enable: true,
         move: {

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: {
@@ -59,8 +58,11 @@ const options = {
     polygon: {
         draw: {
             enable: true,
-            lineColor: "rgba(255,255,255,0.2)",
-            lineWidth: 0.5,
+            stroke: {
+                color: "#fff",
+                width: 0.5,
+                opacity: 0.2,
+            },
         },
         enable: true,
         move: {

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: {
@@ -98,8 +97,11 @@ const options = {
     polygon: {
         draw: {
             enable: true,
-            lineColor: "rgba(255,255,255,0.2)",
-            lineWidth: 1,
+            stroke: {
+                color: "#fff",
+                width: 1,
+                opacity: 0.2,
+            },
         },
         enable: true,
         move: {

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: {

package/cjs/r/reactBubbles.js

@@ -72,7 +72,6 @@ const options = {
             },
         },
         number: {
-            limit: -1,
             value: 160,
         },
         opacity: {

package/cjs/r/reactNightSky.js

@@ -57,7 +57,6 @@ const options = {
             density: {
                 enable: true,
             },
-            limit: -1,
             value: 60,
         },
         opacity: {

package/cjs/r/reactPolygonMask.js

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

package/cjs/r/reactSimple.js

@@ -47,7 +47,6 @@ const options = {
             enable: true,
         },
         number: {
-            limit: -1,
             value: 50,
         },
         opacity: {

package/cjs/r/reactSnow.js

@@ -76,7 +76,6 @@ const options = {
             enable: true,
         },
         number: {
-            limit: -1,
             value: 160,
         },
         opacity: {

package/cjs/r/ring.js

@@ -5,7 +5,7 @@ const options = {
     particles: {
         number: {
             value: 0,
-            limit: 1000,
+            limit: { value: 1000 },
         },
         color: {
             value: "#ffffff",

package/cjs/s/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const seaAnemone_js_1 = __importDefault(require("./seaAnemone.js"));
 const shadow_js_1 = __importDefault(require("./shadow.js"));
 const shapeArrow_js_1 = __importDefault(require("./shapeArrow.js"));
-const shapeBubble_js_1 = __importDefault(require("./shapeBubble.js"));
 const shapeCog_js_1 = __importDefault(require("./shapeCog.js"));
+const shapeEmoji_js_1 = __importDefault(require("./shapeEmoji.js"));
 const shapeHeart_js_1 = __importDefault(require("./shapeHeart.js"));
 const shapeMultilineText_js_1 = __importDefault(require("./shapeMultilineText.js"));
 const shapeOptions_js_1 = __importDefault(require("./shapeOptions.js"));
@@ -32,8 +32,8 @@ exports.default = {
     seaAnemone: seaAnemone_js_1.default,
     shadow: shadow_js_1.default,
     shapeArrow: shapeArrow_js_1.default,
-    shapeBubble: shapeBubble_js_1.default,
     shapeCog: shapeCog_js_1.default,
+    shapeEmoji: shapeEmoji_js_1.default,
     shapeHeart: shapeHeart_js_1.default,
     shapeMultilineText: shapeMultilineText_js_1.default,
     shapeOptions: shapeOptions_js_1.default,

package/cjs/s/shapeEmoji.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const emitterRate = {
+    delay: 0.1,
+    quantity: 2,
+}, options = {
+    name: "Shape Emoji",
+    particles: {
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: {
+                min: 16,
+                max: 32,
+            },
+        },
+        move: {
+            enable: true,
+            gravity: {
+                enable: true,
+            },
+            speed: 15,
+            outModes: {
+                default: "destroy",
+                top: "none",
+            },
+        },
+        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,
+            },
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+    emitters: [
+        {
+            position: {
+                x: 0,
+                y: 33,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "top-right",
+                },
+                shape: {
+                    type: "emoji",
+                    options: {
+                        emoji: {
+                            value: "🦄",
+                        },
+                    },
+                },
+            },
+        },
+        {
+            position: {
+                x: 0,
+                y: 66,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "top-right",
+                },
+                shape: {
+                    type: "emoji",
+                    options: {
+                        emoji: {
+                            value: "🌈",
+                        },
+                    },
+                },
+            },
+        },
+        {
+            position: {
+                x: 100,
+                y: 33,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "top-left",
+                },
+                shape: {
+                    type: "emoji",
+                    options: {
+                        emoji: {
+                            value: "🎉",
+                        },
+                    },
+                },
+            },
+        },
+        {
+            position: {
+                x: 100,
+                y: 66,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "top-left",
+                },
+                shape: {
+                    type: "emoji",
+                    options: {
+                        emoji: {
+                            value: "🤡",
+                        },
+                    },
+                },
+            },
+        },
+        {
+            position: {
+                x: 50,
+                y: 50,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "top",
+                },
+                shape: {
+                    type: "emoji",
+                    options: {
+                        emoji: {
+                            value: "👻",
+                        },
+                    },
+                },
+            },
+        },
+    ],
+};
+exports.default = options;

package/cjs/s/shapeMultilineText.js

@@ -18,9 +18,9 @@ const options = {
             },
         },
         shape: {
-            type: "multiline-text",
+            type: "text",
             options: {
-                "multiline-text": {
+                text: {
                     value: "pippo\npluto",
                 },
             },

package/cjs/s/style.js

@@ -5,7 +5,7 @@ const options = {
     particles: {
         number: {
             value: 200,
-            limit: 200,
+            limit: { value: 200 },
         },
         color: {
             value: ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff"],

package/cjs/s/svgReplace.js

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

package/cjs/t/themes.js

@@ -164,7 +164,6 @@ const options = {
                 enable: true,
                 mode: "push",
             },
-            resize: true,
         },
     },
     detectRetina: true,

package/cjs/t/tilt.js

@@ -44,7 +44,7 @@ const options = {
         },
         number: {
             value: 0,
-            limit: 300,
+            limit: { value: 300 },
         },
         opacity: {
             value: 1,

package/cjs/t/trail.js

@@ -23,7 +23,7 @@ const options = {
     particles: {
         number: {
             value: 0,
-            limit: 300,
+            limit: { value: 300 },
         },
         color: {
             value: ["#5bc0eb", "#fde74c", "#9bc53d", "#e55934", "#fa7921"],

package/cjs/t/trailImage.js

@@ -27,7 +27,7 @@ const options = {
     particles: {
         number: {
             value: 0,
-            limit: 300,
+            limit: { value: 300 },
         },
         color: {
             value: ["#5bc0eb", "#fde74c", "#9bc53d", "#e55934", "#fa7921"],

package/cjs/w/wobble.js

@@ -44,7 +44,7 @@ const options = {
         },
         number: {
             value: 0,
-            limit: 300,
+            limit: { value: 300 },
         },
         opacity: {
             value: 1,