@tsparticles/configs 4.2.1 → 4.3.0

package/browser/a/absorbers.js

@@ -11,7 +11,7 @@ const options = {
         paint: {
             fill: {
                 color: {
-                    value: "#ffffff",
+                    value: "#f0f0f0",
                 },
                 enable: true,
             },

package/browser/b/backgroundCanvas.js

@@ -0,0 +1,68 @@
+let hue = 0;
+const options = {
+    key: "backgroundCanvas",
+    name: "Background Canvas",
+    particles: {
+        number: {
+            value: 80,
+            density: {
+                enable: true,
+            },
+        },
+        paint: {
+            fill: {
+                color: {
+                    value: "#f0f0f0",
+                },
+                enable: true,
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 0.5,
+        },
+        size: {
+            value: {
+                min: 1,
+                max: 3,
+            },
+        },
+        links: {
+            enable: true,
+            distance: 150,
+            color: "#f0f0f0",
+            opacity: 0.4,
+            width: 1,
+        },
+        move: {
+            enable: true,
+            speed: 2,
+        },
+    },
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "repulse",
+            },
+        },
+        modes: {
+            repulse: {
+                distance: 100,
+            },
+        },
+    },
+    background: {
+        draw: (ctx, delta) => {
+            hue = (hue + delta.value * 0.02) % 360;
+            const gradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, ctx.canvas.height);
+            gradient.addColorStop(0, `hsl(${hue}, 70%, 20%)`);
+            gradient.addColorStop(1, `hsl(${(hue + 60) % 360}, 70%, 10%)`);
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+        },
+    },
+};
+export default options;

package/browser/b/backgroundMask.js

@@ -11,7 +11,7 @@ const options = {
         paint: {
             fill: {
                 color: {
-                    value: "#ffffff",
+                    value: "#f0f0f0",
                 },
                 enable: true,
             },
@@ -31,7 +31,7 @@ const options = {
         links: {
             enable: true,
             distance: 150,
-            color: "#ffffff",
+            color: "#f0f0f0",
             opacity: 1,
             width: 1,
         },
@@ -77,7 +77,7 @@ const options = {
         },
     },
     background: {
-        color: "#ffffff",
+        color: "#f5f7fa",
         image: "url('https://particles.js.org/images/hdr/background3.jpg')",
         position: "50% 50%",
         repeat: "no-repeat",

package/browser/b/backgroundMaskDraw.js

@@ -0,0 +1,71 @@
+const saturation = 70, lightness = 50, toSeconds = 0.001, options = {
+    key: "backgroundMaskDraw",
+    name: "Background Mask Draw",
+    particles: {
+        number: {
+            value: 80,
+        },
+        paint: {
+            fill: {
+                color: {
+                    value: "#f0f0f0",
+                },
+                enable: true,
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        opacity: {
+            value: 1,
+        },
+        size: {
+            value: {
+                min: 10,
+                max: 30,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 2,
+        },
+    },
+    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: {
+            draw: (ctx, _delta) => {
+                const t = performance.now() * toSeconds, w = ctx.canvas.width, h = ctx.canvas.height, speed = 30, fullCircle = 360, hue = (t * speed) % fullCircle;
+                ctx.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+                const originX = 0, originY = 0;
+                ctx.fillRect(originX, originY, w, h);
+            },
+        },
+    },
+    background: {
+        color: "#0d0d0d",
+    },
+};
+export default options;

package/browser/b/backgroundMaskImage.js

@@ -8,7 +8,7 @@ const options = {
         paint: {
             fill: {
                 color: {
-                    value: "#ffffff",
+                    value: "#f0f0f0",
                 },
                 enable: true,
             },
@@ -65,7 +65,7 @@ const options = {
         },
     },
     background: {
-        color: "#ffffff",
+        color: "#f5f7fa",
         image: "url('https://particles.js.org/images/hdr/background3.jpg')",
         position: "50% 50%",
         repeat: "no-repeat",

package/browser/b/basic.js

@@ -36,7 +36,7 @@ const options = {
         links: {
             enable: true,
             distance: 150,
-            color: "#ffffff",
+            color: "#f0f0f0",
             opacity: 0.4,
             width: 1,
         },
@@ -66,7 +66,7 @@ const options = {
         },
     },
     background: {
-        color: "#000000",
+        color: "#0d0d0d",
     },
 };
 export default options;

package/browser/b/bigBlend.js

@@ -77,7 +77,7 @@ const options = {
         },
     },
     background: {
-        color: "#ffffff",
+        color: "#f5f7fa",
     },
     blend: {
         enable: true,

package/browser/b/bigBlendCombo.js

@@ -81,7 +81,7 @@ const options = {
         },
     },
     background: {
-        color: "#ffffff",
+        color: "#f5f7fa",
     },
     blend: {
         enable: true,

package/browser/b/bigBlendParticle.js

@@ -81,7 +81,7 @@ const options = {
         },
     },
     background: {
-        color: "#ffffff",
+        color: "#f5f7fa",
     },
 };
 export default options;

package/browser/b/blackHole.js

@@ -11,7 +11,7 @@ const options = {
         paint: {
             fill: {
                 color: {
-                    value: ["#ffffff", "#77ccff", "#ff3333", "#ffff33"],
+                    value: ["#f0f0f0", "#77ccff", "#ff3333", "#ffff33"],
                 },
                 enable: true,
             },
@@ -61,7 +61,7 @@ const options = {
         },
     },
     background: {
-        color: "#000",
+        color: "#0d0d0d",
         image: "",
         position: "50% 50%",
         repeat: "no-repeat",

package/browser/b/bubble.js

@@ -39,7 +39,7 @@ const options = {
         links: {
             enable: false,
             distance: 200,
-            color: "#ffffff",
+            color: "#f0f0f0",
             opacity: 1,
             width: 2,
         },

package/browser/b/index.js

@@ -1,4 +1,6 @@
+import backgroundCanvas from "./backgroundCanvas.js";
 import backgroundMask from "./backgroundMask.js";
+import backgroundMaskDraw from "./backgroundMaskDraw.js";
 import backgroundMaskImage from "./backgroundMaskImage.js";
 import basic from "./basic.js";
 import big from "./big.js";
@@ -8,7 +10,9 @@ import bigBlendParticle from "./bigBlendParticle.js";
 import blackHole from "./blackHole.js";
 import bubble from "./bubble.js";
 export default {
+    backgroundCanvas,
     backgroundMask,
+    backgroundMaskDraw,
     backgroundMaskImage,
     basic,
     big,

package/browser/c/cardSuits.js

@@ -17,7 +17,7 @@ const options = {
                         paint: {
                             fill: {
                                 color: {
-                                    value: "#000000",
+                                    value: "#1a1a1a",
                                 },
                                 enable: true,
                             },
@@ -53,7 +53,7 @@ const options = {
                         paint: {
                             fill: {
                                 color: {
-                                    value: "#000000",
+                                    value: "#1a1a1a",
                                 },
                                 enable: true,
                             },
@@ -94,7 +94,7 @@ const options = {
         },
     },
     background: {
-        color: "#fff",
+        color: "#f5f7fa",
     },
 };
 export default options;

package/browser/c/cards.js

@@ -8,13 +8,13 @@ const cardSuits = ["spades", "hearts", "diamonds", "clubs"], cardValues = ["A",
         paint: {
             fill: {
                 color: {
-                    value: "#fff",
+                    value: "#f0f0f0",
                 },
                 enable: true,
             },
             stroke: {
                 width: 1,
-                color: { value: "#000" },
+                color: { value: "#1a1a1a" },
             },
         },
         number: {
@@ -59,7 +59,7 @@ const cardSuits = ["spades", "hearts", "diamonds", "clubs"], cardValues = ["A",
         },
     },
     background: {
-        color: "#fff",
+        color: "#f5f7fa",
     },
 };
 export default options;

package/browser/c/cardsRolling.js

@@ -8,13 +8,13 @@ const cardSuits = ["spades", "hearts", "diamonds", "clubs"], cardValues = ["A",
         paint: {
             fill: {
                 color: {
-                    value: "#000",
+                    value: "#1a1a1a",
                 },
                 enable: true,
             },
             stroke: {
                 width: 1,
-                color: { value: "#000" },
+                color: { value: "#1a1a1a" },
             },
         },
         number: {
@@ -87,7 +87,7 @@ const cardSuits = ["spades", "hearts", "diamonds", "clubs"], cardValues = ["A",
         },
     },
     background: {
-        color: "#fff",
+        color: "#f5f7fa",
     },
 };
 export default options;

package/browser/c/chars.js

@@ -14,7 +14,7 @@ const options = {
             },
             stroke: {
                 width: 1,
-                color: { value: "#ffffff" },
+                color: { value: "#f0f0f0" },
             },
         },
         shape: {

package/browser/c/clickPause.js

@@ -11,7 +11,7 @@ const options = {
         paint: {
             fill: {
                 color: {
-                    value: "#ffffff",
+                    value: "#f0f0f0",
                 },
                 enable: true,
             },
@@ -31,7 +31,7 @@ const options = {
         links: {
             enable: true,
             distance: 100,
-            color: "#ffffff",
+            color: "#f0f0f0",
             opacity: 0.4,
             width: 1,
         },

package/browser/c/collisionsAbsorb.js

@@ -11,7 +11,7 @@ const options = {
         paint: {
             fill: {
                 color: {
-                    value: "#ffffff",
+                    value: "#f0f0f0",
                 },
             },
         },
@@ -30,7 +30,7 @@ const options = {
         links: {
             enable: false,
             distance: 150,
-            color: "#ffffff",
+            color: "#f0f0f0",
             opacity: 0.4,
             width: 1,
         },

package/browser/c/collisionsBounce.js

@@ -14,7 +14,7 @@ const options = {
         paint: {
             fill: {
                 color: {
-                    value: "#ffffff",
+                    value: "#f0f0f0",
                 },
                 enable: true,
             },
@@ -34,7 +34,7 @@ const options = {
         links: {
             enable: false,
             distance: 150,
-            color: "#ffffff",
+            color: "#f0f0f0",
             opacity: 0.4,
             width: 1,
         },

package/browser/c/collisionsDestroy.js

@@ -64,7 +64,7 @@ const options = {
         },
     },
     background: {
-        color: "#000000",
+        color: "#0d0d0d",
     },
     poisson: {
         enable: true,

package/browser/c/colorAnimation.js

@@ -71,7 +71,7 @@ const options = {
         },
     },
     background: {
-        color: "#000000",
+        color: "#0d0d0d",
     },
 };
 export default options;

package/browser/c/colors.js

@@ -2,7 +2,7 @@ const options = {
     key: "colors",
     name: "Colors",
     background: {
-        color: "#000",
+        color: "#0d0d0d",
     },
     interactivity: {
         events: {

package/browser/c/connect.js

@@ -53,13 +53,13 @@ const options = {
                 enable: true,
             },
             stroke: {
-                color: { value: "#fff" },
+                color: { value: "#f0f0f0" },
                 width: 1,
             },
         },
         links: {
             blink: false,
-            color: "#ffffff",
+            color: "#f0f0f0",
             consent: false,
             distance: 150,
             enable: false,
@@ -95,7 +95,7 @@ const options = {
     polygon: {
         draw: {
             enable: false,
-            lineColor: "#ffffff",
+            lineColor: "#f0f0f0",
             lineWidth: 0.5,
         },
         move: {
@@ -106,7 +106,7 @@ const options = {
         url: "",
     },
     background: {
-        color: "#000000",
+        color: "#0d0d0d",
         image: "",
         position: "50% 50%",
         repeat: "no-repeat",

package/browser/c/curlNoise.js

@@ -42,11 +42,11 @@ const options = {
         },
     },
     background: {
-        color: "#000000",
+        color: "#0d0d0d",
     },
     trail: {
         fill: {
-            color: "#000",
+            color: "#121212",
         },
         enable: true,
         length: 1000,

package/browser/d/dataImages.js

@@ -103,7 +103,7 @@ const options = {
         },
     ],
     background: {
-        color: "#fff",
+        color: "#f5f7fa",
         image: "",
         position: "50% 50%",
         repeat: "no-repeat",

package/browser/d/delay.js

@@ -37,7 +37,7 @@ const options = {
         links: {
             enable: true,
             distance: 150,
-            color: "#ffffff",
+            color: "#f0f0f0",
             opacity: 0.4,
             width: 1,
         },
@@ -67,7 +67,7 @@ const options = {
         },
     },
     background: {
-        color: "#000000",
+        color: "#0d0d0d",
     },
 };
 export default options;

package/browser/d/delayColor.js

@@ -3,7 +3,7 @@ const options = {
     name: "Delay Color",
     background: {
         color: {
-            value: "#000",
+            value: "#0d0d0d",
         },
     },
     particles: {

package/browser/d/delayOpacity.js

@@ -3,14 +3,14 @@ const options = {
     name: "Delay Opacity",
     background: {
         color: {
-            value: "#000",
+            value: "#0d0d0d",
         },
     },
     particles: {
         paint: {
             fill: {
                 color: {
-                    value: "#fff",
+                    value: "#f0f0f0",
                 },
                 enable: true,
             },

package/browser/d/delaySize.js

@@ -3,14 +3,14 @@ const options = {
     name: "Delay Size",
     background: {
         color: {
-            value: "#000",
+            value: "#0d0d0d",
         },
     },
     particles: {
         paint: {
             fill: {
                 color: {
-                    value: "#fff",
+                    value: "#f0f0f0",
                 },
                 enable: true,
             },

package/browser/d/delayStrokeColor.js

@@ -3,7 +3,7 @@ const options = {
     name: "Delay Stroke Color",
     background: {
         color: {
-            value: "#000",
+            value: "#0d0d0d",
         },
     },
     particles: {

package/browser/d/destroy.js

@@ -11,7 +11,7 @@ const options = {
         paint: {
             fill: {
                 color: {
-                    value: "#ffffff",
+                    value: "#f0f0f0",
                 },
                 enable: true,
             },
@@ -31,7 +31,7 @@ const options = {
         links: {
             enable: true,
             distance: 150,
-            color: "#ffffff",
+            color: "#f0f0f0",
             opacity: 0.4,
             width: 1,
         },

package/browser/d/destroyExplode.js

@@ -62,7 +62,7 @@ const options = {
         },
     },
     background: {
-        color: "#000000",
+        color: "#0d0d0d",
     },
 };
 export default options;

package/browser/d/disappearing.js

@@ -3,7 +3,7 @@ const options = {
     name: "Disappearing",
     background: {
         color: {
-            value: "#000",
+            value: "#0d0d0d",
         },
     },
     emitters: {

package/browser/d/divEvents.js

@@ -51,7 +51,7 @@ const options = {
                 duration: 2,
                 opacity: 0.8,
                 size: 6,
-                color: "#000000",
+                color: "#1a1a1a",
             },
             grab: {
                 distance: 400,
@@ -75,13 +75,13 @@ const options = {
         paint: {
             fill: {
                 color: {
-                    value: "#ffffff",
+                    value: "#f0f0f0",
                 },
                 enable: true,
             },
         },
         links: {
-            color: "#ffffff",
+            color: "#f0f0f0",
             distance: 150,
             enable: true,
             opacity: 0.4,

package/browser/e/effectBubble.js

@@ -77,7 +77,7 @@ const options = {
         },
     },
     background: {
-        color: "#000000",
+        color: "#0d0d0d",
     },
 };
 export default options;