@tsparticles/configs 3.9.1 → 4.0.0-alpha.1

package/cjs/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/cjs/f/fontawesome.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const options = {
     key: "fontawesome",
     name: "Font Awesome",
@@ -35,11 +33,6 @@ const options = {
             distance: 150,
             enable: true,
             opacity: 0.4,
-            shadow: {
-                blur: 5,
-                color: "lime",
-                enable: false,
-            },
             width: 1,
         },
         move: {
@@ -102,4 +95,4 @@ const options = {
         size: "cover",
     },
 };
-exports.default = options;
+export default options;

package/cjs/f/forward.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const options = {
     key: "forward",
     name: "Forward",
@@ -29,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,
@@ -89,4 +87,4 @@ const options = {
         color: "#ffffff",
     },
 };
-exports.default = options;
+export default options;

package/cjs/f/index.js

@@ -1,15 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fireworks_js_1 = __importDefault(require("./fireworks.js"));
-const fireworks2_js_1 = __importDefault(require("./fireworks2.js"));
-const fontawesome_js_1 = __importDefault(require("./fontawesome.js"));
-const forward_js_1 = __importDefault(require("./forward.js"));
-exports.default = {
-    fireworks: fireworks_js_1.default,
-    fireworks2: fireworks2_js_1.default,
-    fontawesome: fontawesome_js_1.default,
-    forward: forward_js_1.default,
+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/cjs/g/gifs.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const options = {
     key: "gifs",
     name: "Gifs",
@@ -53,4 +51,4 @@ const options = {
         },
     },
 };
-exports.default = options;
+export default options;

package/cjs/g/grabRandomColor.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const options = {
     key: "grabRandomColor",
     name: "Grab Random Color",
@@ -82,4 +80,4 @@ const options = {
         color: "#000000",
     },
 };
-exports.default = options;
+export default options;

package/cjs/g/gradients.js

@@ -1,6 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const engine_1 = require("@tsparticles/engine");
+import { GradientType, RotateDirection } from "@tsparticles/engine";
 const options = {
     key: "gradients",
     name: "Gradients",
@@ -10,7 +8,7 @@ const options = {
         },
         gradient: [
             {
-                type: engine_1.GradientType.radial,
+                type: GradientType.radial,
                 colors: [
                     {
                         stop: 0.25,
@@ -24,7 +22,7 @@ const options = {
                 ],
             },
             {
-                type: engine_1.GradientType.radial,
+                type: GradientType.radial,
                 colors: [
                     {
                         stop: 0.25,
@@ -38,7 +36,7 @@ const options = {
                 ],
             },
             {
-                type: engine_1.GradientType.radial,
+                type: GradientType.radial,
                 colors: [
                     {
                         stop: 0.25,
@@ -52,7 +50,7 @@ const options = {
                 ],
             },
             {
-                type: engine_1.GradientType.radial,
+                type: GradientType.radial,
                 colors: [
                     {
                         stop: 0.25,
@@ -66,7 +64,7 @@ const options = {
                 ],
             },
             {
-                type: engine_1.GradientType.radial,
+                type: GradientType.radial,
                 colors: [
                     {
                         stop: 0.25,
@@ -80,7 +78,7 @@ const options = {
                 ],
             },
             {
-                type: engine_1.GradientType.radial,
+                type: GradientType.radial,
                 colors: [
                     {
                         stop: 0.25,
@@ -123,10 +121,10 @@ const options = {
                 ],
             },
             {
-                type: engine_1.GradientType.linear,
+                type: GradientType.linear,
                 angle: {
                     value: 0,
-                    direction: engine_1.RotateDirection.random,
+                    direction: RotateDirection.random,
                     animation: {
                         enable: true,
                         speed: 60,
@@ -175,4 +173,4 @@ const options = {
         color: "#000",
     },
 };
-exports.default = options;
+export default options;

package/cjs/g/gravity.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const options = {
     key: "gravity",
     name: "Gravity",
@@ -49,11 +47,6 @@ const options = {
                 default: "bounce",
                 top: "none",
             },
-            trail: {
-                enable: true,
-                fill: { color: "#000000" },
-                length: 10,
-            },
         },
     },
     background: {
@@ -114,5 +107,10 @@ const options = {
             },
         },
     },
+    trail: {
+        enable: true,
+        fill: { color: "#000000" },
+        length: 10,
+    },
 };
-exports.default = options;
+export default options;

package/cjs/g/groups.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const options = {
     key: "groups",
     name: "Groups",
@@ -65,4 +63,4 @@ const options = {
         color: "#000000",
     },
 };
-exports.default = options;
+export default options;

package/cjs/g/growing.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const options = {
     key: "growing",
     name: "Growing",
@@ -68,4 +66,4 @@ const options = {
         size: "cover",
     },
 };
-exports.default = options;
+export default options;

package/cjs/g/index.js

@@ -1,19 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const gifs_js_1 = __importDefault(require("./gifs.js"));
-const grabRandomColor_js_1 = __importDefault(require("./grabRandomColor.js"));
-const gradients_js_1 = __importDefault(require("./gradients.js"));
-const gravity_js_1 = __importDefault(require("./gravity.js"));
-const groups_1 = __importDefault(require("./groups"));
-const growing_js_1 = __importDefault(require("./growing.js"));
-exports.default = {
-    gifs: gifs_js_1.default,
-    grabRandomColor: grabRandomColor_js_1.default,
-    gradients: gradients_js_1.default,
-    gravity: gravity_js_1.default,
-    groups: groups_1.default,
-    growing: growing_js_1.default,
+import gifs from "./gifs.js";
+import grabRandomColor from "./grabRandomColor.js";
+import gradients from "./gradients.js";
+import gravity from "./gravity.js";
+import groups from "./groups.js";
+import growing from "./growing.js";
+export default {
+    gifs,
+    grabRandomColor,
+    gradients,
+    gravity,
+    groups,
+    growing,
 };

package/cjs/h/hexagonPath.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const options = {
     key: "hexagonPath",
     name: "Hexagon Path",
@@ -31,11 +29,6 @@ const options = {
                 },
             },
             speed: 3,
-            trail: {
-                fill: { color: "#000" },
-                length: 20,
-                enable: true,
-            },
         },
         number: {
             density: {
@@ -71,5 +64,10 @@ const options = {
             y: 50,
         },
     },
+    trail: {
+        fill: { color: "#000" },
+        length: 20,
+        enable: true,
+    },
 };
-exports.default = options;
+export default options;

package/cjs/h/hollowknight.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const options = {
     key: "hollowknight",
     name: "Hollow Knight",
@@ -107,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",
@@ -117,4 +115,4 @@ const options = {
         size: "cover",
     },
 };
-exports.default = options;
+export default options;

package/cjs/h/hyperspace.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const options = {
     key: "hyperspace",
     name: "Hyperspace",
@@ -16,11 +14,6 @@ const options = {
                 default: "destroy",
             },
             speed: 3,
-            trail: {
-                fill: { color: "#000" },
-                length: 30,
-                enable: true,
-            },
         },
         number: {
             density: {
@@ -63,5 +56,10 @@ const options = {
             y: 50,
         },
     },
+    trail: {
+        fill: { color: "#000" },
+        length: 30,
+        enable: true,
+    },
 };
-exports.default = options;
+export default options;

package/cjs/h/index.js

@@ -1,13 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const hexagonPath_js_1 = __importDefault(require("./hexagonPath.js"));
-const hollowknight_js_1 = __importDefault(require("./hollowknight.js"));
-const hyperspace_js_1 = __importDefault(require("./hyperspace.js"));
-exports.default = {
-    hexagonPath: hexagonPath_js_1.default,
-    hollowknight: hollowknight_js_1.default,
-    hyperspace: hyperspace_js_1.default,
+import hexagonPath from "./hexagonPath.js";
+import hollowknight from "./hollowknight.js";
+import hyperspace from "./hyperspace.js";
+export default {
+    hexagonPath,
+    hollowknight,
+    hyperspace,
 };

package/cjs/i/imageMask.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const minFilterValue = 30, minFilterAlpha = 0, options = {
     key: "imageMask",
     name: "Image Mask",
@@ -54,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: {
@@ -65,4 +63,4 @@ const minFilterValue = 30, minFilterAlpha = 0, options = {
         size: "cover",
     },
 };
-exports.default = options;
+export default options;