@tsparticles/configs 4.0.0-alpha.5 → 4.0.0-beta.0

package/umd/b/bigBlendCombo.js

@@ -0,0 +1,101 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    const options = {
+        key: "bigBlendCombo",
+        name: "Big Particles with Global and Particle Blend",
+        particles: {
+            number: {
+                value: 30,
+            },
+            fill: {
+                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",
+                    ],
+                },
+                enable: true,
+            },
+            shape: {
+                type: "circle",
+            },
+            opacity: {
+                value: {
+                    min: 0.5,
+                    max: 0.9,
+                },
+            },
+            size: {
+                value: {
+                    min: 300,
+                    max: 400,
+                },
+                animation: {
+                    enable: true,
+                    speed: 100,
+                    sync: false,
+                },
+            },
+            move: {
+                enable: true,
+                speed: 10,
+                direction: "top",
+            },
+            blend: {
+                enable: true,
+                mode: "color-burn",
+            },
+        },
+        background: {
+            color: "#ffffff",
+        },
+        blend: {
+            enable: true,
+            mode: "screen",
+        },
+    };
+    exports.default = options;
+});

package/umd/b/bigBlendParticle.js

@@ -0,0 +1,97 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    const options = {
+        key: "bigBlendParticle",
+        name: "Big Particles with Particle Blend",
+        particles: {
+            number: {
+                value: 30,
+            },
+            fill: {
+                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",
+                    ],
+                },
+                enable: true,
+            },
+            shape: {
+                type: "circle",
+            },
+            opacity: {
+                value: {
+                    min: 0.5,
+                    max: 0.9,
+                },
+            },
+            size: {
+                value: {
+                    min: 300,
+                    max: 400,
+                },
+                animation: {
+                    enable: true,
+                    speed: 100,
+                    sync: false,
+                },
+            },
+            move: {
+                enable: true,
+                speed: 10,
+                direction: "top",
+            },
+            blend: {
+                enable: true,
+                mode: "color-burn",
+            },
+        },
+        background: {
+            color: "#ffffff",
+        },
+    };
+    exports.default = options;
+});

package/umd/b/blackHole.js

@@ -19,8 +19,11 @@
                     enable: true,
                 },
             },
-            color: {
-                value: ["#ffffff", "#77ccff", "#ff3333", "#ffff33"],
+            fill: {
+                color: {
+                    value: ["#ffffff", "#77ccff", "#ff3333", "#ffff33"],
+                },
+                enable: true,
             },
             shape: {
                 type: "circle",

package/umd/b/bubble.js

@@ -19,8 +19,11 @@
                     enable: true,
                 },
             },
-            color: {
-                value: "#1b1e34",
+            fill: {
+                color: {
+                    value: "#1b1e34",
+                },
+                enable: true,
             },
             shape: {
                 type: "polygon",

package/umd/b/index.js

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./backgroundMask.js", "./backgroundMaskImage.js", "./basic.js", "./big.js", "./blackHole.js", "./bubble.js"], factory);
+        define(["require", "exports", "./backgroundMask.js", "./backgroundMaskImage.js", "./basic.js", "./big.js", "./bigBlend.js", "./bigBlendCombo.js", "./bigBlendParticle.js", "./blackHole.js", "./bubble.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -16,6 +16,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     const backgroundMaskImage_js_1 = __importDefault(require("./backgroundMaskImage.js"));
     const basic_js_1 = __importDefault(require("./basic.js"));
     const big_js_1 = __importDefault(require("./big.js"));
+    const bigBlend_js_1 = __importDefault(require("./bigBlend.js"));
+    const bigBlendCombo_js_1 = __importDefault(require("./bigBlendCombo.js"));
+    const bigBlendParticle_js_1 = __importDefault(require("./bigBlendParticle.js"));
     const blackHole_js_1 = __importDefault(require("./blackHole.js"));
     const bubble_js_1 = __importDefault(require("./bubble.js"));
     exports.default = {
@@ -23,6 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
         backgroundMaskImage: backgroundMaskImage_js_1.default,
         basic: basic_js_1.default,
         big: big_js_1.default,
+        bigBlend: bigBlend_js_1.default,
+        bigBlendCombo: bigBlendCombo_js_1.default,
+        bigBlendParticle: bigBlendParticle_js_1.default,
         blackHole: blackHole_js_1.default,
         bubble: bubble_js_1.default,
     };

package/umd/c/cardSuits.js

@@ -0,0 +1,104 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    const options = {
+        key: "cardSuits",
+        name: "Card Suits",
+        particles: {
+            number: {
+                value: 80,
+                density: {
+                    enable: true,
+                },
+            },
+            reduceDuplicates: true,
+            shape: {
+                type: ["spades", "hearts", "diamonds", "clubs"],
+                options: {
+                    spades: {
+                        particles: {
+                            fill: {
+                                color: {
+                                    value: "#000000",
+                                },
+                                enable: true,
+                            },
+                        },
+                    },
+                    hearts: {
+                        particles: {
+                            fill: {
+                                color: {
+                                    value: "#ff0000",
+                                },
+                                enable: true,
+                            },
+                        },
+                    },
+                    diamonds: {
+                        particles: {
+                            fill: {
+                                color: {
+                                    value: "#ff0000",
+                                },
+                                enable: true,
+                            },
+                        },
+                    },
+                    clubs: {
+                        particles: {
+                            fill: {
+                                color: {
+                                    value: "#000000",
+                                },
+                                enable: true,
+                            },
+                        },
+                    },
+                },
+            },
+            opacity: {
+                value: 1,
+            },
+            size: {
+                value: 30,
+            },
+            move: {
+                enable: true,
+                speed: 2,
+            },
+        },
+        interactivity: {
+            events: {
+                onHover: {
+                    enable: true,
+                    mode: "repulse",
+                },
+                onClick: {
+                    enable: true,
+                    mode: "push",
+                },
+            },
+            modes: {
+                repulse: {
+                    distance: 200,
+                },
+                push: {
+                    quantity: 4,
+                },
+            },
+        },
+        background: {
+            color: "#fff",
+        },
+    };
+    exports.default = options;
+});

package/umd/c/cards.js

@@ -9,48 +9,27 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    const options = {
+    const cardSuits = ["spades", "hearts", "diamonds", "clubs"], cardValues = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"], allCards = cardSuits.flatMap(suit => cardValues.map(value => ({
+        suit,
+        value,
+    }))), options = {
         key: "cards",
         name: "Cards",
         particles: {
-            number: {
-                value: 80,
-                density: {
-                    enable: true,
+            fill: {
+                color: {
+                    value: "#fff",
                 },
+                enable: true,
+            },
+            number: {
+                value: 52,
             },
             reduceDuplicates: true,
             shape: {
-                type: ["spades", "hearts", "diamonds", "clubs"],
+                type: ["card"],
                 options: {
-                    spades: {
-                        particles: {
-                            color: {
-                                value: "#000000",
-                            },
-                        },
-                    },
-                    hearts: {
-                        particles: {
-                            color: {
-                                value: "#ff0000",
-                            },
-                        },
-                    },
-                    diamonds: {
-                        particles: {
-                            color: {
-                                value: "#ff0000",
-                            },
-                        },
-                    },
-                    clubs: {
-                        particles: {
-                            color: {
-                                value: "#000000",
-                            },
-                        },
-                    },
+                    card: allCards,
                 },
             },
             opacity: {
@@ -63,6 +42,10 @@
                 enable: true,
                 speed: 2,
             },
+            stroke: {
+                width: 1,
+                color: { value: "#000" },
+            },
         },
         interactivity: {
             events: {

package/umd/c/cardsRolling.js

@@ -0,0 +1,103 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    const cardSuits = ["spades", "hearts", "diamonds", "clubs"], cardValues = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"], allCards = cardSuits.flatMap(suit => cardValues.map(value => ({
+        suit,
+        value,
+    }))), options = {
+        key: "cardsRolling",
+        name: "Cards Rolling",
+        particles: {
+            fill: {
+                color: {
+                    value: "#000",
+                },
+                enable: true,
+            },
+            number: {
+                value: 52,
+            },
+            reduceDuplicates: true,
+            shape: {
+                type: ["card"],
+                options: {
+                    card: allCards,
+                },
+            },
+            opacity: {
+                value: 1,
+            },
+            size: {
+                value: 30,
+            },
+            stroke: {
+                width: 1,
+                color: { value: "#000" },
+            },
+            move: {
+                enable: true,
+                speed: 2,
+            },
+            roll: {
+                darken: {
+                    enable: true,
+                    value: 30,
+                },
+                enlighten: {
+                    enable: true,
+                    value: 30,
+                },
+                enable: true,
+                mode: "both",
+                speed: {
+                    min: 5,
+                    max: 15,
+                },
+            },
+            tilt: {
+                direction: "random",
+                enable: true,
+                value: {
+                    min: 0,
+                    max: 360,
+                },
+                animation: {
+                    enable: true,
+                    speed: 15,
+                },
+            },
+        },
+        interactivity: {
+            events: {
+                onHover: {
+                    enable: true,
+                    mode: "repulse",
+                },
+                onClick: {
+                    enable: true,
+                    mode: "push",
+                },
+            },
+            modes: {
+                repulse: {
+                    distance: 200,
+                },
+                push: {
+                    quantity: 4,
+                },
+            },
+        },
+        background: {
+            color: "#fff",
+        },
+    };
+    exports.default = options;
+});

package/umd/c/chars.js

@@ -19,38 +19,36 @@
                     enable: true,
                 },
             },
-            color: {
-                value: "#ff0000",
-            },
             stroke: {
                 width: 1,
-                color: "#ffffff",
+                color: { value: "#ffffff" },
             },
             shape: {
-                type: "char",
+                type: "text",
                 options: {
-                    char: [
-                        {
-                            value: ["t", "s", "P", "a", "r", "t", "i", "c", "l", "e", "s"],
-                            font: "Verdana",
-                            style: "",
-                            weight: "400",
-                            fill: true,
-                        },
-                        {
-                            value: ["t", "s", "P", "a", "r", "t", "i", "c", "l", "e", "s"],
-                            font: "Verdana",
-                            style: "",
-                            weight: "400",
-                            fill: false,
+                    text: {
+                        value: ["t", "s", "P", "a", "r", "t", "i", "c", "l", "e", "s"],
+                        font: "Verdana",
+                        style: "",
+                        weight: "400",
+                        particles: {
+                            fill: [
+                                {
+                                    color: {
+                                        value: "#ff0000",
+                                    },
+                                    enable: true,
+                                },
+                                { enable: false },
+                            ],
                         },
-                    ],
+                    },
                 },
             },
             opacity: {
                 value: {
-                    min: 0.1,
-                    max: 0.5,
+                    min: 0.4,
+                    max: 0.8,
                 },
                 animation: {
                     enable: true,
@@ -60,13 +58,6 @@
             size: {
                 value: 16,
             },
-            links: {
-                enable: true,
-                distance: 150,
-                color: "#ffffff",
-                opacity: 0.4,
-                width: 1,
-            },
             move: {
                 enable: true,
                 speed: 2,

package/umd/c/clickConfetti.js

@@ -23,26 +23,30 @@
             modes: {
                 emitters: {
                     direction: "none",
-                    spawnColor: {
-                        value: "#ff0000",
-                        animation: {
-                            h: {
-                                enable: true,
-                                offset: {
-                                    min: -1.4,
-                                    max: 1.4,
+                    spawn: {
+                        fill: {
+                            color: {
+                                value: "#ff0000",
+                                animation: {
+                                    h: {
+                                        enable: true,
+                                        offset: {
+                                            min: -1.4,
+                                            max: 1.4,
+                                        },
+                                        speed: 0.1,
+                                        sync: false,
+                                    },
+                                    l: {
+                                        enable: true,
+                                        offset: {
+                                            min: 20,
+                                            max: 80,
+                                        },
+                                        speed: 0,
+                                        sync: false,
+                                    },
                                 },
-                                speed: 0.1,
-                                sync: false,
-                            },
-                            l: {
-                                enable: true,
-                                offset: {
-                                    min: 20,
-                                    max: 80,
-                                },
-                                speed: 0,
-                                sync: false,
                             },
                         },
                     },
@@ -66,8 +70,11 @@
             number: {
                 value: 0,
             },
-            color: {
-                value: "#f00",
+            fill: {
+                color: {
+                    value: "#f00",
+                },
+                enable: true,
             },
             shape: {
                 type: ["circle", "square", "polygon"],

package/umd/c/clickPause.js

@@ -19,8 +19,11 @@
                     enable: true,
                 },
             },
-            color: {
-                value: "#ffffff",
+            fill: {
+                color: {
+                    value: "#ffffff",
+                },
+                enable: true,
             },
             shape: {
                 type: "circle",