@tsparticles/configs 3.0.3 → 3.2.0

package/browser/p/poisson.js

@@ -0,0 +1,39 @@
+const options = {
+    key: "poisson",
+    name: "Poisson",
+    particles: {
+        number: {
+            value: 100,
+        },
+        color: {
+            value: "#ffffff",
+        },
+        links: {
+            enable: true,
+            distance: 200,
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: {
+                min: 4,
+                max: 6,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 2,
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+    poisson: {
+        enable: true,
+    },
+};
+export default options;

package/browser/p/polygonMask.js

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

package/browser/p/polygons.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "polygons",
     name: "Polygon Shape",
     particles: {
         number: {

package/browser/p/pop.js

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

package/browser/r/random.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "random",
     name: "Random Colors",
     interactivity: {
         events: {

package/browser/r/reactBubbles.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "reactBubbles",
     name: "React Bubbles",
     interactivity: {
         events: {

package/browser/r/reactDefaults.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "reactDefaults",
     name: "React Defaults",
     particles: {
         number: {

package/browser/r/reactMultipleImages.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "reactMultipleImages",
     name: "React Multiple Images",
     particles: {
         color: {

package/browser/r/reactNightSky.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "reactNightSky",
     name: "React Night Sky",
     interactivity: {
         events: {

package/browser/r/reactPolygonMask.js

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

package/browser/r/reactSimple.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "reactSimple",
     name: "React Simple",
     interactivity: {
         events: {
@@ -106,9 +107,7 @@ const options = {
     },
     backgroundMask: {
         cover: {
-            color: {
-                value: "#fff",
-            },
+            color: "#fff",
             opacity: 1,
         },
         enable: false,

package/browser/r/reactSnow.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "reactSnow",
     name: "React Snow",
     interactivity: {
         events: {

package/browser/r/reduceDuplicates.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "reduceDuplicates",
     name: "Reduce Duplicates",
     particles: {
         color: {

package/browser/r/repulse.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "repulse",
     name: "Repulse",
     particles: {
         groups: {

package/browser/r/repulseBack.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "repulseBack",
     name: "Repulse Back",
     particles: {
         number: {

package/browser/r/repulseCirc.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "repulseCirc",
     name: "Repulse Circ",
     particles: {
         number: {

package/browser/r/repulseCubic.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "repulseCubic",
     name: "Repulse Cubic",
     particles: {
         number: {

package/browser/r/repulseExpo.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "repulseExpo",
     name: "Repulse Expo",
     particles: {
         number: {

package/browser/r/repulseQuart.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "repulseExpo",
     name: "Repulse Quart",
     particles: {
         number: {

package/browser/r/repulseQuint.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "repulseQuint",
     name: "Repulse Quint",
     particles: {
         number: {

package/browser/r/repulseSine.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "repulseSine",
     name: "Repulse Sine",
     particles: {
         number: {

package/browser/r/responsive.js

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

package/browser/r/ring.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "ring",
     name: "Ring",
     particles: {
         number: {
@@ -41,7 +42,9 @@ const options = {
     },
     emitters: {
         fill: false,
-        shape: "circle",
+        shape: {
+            type: "circle",
+        },
         position: {
             x: 50,
             y: 50,

package/browser/s/seaAnemone.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "seaAnemone",
     name: "Sea Anemone",
     particles: {
         color: {

package/browser/s/shadow.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "shadow",
     name: "Shadow",
     smooth: true,
     particles: {

package/browser/s/shapeArrow.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "shapeArrow",
     name: "Shape Arrow",
     particles: {
         number: {

package/browser/s/shapeCog.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "shapeCog",
     name: "Shape Cog",
     particles: {
         color: {

package/browser/s/shapeEmoji.js

@@ -2,6 +2,7 @@ const emitterRate = {
     delay: 0.1,
     quantity: 2,
 }, options = {
+    key: "shapeEmoji",
     name: "Shape Emoji",
     particles: {
         opacity: {
@@ -173,7 +174,7 @@ const emitterRate = {
                     type: "emoji",
                     options: {
                         emoji: {
-                            value: "👻",
+                            value: "🍑",
                         },
                     },
                 },

package/browser/s/shapeHeart.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "shapeHeart",
     name: "Shape Heart",
     particles: {
         number: {

package/browser/s/shapeMultilineText.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "shapeMultilineText",
     name: "Shape Multiline Text",
     particles: {
         number: {

package/browser/s/shapeOptions.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "shapeOptions",
     name: "Shape Options",
     particles: {
         color: {

package/browser/s/shapePath.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "shapePath",
     name: "Shape Path",
     particles: {
         number: {

package/browser/s/shapeRoundedPolygon.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "shapeRoundedPolygon",
     name: "Shape Rounded Polygon",
     particles: {
         number: {

package/browser/s/shapeRoundedRect.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "shapeRoundedRect",
     name: "Shape Rounded Rect",
     particles: {
         number: {

package/browser/s/shapeSpiral.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "shapeSpiral",
     name: "Shape Spiral",
     particles: {
         number: {

package/browser/s/slow.js

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

package/browser/s/snow.js

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

package/browser/s/soundsAudio.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "soundsAudio",
     name: "Sounds Audio",
     particles: {
         number: {

package/browser/s/soundsLoop.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "soundsLoop",
     name: "Sounds Loop",
     particles: {
         number: {

package/browser/s/soundsMelodies.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "soundsMelodies",
     name: "Sounds Melodies",
     particles: {
         number: {

package/browser/s/soundsMelodyLoop.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "soundsMelodyLoop",
     name: "Sounds Melody Loop",
     particles: {
         number: {

package/browser/s/soundsNotes.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "soundsNotes",
     name: "Sounds Notes",
     particles: {
         number: {

package/browser/s/speedDecay.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "speedDecay",
     name: "Speed Decay",
     particles: {
         number: {

package/browser/s/spin.js

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

package/browser/s/star.js

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

package/browser/s/strokeAnimation.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "strokeAnimation",
     name: "Stroke Animation",
     particles: {
         number: {

package/browser/s/style.js

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

package/browser/s/svgReplace.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "svgReplace",
     name: "SVG Replace",
     interactivity: {
         events: {

package/browser/t/test.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "test",
     name: "Test",
     fullScreen: {
         enable: false,

package/browser/t/textMask.js

@@ -1,4 +1,5 @@
-const options = {
+const minAlphaFilter = 0, options = {
+    key: "textMask",
     name: "Text Mask",
     smooth: true,
     interactivity: {
@@ -52,7 +53,7 @@ const options = {
         },
         scale: 1,
         pixels: {
-            filter: "pixelTextFilter",
+            filter: (pixel) => pixel.a > minAlphaFilter,
         },
         position: {
             x: 70,

package/browser/t/textMaskMultiline.js

@@ -1,4 +1,5 @@
-const options = {
+const minAlphaFilter = 0, options = {
+    key: "textMaskMultiline",
     name: "Text Mask Multiline",
     smooth: true,
     interactivity: {
@@ -52,7 +53,7 @@ const options = {
         },
         scale: 1,
         pixels: {
-            filter: "pixelTextFilter",
+            filter: (pixel) => pixel.a > minAlphaFilter,
         },
         position: {
             x: 50,

package/browser/t/themes.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "themes",
     name: "Themes",
     themes: [
         {

package/browser/t/tilt.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "tilt",
     name: "Tilt",
     background: {
         color: "#000000",

package/browser/t/trail.js

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

package/browser/t/trailImage.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "trailsImage",
     name: "Trails Image",
     background: {
         color: "#ffffff",

package/browser/t/triangles.js

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

package/browser/t/twinkle.js

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

package/browser/v/vibrate.js

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

package/browser/v/virus.js

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

package/browser/w/warp.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "warp",
     name: "Warp",
     fullScreen: false,
     fpsLimit: 120,

package/browser/w/wobble.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "wobble",
     name: "Wobble",
     background: {
         color: "#000000",

package/browser/z/zIndex.js

@@ -1,4 +1,5 @@
 const options = {
+    key: "zIndex",
     name: "Z Index",
     particles: {
         groups: {

package/cjs/a/absorbers.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const options = {
+    key: "absorbers",
     name: "Absorbers",
     particles: {
         number: {

package/cjs/a/amongUs.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const options = {
+    key: "amongUs",
     name: "Among Us",
     particles: {
         groups: {

package/cjs/b/backgroundMask.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const options = {
+    key: "backgroundMask",
     name: "Background Mask",
     particles: {
         number: {
@@ -63,10 +64,12 @@ const options = {
     backgroundMask: {
         enable: true,
         cover: {
-            value: {
-                r: 255,
-                g: 255,
-                b: 255,
+            color: {
+                value: {
+                    r: 255,
+                    g: 255,
+                    b: 255,
+                },
             },
         },
     },

package/cjs/b/backgroundMaskImage.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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",
+    },
+};
+exports.default = options;

package/cjs/b/basic.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const options = {
+    key: "basic",
     name: "Basic",
     particles: {
         number: {