@tsparticles/configs 3.1.0 → 3.2.0

package/browser/b/backgroundMask.js

@@ -62,10 +62,12 @@ const options = {
     backgroundMask: {
         enable: true,
         cover: {
-            value: {
-                r: 255,
-                g: 255,
-                b: 255,
+            color: {
+                value: {
+                    r: 255,
+                    g: 255,
+                    b: 255,
+                },
             },
         },
     },

package/browser/b/backgroundMaskImage.js

@@ -0,0 +1,70 @@
+const options = {
+    key: "backgroundMaskImage",
+    name: "Background Mask Image",
+    particles: {
+        number: {
+            value: 100,
+        },
+        color: {
+            value: "#ffffff",
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: {
+                min: 10,
+                max: 50,
+            },
+            animation: {
+                enable: true,
+                speed: 25,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 2,
+            direction: "none",
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "bubble",
+            },
+            onClick: {
+                enable: true,
+                mode: "push",
+            },
+        },
+        modes: {
+            bubble: {
+                distance: 400,
+                size: 100,
+                duration: 2,
+                opacity: 1,
+            },
+            push: {
+                quantity: 4,
+            },
+        },
+    },
+    backgroundMask: {
+        enable: true,
+        cover: {
+            image: "https://particles.js.org/images/background2.jpg",
+        },
+    },
+    background: {
+        color: "#ffffff",
+        image: "url('https://particles.js.org/images/background3.jpg')",
+        position: "50% 50%",
+        repeat: "no-repeat",
+        size: "cover",
+    },
+};
+export default options;

package/browser/b/index.js

@@ -1,10 +1,12 @@
 import backgroundMask from "./backgroundMask.js";
+import backgroundMaskImage from "./backgroundMaskImage.js";
 import basic from "./basic.js";
 import big from "./big.js";
 import blackHole from "./blackHole.js";
 import bubble from "./bubble.js";
 export default {
     backgroundMask,
+    backgroundMaskImage,
     basic,
     big,
     blackHole,

package/browser/e/emitterSpawnColor.js

@@ -0,0 +1,163 @@
+const emitterRate = {
+    delay: 0.1,
+    quantity: 2,
+}, options = {
+    key: "emitterSpawnColor",
+    name: "Emitter Spawn Color",
+    particles: {
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: 3,
+        },
+        life: {
+            count: 1,
+            duration: {
+                value: 5,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 3,
+            outModes: {
+                default: "destroy",
+            },
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+    emitters: [
+        {
+            position: {
+                x: 33,
+                y: 0,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "bottom-right",
+                },
+            },
+            spawnColor: {
+                value: "#ff0000",
+                animation: {
+                    h: {
+                        enable: true,
+                        speed: 10,
+                    },
+                },
+            },
+        },
+        {
+            position: {
+                x: 33,
+                y: 100,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "top-right",
+                },
+            },
+            spawnColor: {
+                value: "#ff0000",
+                animation: {
+                    s: {
+                        enable: true,
+                        speed: 10,
+                        offset: {
+                            min: -10,
+                            max: 10,
+                        },
+                    },
+                },
+            },
+        },
+        {
+            position: {
+                x: 100,
+                y: 0,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "bottom-left",
+                },
+            },
+            spawnColor: {
+                value: "#ff0000",
+                animation: {
+                    l: {
+                        enable: true,
+                        speed: 10,
+                        offset: {
+                            min: -10,
+                            max: 10,
+                        },
+                    },
+                },
+            },
+        },
+        {
+            position: {
+                x: 100,
+                y: 100,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "top-left",
+                },
+            },
+            spawnColor: {
+                value: "#ff0000",
+                animation: {
+                    h: {
+                        enable: true,
+                        speed: 10,
+                    },
+                    s: {
+                        enable: true,
+                        speed: 10,
+                        offset: {
+                            min: -10,
+                            max: 10,
+                        },
+                    },
+                },
+            },
+        },
+        {
+            position: {
+                x: 66,
+                y: 50,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "none",
+                },
+            },
+            spawnColor: {
+                value: "#ff0000",
+                animation: {
+                    h: {
+                        enable: true,
+                        speed: 10,
+                    },
+                    l: {
+                        enable: true,
+                        speed: 10,
+                        offset: {
+                            min: -10,
+                            max: 10,
+                        },
+                    },
+                },
+            },
+        },
+    ],
+};
+export default options;

package/browser/e/index.js

@@ -7,6 +7,7 @@ import emitterImageShape from "./emitterImageShape.js";
 import emitterImages from "./emitterImages.js";
 import emitterPaths from "./emitterPaths.js";
 import emitterShapes from "./emitterShapes.js";
+import emitterSpawnColor from "./emitterSpawnColor.js";
 import emitterTextShape from "./emitterTextShape.js";
 import emitterTextStrokeShape from "./emitterTextStrokeShape.js";
 export default {
@@ -19,6 +20,7 @@ export default {
     emitterImages,
     emitterPaths,
     emitterShapes,
+    emitterSpawnColor,
     emitterTextShape,
     emitterTextStrokeShape,
 };

package/browser/f/fireworks2.js

@@ -13,6 +13,9 @@ const options = {
     },
     backgroundMask: {
         enable: true,
+        cover: {
+            color: "#000",
+        },
     },
     emitters: {
         direction: "top",

package/browser/m/index.js

@@ -4,6 +4,8 @@ import motionReduce from "./motionReduce.js";
 import mouseAttract from "./mouseAttract.js";
 import mouseBounce from "./mouseBounce.js";
 import mouseFollow from "./mouseFollow.js";
+import mouseParticle from "./mouseParticle.js";
+import mouseParticle2 from "./mouseParticle2.js";
 import mouseTrail from "./mouseTrail.js";
 import mouseTrailNoise from "./mouseTrailNoise.js";
 import moveAngle from "./moveAngle.js";
@@ -19,6 +21,8 @@ export default {
     mouseAttract,
     mouseBounce,
     mouseFollow,
+    mouseParticle,
+    mouseParticle2,
     mouseTrail,
     mouseTrailNoise,
     moveAngle,

package/browser/m/mouseParticle.js

@@ -0,0 +1,50 @@
+const options = {
+    key: "mouseParticle",
+    name: "Mouse Particle",
+    fullScreen: {
+        zIndex: 10000,
+    },
+    particles: {
+        number: {
+            value: 0,
+        },
+        color: {
+            value: ["#ff0000", "#00ff00", "#0000ff"],
+            animation: {
+                enable: true,
+                speed: 180,
+                sync: true,
+            },
+        },
+        effect: {
+            type: "trail",
+            options: {
+                trail: {
+                    length: 10,
+                    minWidth: 2,
+                },
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        size: {
+            value: 3,
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "particle",
+            },
+        },
+        modes: {
+            particle: {
+                replaceCursor: true,
+                pauseOnStop: true,
+            },
+        },
+    },
+};
+export default options;

package/browser/m/mouseParticle2.js

@@ -0,0 +1,61 @@
+const options = {
+    key: "mouseParticle2",
+    name: "Mouse Particle 2",
+    background: {
+        color: "#000000",
+    },
+    particles: {
+        number: {
+            value: 80,
+            density: {
+                enable: true,
+            },
+        },
+        color: {
+            value: "#ff0000",
+            animation: {
+                enable: true,
+                speed: 20,
+                sync: true,
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 0.5,
+        },
+        size: {
+            value: {
+                min: 1,
+                max: 3,
+            },
+        },
+        links: {
+            enable: true,
+            distance: 200,
+            color: "#ffffff",
+            opacity: 0.4,
+            width: 1,
+        },
+        move: {
+            enable: true,
+            speed: 6,
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "particle",
+            },
+        },
+        modes: {
+            particle: {
+                replaceCursor: false,
+                pauseOnStop: false,
+            },
+        },
+    },
+};
+export default options;

package/browser/r/reactSimple.js

@@ -107,9 +107,7 @@ const options = {
     },
     backgroundMask: {
         cover: {
-            color: {
-                value: "#fff",
-            },
+            color: "#fff",
             opacity: 1,
         },
         enable: false,

package/cjs/b/backgroundMask.js

@@ -64,10 +64,12 @@ const options = {
     backgroundMask: {
         enable: true,
         cover: {
-            value: {
-                r: 255,
-                g: 255,
-                b: 255,
+            color: {
+                value: {
+                    r: 255,
+                    g: 255,
+                    b: 255,
+                },
             },
         },
     },

package/cjs/b/backgroundMaskImage.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const options = {
+    key: "backgroundMaskImage",
+    name: "Background Mask Image",
+    particles: {
+        number: {
+            value: 100,
+        },
+        color: {
+            value: "#ffffff",
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: {
+                min: 10,
+                max: 50,
+            },
+            animation: {
+                enable: true,
+                speed: 25,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 2,
+            direction: "none",
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "bubble",
+            },
+            onClick: {
+                enable: true,
+                mode: "push",
+            },
+        },
+        modes: {
+            bubble: {
+                distance: 400,
+                size: 100,
+                duration: 2,
+                opacity: 1,
+            },
+            push: {
+                quantity: 4,
+            },
+        },
+    },
+    backgroundMask: {
+        enable: true,
+        cover: {
+            image: "https://particles.js.org/images/background2.jpg",
+        },
+    },
+    background: {
+        color: "#ffffff",
+        image: "url('https://particles.js.org/images/background3.jpg')",
+        position: "50% 50%",
+        repeat: "no-repeat",
+        size: "cover",
+    },
+};
+exports.default = options;

package/cjs/b/index.js

@@ -4,12 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const backgroundMask_js_1 = __importDefault(require("./backgroundMask.js"));
+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 blackHole_js_1 = __importDefault(require("./blackHole.js"));
 const bubble_js_1 = __importDefault(require("./bubble.js"));
 exports.default = {
     backgroundMask: backgroundMask_js_1.default,
+    backgroundMaskImage: backgroundMaskImage_js_1.default,
     basic: basic_js_1.default,
     big: big_js_1.default,
     blackHole: blackHole_js_1.default,

package/cjs/e/emitterSpawnColor.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const emitterRate = {
+    delay: 0.1,
+    quantity: 2,
+}, options = {
+    key: "emitterSpawnColor",
+    name: "Emitter Spawn Color",
+    particles: {
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: 3,
+        },
+        life: {
+            count: 1,
+            duration: {
+                value: 5,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 3,
+            outModes: {
+                default: "destroy",
+            },
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+    emitters: [
+        {
+            position: {
+                x: 33,
+                y: 0,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "bottom-right",
+                },
+            },
+            spawnColor: {
+                value: "#ff0000",
+                animation: {
+                    h: {
+                        enable: true,
+                        speed: 10,
+                    },
+                },
+            },
+        },
+        {
+            position: {
+                x: 33,
+                y: 100,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "top-right",
+                },
+            },
+            spawnColor: {
+                value: "#ff0000",
+                animation: {
+                    s: {
+                        enable: true,
+                        speed: 10,
+                        offset: {
+                            min: -10,
+                            max: 10,
+                        },
+                    },
+                },
+            },
+        },
+        {
+            position: {
+                x: 100,
+                y: 0,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "bottom-left",
+                },
+            },
+            spawnColor: {
+                value: "#ff0000",
+                animation: {
+                    l: {
+                        enable: true,
+                        speed: 10,
+                        offset: {
+                            min: -10,
+                            max: 10,
+                        },
+                    },
+                },
+            },
+        },
+        {
+            position: {
+                x: 100,
+                y: 100,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "top-left",
+                },
+            },
+            spawnColor: {
+                value: "#ff0000",
+                animation: {
+                    h: {
+                        enable: true,
+                        speed: 10,
+                    },
+                    s: {
+                        enable: true,
+                        speed: 10,
+                        offset: {
+                            min: -10,
+                            max: 10,
+                        },
+                    },
+                },
+            },
+        },
+        {
+            position: {
+                x: 66,
+                y: 50,
+            },
+            rate: emitterRate,
+            particles: {
+                move: {
+                    direction: "none",
+                },
+            },
+            spawnColor: {
+                value: "#ff0000",
+                animation: {
+                    h: {
+                        enable: true,
+                        speed: 10,
+                    },
+                    l: {
+                        enable: true,
+                        speed: 10,
+                        offset: {
+                            min: -10,
+                            max: 10,
+                        },
+                    },
+                },
+            },
+        },
+    ],
+};
+exports.default = options;