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

package/browser/c/connect.js

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

package/browser/c/curlNoise.js

@@ -0,0 +1,49 @@
+const options = {
+    name: "Curl Noise",
+    particles: {
+        number: {
+            value: 300,
+        },
+        color: {
+            value: "#ff0000",
+            animation: {
+                enable: true,
+                speed: 360,
+                sync: true,
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        size: {
+            value: 3,
+        },
+        move: {
+            path: {
+                clamp: false,
+                enable: true,
+                options: {
+                    step: 250,
+                    speed: 1,
+                },
+                delay: {
+                    value: 0,
+                },
+                generator: "curlNoise",
+            },
+            enable: true,
+            speed: 3,
+            trail: {
+                fill: {
+                    color: "#000",
+                },
+                enable: true,
+                length: 1000,
+            },
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+};
+export default options;

package/browser/c/index.js

@@ -6,6 +6,7 @@ import collisionsBounce from "./collisionsBounce.js";
 import collisionsDestroy from "./collisionsDestroy.js";
 import colorAnimation from "./colorAnimation.js";
 import connect from "./connect.js";
+import curlNoise from "./curlNoise.js";
 export default {
     cards,
     chars,
@@ -15,4 +16,5 @@ export default {
     collisionsDestroy,
     colorAnimation,
     connect,
+    curlNoise,
 };

package/browser/d/dataImages.js

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

package/browser/{s/shapeBubble.js → e/effectBubble.js}

@@ -1,5 +1,5 @@
 const options = {
-    name: "Shape Bubble",
+    name: "Effect Bubble",
     particles: {
         number: {
             value: 80,
@@ -15,9 +15,12 @@ const options = {
                 sync: true,
             },
         },
-        shape: {
+        effect: {
             type: "bubble",
         },
+        shape: {
+            type: ["circle", "square"],
+        },
         opacity: {
             value: 0.5,
         },

package/browser/e/effectTrail.js

@@ -0,0 +1,53 @@
+const options = {
+    name: "Effect Trail",
+    particles: {
+        number: {
+            value: 80,
+            density: {
+                enable: true,
+            },
+        },
+        color: {
+            value: "#ff0000",
+            animation: {
+                enable: true,
+                speed: 360,
+                sync: true,
+            },
+        },
+        effect: {
+            type: "trail",
+            options: {
+                trail: {
+                    length: {
+                        min: 10,
+                        max: 30,
+                    },
+                },
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        size: {
+            value: 10,
+        },
+        move: {
+            path: {
+                enable: true,
+                options: {
+                    size: 32,
+                    draw: false,
+                    increment: 0.004,
+                },
+                generator: "simplexNoise",
+            },
+            enable: true,
+            speed: 6,
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+};
+export default options;

package/browser/e/emitterImageShape.js

@@ -0,0 +1,95 @@
+const rate = {
+    delay: 0.1,
+    quantity: 100,
+};
+const generateEmitter = (shape, options, fill, position) => {
+    return {
+        shape: {
+            replace: {
+                color: true,
+                opacity: true,
+            },
+            type: shape,
+            options,
+        },
+        position: position,
+        size: {
+            width: 500,
+            height: 500,
+            mode: "precise",
+        },
+        startCount: 300,
+        rate,
+        fill,
+    };
+};
+const options = {
+    name: "Emitter Image 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: 5,
+            pixels: {
+                filter: "pixelFilter",
+                offset: 4,
+            },
+            image: {
+                src: "https://particles.js.org/images/amongus_cyan.png",
+            },
+        }, true, { x: 50, y: 50 }),
+    ],
+};
+export default options;

package/browser/e/emitterImages.js

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

package/browser/e/emitterShapes.js

@@ -1,3 +1,42 @@
+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: {
@@ -21,76 +60,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 }),
     ],
 };
 export default options;

package/browser/e/emitterTextShape.js

@@ -0,0 +1,100 @@
+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 }),
+    ],
+};
+export default options;

package/browser/e/emitterTextStrokeShape.js

@@ -0,0 +1,100 @@
+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 }),
+    ],
+};
+export default options;

package/browser/e/index.js

@@ -1,14 +1,24 @@
+import effectBubble from "./effectBubble.js";
+import effectTrail from "./effectTrail.js";
 import emitter from "./emitter.js";
 import emitterAbsorber from "./emitterAbsorber.js";
 import emitterAngled from "./emitterAngled.js";
+import emitterImageShape from "./emitterImageShape.js";
 import emitterImages from "./emitterImages.js";
 import emitterPaths from "./emitterPaths.js";
 import emitterShapes from "./emitterShapes.js";
+import emitterTextShape from "./emitterTextShape.js";
+import emitterTextStrokeShape from "./emitterTextStrokeShape.js";
 export default {
+    effectBubble,
+    effectTrail,
     emitter,
     emitterAbsorber,
     emitterAngled,
+    emitterImageShape,
     emitterImages,
     emitterPaths,
     emitterShapes,
+    emitterTextShape,
+    emitterTextStrokeShape,
 };

package/browser/f/fontawesome.js

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

package/browser/g/gifs.js

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

package/browser/h/hollowknight.js

@@ -66,7 +66,6 @@ const options = {
             density: {
                 enable: false,
             },
-            limit: 0,
             value: 400,
         },
         opacity: {
@@ -90,8 +89,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/browser/i/images.js

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

package/browser/i/imagesDirections.js

@@ -84,8 +84,11 @@ const options = {
     polygon: {
         draw: {
             enable: false,
-            lineColor: "#ffffff",
-            lineWidth: 0.5,
+            stroke: {
+                color: "#fff",
+                width: 0.5,
+                opacity: 0.2,
+            },
         },
         move: {
             radius: 10,