@tsparticles/configs 4.0.0-beta.9 → 4.0.1

package/cjs/g/gravity.js

@@ -14,11 +14,13 @@ const options = {
                 },
             },
         },
-        fill: {
-            color: {
-                value: "#ffffff",
+        paint: {
+            fill: {
+                color: {
+                    value: "#ffffff",
+                },
+                enable: true,
             },
-            enable: true,
         },
         shape: {
             type: "circle",
@@ -83,19 +85,21 @@ const options = {
                     },
                 },
             },
-            fill: {
-                color: {
-                    value: [
-                        "#5bc0eb",
-                        "#fde74c",
-                        "#9bc53d",
-                        "#e55934",
-                        "#fa7921",
-                        "#2FF3E0",
-                        "#F8D210",
-                        "#FA26A0",
-                        "#F51720",
-                    ],
+            paint: {
+                fill: {
+                    color: {
+                        value: [
+                            "#5bc0eb",
+                            "#fde74c",
+                            "#9bc53d",
+                            "#e55934",
+                            "#fa7921",
+                            "#2FF3E0",
+                            "#F8D210",
+                            "#FA26A0",
+                            "#F51720",
+                        ],
+                    },
                 },
             },
             size: {

package/cjs/g/groups.js

@@ -42,11 +42,13 @@ const options = {
                 enable: true,
             },
         },
-        fill: {
-            color: {
-                value: "#ffffff",
+        paint: {
+            fill: {
+                color: {
+                    value: "#ffffff",
+                },
+                enable: true,
             },
-            enable: true,
         },
         shape: {
             type: "circle",

package/cjs/g/growing.js

@@ -23,11 +23,13 @@ const options = {
                 enable: true,
             },
         },
-        fill: {
-            color: {
-                value: "random",
+        paint: {
+            fill: {
+                color: {
+                    value: "random",
+                },
+                enable: true,
             },
-            enable: true,
         },
         shape: {
             type: "circle",

package/cjs/h/hexagonPath.js

@@ -2,15 +2,17 @@ const options = {
     key: "hexagonPath",
     name: "Hexagon Path",
     particles: {
-        fill: {
-            color: {
-                value: "#FF0000",
-                animation: {
-                    enable: true,
-                    speed: 10,
+        paint: {
+            fill: {
+                color: {
+                    value: "#FF0000",
+                    animation: {
+                        enable: true,
+                        speed: 10,
+                    },
                 },
+                enable: true,
             },
-            enable: true,
         },
         move: {
             direction: "none",

package/cjs/h/hollowknight.js

@@ -46,11 +46,13 @@ const options = {
         },
     },
     particles: {
-        fill: {
-            color: {
-                value: "#ffffff",
+        paint: {
+            fill: {
+                color: {
+                    value: "#ffffff",
+                },
+                enable: true,
             },
-            enable: true,
         },
         links: {
             color: "#ffffff",

package/cjs/h/hyperspace.js

@@ -5,11 +5,13 @@ const options = {
         color: "#000",
     },
     particles: {
-        fill: {
-            color: {
-                value: ["#3998D0", "#2EB6AF", "#A9BD33", "#FEC73B", "#F89930", "#F45623", "#D62E32", "#EB586E", "#9952CF"],
+        paint: {
+            fill: {
+                color: {
+                    value: ["#3998D0", "#2EB6AF", "#A9BD33", "#FEC73B", "#F89930", "#F45623", "#D62E32", "#EB586E", "#9952CF"],
+                },
+                enable: true,
             },
-            enable: true,
         },
         move: {
             enable: true,

package/cjs/i/imageMask.js

@@ -52,10 +52,6 @@ const minFilterValue = 30, minFilterAlpha = 0, options = {
     },
     background: {
         color: "#000000",
-        image: "",
-        position: "50% 50%",
-        repeat: "no-repeat",
-        size: "cover",
     },
 };
 export default options;

package/cjs/i/imageMaskRepulse.js

@@ -0,0 +1,64 @@
+const minFilterValue = 30, minFilterAlpha = 0, options = {
+    key: "imageMaskRepulse",
+    name: "Image Mask Repulse Restore",
+    smooth: true,
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "repulse",
+            },
+        },
+        modes: {
+            repulse: {
+                distance: 50,
+                duration: 0.4,
+                speed: 1,
+                factor: 90,
+                maxSpeed: 80,
+                restore: {
+                    enable: true,
+                    delay: 0,
+                    speed: 0.3,
+                    follow: true,
+                },
+            },
+        },
+    },
+    particles: {
+        move: {
+            direction: "none",
+            distance: 10,
+            enable: false,
+            speed: 1,
+        },
+        number: {
+            value: 600,
+        },
+        shape: {
+            type: ["circle", "square", "triangle"],
+        },
+        size: {
+            value: {
+                min: 3,
+                max: 5,
+            },
+        },
+    },
+    canvasMask: {
+        enable: true,
+        scale: 5,
+        pixels: {
+            filter: (pixel) => pixel.r < minFilterValue && pixel.g < minFilterValue && pixel.b < minFilterValue
+                ? false
+                : pixel.a > minFilterAlpha,
+        },
+        image: {
+            src: "https://particles.js.org/images/hdr/amongus_cyan.png",
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+};
+export default options;

package/cjs/i/index.js

@@ -1,9 +1,11 @@
 import imageMask from "./imageMask.js";
+import imageMaskRepulse from "./imageMaskRepulse.js";
 import images from "./images.js";
 import imagesDirections from "./imagesDirections.js";
 import infection from "./infection.js";
 export default {
     imageMask,
+    imageMaskRepulse,
     images,
     imagesDirections,
     infection,

package/cjs/i/infection.js

@@ -53,11 +53,13 @@ const options = {
                 enable: true,
             },
         },
-        fill: {
-            color: {
-                value: "#ffffff",
+        paint: {
+            fill: {
+                color: {
+                    value: "#ffffff",
+                },
+                enable: true,
             },
-            enable: true,
         },
         shape: {
             type: "circle",

package/cjs/index.lazy.js

@@ -0,0 +1,71 @@
+import { tsParticles } from "@tsparticles/engine/lazy";
+import a from "./a/index.js";
+import b from "./b/index.js";
+import c from "./c/index.js";
+import d from "./d/index.js";
+import e from "./e/index.js";
+import f from "./f/index.js";
+import g from "./g/index.js";
+import h from "./h/index.js";
+import i from "./i/index.js";
+import j from "./j/index.js";
+import k from "./k/index.js";
+import l from "./l/index.js";
+import m from "./m/index.js";
+import n from "./n/index.js";
+import o from "./o/index.js";
+import p from "./p/index.js";
+import { palettes } from "./palettes.js";
+import q from "./q/index.js";
+import r from "./r/index.js";
+import s from "./s/index.js";
+import t from "./t/index.js";
+import u from "./u/index.js";
+import v from "./v/index.js";
+import w from "./w/index.js";
+import x from "./x/index.js";
+import y from "./y/index.js";
+import z from "./z/index.js";
+for (const key of Object.keys(palettes)) {
+    const palette = palettes[key];
+    if (!palette) {
+        continue;
+    }
+    tsParticles.pluginManager.addPalette(key, palette);
+}
+const configs = {
+    ...a,
+    ...b,
+    ...c,
+    ...d,
+    ...e,
+    ...f,
+    ...g,
+    ...h,
+    ...i,
+    ...j,
+    ...k,
+    ...l,
+    ...m,
+    ...n,
+    ...o,
+    ...p,
+    ...q,
+    ...r,
+    ...s,
+    ...t,
+    ...u,
+    ...v,
+    ...w,
+    ...x,
+    ...y,
+    ...z,
+};
+for (const key of Object.keys(configs)) {
+    const config = configs[key];
+    if (!config) {
+        continue;
+    }
+    tsParticles.pluginManager.addConfig(config);
+}
+export default configs;

package/cjs/l/lch.js

@@ -8,16 +8,18 @@ const options = {
                 enable: true,
             },
         },
-        fill: {
-            color: {
-                value: "lch(63.94% 33.1 0.67)",
-                animation: {
-                    enable: true,
-                    speed: 20,
-                    sync: true,
+        paint: {
+            fill: {
+                color: {
+                    value: "lch(63.94% 33.1 0.67)",
+                    animation: {
+                        enable: true,
+                        speed: 20,
+                        sync: true,
+                    },
                 },
+                enable: true,
             },
-            enable: true,
         },
         shape: {
             type: "circle",

package/cjs/l/life.js

@@ -8,16 +8,18 @@ const options = {
                 enable: true,
             },
         },
-        fill: {
-            color: {
-                value: "#ff0000",
-                animation: {
-                    enable: true,
-                    speed: 20,
-                    sync: true,
+        paint: {
+            fill: {
+                color: {
+                    value: "#ff0000",
+                    animation: {
+                        enable: true,
+                        speed: 20,
+                        sync: true,
+                    },
                 },
+                enable: true,
             },
-            enable: true,
         },
         shape: {
             type: "circle",

package/cjs/l/lightHover.js

@@ -8,16 +8,18 @@ const options = {
                 enable: true,
             },
         },
-        fill: {
-            color: {
-                value: "#ff0000",
-                animation: {
-                    enable: true,
-                    speed: 20,
-                    sync: true,
+        paint: {
+            fill: {
+                color: {
+                    value: "#ff0000",
+                    animation: {
+                        enable: true,
+                        speed: 20,
+                        sync: true,
+                    },
                 },
+                enable: true,
             },
-            enable: true,
         },
         shape: {
             type: ["circle", "square"],

package/cjs/l/linkTriangles.js

@@ -8,16 +8,18 @@ const options = {
                 enable: true,
             },
         },
-        fill: {
-            color: {
-                value: "#ff0000",
-                animation: {
-                    enable: true,
-                    speed: 20,
-                    sync: true,
+        paint: {
+            fill: {
+                color: {
+                    value: "#ff0000",
+                    animation: {
+                        enable: true,
+                        speed: 20,
+                        sync: true,
+                    },
                 },
+                enable: true,
             },
-            enable: true,
         },
         shape: {
             type: "circle",

package/cjs/l/localPolygonMask.js

@@ -18,11 +18,13 @@ const options = {
         },
     },
     particles: {
-        fill: {
-            color: {
-                value: "#ffffff",
+        paint: {
+            fill: {
+                color: {
+                    value: "#ffffff",
+                },
+                enable: true,
             },
-            enable: true,
         },
         links: {
             blink: false,

package/cjs/m/index.js

@@ -5,6 +5,8 @@ import motionReduce from "./motionReduce.js";
 import mouseAttract from "./mouseAttract.js";
 import mouseBounce from "./mouseBounce.js";
 import mouseCannon from "./mouseCannon.js";
+import mouseDestroy from "./mouseDestroy.js";
+import mouseDestroyExplode from "./mouseDestroyExplode.js";
 import mouseDrag from "./mouseDrag.js";
 import mouseDragMomentum from "./mouseDragMomentum.js";
 import mouseFollow from "./mouseFollow.js";
@@ -26,6 +28,8 @@ export default {
     mouseAttract,
     mouseBounce,
     mouseCannon,
+    mouseDestroy,
+    mouseDestroyExplode,
     mouseDrag,
     mouseDragMomentum,
     mouseFollow,

package/cjs/m/manual.js

@@ -40,16 +40,18 @@ const options = {
                 enable: false,
             },
         },
-        fill: {
-            color: {
-                value: "#ff0000",
-                animation: {
-                    enable: true,
-                    speed: 20,
-                    sync: true,
+        paint: {
+            fill: {
+                color: {
+                    value: "#ff0000",
+                    animation: {
+                        enable: true,
+                        speed: 20,
+                        sync: true,
+                    },
                 },
+                enable: true,
             },
-            enable: true,
         },
         shape: {
             type: "circle",

package/cjs/m/matrix.js

@@ -9,24 +9,26 @@ const options = {
                 enable: true,
             },
         },
-        fill: {
-            color: {
-                value: {
-                    h: 120,
-                    s: 100,
-                    l: 50,
-                },
-                animation: {
-                    l: {
-                        enable: true,
-                        speed: 70,
-                        sync: false,
-                        min: 30,
-                        max: 100,
+        paint: {
+            fill: {
+                color: {
+                    value: {
+                        h: 120,
+                        s: 100,
+                        l: 50,
+                    },
+                    animation: {
+                        l: {
+                            enable: true,
+                            speed: 70,
+                            sync: false,
+                            min: 30,
+                            max: 100,
+                        },
                     },
                 },
+                enable: true,
             },
-            enable: true,
         },
         shape: {
             type: "matrix",

package/cjs/m/motionDisable.js

@@ -11,16 +11,18 @@ const options = {
                 enable: true,
             },
         },
-        fill: {
-            color: {
-                value: "#ff0000",
-                animation: {
-                    enable: true,
-                    speed: 20,
-                    sync: true,
+        paint: {
+            fill: {
+                color: {
+                    value: "#ff0000",
+                    animation: {
+                        enable: true,
+                        speed: 20,
+                        sync: true,
+                    },
                 },
+                enable: true,
             },
-            enable: true,
         },
         shape: {
             type: "circle",

package/cjs/m/motionReduce.js

@@ -15,16 +15,18 @@ const options = {
                 enable: true,
             },
         },
-        fill: {
-            color: {
-                value: "#ff0000",
-                animation: {
-                    enable: true,
-                    speed: 20,
-                    sync: true,
+        paint: {
+            fill: {
+                color: {
+                    value: "#ff0000",
+                    animation: {
+                        enable: true,
+                        speed: 20,
+                        sync: true,
+                    },
                 },
+                enable: true,
             },
-            enable: true,
         },
         shape: {
             type: "circle",

package/cjs/m/mouseAttract.js

@@ -8,16 +8,18 @@ const options = {
                 enable: true,
             },
         },
-        fill: {
-            color: {
-                value: "#ff0000",
-                animation: {
-                    enable: true,
-                    speed: 20,
-                    sync: true,
+        paint: {
+            fill: {
+                color: {
+                    value: "#ff0000",
+                    animation: {
+                        enable: true,
+                        speed: 20,
+                        sync: true,
+                    },
                 },
+                enable: true,
             },
-            enable: true,
         },
         shape: {
             type: "circle",

package/cjs/m/mouseBounce.js

@@ -8,16 +8,18 @@ const options = {
                 enable: true,
             },
         },
-        fill: {
-            color: {
-                value: "#ff0000",
-                animation: {
-                    enable: true,
-                    speed: 20,
-                    sync: true,
+        paint: {
+            fill: {
+                color: {
+                    value: "#ff0000",
+                    animation: {
+                        enable: true,
+                        speed: 20,
+                        sync: true,
+                    },
                 },
+                enable: true,
             },
-            enable: true,
         },
         shape: {
             type: "circle",