@tsparticles/configs 4.0.0-beta.5 → 4.0.0-beta.8

package/README.md

@@ -2,6 +2,12 @@
 
 # tsParticles Demo Configs
 
+## Quick checklist
+
+1. Install `@tsparticles/configs` and `@tsparticles/engine`
+2. Import one config preset (for example `configs.basic`)
+3. Pass that config to `tsParticles.load(...)`
+
 ## Installation
 
 ```bash
@@ -56,3 +62,15 @@ import * as configs from "@tsparticles/configs";
 Some configs need plugins to work, they are not installed with this library.
 
 This library contains only the config files, the plugins must be installed separately.
+
+## Common pitfalls
+
+- Using a config that requires plugins without loading those plugins first
+- Assuming this package bundles runtime plugins (it only exports config objects)
+- Mixing config objects from different versions without checking option compatibility
+
+## Related docs
+
+- Main docs: <https://particles.js.org/docs/>
+- Root options guide: <https://github.com/tsparticles/tsparticles/blob/main/markdown/Options.md>
+- Repository README: <https://github.com/tsparticles/tsparticles/blob/main/README.md>

package/browser/c/clickConfetti.js

@@ -83,6 +83,7 @@ const options = {
                 speed: 1,
                 startValue: "max",
                 destroy: "min",
+                count: 1,
             },
         },
         size: {

package/browser/d/delayOpacity.js

@@ -28,6 +28,7 @@ const options = {
                 },
                 startValue: "max",
                 destroy: "min",
+                count: 1,
             },
         },
         size: {

package/browser/d/delaySize.js

@@ -28,6 +28,7 @@ const options = {
                 },
                 startValue: "max",
                 destroy: "min",
+                count: 1,
             },
         },
         opacity: {

package/browser/d/disappearing.js

@@ -51,6 +51,7 @@ const options = {
                 sync: true,
                 startValue: "max",
                 destroy: "min",
+                count: 1,
             },
         },
         move: {

package/browser/e/effectFilter.js

@@ -0,0 +1,48 @@
+const options = {
+    key: "effectFilter",
+    name: "Effect Filter",
+    particles: {
+        number: {
+            value: 80,
+            density: {
+                enable: true,
+            },
+        },
+        fill: {
+            color: {
+                value: "#ff0000",
+                animation: {
+                    enable: true,
+                    speed: 20,
+                    sync: true,
+                },
+            },
+            enable: true,
+        },
+        effect: {
+            type: "filter",
+            options: {
+                filter: {
+                    blur: 4,
+                },
+            },
+        },
+        shape: {
+            type: "circle",
+        },
+        size: {
+            value: {
+                min: 5,
+                max: 50,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 6,
+        },
+    },
+    background: {
+        color: "#000000",
+    },
+};
+export default options;

package/browser/e/index.js

@@ -1,4 +1,5 @@
 import effectBubble from "./effectBubble.js";
+import effectFilter from "./effectFilter.js";
 import effectParticles from "./effectParticles.js";
 import effectTrail from "./effectTrail.js";
 import effectTrailTransform from "./effectTrailTransform.js";
@@ -14,6 +15,7 @@ import emitterTextShape from "./emitterTextShape.js";
 import emitterTextStrokeShape from "./emitterTextStrokeShape.js";
 export default {
     effectBubble,
+    effectFilter,
     effectParticles,
     effectTrail,
     effectTrailTransform,

package/browser/f/fireworks.js

@@ -114,6 +114,7 @@ const options = {
                             sync: false,
                             startValue: "max",
                             destroy: "min",
+                            count: 1,
                         },
                     },
                     shape: {
@@ -169,6 +170,7 @@ const options = {
                 speed: 90,
                 startValue: "max",
                 destroy: "min",
+                count: 1,
             },
         },
         stroke: {

package/browser/f/fireworks2.js

@@ -120,6 +120,7 @@ const options = {
                             sync: false,
                             startValue: "max",
                             destroy: "min",
+                            count: 1,
                         },
                     },
                     effect: {

package/browser/f/fireworks3.js

@@ -0,0 +1,206 @@
+import { EventType, identity } from "@tsparticles/engine";
+const thirdFactor = 3, third = identity / thirdFactor, options = {
+    key: "fireworks3",
+    name: "Fireworks 3",
+    fullScreen: {
+        enable: true,
+    },
+    background: {
+        color: "#000",
+    },
+    blend: {
+        enable: true,
+        mode: "lighter",
+    },
+    emitters: {
+        direction: "top",
+        life: {
+            count: 0,
+            duration: 0.1,
+            delay: 0.1,
+        },
+        rate: {
+            delay: 0.1,
+            quantity: 1,
+        },
+        size: {
+            width: 100,
+            height: 0,
+        },
+        position: {
+            y: 100,
+            x: 50,
+        },
+    },
+    particles: {
+        stroke: {
+            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",
+                ],
+            },
+            width: 2,
+        },
+        number: {
+            value: 0,
+        },
+        destroy: {
+            bounds: {
+                top: { min: 10, max: 30 },
+            },
+            mode: "split",
+            split: {
+                count: 1,
+                factor: {
+                    value: third,
+                },
+                rate: {
+                    value: 100,
+                },
+                strokeColorOffset: {
+                    l: {
+                        min: -30,
+                        max: 30,
+                    },
+                },
+                particles: {
+                    destroy: {
+                        bounds: {
+                            top: 0,
+                        },
+                    },
+                    opacity: {
+                        value: {
+                            min: 0.1,
+                            max: 1,
+                        },
+                        animation: {
+                            enable: true,
+                            speed: { min: 2, max: 4 },
+                            sync: true,
+                            startValue: "max",
+                            destroy: "min",
+                            count: 1,
+                        },
+                    },
+                    size: {
+                        value: { min: 5, max: 10 },
+                        animation: {
+                            enable: false,
+                        },
+                    },
+                    life: {
+                        count: 1,
+                        duration: {
+                            value: {
+                                min: 0.5,
+                                max: 1,
+                            },
+                        },
+                    },
+                    move: {
+                        gravity: {
+                            enable: false,
+                        },
+                        enable: true,
+                        decay: 0.05,
+                        speed: {
+                            min: 10,
+                            max: 25,
+                        },
+                        direction: "outside",
+                        outModes: "destroy",
+                    },
+                },
+            },
+        },
+        life: {
+            count: 1,
+        },
+        shape: {
+            type: "line",
+            options: {
+                line: {
+                    cap: "round",
+                },
+            },
+        },
+        size: {
+            value: { min: 10, max: 20 },
+        },
+        move: {
+            enable: true,
+            gravity: {
+                acceleration: 30,
+                enable: true,
+                inverse: true,
+                maxSpeed: 150,
+            },
+            speed: {
+                min: 20,
+                max: 40,
+            },
+            outModes: {
+                default: "destroy",
+                top: "none",
+            },
+        },
+        rotate: {
+            path: true,
+        },
+    },
+    sounds: {
+        enable: true,
+        events: [
+            {
+                event: EventType.particleRemoved,
+                filter: (args) => {
+                    const particle = args.data?.particle;
+                    return particle?.options.move.gravity.enable ?? false;
+                },
+                audio: [
+                    "https://particles.js.org/audio/explosion0.mp3",
+                    "https://particles.js.org/audio/explosion1.mp3",
+                    "https://particles.js.org/audio/explosion2.mp3",
+                ],
+            },
+        ],
+        volume: 50,
+    },
+};
+export default options;

package/browser/f/fireworksMask.js

@@ -92,6 +92,7 @@ const options = {
                             sync: false,
                             startValue: "max",
                             destroy: "min",
+                            count: 1,
                         },
                     },
                     effect: {

package/browser/f/index.js

@@ -1,6 +1,7 @@
 import fallingConfetti from "./fallingConfetti.js";
 import fireworks from "./fireworks.js";
 import fireworks2 from "./fireworks2.js";
+import fireworks3 from "./fireworks3.js";
 import fireworksMask from "./fireworksMask.js";
 import fontawesome from "./fontawesome.js";
 import forward from "./forward.js";
@@ -8,6 +9,7 @@ export default {
     fallingConfetti,
     fireworks,
     fireworks2,
+    fireworks3,
     fireworksMask,
     fontawesome,
     forward,

package/browser/g/growing.js

@@ -46,6 +46,7 @@ const options = {
                 sync: true,
                 startValue: "min",
                 destroy: "max",
+                count: 1,
             },
         },
         links: {

package/browser/h/hyperspace.js

@@ -40,6 +40,7 @@ const options = {
                 enable: true,
                 speed: 2,
                 destroy: "max",
+                count: 1,
                 sync: true,
             },
         },

package/browser/m/mouseTrailNoise.js

@@ -15,6 +15,7 @@ const options = {
                 speed: 1,
                 sync: true,
                 destroy: "min",
+                count: 1,
             },
         },
         size: {