@tsparticles/configs 4.0.0-beta.8 → 4.0.0

package/esm/c/colorAnimation.js

@@ -8,48 +8,50 @@ const options = {
                 enable: true,
             },
         },
-        fill: {
-            color: {
-                value: "#ff0000",
-                animation: {
-                    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,
+        paint: {
+            fill: {
+                color: {
+                    value: "#ff0000",
+                    animation: {
+                        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,
+                        },
                     },
                 },
+                enable: true,
             },
-            enable: true,
-        },
-        stroke: {
-            width: 30,
-            color: {
-                value: "#0000ff",
-                animation: {
-                    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: {
+                width: 30,
+                color: {
+                    value: "#0000ff",
+                    animation: {
+                        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/esm/c/confettiExplosions.js

@@ -0,0 +1,151 @@
+const options = {
+    key: "confettiExplosions",
+    name: "Confetti Explosions",
+    background: {
+        color: "#1a1a2e",
+    },
+    fullScreen: {
+        enable: true,
+        zIndex: 100,
+    },
+    particles: {
+        paint: {
+            fill: {
+                enable: true,
+                color: {
+                    value: [
+                        "#FF0044",
+                        "#FF4400",
+                        "#FFCC00",
+                        "#00CC44",
+                        "#00AAFF",
+                        "#AA00FF",
+                        "#FF00AA",
+                        "#00FFCC",
+                        "#FF6600",
+                        "#FFFFFF",
+                    ],
+                },
+            },
+        },
+        number: {
+            value: 0,
+            density: {
+                enable: true,
+            },
+        },
+        shape: {
+            type: ["square", "circle"],
+        },
+        size: {
+            value: {
+                min: 3,
+                max: 5,
+            },
+        },
+        opacity: {
+            value: { min: 0, max: 1 },
+            animation: {
+                enable: true,
+                startValue: "max",
+                destroy: "min",
+                speed: 3,
+            },
+        },
+        move: {
+            angle: {
+                value: 45,
+                offset: 0,
+            },
+            drift: 0,
+            enable: true,
+            gravity: {
+                enable: true,
+                acceleration: 9.81,
+            },
+            speed: {
+                min: 15,
+                max: 25,
+            },
+            decay: 0.1,
+            random: true,
+            straight: false,
+            outModes: {
+                default: "destroy",
+                top: "none",
+            },
+        },
+        rotate: {
+            value: {
+                min: 0,
+                max: 360,
+            },
+            direction: "random",
+            move: true,
+            animation: {
+                enable: true,
+                speed: 60,
+            },
+        },
+        tilt: {
+            direction: "random",
+            enable: true,
+            value: {
+                min: 0,
+                max: 360,
+            },
+            animation: {
+                enable: true,
+                speed: 60,
+            },
+        },
+        roll: {
+            darken: {
+                enable: true,
+                value: 30,
+            },
+            enlighten: {
+                enable: true,
+                value: 30,
+            },
+            enable: true,
+            mode: "both",
+            speed: {
+                min: 15,
+                max: 25,
+            },
+        },
+        wobble: {
+            distance: 30,
+            enable: true,
+            move: true,
+            speed: {
+                min: -15,
+                max: 15,
+            },
+        },
+    },
+    emitters: {
+        name: "confetti",
+        size: {
+            width: 0,
+            height: 0,
+        },
+        rate: {
+            delay: 0,
+            quantity: 50,
+        },
+        life: {
+            count: 0,
+            duration: 0.1,
+            delay: 0.4,
+        },
+    },
+    motion: {
+        disable: true,
+    },
+    blend: {
+        mode: "source-over",
+    },
+};
+export default options;

package/esm/c/connect.js

@@ -45,11 +45,17 @@ const options = {
         },
     },
     particles: {
-        fill: {
-            color: {
-                value: "random",
+        paint: {
+            fill: {
+                color: {
+                    value: "random",
+                },
+                enable: true,
+            },
+            stroke: {
+                color: { value: "#fff" },
+                width: 1,
             },
-            enable: true,
         },
         links: {
             blink: false,
@@ -79,10 +85,6 @@ const options = {
         shape: {
             type: "circle",
         },
-        stroke: {
-            color: { value: "#fff" },
-            width: 1,
-        },
         size: {
             value: {
                 min: 1,

package/esm/c/curlNoise.js

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

package/esm/c/index.js

@@ -7,6 +7,7 @@ import collisionsAbsorb from "./collisionsAbsorb.js";
 import collisionsBounce from "./collisionsBounce.js";
 import collisionsDestroy from "./collisionsDestroy.js";
 import colorAnimation from "./colorAnimation.js";
+import confettiExplosions from "./confettiExplosions.js";
 import connect from "./connect.js";
 import curlNoise from "./curlNoise.js";
 export default {
@@ -19,6 +20,7 @@ export default {
     collisionsBounce,
     collisionsDestroy,
     colorAnimation,
+    confettiExplosions,
     connect,
     curlNoise,
 };

package/esm/d/delay.js

@@ -9,16 +9,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/d/delayColor.js

@@ -7,20 +7,22 @@ const options = {
         },
     },
     particles: {
-        fill: {
-            color: {
-                value: "#f00",
-                animation: {
-                    enable: true,
-                    speed: 50,
-                    sync: true,
-                    delay: {
-                        min: 1,
-                        max: 3,
+        paint: {
+            fill: {
+                color: {
+                    value: "#f00",
+                    animation: {
+                        enable: true,
+                        speed: 50,
+                        sync: true,
+                        delay: {
+                            min: 1,
+                            max: 3,
+                        },
                     },
                 },
+                enable: true,
             },
-            enable: true,
         },
         number: {
             value: 100,

package/esm/d/delayOpacity.js

@@ -7,11 +7,13 @@ const options = {
         },
     },
     particles: {
-        fill: {
-            color: {
-                value: "#fff",
+        paint: {
+            fill: {
+                color: {
+                    value: "#fff",
+                },
+                enable: true,
             },
-            enable: true,
         },
         number: {
             value: 100,

package/esm/d/delaySize.js

@@ -7,11 +7,13 @@ const options = {
         },
     },
     particles: {
-        fill: {
-            color: {
-                value: "#fff",
+        paint: {
+            fill: {
+                color: {
+                    value: "#fff",
+                },
+                enable: true,
             },
-            enable: true,
         },
         number: {
             value: 100,

package/esm/d/delayStrokeColor.js

@@ -7,20 +7,25 @@ const options = {
         },
     },
     particles: {
-        stroke: {
-            color: {
-                value: "#f00",
-                animation: {
-                    enable: true,
-                    speed: 50,
-                    sync: true,
-                    delay: {
-                        min: 1,
-                        max: 3,
+        paint: {
+            fill: {
+                enable: false,
+            },
+            stroke: {
+                color: {
+                    value: "#f00",
+                    animation: {
+                        enable: true,
+                        speed: 50,
+                        sync: true,
+                        delay: {
+                            min: 1,
+                            max: 3,
+                        },
                     },
                 },
+                width: 3,
             },
-            width: 3,
         },
         number: {
             value: 100,
@@ -31,9 +36,6 @@ const options = {
         opacity: {
             value: 1,
         },
-        fill: {
-            enable: false,
-        },
         move: {
             enable: true,
         },

package/esm/d/destroy.js

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

package/esm/d/destroyExplode.js

@@ -0,0 +1,68 @@
+const options = {
+    key: "destroyExplode",
+    name: "Destroy Explode",
+    particles: {
+        number: {
+            value: 80,
+            density: {
+                enable: true,
+            },
+        },
+        destroy: {
+            mode: "explode",
+            explode: {
+                maxSizeFactor: 5,
+                speed: 2,
+            },
+        },
+        paint: {
+            fill: {
+                color: {
+                    value: ["#3998D0", "#2EB6AF", "#A9BD33", "#FEC73B", "#F89930", "#F45623", "#D62E32", "#EB586E", "#9952CF"],
+                },
+                enable: true,
+            },
+            stroke: {
+                width: 0,
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 0.9,
+        },
+        size: {
+            value: {
+                min: 10,
+                max: 15,
+            },
+        },
+        collisions: {
+            enable: true,
+            mode: "destroy",
+        },
+        move: {
+            enable: true,
+            speed: 3,
+            outModes: "bounce",
+        },
+    },
+    interactivity: {
+        events: {
+            onClick: {
+                enable: true,
+                mode: "push",
+            },
+        },
+        modes: {
+            push: {
+                quantity: 1,
+            },
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+};
+export default options;

package/esm/d/disappearing.js

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

package/esm/d/divEvents.js

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

package/esm/d/index.js

@@ -5,6 +5,7 @@ import delayOpacity from "./delayOpacity.js";
 import delaySize from "./delaySize.js";
 import delayStrokeColor from "./delayStrokeColor.js";
 import destroy from "./destroy.js";
+import destroyExplode from "./destroyExplode.js";
 import disappearing from "./disappearing.js";
 import divEvents from "./divEvents.js";
 export default {
@@ -15,6 +16,7 @@ export default {
     delaySize,
     delayStrokeColor,
     destroy,
+    destroyExplode,
     disappearing,
     divEvents,
 };

package/esm/e/effectBubble.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,
         },
         effect: {
             type: "bubble",

package/esm/e/effectFilter.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,
         },
         effect: {
             type: "filter",