@tsparticles/configs 3.1.0 → 3.2.0

package/cjs/e/index.js

@@ -12,6 +12,7 @@ const emitterImageShape_js_1 = __importDefault(require("./emitterImageShape.js")
 const emitterImages_js_1 = __importDefault(require("./emitterImages.js"));
 const emitterPaths_js_1 = __importDefault(require("./emitterPaths.js"));
 const emitterShapes_js_1 = __importDefault(require("./emitterShapes.js"));
+const emitterSpawnColor_js_1 = __importDefault(require("./emitterSpawnColor.js"));
 const emitterTextShape_js_1 = __importDefault(require("./emitterTextShape.js"));
 const emitterTextStrokeShape_js_1 = __importDefault(require("./emitterTextStrokeShape.js"));
 exports.default = {
@@ -24,6 +25,7 @@ exports.default = {
     emitterImages: emitterImages_js_1.default,
     emitterPaths: emitterPaths_js_1.default,
     emitterShapes: emitterShapes_js_1.default,
+    emitterSpawnColor: emitterSpawnColor_js_1.default,
     emitterTextShape: emitterTextShape_js_1.default,
     emitterTextStrokeShape: emitterTextStrokeShape_js_1.default,
 };

package/cjs/f/fireworks2.js

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

package/cjs/m/index.js

@@ -9,6 +9,8 @@ const motionReduce_js_1 = __importDefault(require("./motionReduce.js"));
 const mouseAttract_js_1 = __importDefault(require("./mouseAttract.js"));
 const mouseBounce_js_1 = __importDefault(require("./mouseBounce.js"));
 const mouseFollow_js_1 = __importDefault(require("./mouseFollow.js"));
+const mouseParticle_js_1 = __importDefault(require("./mouseParticle.js"));
+const mouseParticle2_js_1 = __importDefault(require("./mouseParticle2.js"));
 const mouseTrail_js_1 = __importDefault(require("./mouseTrail.js"));
 const mouseTrailNoise_js_1 = __importDefault(require("./mouseTrailNoise.js"));
 const moveAngle_js_1 = __importDefault(require("./moveAngle.js"));
@@ -24,6 +26,8 @@ exports.default = {
     mouseAttract: mouseAttract_js_1.default,
     mouseBounce: mouseBounce_js_1.default,
     mouseFollow: mouseFollow_js_1.default,
+    mouseParticle: mouseParticle_js_1.default,
+    mouseParticle2: mouseParticle2_js_1.default,
     mouseTrail: mouseTrail_js_1.default,
     mouseTrailNoise: mouseTrailNoise_js_1.default,
     moveAngle: moveAngle_js_1.default,

package/cjs/m/mouseParticle.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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,
+            },
+        },
+    },
+};
+exports.default = options;

package/cjs/m/mouseParticle2.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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,
+            },
+        },
+    },
+};
+exports.default = options;

package/cjs/r/reactSimple.js

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

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/f/fireworks2.js

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

package/esm/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/esm/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/esm/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/esm/r/reactSimple.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/configs",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "tsParticles demo configurations",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -99,7 +99,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.1.0"
+    "@tsparticles/engine": "^3.2.0"
   },
   "publishConfig": {
     "access": "public"