@tsparticles/configs 4.0.0-beta.8 → 4.0.0

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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",

package/esm/m/mouseCannon.js

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

package/esm/m/mouseDestroy.js

@@ -0,0 +1,61 @@
+const options = {
+    key: "mouseDestroy",
+    name: "Mouse Destroy",
+    particles: {
+        number: {
+            value: 120,
+            density: {
+                enable: true,
+            },
+        },
+        paint: {
+            fill: {
+                color: {
+                    value: ["#7dd3fc", "#34d399", "#fbbf24", "#f97316", "#ef4444"],
+                },
+                enable: true,
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 0.8,
+        },
+        size: {
+            value: {
+                min: 2,
+                max: 5,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 1.8,
+            outModes: "bounce",
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "destroy",
+            },
+            onClick: {
+                enable: true,
+                mode: "push",
+            },
+        },
+        modes: {
+            destroy: {
+                distance: 130,
+            },
+            push: {
+                quantity: 6,
+            },
+        },
+    },
+    background: {
+        color: "#05070b",
+    },
+};
+export default options;

package/esm/m/mouseDestroyExplode.js

@@ -0,0 +1,84 @@
+const options = {
+    key: "mouseDestroyExplode",
+    name: "Mouse Destroy Explode Stress",
+    particles: {
+        number: {
+            value: 500,
+        },
+        destroy: {
+            mode: "explode",
+            explode: {
+                maxSizeFactor: 10,
+                speed: 2,
+            },
+        },
+        paint: {
+            fill: {
+                enable: false,
+            },
+            stroke: {
+                color: {
+                    value: ["#60a5fa", "#22d3ee", "#22c55e", "#fde047", "#f97316", "#ef4444"],
+                },
+                width: 2,
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: {
+                min: 3,
+                max: 7,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 4,
+            direction: "inside",
+            outModes: "destroy",
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: ["attract", "destroy", "repulse"],
+            },
+        },
+        modes: {
+            destroy: {
+                distance: 75,
+            },
+            repulse: {
+                distance: 75,
+            },
+            attract: {
+                distance: 1920,
+                speed: 7,
+            },
+        },
+    },
+    background: {
+        color: "#030712",
+    },
+    emitters: {
+        fill: false,
+        size: {
+            width: 100,
+            height: 100,
+        },
+        position: {
+            x: 50,
+            y: 50,
+        },
+        rate: {
+            delay: 0.1,
+            quantity: 20,
+        },
+    },
+};
+export default options;