@tsparticles/configs 4.0.0-alpha.4 → 4.0.0-alpha.8

package/browser/b/bigBlend.js

@@ -0,0 +1,82 @@
+const options = {
+    key: "bigBlend",
+    name: "Big Particles with Blend",
+    particles: {
+        number: {
+            value: 30,
+        },
+        color: {
+            value: [
+                "#FF0000",
+                "#FF2A00",
+                "#FF5500",
+                "#FF8000",
+                "#FFAA00",
+                "#FFD400",
+                "#FFFF00",
+                "#D4FF00",
+                "#AAFF00",
+                "#80FF00",
+                "#55FF00",
+                "#2AFF00",
+                "#00FF00",
+                "#00FF2A",
+                "#00FF55",
+                "#00FF80",
+                "#00FFAA",
+                "#00FFD4",
+                "#00FFFF",
+                "#00D4FF",
+                "#00AAFF",
+                "#0080FF",
+                "#0055FF",
+                "#002AFF",
+                "#0000FF",
+                "#2A00FF",
+                "#5500FF",
+                "#8000FF",
+                "#AA00FF",
+                "#D400FF",
+                "#FF00FF",
+                "#FF00D4",
+                "#FF00AA",
+                "#FF0080",
+                "#FF0055",
+                "#FF002A",
+            ],
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: {
+                min: 0.5,
+                max: 0.9,
+            },
+        },
+        size: {
+            value: {
+                min: 300,
+                max: 400,
+            },
+            animation: {
+                enable: true,
+                speed: 100,
+                sync: false,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 10,
+            direction: "top",
+        },
+    },
+    background: {
+        color: "#ffffff",
+    },
+    blend: {
+        enable: true,
+        mode: "screen",
+    },
+};
+export default options;

package/browser/b/bigBlendCombo.js

@@ -0,0 +1,86 @@
+const options = {
+    key: "bigBlendCombo",
+    name: "Big Particles with Global and Particle Blend",
+    particles: {
+        number: {
+            value: 30,
+        },
+        color: {
+            value: [
+                "#FF0000",
+                "#FF2A00",
+                "#FF5500",
+                "#FF8000",
+                "#FFAA00",
+                "#FFD400",
+                "#FFFF00",
+                "#D4FF00",
+                "#AAFF00",
+                "#80FF00",
+                "#55FF00",
+                "#2AFF00",
+                "#00FF00",
+                "#00FF2A",
+                "#00FF55",
+                "#00FF80",
+                "#00FFAA",
+                "#00FFD4",
+                "#00FFFF",
+                "#00D4FF",
+                "#00AAFF",
+                "#0080FF",
+                "#0055FF",
+                "#002AFF",
+                "#0000FF",
+                "#2A00FF",
+                "#5500FF",
+                "#8000FF",
+                "#AA00FF",
+                "#D400FF",
+                "#FF00FF",
+                "#FF00D4",
+                "#FF00AA",
+                "#FF0080",
+                "#FF0055",
+                "#FF002A",
+            ],
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: {
+                min: 0.5,
+                max: 0.9,
+            },
+        },
+        size: {
+            value: {
+                min: 300,
+                max: 400,
+            },
+            animation: {
+                enable: true,
+                speed: 100,
+                sync: false,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 10,
+            direction: "top",
+        },
+        blend: {
+            enable: true,
+            mode: "color-burn",
+        },
+    },
+    background: {
+        color: "#ffffff",
+    },
+    blend: {
+        enable: true,
+        mode: "screen",
+    },
+};
+export default options;

package/browser/b/bigBlendParticle.js

@@ -0,0 +1,82 @@
+const options = {
+    key: "bigBlendParticle",
+    name: "Big Particles with Particle Blend",
+    particles: {
+        number: {
+            value: 30,
+        },
+        color: {
+            value: [
+                "#FF0000",
+                "#FF2A00",
+                "#FF5500",
+                "#FF8000",
+                "#FFAA00",
+                "#FFD400",
+                "#FFFF00",
+                "#D4FF00",
+                "#AAFF00",
+                "#80FF00",
+                "#55FF00",
+                "#2AFF00",
+                "#00FF00",
+                "#00FF2A",
+                "#00FF55",
+                "#00FF80",
+                "#00FFAA",
+                "#00FFD4",
+                "#00FFFF",
+                "#00D4FF",
+                "#00AAFF",
+                "#0080FF",
+                "#0055FF",
+                "#002AFF",
+                "#0000FF",
+                "#2A00FF",
+                "#5500FF",
+                "#8000FF",
+                "#AA00FF",
+                "#D400FF",
+                "#FF00FF",
+                "#FF00D4",
+                "#FF00AA",
+                "#FF0080",
+                "#FF0055",
+                "#FF002A",
+            ],
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: {
+                min: 0.5,
+                max: 0.9,
+            },
+        },
+        size: {
+            value: {
+                min: 300,
+                max: 400,
+            },
+            animation: {
+                enable: true,
+                speed: 100,
+                sync: false,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 10,
+            direction: "top",
+        },
+        blend: {
+            enable: true,
+            mode: "color-burn",
+        },
+    },
+    background: {
+        color: "#ffffff",
+    },
+};
+export default options;

package/browser/b/index.js

@@ -2,6 +2,9 @@ import backgroundMask from "./backgroundMask.js";
 import backgroundMaskImage from "./backgroundMaskImage.js";
 import basic from "./basic.js";
 import big from "./big.js";
+import bigBlend from "./bigBlend.js";
+import bigBlendCombo from "./bigBlendCombo.js";
+import bigBlendParticle from "./bigBlendParticle.js";
 import blackHole from "./blackHole.js";
 import bubble from "./bubble.js";
 export default {
@@ -9,6 +12,9 @@ export default {
     backgroundMaskImage,
     basic,
     big,
+    bigBlend,
+    bigBlendCombo,
+    bigBlendParticle,
     blackHole,
     bubble,
 };

package/browser/c/cardSuits.js

@@ -0,0 +1,80 @@
+const options = {
+    key: "cardSuits",
+    name: "Card Suits",
+    particles: {
+        number: {
+            value: 80,
+            density: {
+                enable: true,
+            },
+        },
+        reduceDuplicates: true,
+        shape: {
+            type: ["spades", "hearts", "diamonds", "clubs"],
+            options: {
+                spades: {
+                    particles: {
+                        color: {
+                            value: "#000000",
+                        },
+                    },
+                },
+                hearts: {
+                    particles: {
+                        color: {
+                            value: "#ff0000",
+                        },
+                    },
+                },
+                diamonds: {
+                    particles: {
+                        color: {
+                            value: "#ff0000",
+                        },
+                    },
+                },
+                clubs: {
+                    particles: {
+                        color: {
+                            value: "#000000",
+                        },
+                    },
+                },
+            },
+        },
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: 30,
+        },
+        move: {
+            enable: true,
+            speed: 2,
+        },
+    },
+    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/cards.js

@@ -1,45 +1,22 @@
+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,
+})));
 const options = {
     key: "cards",
     name: "Cards",
     particles: {
+        color: {
+            value: "#fff",
+        },
         number: {
-            value: 80,
-            density: {
-                enable: true,
-            },
+            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 +29,10 @@ const options = {
             enable: true,
             speed: 2,
         },
+        stroke: {
+            width: 1,
+            color: "#000",
+        },
     },
     interactivity: {
         events: {

package/browser/c/cardsRolling.js

@@ -0,0 +1,89 @@
+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,
+})));
+const options = {
+    key: "cardsRolling",
+    name: "Cards Rolling",
+    particles: {
+        color: {
+            value: "#000",
+        },
+        number: {
+            value: 52,
+        },
+        reduceDuplicates: true,
+        shape: {
+            type: ["card"],
+            options: {
+                card: allCards,
+            },
+        },
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: 30,
+        },
+        stroke: {
+            width: 1,
+            color: "#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/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/r/index.js

@@ -10,12 +10,17 @@ import reactSnow from "./reactSnow.js";
 import reduceDuplicates from "./reduceDuplicates.js";
 import repulse from "./repulse.js";
 import repulseBack from "./repulseBack.js";
+import repulseBounce from "./repulseBounce.js";
 import repulseCirc from "./repulseCirc.js";
 import repulseCubic from "./repulseCubic.js";
+import repulseElastic from "./repulseElastic.js";
 import repulseExpo from "./repulseExpo.js";
+import repulseGaussian from "./repulseGaussian.js";
 import repulseQuart from "./repulseQuart.js";
 import repulseQuint from "./repulseQuint.js";
+import repulseSigmoid from "./repulseSigmoid.js";
 import repulseSine from "./repulseSine.js";
+import repulseSmoothstep from "./repulseSmoothstep.js";
 import responsive from "./responsive.js";
 import ring from "./ring.js";
 export default {
@@ -31,12 +36,17 @@ export default {
     reduceDuplicates,
     repulse,
     repulseBack,
+    repulseBounce,
     repulseCirc,
     repulseCubic,
+    repulseElastic,
     repulseExpo,
+    repulseGaussian,
     repulseQuart,
     repulseQuint,
+    repulseSigmoid,
     repulseSine,
+    repulseSmoothstep,
     responsive,
     ring,
 };

package/browser/r/repulseBounce.js

@@ -0,0 +1,51 @@
+const options = {
+    key: "repulseBounce",
+    name: "Repulse Bounce",
+    particles: {
+        number: {
+            value: 200,
+            density: {
+                enable: true,
+            },
+        },
+        color: {
+            value: "#ffffff",
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 0.5,
+        },
+        size: {
+            value: {
+                min: 1,
+                max: 3,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 0,
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "repulse",
+            },
+        },
+        modes: {
+            repulse: {
+                distance: 200,
+                factor: 1,
+                speed: 5,
+                easing: "ease-out-bounce",
+            },
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+};
+export default options;

package/browser/r/repulseElastic.js

@@ -0,0 +1,51 @@
+const options = {
+    key: "repulseElastic",
+    name: "Repulse Elastic",
+    particles: {
+        number: {
+            value: 200,
+            density: {
+                enable: true,
+            },
+        },
+        color: {
+            value: "#ffffff",
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 0.5,
+        },
+        size: {
+            value: {
+                min: 1,
+                max: 3,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 0,
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "repulse",
+            },
+        },
+        modes: {
+            repulse: {
+                distance: 200,
+                factor: 1,
+                speed: 5,
+                easing: "ease-out-elastic",
+            },
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+};
+export default options;