@tsparticles/configs 3.0.3 → 3.2.0

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,
@@ -12,6 +13,9 @@ const options = {
     },
     backgroundMask: {
         enable: true,
+        cover: {
+            color: "#000",
+        },
     },
     emitters: {
         direction: "top",
@@ -147,9 +151,6 @@ const options = {
                 },
             },
         },
-        rotate: {
-            path: true,
-        },
         shape: {
             type: "circle",
         },
@@ -179,7 +180,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/index.js

@@ -4,6 +4,8 @@ import motionReduce from "./motionReduce.js";
 import mouseAttract from "./mouseAttract.js";
 import mouseBounce from "./mouseBounce.js";
 import mouseFollow from "./mouseFollow.js";
+import mouseParticle from "./mouseParticle.js";
+import mouseParticle2 from "./mouseParticle2.js";
 import mouseTrail from "./mouseTrail.js";
 import mouseTrailNoise from "./mouseTrailNoise.js";
 import moveAngle from "./moveAngle.js";
@@ -19,6 +21,8 @@ export default {
     mouseAttract,
     mouseBounce,
     mouseFollow,
+    mouseParticle,
+    mouseParticle2,
     mouseTrail,
     mouseTrailNoise,
     moveAngle,

package/browser/m/manual.js

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

package/browser/m/motionDisable.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "motionDisable",
     name: "Motion Disable",
     motion: {
         disable: true,

package/browser/m/motionReduce.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "motionReduce",
     name: "Motion Reduce",
     motion: {
         disable: false,

package/browser/m/mouseAttract.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "mouseAttract",
     name: "Mouse Attract",
     particles: {
         number: {

package/browser/m/mouseBounce.js

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

package/browser/m/mouseFollow.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "mouseFollow",
     name: "Mouse Follow",
     background: {
         color: "#000000",

package/browser/m/mouseParticle.js

@@ -0,0 +1,50 @@
+const options = {
+    key: "mouseParticle",
+    name: "Mouse Particle",
+    fullScreen: {
+        zIndex: 10000,
+    },
+    particles: {
+        number: {
+            value: 0,
+        },
+        color: {
+            value: ["#ff0000", "#00ff00", "#0000ff"],
+            animation: {
+                enable: true,
+                speed: 180,
+                sync: true,
+            },
+        },
+        effect: {
+            type: "trail",
+            options: {
+                trail: {
+                    length: 10,
+                    minWidth: 2,
+                },
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        size: {
+            value: 3,
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "particle",
+            },
+        },
+        modes: {
+            particle: {
+                replaceCursor: true,
+                pauseOnStop: true,
+            },
+        },
+    },
+};
+export default options;

package/browser/m/mouseParticle2.js

@@ -0,0 +1,61 @@
+const options = {
+    key: "mouseParticle2",
+    name: "Mouse Particle 2",
+    background: {
+        color: "#000000",
+    },
+    particles: {
+        number: {
+            value: 80,
+            density: {
+                enable: true,
+            },
+        },
+        color: {
+            value: "#ff0000",
+            animation: {
+                enable: true,
+                speed: 20,
+                sync: true,
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 0.5,
+        },
+        size: {
+            value: {
+                min: 1,
+                max: 3,
+            },
+        },
+        links: {
+            enable: true,
+            distance: 200,
+            color: "#ffffff",
+            opacity: 0.4,
+            width: 1,
+        },
+        move: {
+            enable: true,
+            speed: 6,
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "particle",
+            },
+        },
+        modes: {
+            particle: {
+                replaceCursor: false,
+                pauseOnStop: false,
+            },
+        },
+    },
+};
+export default options;

package/browser/m/mouseTrail.js

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

package/browser/m/mouseTrailNoise.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "mouseTrailNoise",
     name: "Mouse Trail Noise",
     particles: {
         number: {

package/browser/m/moveAngle.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "moveAngle",
     name: "Move Angle",
     particles: {
         number: {

package/browser/m/moveDistance.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "moveDistance",
     name: "Move Distance",
     particles: {
         number: {

package/browser/m/moveInside.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "moveInside",
     name: "Move Inside",
     particles: {
         number: {

package/browser/m/moveOutside.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "moveOutside",
     name: "Move Outside",
     particles: {
         number: {

package/browser/m/multipleClickEmitters.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "multipleClickEmitters",
     name: "Multiple Click Emitters",
     background: {
         color: "#f00",

package/browser/m/multiplePolygonMasks.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "multiplePolygonMasks",
     name: "Multiple Polygon Masks",
     interactivity: {
         events: {

package/browser/n/nasa.js

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

package/browser/n/noClear.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "noClear",
     name: "No Clear",
     clear: false,
     interactivity: {

package/browser/n/noConfig.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "noConfig",
     name: "No Config",
 };
 export default options;

package/browser/n/noisePlanes.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "noisePlanes",
     name: "Noise Planes",
     background: {
         color: "#000",

package/browser/n/nyancat.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "nyancat",
     name: "Nyan Cat",
     particles: {
         number: {

package/browser/n/nyancat2.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "nyancat2",
     name: "Nyan Cat 2",
     particles: {
         number: {

package/browser/o/orbit.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "orbit",
     name: "Orbit",
     particles: {
         color: {

package/browser/p/index.js

@@ -1,8 +1,10 @@
 import parallax from "./parallax.js";
 import pathPolygonMask from "./pathPolygonMask.js";
 import pathSvg from "./pathSvg.js";
+import pathZigZag from "./pathZigZag.js";
 import planes from "./planes.js";
 import plasma from "./plasma.js";
+import poisson from "./poisson.js";
 import polygonMask from "./polygonMask.js";
 import polygons from "./polygons.js";
 import pop from "./pop.js";
@@ -10,8 +12,10 @@ export default {
     parallax,
     pathPolygonMask,
     pathSvg,
+    pathZigZag,
     planes,
     plasma,
+    poisson,
     polygonMask,
     polygons,
     pop,

package/browser/p/parallax.js

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

package/browser/p/pathPolygonMask.js

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

package/browser/p/pathSvg.js

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

package/browser/p/pathZigZag.js

@@ -0,0 +1,45 @@
+const options = {
+    key: "pathZigZag",
+    name: "Path Zig Zag",
+    particles: {
+        color: {
+            value: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],
+        },
+        move: {
+            enable: true,
+            outModes: "out",
+            speed: { min: 1, max: 3 },
+            path: {
+                enable: true,
+                options: {
+                    waveLength: { min: 3, max: 7 },
+                    waveHeight: { min: 1, max: 5 },
+                },
+                generator: "zigZagPathGenerator",
+            },
+            trail: {
+                enable: true,
+                length: 20,
+                fill: {
+                    color: "#000000",
+                },
+            },
+        },
+        number: {
+            value: 80,
+        },
+        opacity: {
+            value: 1,
+        },
+        shape: {
+            type: "circle",
+        },
+        size: {
+            value: 3,
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+};
+export default options;

package/browser/p/planes.js

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

package/browser/p/plasma.js

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