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

package/browser/c/cards.js

@@ -1,45 +1,24 @@
-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: {
@@ -52,6 +31,10 @@ const options = {
             enable: true,
             speed: 2,
         },
+        stroke: {
+            width: 1,
+            color: { value: "#000" },
+        },
     },
     interactivity: {
         events: {

package/browser/c/cardsRolling.js

@@ -0,0 +1,91 @@
+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",
+    },
+};
+export default options;

package/browser/c/chars.js

@@ -8,38 +8,36 @@ const options = {
                 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,
@@ -49,13 +47,6 @@ const options = {
         size: {
             value: 16,
         },
-        links: {
-            enable: true,
-            distance: 150,
-            color: "#ffffff",
-            opacity: 0.4,
-            width: 1,
-        },
         move: {
             enable: true,
             speed: 2,

package/browser/c/clickConfetti.js

@@ -12,26 +12,30 @@ const options = {
         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,
                         },
                     },
                 },
@@ -55,8 +59,11 @@ const options = {
         number: {
             value: 0,
         },
-        color: {
-            value: "#f00",
+        fill: {
+            color: {
+                value: "#f00",
+            },
+            enable: true,
         },
         shape: {
             type: ["circle", "square", "polygon"],

package/browser/c/clickPause.js

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

package/browser/c/collisionsAbsorb.js

@@ -8,8 +8,10 @@ const options = {
                 enable: true,
             },
         },
-        color: {
-            value: "#ffffff",
+        fill: {
+            color: {
+                value: "#ffffff",
+            },
         },
         shape: {
             type: "circle",

package/browser/c/collisionsBounce.js

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

package/browser/c/collisionsDestroy.js

@@ -4,12 +4,12 @@ const options = {
     particles: {
         number: {
             value: 80,
-            density: {
-                enable: true,
-            },
         },
-        color: {
-            value: ["#3998D0", "#2EB6AF", "#A9BD33", "#FEC73B", "#F89930", "#F45623", "#D62E32", "#EB586E", "#9952CF"],
+        fill: {
+            color: {
+                value: ["#3998D0", "#2EB6AF", "#A9BD33", "#FEC73B", "#F89930", "#F45623", "#D62E32", "#EB586E", "#9952CF"],
+            },
+            enable: true,
         },
         destroy: {
             mode: "split",
@@ -31,7 +31,10 @@ const options = {
                     life: {
                         count: 1,
                         duration: {
-                            value: 1,
+                            value: {
+                                min: 1,
+                                max: 2,
+                            },
                         },
                     },
                 },
@@ -49,55 +52,32 @@ const options = {
                 max: 15,
             },
         },
-        links: {
-            enable: false,
-            distance: 150,
-            color: "#ffffff",
-            opacity: 0.4,
-            width: 1,
-        },
         collisions: {
             enable: true,
             mode: "destroy",
         },
         move: {
             enable: true,
-            speed: 3,
-        },
-    },
-    interactivity: {
-        events: {
-            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: 1,
-            },
-            remove: {
-                quantity: 2,
-            },
+            speed: 5,
         },
     },
     background: {
         color: "#000000",
     },
+    poisson: {
+        enable: true,
+    },
+    emitters: {
+        position: {
+            x: 50,
+            y: 50,
+        },
+        size: {
+            width: 100,
+            height: 100,
+        },
+        fill: false,
+    },
+    smooth: true,
 };
 export default options;

package/browser/c/colorAnimation.js

@@ -8,25 +8,28 @@ const options = {
                 enable: true,
             },
         },
-        color: {
-            value: "#ff0000",
-            animation: {
-                h: {
-                    enable: true,
-                    speed: { min: 30, max: 60 },
-                    sync: true,
-                },
-                s: {
-                    enable: true,
-                    speed: { min: 5, max: 10 },
-                    sync: true,
-                },
-                l: {
-                    enable: true,
-                    speed: { min: 5, max: 10 },
-                    sync: true,
+        fill: {
+            color: {
+                value: "#ff0000",
+                animation: {
+                    h: {
+                        enable: true,
+                        speed: { min: 30, max: 60 },
+                        sync: true,
+                    },
+                    s: {
+                        enable: true,
+                        speed: { min: 5, max: 10 },
+                        sync: true,
+                    },
+                    l: {
+                        enable: true,
+                        speed: { min: 5, max: 10 },
+                        sync: true,
+                    },
                 },
             },
+            enable: true,
         },
         stroke: {
             width: 30,

package/browser/c/connect.js

@@ -45,8 +45,11 @@ const options = {
         },
     },
     particles: {
-        color: {
-            value: "random",
+        fill: {
+            color: {
+                value: "random",
+            },
+            enable: true,
         },
         links: {
             blink: false,
@@ -77,7 +80,7 @@ const options = {
             type: "circle",
         },
         stroke: {
-            color: "#fff",
+            color: { value: "#fff" },
             width: 1,
         },
         size: {

package/browser/c/curlNoise.js

@@ -5,13 +5,16 @@ const options = {
         number: {
             value: 300,
         },
-        color: {
-            value: "#ff0000",
-            animation: {
-                enable: true,
-                speed: 360,
-                sync: true,
+        fill: {
+            color: {
+                value: "#ff0000",
+                animation: {
+                    enable: true,
+                    speed: 360,
+                    sync: true,
+                },
             },
+            enable: true,
         },
         shape: {
             type: "circle",

package/browser/c/index.js

@@ -1,4 +1,6 @@
+import cardSuits from "./cardSuits.js";
 import cards from "./cards.js";
+import cardsRolling from "./cardsRolling.js";
 import chars from "./chars.js";
 import clickPause from "./clickPause.js";
 import collisionsAbsorb from "./collisionsAbsorb.js";
@@ -8,7 +10,9 @@ import colorAnimation from "./colorAnimation.js";
 import connect from "./connect.js";
 import curlNoise from "./curlNoise.js";
 export default {
+    cardSuits,
     cards,
+    cardsRolling,
     chars,
     clickPause,
     collisionsAbsorb,

package/browser/d/dataImages.js

@@ -45,9 +45,6 @@ const options = {
         },
     },
     particles: {
-        color: {
-            value: "#ffffff",
-        },
         move: {
             direction: "none",
             enable: true,

package/browser/d/delay.js

@@ -9,13 +9,16 @@ const options = {
                 enable: true,
             },
         },
-        color: {
-            value: "#ff0000",
-            animation: {
-                enable: true,
-                speed: 20,
-                sync: true,
+        fill: {
+            color: {
+                value: "#ff0000",
+                animation: {
+                    enable: true,
+                    speed: 20,
+                    sync: true,
+                },
             },
+            enable: true,
         },
         shape: {
             type: "circle",

package/browser/d/delayColor.js

@@ -7,17 +7,20 @@ const options = {
         },
     },
     particles: {
-        color: {
-            value: "#f00",
-            animation: {
-                enable: true,
-                speed: 50,
-                sync: true,
-                delay: {
-                    min: 1,
-                    max: 3,
+        fill: {
+            color: {
+                value: "#f00",
+                animation: {
+                    enable: true,
+                    speed: 50,
+                    sync: true,
+                    delay: {
+                        min: 1,
+                        max: 3,
+                    },
                 },
             },
+            enable: true,
         },
         number: {
             value: 100,

package/browser/d/delayOpacity.js

@@ -7,8 +7,11 @@ const options = {
         },
     },
     particles: {
-        color: {
-            value: "#fff",
+        fill: {
+            color: {
+                value: "#fff",
+            },
+            enable: true,
         },
         number: {
             value: 100,

package/browser/d/delaySize.js

@@ -7,8 +7,11 @@ const options = {
         },
     },
     particles: {
-        color: {
-            value: "#fff",
+        fill: {
+            color: {
+                value: "#fff",
+            },
+            enable: true,
         },
         number: {
             value: 100,

package/browser/d/delayStrokeColor.js

@@ -31,8 +31,8 @@ const options = {
         opacity: {
             value: 1,
         },
-        color: {
-            value: "transparent",
+        fill: {
+            enable: false,
         },
         move: {
             enable: true,

package/browser/d/destroy.js

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