@tsparticles/configs 3.9.1 → 4.0.0-alpha.1

package/esm/f/fallingConfetti.js

@@ -0,0 +1,137 @@
+const options = {
+    key: "fallingConfetti",
+    name: "Falling Confetti",
+    background: {
+        color: "#000000",
+    },
+    particles: {
+        color: {
+            value: [
+                "#FF0000",
+                "#FF2A00",
+                "#FF5500",
+                "#FF8000",
+                "#FFAA00",
+                "#FFD400",
+                "#FFFF00",
+                "#D4FF00",
+                "#AAFF00",
+                "#80FF00",
+                "#55FF00",
+                "#2AFF00",
+                "#00FF00",
+                "#00FF2A",
+                "#00FF55",
+                "#00FF80",
+                "#00FFAA",
+                "#00FFD4",
+                "#00FFFF",
+                "#00D4FF",
+                "#00AAFF",
+                "#0080FF",
+                "#0055FF",
+                "#002AFF",
+                "#0000FF",
+                "#2A00FF",
+                "#5500FF",
+                "#8000FF",
+                "#AA00FF",
+                "#D400FF",
+                "#FF00FF",
+                "#FF00D4",
+                "#FF00AA",
+                "#FF0080",
+                "#FF0055",
+                "#FF002A",
+            ],
+            animation: {
+                enable: true,
+                speed: 30,
+            },
+        },
+        move: {
+            direction: "bottom",
+            enable: true,
+            outModes: "out",
+            speed: {
+                min: 3,
+                max: 10,
+            },
+        },
+        number: {
+            value: 300,
+        },
+        opacity: {
+            value: 1,
+        },
+        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,
+            },
+        },
+        shape: {
+            type: ["circle", "square", "polygon"],
+            options: {
+                polygon: [
+                    {
+                        sides: 5,
+                    },
+                    {
+                        sides: 6,
+                    },
+                ],
+            },
+        },
+        size: {
+            value: {
+                min: 5,
+                max: 15,
+            },
+        },
+        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,
+            },
+        },
+    },
+};
+export default options;

package/esm/f/fireworks.js

@@ -50,7 +50,44 @@ const options = {
                         width: 0,
                     },
                     color: {
-                        value: ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"],
+                        value: [
+                            "#FF0000",
+                            "#FF2A00",
+                            "#FF5500",
+                            "#FF8000",
+                            "#FFAA00",
+                            "#FFD400",
+                            "#FFFF00",
+                            "#D4FF00",
+                            "#AAFF00",
+                            "#80FF00",
+                            "#55FF00",
+                            "#2AFF00",
+                            "#00FF00",
+                            "#00FF2A",
+                            "#00FF55",
+                            "#00FF80",
+                            "#00FFAA",
+                            "#00FFD4",
+                            "#00FFFF",
+                            "#00D4FF",
+                            "#00AAFF",
+                            "#0080FF",
+                            "#0055FF",
+                            "#002AFF",
+                            "#0000FF",
+                            "#2A00FF",
+                            "#5500FF",
+                            "#8000FF",
+                            "#AA00FF",
+                            "#D400FF",
+                            "#FF00FF",
+                            "#FF00D4",
+                            "#FF00AA",
+                            "#FF0080",
+                            "#FF0055",
+                            "#FF002A",
+                        ],
                     },
                     number: {
                         value: 0,
@@ -157,11 +194,6 @@ const options = {
                 default: "destroy",
                 top: "none",
             },
-            trail: {
-                fill: { color: "#000" },
-                enable: true,
-                length: 10,
-            },
         },
     },
     sounds: {
@@ -179,5 +211,10 @@ const options = {
         ],
         volume: 50,
     },
+    trail: {
+        fill: { color: "#000" },
+        enable: true,
+        length: 10,
+    },
 };
 export default options;

package/esm/f/fireworks2.js

@@ -6,17 +6,7 @@ const options = {
         enable: true,
     },
     background: {
-        color: "#ffffff",
-        image: "url('https://particles.js.org/images/background3.jpg')",
-        position: "50% 50%",
-        repeat: "no-repeat",
-        size: "cover",
-    },
-    backgroundMask: {
-        enable: true,
-        cover: {
-            color: "#000",
-        },
+        color: "#000",
     },
     emitters: {
         direction: "top",
@@ -63,7 +53,44 @@ const options = {
                         width: 0,
                     },
                     color: {
-                        value: ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"],
+                        value: [
+                            "#FF0000",
+                            "#FF2A00",
+                            "#FF5500",
+                            "#FF8000",
+                            "#FFAA00",
+                            "#FFD400",
+                            "#FFFF00",
+                            "#D4FF00",
+                            "#AAFF00",
+                            "#80FF00",
+                            "#55FF00",
+                            "#2AFF00",
+                            "#00FF00",
+                            "#00FF2A",
+                            "#00FF55",
+                            "#00FF80",
+                            "#00FFAA",
+                            "#00FFD4",
+                            "#00FFFF",
+                            "#00D4FF",
+                            "#00AAFF",
+                            "#0080FF",
+                            "#0055FF",
+                            "#002AFF",
+                            "#0000FF",
+                            "#2A00FF",
+                            "#5500FF",
+                            "#8000FF",
+                            "#AA00FF",
+                            "#D400FF",
+                            "#FF00FF",
+                            "#FF00D4",
+                            "#FF00AA",
+                            "#FF0080",
+                            "#FF0055",
+                            "#FF002A",
+                        ],
                     },
                     number: {
                         value: 0,

package/esm/f/fireworksMask.js

@@ -0,0 +1,195 @@
+import { EventType } from "@tsparticles/engine";
+const options = {
+    key: "fireworksMask",
+    name: "Fireworks Background Mask",
+    fullScreen: {
+        enable: true,
+    },
+    background: {
+        color: "#ffffff",
+        image: "url('https://particles.js.org/images/hdr/background3.jpg')",
+        position: "50% 50%",
+        repeat: "no-repeat",
+        size: "cover",
+    },
+    backgroundMask: {
+        enable: true,
+        cover: {
+            color: "#000",
+        },
+    },
+    emitters: {
+        direction: "top",
+        life: {
+            count: 0,
+            duration: 0.1,
+            delay: 0.1,
+        },
+        rate: {
+            delay: 0.15,
+            quantity: 1,
+        },
+        size: {
+            width: 100,
+            height: 0,
+        },
+        position: {
+            y: 100,
+            x: 50,
+        },
+    },
+    particles: {
+        color: {
+            value: "#fff",
+        },
+        number: {
+            value: 0,
+        },
+        destroy: {
+            bounds: {
+                top: 30,
+            },
+            mode: "split",
+            split: {
+                count: 1,
+                factor: {
+                    value: 0.333333,
+                },
+                rate: {
+                    value: 100,
+                },
+                particles: {
+                    stroke: {
+                        width: 0,
+                    },
+                    color: {
+                        value: ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"],
+                    },
+                    number: {
+                        value: 0,
+                    },
+                    collisions: {
+                        enable: false,
+                    },
+                    destroy: {
+                        bounds: {
+                            top: 0,
+                        },
+                    },
+                    opacity: {
+                        value: {
+                            min: 0.1,
+                            max: 1,
+                        },
+                        animation: {
+                            enable: true,
+                            speed: 0.7,
+                            sync: false,
+                            startValue: "max",
+                            destroy: "min",
+                        },
+                    },
+                    effect: {
+                        type: "trail",
+                        options: {
+                            trail: {
+                                length: {
+                                    min: 5,
+                                    max: 10,
+                                },
+                            },
+                        },
+                    },
+                    shape: {
+                        type: "circle",
+                    },
+                    size: {
+                        value: 2,
+                        animation: {
+                            enable: false,
+                        },
+                    },
+                    life: {
+                        count: 1,
+                        duration: {
+                            value: {
+                                min: 1,
+                                max: 2,
+                            },
+                        },
+                    },
+                    move: {
+                        enable: true,
+                        gravity: {
+                            enable: true,
+                            acceleration: 9.81,
+                            inverse: false,
+                        },
+                        decay: 0.1,
+                        speed: {
+                            min: 10,
+                            max: 25,
+                        },
+                        direction: "outside",
+                        outModes: "destroy",
+                    },
+                },
+            },
+        },
+        life: {
+            count: 1,
+        },
+        effect: {
+            type: "trail",
+            options: {
+                trail: {
+                    length: {
+                        min: 10,
+                        max: 30,
+                    },
+                    minWidth: 1,
+                    maxWidth: 1,
+                },
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        size: {
+            value: 1,
+        },
+        move: {
+            enable: true,
+            gravity: {
+                acceleration: 15,
+                enable: true,
+                inverse: true,
+                maxSpeed: 100,
+            },
+            speed: {
+                min: 10,
+                max: 20,
+            },
+            outModes: {
+                default: "destroy",
+                top: "none",
+            },
+        },
+    },
+    sounds: {
+        enable: true,
+        events: [
+            {
+                event: EventType.particleRemoved,
+                filter: (args) => args.data.particle.options.move.gravity.inverse,
+                audio: [
+                    "https://particles.js.org/audio/explosion0.mp3",
+                    "https://particles.js.org/audio/explosion1.mp3",
+                    "https://particles.js.org/audio/explosion2.mp3",
+                ],
+            },
+        ],
+        volume: 50,
+    },
+};
+export default options;

package/esm/f/fontawesome.js

@@ -33,11 +33,6 @@ const options = {
             distance: 150,
             enable: true,
             opacity: 0.4,
-            shadow: {
-                blur: 5,
-                color: "lime",
-                enable: false,
-            },
             width: 1,
         },
         move: {

package/esm/f/forward.js

@@ -27,7 +27,7 @@ const options = {
             type: "image",
             options: {
                 image: {
-                    src: "https://particles.js.org/images/arrow.png",
+                    src: "https://particles.js.org/images/hdr/arrow.png",
                     width: 512,
                     height: 512,
                     replaceColor: true,

package/esm/f/index.js

@@ -1,10 +1,14 @@
+import fallingConfetti from "./fallingConfetti.js";
 import fireworks from "./fireworks.js";
 import fireworks2 from "./fireworks2.js";
+import fireworksMask from "./fireworksMask.js";
 import fontawesome from "./fontawesome.js";
 import forward from "./forward.js";
 export default {
+    fallingConfetti,
     fireworks,
     fireworks2,
+    fireworksMask,
     fontawesome,
     forward,
 };

package/esm/g/gravity.js

@@ -47,11 +47,6 @@ const options = {
                 default: "bounce",
                 top: "none",
             },
-            trail: {
-                enable: true,
-                fill: { color: "#000000" },
-                length: 10,
-            },
         },
     },
     background: {
@@ -112,5 +107,10 @@ const options = {
             },
         },
     },
+    trail: {
+        enable: true,
+        fill: { color: "#000000" },
+        length: 10,
+    },
 };
 export default options;

package/esm/g/index.js

@@ -2,7 +2,7 @@ import gifs from "./gifs.js";
 import grabRandomColor from "./grabRandomColor.js";
 import gradients from "./gradients.js";
 import gravity from "./gravity.js";
-import groups from "./groups";
+import groups from "./groups.js";
 import growing from "./growing.js";
 export default {
     gifs,

package/esm/h/hexagonPath.js

@@ -29,11 +29,6 @@ const options = {
                 },
             },
             speed: 3,
-            trail: {
-                fill: { color: "#000" },
-                length: 20,
-                enable: true,
-            },
         },
         number: {
             density: {
@@ -69,5 +64,10 @@ const options = {
             y: 50,
         },
     },
+    trail: {
+        fill: { color: "#000" },
+        length: 20,
+        enable: true,
+    },
 };
 export default options;

package/esm/h/hollowknight.js

@@ -105,7 +105,7 @@ const options = {
         },
         scale: 2,
         type: "inline",
-        url: "https://particles.js.org/images/hollowknight.svg",
+        url: "https://particles.js.org/images/hdr/hollowknight.svg",
     },
     background: {
         color: "#000000",

package/esm/h/hyperspace.js

@@ -14,11 +14,6 @@ const options = {
                 default: "destroy",
             },
             speed: 3,
-            trail: {
-                fill: { color: "#000" },
-                length: 30,
-                enable: true,
-            },
         },
         number: {
             density: {
@@ -61,5 +56,10 @@ const options = {
             y: 50,
         },
     },
+    trail: {
+        fill: { color: "#000" },
+        length: 30,
+        enable: true,
+    },
 };
 export default options;

package/esm/i/imageMask.js

@@ -52,7 +52,7 @@ const minFilterValue = 30, minFilterAlpha = 0, options = {
                 : pixel.a > minFilterAlpha,
         },
         image: {
-            src: "https://particles.js.org/images/amongus_cyan.png",
+            src: "https://particles.js.org/images/hdr/amongus_cyan.png",
         },
     },
     background: {