@tsparticles/configs 3.0.3 → 3.2.0

package/browser/a/absorbers.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "absorbers",
     name: "Absorbers",
     particles: {
         number: {

package/browser/a/amongUs.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "amongUs",
     name: "Among Us",
     particles: {
         groups: {

package/browser/b/backgroundMask.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "backgroundMask",
     name: "Background Mask",
     particles: {
         number: {
@@ -61,10 +62,12 @@ const options = {
     backgroundMask: {
         enable: true,
         cover: {
-            value: {
-                r: 255,
-                g: 255,
-                b: 255,
+            color: {
+                value: {
+                    r: 255,
+                    g: 255,
+                    b: 255,
+                },
             },
         },
     },

package/browser/b/backgroundMaskImage.js

@@ -0,0 +1,70 @@
+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",
+    },
+};
+export default options;

package/browser/b/basic.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "basic",
     name: "Basic",
     particles: {
         number: {

package/browser/b/big.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "big",
     name: "Big Particles",
     particles: {
         number: {

package/browser/b/blackHole.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "blackHole",
     name: "Black Hole",
     particles: {
         number: {

package/browser/b/bubble.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "bubble",
     name: "Bubble",
     particles: {
         number: {

package/browser/b/index.js

@@ -1,10 +1,12 @@
 import backgroundMask from "./backgroundMask.js";
+import backgroundMaskImage from "./backgroundMaskImage.js";
 import basic from "./basic.js";
 import big from "./big.js";
 import blackHole from "./blackHole.js";
 import bubble from "./bubble.js";
 export default {
     backgroundMask,
+    backgroundMaskImage,
     basic,
     big,
     blackHole,

package/browser/c/cards.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "cards",
     name: "Cards",
     particles: {
         number: {

package/browser/c/chars.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "chars",
     name: "Chars",
     particles: {
         number: {

package/browser/c/clickConfetti.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "clickConfetti",
     name: "Click Confetti",
     fpsLimit: 60,
     interactivity: {

package/browser/c/clickPause.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "clickPause",
     name: "Click Pause",
     particles: {
         number: {

package/browser/c/collisionsAbsorb.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "collisionsAbsorb",
     name: "Collisions Absorb",
     particles: {
         number: {

package/browser/c/collisionsBounce.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "collisionsBounce",
     name: "Collisions Bounce",
     particles: {
         number: {

package/browser/c/collisionsDestroy.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "collisionsDestroy",
     name: "Collisions Destroy",
     particles: {
         number: {

package/browser/c/colorAnimation.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "colorAnimation",
     name: "Color Animation",
     particles: {
         number: {
@@ -10,10 +11,21 @@ const options = {
         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: {
@@ -21,10 +33,21 @@ const options = {
             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/browser/c/connect.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "connect",
     name: "Connect",
     interactivity: {
         events: {

package/browser/c/curlNoise.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "curlNoise",
     name: "Curl Noise",
     particles: {
         number: {

package/browser/d/dataImages.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "dataImages",
     name: "Data URI Images",
     interactivity: {
         events: {

package/browser/d/delay.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "delay",
     name: "Delay",
     delay: 5,
     particles: {

package/browser/d/delayColor.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "delayColor",
     name: "Delay Color",
     background: {
         color: {

package/browser/d/delayOpacity.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "delayOpacity",
     name: "Delay Opacity",
     background: {
         color: {

package/browser/d/delaySize.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "delaySize",
     name: "Delay Size",
     background: {
         color: {

package/browser/d/delayStrokeColor.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "delayStrokeColor",
     name: "Delay Stroke Color",
     background: {
         color: {

package/browser/d/destroy.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "destroy",
     name: "Destroy",
     particles: {
         number: {

package/browser/d/disappearing.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "disappearing",
     name: "Disappearing",
     background: {
         color: {

package/browser/d/divEvents.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "divEvents",
     name: "Div Events",
     background: {
         color: "#0d47a1",

package/browser/e/effectBubble.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "effectBubble",
     name: "Effect Bubble",
     particles: {
         number: {

package/browser/e/effectTrail.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "effectTrail",
     name: "Effect Trail",
     particles: {
         number: {

package/browser/e/emitter.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "emitter",
     name: "Emitter",
     particles: {
         number: {

package/browser/e/emitterAbsorber.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "emitterAbsorber",
     name: "Emitter and Absorber",
     particles: {
         number: {

package/browser/e/emitterAngled.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "emitterAngled",
     name: "Emitter Angled",
     particles: {
         number: {

package/browser/e/emitterImageShape.js

@@ -1,8 +1,7 @@
-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: {
@@ -22,8 +21,8 @@ const generateEmitter = (shape, options, fill, position) => {
         rate,
         fill,
     };
-};
-const options = {
+}, options = {
+    key: "emitterImageShape",
     name: "Emitter Image Shape",
     particles: {
         number: {
@@ -83,7 +82,9 @@ const options = {
         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/browser/e/emitterImages.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "emitterImages",
     name: "Emitter Images",
     particles: {
         move: {

package/browser/e/emitterPaths.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "emitterPaths",
     name: "Emitter Paths",
     particles: {
         number: {

package/browser/e/emitterShapes.js

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

package/browser/e/emitterSpawnColor.js

@@ -0,0 +1,163 @@
+const emitterRate = {
+    delay: 0.1,
+    quantity: 2,
+}, options = {
+    key: "emitterSpawnColor",
+    name: "Emitter Spawn Color",
+    particles: {
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: 3,
+        },
+        life: {
+            count: 1,
+            duration: {
+                value: 5,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 3,
+            outModes: {
+                default: "destroy",
+            },
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+    emitters: [
+        {
+            position: {
+                x: 33,
+                y: 0,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "bottom-right",
+                },
+            },
+            spawnColor: {
+                value: "#ff0000",
+                animation: {
+                    h: {
+                        enable: true,
+                        speed: 10,
+                    },
+                },
+            },
+        },
+        {
+            position: {
+                x: 33,
+                y: 100,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "top-right",
+                },
+            },
+            spawnColor: {
+                value: "#ff0000",
+                animation: {
+                    s: {
+                        enable: true,
+                        speed: 10,
+                        offset: {
+                            min: -10,
+                            max: 10,
+                        },
+                    },
+                },
+            },
+        },
+        {
+            position: {
+                x: 100,
+                y: 0,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "bottom-left",
+                },
+            },
+            spawnColor: {
+                value: "#ff0000",
+                animation: {
+                    l: {
+                        enable: true,
+                        speed: 10,
+                        offset: {
+                            min: -10,
+                            max: 10,
+                        },
+                    },
+                },
+            },
+        },
+        {
+            position: {
+                x: 100,
+                y: 100,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "top-left",
+                },
+            },
+            spawnColor: {
+                value: "#ff0000",
+                animation: {
+                    h: {
+                        enable: true,
+                        speed: 10,
+                    },
+                    s: {
+                        enable: true,
+                        speed: 10,
+                        offset: {
+                            min: -10,
+                            max: 10,
+                        },
+                    },
+                },
+            },
+        },
+        {
+            position: {
+                x: 66,
+                y: 50,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "none",
+                },
+            },
+            spawnColor: {
+                value: "#ff0000",
+                animation: {
+                    h: {
+                        enable: true,
+                        speed: 10,
+                    },
+                    l: {
+                        enable: true,
+                        speed: 10,
+                        offset: {
+                            min: -10,
+                            max: 10,
+                        },
+                    },
+                },
+            },
+        },
+    ],
+};
+export default options;

package/browser/e/emitterTextShape.js

@@ -1,8 +1,7 @@
-const rate = {
+const minAlphaFilter = 0, rate = {
     delay: 0.1,
     quantity: 100,
-};
-const generateEmitter = (shape, options, fill, position) => {
+}, generateEmitter = (shape, options, fill, position) => {
     return {
         shape: {
             type: shape,
@@ -18,8 +17,8 @@ const generateEmitter = (shape, options, fill, position) => {
         rate,
         fill,
     };
-};
-const options = {
+}, options = {
+    key: "emitterTextShape",
     name: "Emitter Text Shape",
     particles: {
         number: {
@@ -79,7 +78,7 @@ const options = {
         generateEmitter("canvas", {
             scale: 1,
             pixels: {
-                filter: "pixelTextFilter",
+                filter: (pixel) => pixel.a > minAlphaFilter,
                 offset: 4,
             },
             text: {

package/browser/e/emitterTextStrokeShape.js

@@ -1,8 +1,7 @@
-const rate = {
+const minAlphaFilter = 0, rate = {
     delay: 0.1,
     quantity: 100,
-};
-const generateEmitter = (shape, options, fill, position) => {
+}, generateEmitter = (shape, options, fill, position) => {
     return {
         shape: {
             type: shape,
@@ -18,8 +17,8 @@ const generateEmitter = (shape, options, fill, position) => {
         rate,
         fill,
     };
-};
-const options = {
+}, options = {
+    key: "emitterTextStrokeShape",
     name: "Emitter Text Stroke Shape",
     particles: {
         number: {
@@ -79,7 +78,7 @@ const options = {
         generateEmitter("canvas", {
             scale: 1,
             pixels: {
-                filter: "pixelTextFilter",
+                filter: (pixel) => pixel.a > minAlphaFilter,
                 offset: 4,
             },
             text: {

package/browser/e/index.js

@@ -7,6 +7,7 @@ import emitterImageShape from "./emitterImageShape.js";
 import emitterImages from "./emitterImages.js";
 import emitterPaths from "./emitterPaths.js";
 import emitterShapes from "./emitterShapes.js";
+import emitterSpawnColor from "./emitterSpawnColor.js";
 import emitterTextShape from "./emitterTextShape.js";
 import emitterTextStrokeShape from "./emitterTextStrokeShape.js";
 export default {
@@ -19,6 +20,7 @@ export default {
     emitterImages,
     emitterPaths,
     emitterShapes,
+    emitterSpawnColor,
     emitterTextShape,
     emitterTextStrokeShape,
 };