@tsparticles/configs 4.0.0-beta.11 → 4.0.0-beta.12

package/browser/d/destroyExplode.js

@@ -0,0 +1,68 @@
+const options = {
+    key: "destroyExplode",
+    name: "Destroy Explode",
+    particles: {
+        number: {
+            value: 80,
+            density: {
+                enable: true,
+            },
+        },
+        destroy: {
+            mode: "explode",
+            explode: {
+                maxSizeFactor: 5,
+                speed: 2,
+            },
+        },
+        paint: {
+            fill: {
+                color: {
+                    value: ["#3998D0", "#2EB6AF", "#A9BD33", "#FEC73B", "#F89930", "#F45623", "#D62E32", "#EB586E", "#9952CF"],
+                },
+                enable: true,
+            },
+            stroke: {
+                width: 0,
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 0.9,
+        },
+        size: {
+            value: {
+                min: 10,
+                max: 15,
+            },
+        },
+        collisions: {
+            enable: true,
+            mode: "destroy",
+        },
+        move: {
+            enable: true,
+            speed: 3,
+            outModes: "bounce",
+        },
+    },
+    interactivity: {
+        events: {
+            onClick: {
+                enable: true,
+                mode: "push",
+            },
+        },
+        modes: {
+            push: {
+                quantity: 1,
+            },
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+};
+export default options;

package/browser/d/index.js

@@ -5,6 +5,7 @@ import delayOpacity from "./delayOpacity.js";
 import delaySize from "./delaySize.js";
 import delayStrokeColor from "./delayStrokeColor.js";
 import destroy from "./destroy.js";
+import destroyExplode from "./destroyExplode.js";
 import disappearing from "./disappearing.js";
 import divEvents from "./divEvents.js";
 export default {
@@ -15,6 +16,7 @@ export default {
     delaySize,
     delayStrokeColor,
     destroy,
+    destroyExplode,
     disappearing,
     divEvents,
 };

package/browser/m/index.js

@@ -5,6 +5,8 @@ import motionReduce from "./motionReduce.js";
 import mouseAttract from "./mouseAttract.js";
 import mouseBounce from "./mouseBounce.js";
 import mouseCannon from "./mouseCannon.js";
+import mouseDestroy from "./mouseDestroy.js";
+import mouseDestroyExplode from "./mouseDestroyExplode.js";
 import mouseDrag from "./mouseDrag.js";
 import mouseDragMomentum from "./mouseDragMomentum.js";
 import mouseFollow from "./mouseFollow.js";
@@ -26,6 +28,8 @@ export default {
     mouseAttract,
     mouseBounce,
     mouseCannon,
+    mouseDestroy,
+    mouseDestroyExplode,
     mouseDrag,
     mouseDragMomentum,
     mouseFollow,

package/browser/m/mouseDestroy.js

@@ -0,0 +1,61 @@
+const options = {
+    key: "mouseDestroy",
+    name: "Mouse Destroy",
+    particles: {
+        number: {
+            value: 120,
+            density: {
+                enable: true,
+            },
+        },
+        paint: {
+            fill: {
+                color: {
+                    value: ["#7dd3fc", "#34d399", "#fbbf24", "#f97316", "#ef4444"],
+                },
+                enable: true,
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 0.8,
+        },
+        size: {
+            value: {
+                min: 2,
+                max: 5,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 1.8,
+            outModes: "bounce",
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "destroy",
+            },
+            onClick: {
+                enable: true,
+                mode: "push",
+            },
+        },
+        modes: {
+            destroy: {
+                distance: 130,
+            },
+            push: {
+                quantity: 6,
+            },
+        },
+    },
+    background: {
+        color: "#05070b",
+    },
+};
+export default options;

package/browser/m/mouseDestroyExplode.js

@@ -0,0 +1,81 @@
+const options = {
+    key: "mouseDestroyExplode",
+    name: "Mouse Destroy Explode Stress",
+    particles: {
+        number: {
+            value: 500,
+        },
+        destroy: {
+            mode: "explode",
+            explode: {
+                maxSizeFactor: 10,
+                speed: 2,
+            },
+        },
+        paint: {
+            stroke: {
+                color: {
+                    value: ["#60a5fa", "#22d3ee", "#22c55e", "#fde047", "#f97316", "#ef4444"],
+                },
+                width: 2,
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: {
+                min: 3,
+                max: 7,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 4,
+            direction: "inside",
+            outModes: "destroy",
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: ["attract", "destroy", "repulse"],
+            },
+        },
+        modes: {
+            destroy: {
+                distance: 75,
+            },
+            repulse: {
+                distance: 75,
+            },
+            attract: {
+                distance: 1920,
+                speed: 7,
+            },
+        },
+    },
+    background: {
+        color: "#030712",
+    },
+    emitters: {
+        fill: false,
+        size: {
+            width: 100,
+            height: 100,
+        },
+        position: {
+            x: 50,
+            y: 50,
+        },
+        rate: {
+            delay: 0.1,
+            quantity: 20,
+        },
+    },
+};
+export default options;

package/cjs/d/destroyExplode.js

@@ -0,0 +1,68 @@
+const options = {
+    key: "destroyExplode",
+    name: "Destroy Explode",
+    particles: {
+        number: {
+            value: 80,
+            density: {
+                enable: true,
+            },
+        },
+        destroy: {
+            mode: "explode",
+            explode: {
+                maxSizeFactor: 5,
+                speed: 2,
+            },
+        },
+        paint: {
+            fill: {
+                color: {
+                    value: ["#3998D0", "#2EB6AF", "#A9BD33", "#FEC73B", "#F89930", "#F45623", "#D62E32", "#EB586E", "#9952CF"],
+                },
+                enable: true,
+            },
+            stroke: {
+                width: 0,
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 0.9,
+        },
+        size: {
+            value: {
+                min: 10,
+                max: 15,
+            },
+        },
+        collisions: {
+            enable: true,
+            mode: "destroy",
+        },
+        move: {
+            enable: true,
+            speed: 3,
+            outModes: "bounce",
+        },
+    },
+    interactivity: {
+        events: {
+            onClick: {
+                enable: true,
+                mode: "push",
+            },
+        },
+        modes: {
+            push: {
+                quantity: 1,
+            },
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+};
+export default options;

package/cjs/d/index.js

@@ -5,6 +5,7 @@ import delayOpacity from "./delayOpacity.js";
 import delaySize from "./delaySize.js";
 import delayStrokeColor from "./delayStrokeColor.js";
 import destroy from "./destroy.js";
+import destroyExplode from "./destroyExplode.js";
 import disappearing from "./disappearing.js";
 import divEvents from "./divEvents.js";
 export default {
@@ -15,6 +16,7 @@ export default {
     delaySize,
     delayStrokeColor,
     destroy,
+    destroyExplode,
     disappearing,
     divEvents,
 };

package/cjs/m/index.js

@@ -5,6 +5,8 @@ import motionReduce from "./motionReduce.js";
 import mouseAttract from "./mouseAttract.js";
 import mouseBounce from "./mouseBounce.js";
 import mouseCannon from "./mouseCannon.js";
+import mouseDestroy from "./mouseDestroy.js";
+import mouseDestroyExplode from "./mouseDestroyExplode.js";
 import mouseDrag from "./mouseDrag.js";
 import mouseDragMomentum from "./mouseDragMomentum.js";
 import mouseFollow from "./mouseFollow.js";
@@ -26,6 +28,8 @@ export default {
     mouseAttract,
     mouseBounce,
     mouseCannon,
+    mouseDestroy,
+    mouseDestroyExplode,
     mouseDrag,
     mouseDragMomentum,
     mouseFollow,

package/cjs/m/mouseDestroy.js

@@ -0,0 +1,61 @@
+const options = {
+    key: "mouseDestroy",
+    name: "Mouse Destroy",
+    particles: {
+        number: {
+            value: 120,
+            density: {
+                enable: true,
+            },
+        },
+        paint: {
+            fill: {
+                color: {
+                    value: ["#7dd3fc", "#34d399", "#fbbf24", "#f97316", "#ef4444"],
+                },
+                enable: true,
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 0.8,
+        },
+        size: {
+            value: {
+                min: 2,
+                max: 5,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 1.8,
+            outModes: "bounce",
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "destroy",
+            },
+            onClick: {
+                enable: true,
+                mode: "push",
+            },
+        },
+        modes: {
+            destroy: {
+                distance: 130,
+            },
+            push: {
+                quantity: 6,
+            },
+        },
+    },
+    background: {
+        color: "#05070b",
+    },
+};
+export default options;

package/cjs/m/mouseDestroyExplode.js

@@ -0,0 +1,81 @@
+const options = {
+    key: "mouseDestroyExplode",
+    name: "Mouse Destroy Explode Stress",
+    particles: {
+        number: {
+            value: 500,
+        },
+        destroy: {
+            mode: "explode",
+            explode: {
+                maxSizeFactor: 10,
+                speed: 2,
+            },
+        },
+        paint: {
+            stroke: {
+                color: {
+                    value: ["#60a5fa", "#22d3ee", "#22c55e", "#fde047", "#f97316", "#ef4444"],
+                },
+                width: 2,
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: {
+                min: 3,
+                max: 7,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 4,
+            direction: "inside",
+            outModes: "destroy",
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: ["attract", "destroy", "repulse"],
+            },
+        },
+        modes: {
+            destroy: {
+                distance: 75,
+            },
+            repulse: {
+                distance: 75,
+            },
+            attract: {
+                distance: 1920,
+                speed: 7,
+            },
+        },
+    },
+    background: {
+        color: "#030712",
+    },
+    emitters: {
+        fill: false,
+        size: {
+            width: 100,
+            height: 100,
+        },
+        position: {
+            x: 50,
+            y: 50,
+        },
+        rate: {
+            delay: 0.1,
+            quantity: 20,
+        },
+    },
+};
+export default options;

package/esm/d/destroyExplode.js

@@ -0,0 +1,68 @@
+const options = {
+    key: "destroyExplode",
+    name: "Destroy Explode",
+    particles: {
+        number: {
+            value: 80,
+            density: {
+                enable: true,
+            },
+        },
+        destroy: {
+            mode: "explode",
+            explode: {
+                maxSizeFactor: 5,
+                speed: 2,
+            },
+        },
+        paint: {
+            fill: {
+                color: {
+                    value: ["#3998D0", "#2EB6AF", "#A9BD33", "#FEC73B", "#F89930", "#F45623", "#D62E32", "#EB586E", "#9952CF"],
+                },
+                enable: true,
+            },
+            stroke: {
+                width: 0,
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 0.9,
+        },
+        size: {
+            value: {
+                min: 10,
+                max: 15,
+            },
+        },
+        collisions: {
+            enable: true,
+            mode: "destroy",
+        },
+        move: {
+            enable: true,
+            speed: 3,
+            outModes: "bounce",
+        },
+    },
+    interactivity: {
+        events: {
+            onClick: {
+                enable: true,
+                mode: "push",
+            },
+        },
+        modes: {
+            push: {
+                quantity: 1,
+            },
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+};
+export default options;

package/esm/d/index.js

@@ -5,6 +5,7 @@ import delayOpacity from "./delayOpacity.js";
 import delaySize from "./delaySize.js";
 import delayStrokeColor from "./delayStrokeColor.js";
 import destroy from "./destroy.js";
+import destroyExplode from "./destroyExplode.js";
 import disappearing from "./disappearing.js";
 import divEvents from "./divEvents.js";
 export default {
@@ -15,6 +16,7 @@ export default {
     delaySize,
     delayStrokeColor,
     destroy,
+    destroyExplode,
     disappearing,
     divEvents,
 };

package/esm/m/index.js

@@ -5,6 +5,8 @@ import motionReduce from "./motionReduce.js";
 import mouseAttract from "./mouseAttract.js";
 import mouseBounce from "./mouseBounce.js";
 import mouseCannon from "./mouseCannon.js";
+import mouseDestroy from "./mouseDestroy.js";
+import mouseDestroyExplode from "./mouseDestroyExplode.js";
 import mouseDrag from "./mouseDrag.js";
 import mouseDragMomentum from "./mouseDragMomentum.js";
 import mouseFollow from "./mouseFollow.js";
@@ -26,6 +28,8 @@ export default {
     mouseAttract,
     mouseBounce,
     mouseCannon,
+    mouseDestroy,
+    mouseDestroyExplode,
     mouseDrag,
     mouseDragMomentum,
     mouseFollow,

package/esm/m/mouseDestroy.js

@@ -0,0 +1,61 @@
+const options = {
+    key: "mouseDestroy",
+    name: "Mouse Destroy",
+    particles: {
+        number: {
+            value: 120,
+            density: {
+                enable: true,
+            },
+        },
+        paint: {
+            fill: {
+                color: {
+                    value: ["#7dd3fc", "#34d399", "#fbbf24", "#f97316", "#ef4444"],
+                },
+                enable: true,
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 0.8,
+        },
+        size: {
+            value: {
+                min: 2,
+                max: 5,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 1.8,
+            outModes: "bounce",
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "destroy",
+            },
+            onClick: {
+                enable: true,
+                mode: "push",
+            },
+        },
+        modes: {
+            destroy: {
+                distance: 130,
+            },
+            push: {
+                quantity: 6,
+            },
+        },
+    },
+    background: {
+        color: "#05070b",
+    },
+};
+export default options;