@tsparticles/configs 3.0.3 → 3.1.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: {

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/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/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/f/fireworks.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "fireworks",
     name: "Fireworks",
     fullScreen: {
         enable: true,
@@ -165,8 +166,8 @@ const options = {
         enable: true,
         events: [
             {
-                event: "particleDestroyed",
-                filter: "explodeSoundCheck",
+                event: "particleRemoved",
+                filter: (args) => args.data.particle.options.move.gravity.inverse,
                 audio: [
                     "https://particles.js.org/audio/explosion0.mp3",
                     "https://particles.js.org/audio/explosion1.mp3",

package/browser/f/fireworks2.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "fireworks2",
     name: "Fireworks 2",
     fullScreen: {
         enable: true,
@@ -147,9 +148,6 @@ const options = {
                 },
             },
         },
-        rotate: {
-            path: true,
-        },
         shape: {
             type: "circle",
         },
@@ -179,7 +177,7 @@ const options = {
         events: [
             {
                 event: "particleRemoved",
-                filter: "explodeSoundCheck",
+                filter: (args) => args.data.particle.options.move.gravity.inverse,
                 audio: [
                     "https://particles.js.org/audio/explosion0.mp3",
                     "https://particles.js.org/audio/explosion1.mp3",

package/browser/f/fontawesome.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "fontawesome",
     name: "Font Awesome",
     interactivity: {
         events: {

package/browser/f/forward.js

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

package/browser/g/gifs.js

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

package/browser/g/grabRandomColor.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "grabRandomColor",
     name: "Grab Random Color",
     particles: {
         number: {

package/browser/g/gradients.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "gradients",
     name: "Gradients",
     particles: {
         number: {
@@ -75,6 +76,75 @@ const options = {
                     },
                 ],
             },
+            {
+                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/browser/g/gravity.js

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

package/browser/g/growing.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "growing",
     name: "Growing",
     emitters: {
         direction: "top",

package/browser/h/hexagonPath.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "hexagonPath",
     name: "Hexagon Path",
     particles: {
         color: {

package/browser/h/hollowknight.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "hollowknight",
     name: "Hollow Knight",
     interactivity: {
         events: {

package/browser/h/hyperspace.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "hyperspace",
     name: "Hyperspace",
     background: {
         color: "#000",

package/browser/i/imageMask.js

@@ -1,4 +1,5 @@
-const options = {
+const minFilterValue = 30, minFilterAlpha = 0, options = {
+    key: "imageMask",
     name: "Image Mask",
     smooth: true,
     interactivity: {
@@ -46,7 +47,9 @@ const options = {
         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/browser/i/images.js

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

package/browser/i/imagesDirections.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "imagesDirections",
     name: "Images with Custom Directions",
     interactivity: {
         events: {

package/browser/i/infection.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "infection",
     name: "Infection",
     infection: {
         enable: true,

package/browser/l/life.js

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

package/browser/l/lightHover.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "lightHover",
     name: "Light Hover",
     particles: {
         number: {

package/browser/l/linkTriangles.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "linkTriangles",
     name: "Link Triangles",
     particles: {
         number: {

package/browser/l/localPolygonMask.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "localPolygonMask",
     name: "Local Polygon Mask",
     interactivity: {
         events: {

package/browser/m/manual.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "manual",
     name: "Manual Particles",
     manualParticles: [
         {