@tsparticles/configs 4.0.0-beta.8 → 4.0.0

package/cjs/b/bubble.js

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

package/cjs/browser.js

@@ -0,0 +1,3 @@
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+export * from "./index.js";

package/cjs/bundle.js

@@ -1 +1,3 @@
 export * from "./index.js";
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals ??= {};

package/cjs/c/cardSuits.js

@@ -14,41 +14,49 @@ const options = {
             options: {
                 spades: {
                     particles: {
-                        fill: {
-                            color: {
-                                value: "#000000",
+                        paint: {
+                            fill: {
+                                color: {
+                                    value: "#000000",
+                                },
+                                enable: true,
                             },
-                            enable: true,
                         },
                     },
                 },
                 hearts: {
                     particles: {
-                        fill: {
-                            color: {
-                                value: "#ff0000",
+                        paint: {
+                            fill: {
+                                color: {
+                                    value: "#ff0000",
+                                },
+                                enable: true,
                             },
-                            enable: true,
                         },
                     },
                 },
                 diamonds: {
                     particles: {
-                        fill: {
-                            color: {
-                                value: "#ff0000",
+                        paint: {
+                            fill: {
+                                color: {
+                                    value: "#ff0000",
+                                },
+                                enable: true,
                             },
-                            enable: true,
                         },
                     },
                 },
                 clubs: {
                     particles: {
-                        fill: {
-                            color: {
-                                value: "#000000",
+                        paint: {
+                            fill: {
+                                color: {
+                                    value: "#000000",
+                                },
+                                enable: true,
                             },
-                            enable: true,
                         },
                     },
                 },

package/cjs/c/cards.js

@@ -5,11 +5,17 @@ const cardSuits = ["spades", "hearts", "diamonds", "clubs"], cardValues = ["A",
     key: "cards",
     name: "Cards",
     particles: {
-        fill: {
-            color: {
-                value: "#fff",
+        paint: {
+            fill: {
+                color: {
+                    value: "#fff",
+                },
+                enable: true,
+            },
+            stroke: {
+                width: 1,
+                color: { value: "#000" },
             },
-            enable: true,
         },
         number: {
             value: 52,
@@ -31,10 +37,6 @@ const cardSuits = ["spades", "hearts", "diamonds", "clubs"], cardValues = ["A",
             enable: true,
             speed: 2,
         },
-        stroke: {
-            width: 1,
-            color: { value: "#000" },
-        },
     },
     interactivity: {
         events: {

package/cjs/c/cardsRolling.js

@@ -5,11 +5,17 @@ const cardSuits = ["spades", "hearts", "diamonds", "clubs"], cardValues = ["A",
     key: "cardsRolling",
     name: "Cards Rolling",
     particles: {
-        fill: {
-            color: {
-                value: "#000",
+        paint: {
+            fill: {
+                color: {
+                    value: "#000",
+                },
+                enable: true,
+            },
+            stroke: {
+                width: 1,
+                color: { value: "#000" },
             },
-            enable: true,
         },
         number: {
             value: 52,
@@ -27,10 +33,6 @@ const cardSuits = ["spades", "hearts", "diamonds", "clubs"], cardValues = ["A",
         size: {
             value: 30,
         },
-        stroke: {
-            width: 1,
-            color: { value: "#000" },
-        },
         move: {
             enable: true,
             speed: 2,

package/cjs/c/chars.js

@@ -8,9 +8,14 @@ const options = {
                 enable: true,
             },
         },
-        stroke: {
-            width: 1,
-            color: { value: "#ffffff" },
+        paint: {
+            fill: {
+                enable: false,
+            },
+            stroke: {
+                width: 1,
+                color: { value: "#ffffff" },
+            },
         },
         shape: {
             type: "text",
@@ -21,14 +26,20 @@ const options = {
                     style: "",
                     weight: "400",
                     particles: {
-                        fill: [
+                        paint: [
+                            {
+                                fill: {
+                                    color: {
+                                        value: "#ff0000",
+                                    },
+                                    enable: true,
+                                },
+                            },
                             {
-                                color: {
-                                    value: "#ff0000",
+                                fill: {
+                                    enable: false,
                                 },
-                                enable: true,
                             },
-                            { enable: false },
                         ],
                     },
                 },

package/cjs/c/clickConfetti.js

@@ -59,11 +59,13 @@ const options = {
         number: {
             value: 0,
         },
-        fill: {
-            color: {
-                value: "#f00",
+        paint: {
+            fill: {
+                color: {
+                    value: "#f00",
+                },
+                enable: true,
             },
-            enable: true,
         },
         shape: {
             type: ["circle", "square", "polygon"],

package/cjs/c/clickPause.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/cjs/c/collisionsAbsorb.js

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

package/cjs/c/collisionsBounce.js

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

package/cjs/c/collisionsDestroy.js

@@ -5,11 +5,13 @@ const options = {
         number: {
             value: 80,
         },
-        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,
         },
         destroy: {
             mode: "split",

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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,