@tsparticles/configs 3.3.0 → 3.4.0

package/browser/r/randomShapes.js

@@ -0,0 +1,417 @@
+const options = {
+    key: "randomShapes",
+    name: "Random Shapes",
+    interactivity: {
+        events: {
+            onClick: {
+                enable: true,
+                mode: "push",
+            },
+            onHover: {
+                enable: true,
+                mode: "bubble",
+            },
+        },
+        modes: {
+            bubble: {
+                distance: 400,
+                duration: 2,
+                opacity: 0.8,
+                size: 40,
+            },
+            push: {
+                quantity: 4,
+            },
+        },
+    },
+    particles: {
+        color: {
+            value: "#000000",
+        },
+        stroke: {
+            color: {
+                value: "#ff0000",
+            },
+            width: 1,
+        },
+        move: {
+            enable: true,
+            speed: 2,
+        },
+        number: {
+            density: {
+                enable: true,
+            },
+            value: 80,
+        },
+        opacity: {
+            value: 1,
+        },
+        rotate: {
+            animation: {
+                enable: true,
+                speed: 5,
+                sync: false,
+            },
+            direction: "random",
+            value: {
+                min: 0,
+                max: 360,
+            },
+        },
+        shape: {
+            options: {
+                image: [
+                    {
+                        name: "apple",
+                    },
+                    {
+                        name: "avocado",
+                    },
+                    {
+                        name: "banana",
+                    },
+                    {
+                        name: "berries",
+                    },
+                    {
+                        name: "cherry",
+                    },
+                    {
+                        name: "grapes",
+                    },
+                    {
+                        name: "lemon",
+                    },
+                    {
+                        name: "orange",
+                    },
+                    {
+                        name: "peach",
+                    },
+                    {
+                        name: "pear",
+                    },
+                    {
+                        name: "pepper",
+                    },
+                    {
+                        name: "plum",
+                    },
+                    {
+                        name: "star",
+                    },
+                    {
+                        name: "strawberry",
+                    },
+                    {
+                        name: "watermelon",
+                    },
+                    {
+                        name: "watermelon_slice",
+                    },
+                ],
+                arrow: {
+                    heightFactor: {
+                        min: 0.3,
+                        max: 0.8,
+                    },
+                    headWidthFactor: {
+                        min: 0.3,
+                        max: 0.8,
+                    },
+                    bodyHeightFactor: {
+                        min: 0.3,
+                        max: 0.8,
+                    },
+                },
+                cog: {
+                    holeRadius: 44,
+                    innerRadius: 72,
+                    innerTaper: 35,
+                    notches: 7,
+                    outerTaper: 50,
+                },
+                emoji: {
+                    value: "🌈",
+                },
+                text: {
+                    value: "pippo\npluto",
+                },
+                path: [
+                    {
+                        segments: [
+                            {
+                                type: "line",
+                                values: [
+                                    {
+                                        x: -0.5,
+                                        y: -0.5,
+                                    },
+                                ],
+                            },
+                            {
+                                type: "bezier",
+                                values: [
+                                    {
+                                        x: -0.5,
+                                        y: 0.5,
+                                    },
+                                    {
+                                        x: 1,
+                                        y: 1,
+                                    },
+                                    {
+                                        x: 1,
+                                        y: 0.5,
+                                    },
+                                    {
+                                        x: 1,
+                                        y: -0.5,
+                                    },
+                                ],
+                            },
+                            {
+                                type: "quadratic",
+                                values: [
+                                    {
+                                        x: 0.5,
+                                        y: 0.5,
+                                    },
+                                    {
+                                        x: 0.5,
+                                        y: -0.5,
+                                    },
+                                    {
+                                        x: -0.5,
+                                        y: 0.5,
+                                    },
+                                ],
+                            },
+                            {
+                                type: "line",
+                                values: [
+                                    {
+                                        x: 0.5,
+                                        y: -0.5,
+                                    },
+                                ],
+                            },
+                        ],
+                        half: false,
+                    },
+                    {
+                        segments: [
+                            {
+                                type: "line",
+                                values: [
+                                    {
+                                        x: -1,
+                                        y: -1,
+                                    },
+                                ],
+                            },
+                            {
+                                type: "bezier",
+                                values: [
+                                    {
+                                        x: -1,
+                                        y: 1,
+                                    },
+                                    {
+                                        x: 1,
+                                        y: 1,
+                                    },
+                                    {
+                                        x: 0.5,
+                                        y: 1,
+                                    },
+                                    {
+                                        x: -0.5,
+                                        y: 1,
+                                    },
+                                ],
+                            },
+                            {
+                                type: "quadratic",
+                                values: [
+                                    {
+                                        x: 1,
+                                        y: 1,
+                                    },
+                                    {
+                                        x: 1,
+                                        y: -1,
+                                    },
+                                    {
+                                        x: -1,
+                                        y: 1,
+                                    },
+                                ],
+                            },
+                            {
+                                type: "line",
+                                values: [
+                                    {
+                                        x: 1,
+                                        y: -1,
+                                    },
+                                ],
+                            },
+                        ],
+                        half: false,
+                    },
+                ],
+                "rounded-polygon": [
+                    {
+                        radius: { min: 0, max: 10 },
+                        sides: { min: 3, max: 8 },
+                    },
+                ],
+                "rounded-rect": {
+                    radius: { min: 5, max: 15 },
+                },
+                spiral: {
+                    innerRadius: 0.5,
+                    lineSpacing: 0.5,
+                    fill: false,
+                    close: false,
+                },
+                spades: {
+                    particles: {
+                        color: {
+                            value: "#000000",
+                        },
+                    },
+                },
+                hearts: {
+                    particles: {
+                        color: {
+                            value: "#ff0000",
+                        },
+                    },
+                },
+                diamonds: {
+                    particles: {
+                        color: {
+                            value: "#ff0000",
+                        },
+                    },
+                },
+                clubs: {
+                    particles: {
+                        color: {
+                            value: "#000000",
+                        },
+                    },
+                },
+            },
+            type: "random",
+        },
+        size: {
+            value: 16,
+        },
+    },
+    background: {
+        color: "#fff",
+    },
+    preload: [
+        {
+            src: "https://particles.js.org/images/fruits/apple.png",
+            name: "apple",
+            width: 32,
+            height: 32,
+        },
+        {
+            src: "https://particles.js.org/images/fruits/avocado.png",
+            name: "avocado",
+            width: 32,
+            height: 32,
+        },
+        {
+            src: "https://particles.js.org/images/fruits/banana.png",
+            name: "banana",
+            width: 32,
+            height: 32,
+        },
+        {
+            src: "https://particles.js.org/images/fruits/berries.png",
+            name: "berries",
+            width: 32,
+            height: 32,
+        },
+        {
+            src: "https://particles.js.org/images/fruits/cherry.png",
+            name: "cherry",
+            width: 32,
+            height: 32,
+        },
+        {
+            src: "https://particles.js.org/images/fruits/grapes.png",
+            name: "grapes",
+            width: 32,
+            height: 32,
+        },
+        {
+            src: "https://particles.js.org/images/fruits/lemon.png",
+            name: "lemon",
+            width: 32,
+            height: 32,
+        },
+        {
+            src: "https://particles.js.org/images/fruits/orange.png",
+            name: "orange",
+            width: 32,
+            height: 32,
+        },
+        {
+            src: "https://particles.js.org/images/fruits/peach.png",
+            name: "peach",
+            width: 32,
+            height: 32,
+        },
+        {
+            src: "https://particles.js.org/images/fruits/pear.png",
+            name: "pear",
+            width: 32,
+            height: 32,
+        },
+        {
+            src: "https://particles.js.org/images/fruits/pepper.png",
+            name: "pepper",
+            width: 32,
+            height: 32,
+        },
+        {
+            src: "https://particles.js.org/images/fruits/plum.png",
+            name: "plum",
+            width: 32,
+            height: 32,
+        },
+        {
+            src: "https://particles.js.org/images/fruits/star.png",
+            name: "star",
+            width: 32,
+            height: 32,
+        },
+        {
+            src: "https://particles.js.org/images/fruits/strawberry.png",
+            name: "strawberry",
+            width: 32,
+            height: 32,
+        },
+        {
+            src: "https://particles.js.org/images/fruits/watermelon.png",
+            name: "watermelon",
+            width: 32,
+            height: 32,
+        },
+        {
+            src: "https://particles.js.org/images/fruits/watermelon_slice.png",
+            name: "watermelon_slice",
+            width: 32,
+            height: 32,
+        },
+    ],
+};
+export default options;

package/browser/s/index.js

@@ -4,6 +4,7 @@ import shapeArrow from "./shapeArrow.js";
 import shapeCog from "./shapeCog.js";
 import shapeEmoji from "./shapeEmoji.js";
 import shapeHeart from "./shapeHeart.js";
+import shapeInfinity from "./shapeInfinity.js";
 import shapeMultilineText from "./shapeMultilineText.js";
 import shapeOptions from "./shapeOptions.js";
 import shapePath from "./shapePath.js";
@@ -30,6 +31,7 @@ export default {
     shapeCog,
     shapeEmoji,
     shapeHeart,
+    shapeInfinity,
     shapeMultilineText,
     shapeOptions,
     shapePath,

package/browser/s/shapeEmoji.js

@@ -1,3 +1,4 @@
+import { MoveDirection } from "@tsparticles/engine";
 const emitterRate = {
     delay: 0.1,
     quantity: 2,
@@ -40,7 +41,6 @@ const emitterRate = {
         tilt: {
             direction: "random",
             enable: true,
-            move: true,
             value: {
                 min: 0,
                 max: 360,
@@ -88,7 +88,7 @@ const emitterRate = {
             rate: emitterRate,
             particles: {
                 move: {
-                    direction: "top-right",
+                    direction: MoveDirection.topRight,
                 },
                 shape: {
                     type: "emoji",
@@ -108,7 +108,7 @@ const emitterRate = {
             rate: emitterRate,
             particles: {
                 move: {
-                    direction: "top-right",
+                    direction: MoveDirection.topRight,
                 },
                 shape: {
                     type: "emoji",
@@ -128,7 +128,7 @@ const emitterRate = {
             rate: emitterRate,
             particles: {
                 move: {
-                    direction: "top-left",
+                    direction: MoveDirection.topLeft,
                 },
                 shape: {
                     type: "emoji",
@@ -148,7 +148,7 @@ const emitterRate = {
             rate: emitterRate,
             particles: {
                 move: {
-                    direction: "top-left",
+                    direction: MoveDirection.topLeft,
                 },
                 shape: {
                     type: "emoji",
@@ -168,7 +168,7 @@ const emitterRate = {
             rate: emitterRate,
             particles: {
                 move: {
-                    direction: "top",
+                    direction: MoveDirection.top,
                 },
                 shape: {
                     type: "emoji",

package/browser/s/shapeInfinity.js

@@ -0,0 +1,88 @@
+const options = {
+    key: "shapeInfinity",
+    name: "Shape Infinity",
+    particles: {
+        number: {
+            value: 80,
+            density: {
+                enable: true,
+            },
+        },
+        color: {
+            value: "transparent",
+        },
+        stroke: {
+            color: {
+                value: "#ff0000",
+                animation: {
+                    enable: true,
+                    speed: 20,
+                    sync: true,
+                },
+            },
+            width: 1,
+        },
+        shape: {
+            type: "infinity",
+        },
+        opacity: {
+            value: 0.5,
+        },
+        size: {
+            value: {
+                min: 20,
+                max: 30,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 6,
+        },
+        rotate: {
+            animation: {
+                enable: true,
+                speed: 20,
+                sync: false,
+            },
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "repulse",
+            },
+            onClick: {
+                enable: true,
+                mode: "push",
+            },
+        },
+        modes: {
+            grab: {
+                distance: 400,
+                links: {
+                    opacity: 1,
+                },
+            },
+            bubble: {
+                distance: 400,
+                size: 40,
+                duration: 2,
+                opacity: 0.8,
+            },
+            repulse: {
+                distance: 200,
+            },
+            push: {
+                quantity: 4,
+            },
+            remove: {
+                quantity: 2,
+            },
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+};
+export default options;

package/browser/t/tilt.js

@@ -55,13 +55,9 @@ const options = {
                 sync: true,
             },
         },
-        rotate: {
-            value: { min: 0, max: 360 },
-        },
         tilt: {
             direction: "random",
             enable: true,
-            move: true,
             value: {
                 min: 0,
                 max: 360,

package/browser/w/index.js

@@ -1,6 +1,8 @@
 import warp from "./warp.js";
 import wobble from "./wobble.js";
+import wobbleBig from "./wobbleBig.js";
 export default {
     warp,
     wobble,
+    wobbleBig,
 };

package/browser/w/wobble.js

@@ -70,7 +70,6 @@ const options = {
         tilt: {
             direction: "random",
             enable: true,
-            move: true,
             value: {
                 min: 0,
                 max: 360,