@tsparticles/configs 4.0.4 → 4.1.0

package/tsparticles.configs.js

@@ -1,12 +1,12 @@
 (function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
-/* Utility v4.0.4 */
+/* Utility v4.1.0 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('@tsparticles/engine')) :
     typeof define === 'function' && define.amd ? define(['@tsparticles/engine'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.__tsParticlesInternals.engine));
 })(this, (function (engine) { 'use strict';
 
-    const options$31 = {
+    const options$2Z = {
         key: "absorbers",
         name: "Absorbers",
         particles: {
@@ -79,7 +79,7 @@
         },
     };
 
-    const options$30 = {
+    const options$2Y = {
         key: "amongUs",
         name: "Among Us",
         particles: {
@@ -213,11 +213,11 @@
     };
 
     var a = {
-        absorbers: options$31,
-        amongUs: options$30,
+        absorbers: options$2Z,
+        amongUs: options$2Y,
     };
 
-    const options$2$ = {
+    const options$2X = {
         key: "backgroundMask",
         name: "Background Mask",
         particles: {
@@ -304,7 +304,7 @@
         },
     };
 
-    const options$2_ = {
+    const options$2W = {
         key: "backgroundMaskImage",
         name: "Background Mask Image",
         particles: {
@@ -379,7 +379,7 @@
         },
     };
 
-    const options$2Z = {
+    const options$2V = {
         key: "basic",
         name: "Basic",
         particles: {
@@ -451,7 +451,7 @@
         },
     };
 
-    const options$2Y = {
+    const options$2U = {
         key: "big",
         name: "Big Particles",
         particles: {
@@ -537,7 +537,7 @@
         },
     };
 
-    const options$2X = {
+    const options$2T = {
         key: "bigBlend",
         name: "Big Particles with Blend",
         particles: {
@@ -624,7 +624,7 @@
         },
     };
 
-    const options$2W = {
+    const options$2S = {
         key: "bigBlendCombo",
         name: "Big Particles with Global and Particle Blend",
         particles: {
@@ -715,7 +715,7 @@
         },
     };
 
-    const options$2V = {
+    const options$2R = {
         key: "bigBlendParticle",
         name: "Big Particles with Particle Blend",
         particles: {
@@ -802,7 +802,7 @@
         },
     };
 
-    const options$2U = {
+    const options$2Q = {
         key: "blackHole",
         name: "Black Hole",
         particles: {
@@ -873,7 +873,7 @@
         },
     };
 
-    const options$2T = {
+    const options$2P = {
         key: "bubble",
         name: "Bubble",
         particles: {
@@ -966,18 +966,18 @@
     };
 
     var b = {
-        backgroundMask: options$2$,
-        backgroundMaskImage: options$2_,
-        basic: options$2Z,
-        big: options$2Y,
-        bigBlend: options$2X,
-        bigBlendCombo: options$2W,
-        bigBlendParticle: options$2V,
-        blackHole: options$2U,
-        bubble: options$2T,
+        backgroundMask: options$2X,
+        backgroundMaskImage: options$2W,
+        basic: options$2V,
+        big: options$2U,
+        bigBlend: options$2T,
+        bigBlendCombo: options$2S,
+        bigBlendParticle: options$2R,
+        blackHole: options$2Q,
+        bubble: options$2P,
     };
 
-    const options$2S = {
+    const options$2O = {
         key: "cardSuits",
         name: "Card Suits",
         particles: {
@@ -1080,7 +1080,7 @@
     const cardSuits$1 = ["spades", "hearts", "diamonds", "clubs"], cardValues$1 = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"], allCards$1 = cardSuits$1.flatMap(suit => cardValues$1.map(value => ({
         suit,
         value,
-    }))), options$2R = {
+    }))), options$2N = {
         key: "cards",
         name: "Cards",
         particles: {
@@ -1145,7 +1145,7 @@
     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$2Q = {
+    }))), options$2M = {
         key: "cardsRolling",
         name: "Cards Rolling",
         particles: {
@@ -1235,7 +1235,7 @@
         },
     };
 
-    const options$2P = {
+    const options$2L = {
         key: "chars",
         name: "Chars",
         particles: {
@@ -1340,7 +1340,7 @@
         },
     };
 
-    const options$2O = {
+    const options$2K = {
         key: "clickPause",
         name: "Click Pause",
         particles: {
@@ -1422,7 +1422,7 @@
         },
     };
 
-    const options$2N = {
+    const options$2J = {
         key: "collisionsAbsorb",
         name: "Collisions Absorb",
         particles: {
@@ -1506,7 +1506,7 @@
         },
     };
 
-    const options$2M = {
+    const options$2I = {
         key: "collisionsBounce",
         name: "Collisions Bounce",
         particles: {
@@ -1587,7 +1587,7 @@
         },
     };
 
-    const options$2L = {
+    const options$2H = {
         key: "collisionsDestroy",
         name: "Collisions Destroy",
         particles: {
@@ -1672,7 +1672,7 @@
         smooth: true,
     };
 
-    const options$2K = {
+    const options$2G = {
         key: "colorAnimation",
         name: "Color Animation",
         particles: {
@@ -1749,7 +1749,7 @@
         },
     };
 
-    const options$2J = {
+    const options$2F = {
         key: "colors",
         name: "Colors",
         background: {
@@ -1855,7 +1855,7 @@
         emitters: [],
     };
 
-    const options$2I = {
+    const options$2E = {
         key: "confettiExplosions",
         name: "Confetti Explosions",
         background: {
@@ -2006,7 +2006,7 @@
         },
     };
 
-    const options$2H = {
+    const options$2D = {
         key: "connect",
         name: "Connect",
         interactivity: {
@@ -2122,7 +2122,7 @@
         },
     };
 
-    const options$2G = {
+    const options$2C = {
         key: "curlNoise",
         name: "Curl Noise",
         particles: {
@@ -2178,22 +2178,22 @@
     };
 
     var c = {
-        cardSuits: options$2S,
-        cards: options$2R,
-        cardsRolling: options$2Q,
-        chars: options$2P,
-        clickPause: options$2O,
-        collisionsAbsorb: options$2N,
-        collisionsBounce: options$2M,
-        collisionsDestroy: options$2L,
-        colorAnimation: options$2K,
-        colors: options$2J,
-        confettiExplosions: options$2I,
-        connect: options$2H,
-        curlNoise: options$2G,
+        cardSuits: options$2O,
+        cards: options$2N,
+        cardsRolling: options$2M,
+        chars: options$2L,
+        clickPause: options$2K,
+        collisionsAbsorb: options$2J,
+        collisionsBounce: options$2I,
+        collisionsDestroy: options$2H,
+        colorAnimation: options$2G,
+        colors: options$2F,
+        confettiExplosions: options$2E,
+        connect: options$2D,
+        curlNoise: options$2C,
     };
 
-    const options$2F = {
+    const options$2B = {
         key: "dataImages",
         name: "Data URI Images",
         interactivity: {
@@ -2306,7 +2306,7 @@
         },
     };
 
-    const options$2E = {
+    const options$2A = {
         key: "delay",
         name: "Delay",
         delay: 5,
@@ -2379,7 +2379,7 @@
         },
     };
 
-    const options$2D = {
+    const options$2z = {
         key: "delayColor",
         name: "Delay Color",
         background: {
@@ -2424,7 +2424,7 @@
         },
     };
 
-    const options$2C = {
+    const options$2y = {
         key: "delayOpacity",
         name: "Delay Opacity",
         background: {
@@ -2468,7 +2468,7 @@
         },
     };
 
-    const options$2B = {
+    const options$2x = {
         key: "delaySize",
         name: "Delay Size",
         background: {
@@ -2512,7 +2512,7 @@
         },
     };
 
-    const options$2A = {
+    const options$2w = {
         key: "delayStrokeColor",
         name: "Delay Stroke Color",
         background: {
@@ -2559,7 +2559,7 @@
         },
     };
 
-    const options$2z = {
+    const options$2v = {
         key: "destroy",
         name: "Destroy",
         particles: {
@@ -2642,7 +2642,7 @@
         },
     };
 
-    const options$2y = {
+    const options$2u = {
         key: "destroyExplode",
         name: "Destroy Explode",
         particles: {
@@ -2710,7 +2710,7 @@
         },
     };
 
-    const options$2x = {
+    const options$2t = {
         key: "disappearing",
         name: "Disappearing",
         background: {
@@ -2802,7 +2802,7 @@
         },
     };
 
-    const options$2w = {
+    const options$2s = {
         key: "divEvents",
         name: "Div Events",
         background: {
@@ -2918,19 +2918,19 @@
     };
 
     var d = {
-        dataImages: options$2F,
-        delay: options$2E,
-        delayColor: options$2D,
-        delayOpacity: options$2C,
-        delaySize: options$2B,
-        delayStrokeColor: options$2A,
-        destroy: options$2z,
-        destroyExplode: options$2y,
-        disappearing: options$2x,
-        divEvents: options$2w,
+        dataImages: options$2B,
+        delay: options$2A,
+        delayColor: options$2z,
+        delayOpacity: options$2y,
+        delaySize: options$2x,
+        delayStrokeColor: options$2w,
+        destroy: options$2v,
+        destroyExplode: options$2u,
+        disappearing: options$2t,
+        divEvents: options$2s,
     };
 
-    const options$2v = {
+    const options$2r = {
         key: "effectBubble",
         name: "Effect Bubble",
         particles: {
@@ -3013,7 +3013,7 @@
         },
     };
 
-    const options$2u = {
+    const options$2q = {
         key: "effectFilter",
         name: "Effect Filter",
         particles: {
@@ -3063,7 +3063,7 @@
         },
     };
 
-    const options$2t = {
+    const options$2p = {
         key: "effectParticles",
         name: "Effect Particles",
         particles: {
@@ -3163,7 +3163,7 @@
         },
     };
 
-    const options$2s = {
+    const options$2o = {
         key: "effectTrail",
         name: "Effect Trail",
         particles: {
@@ -3223,7 +3223,7 @@
         },
     };
 
-    const options$2r = {
+    const options$2n = {
         key: "effectTrailTransform",
         name: "Effect Trail Transform",
         particles: {
@@ -3285,7 +3285,7 @@
         },
     };
 
-    const options$2q = {
+    const options$2m = {
         key: "emitter",
         name: "Emitter",
         particles: {
@@ -3562,7 +3562,7 @@
         ],
     };
 
-    const options$2p = {
+    const options$2l = {
         key: "emitterAbsorber",
         name: "Emitter and Absorber",
         particles: {
@@ -3709,7 +3709,7 @@
         ],
     };
 
-    const options$2o = {
+    const options$2k = {
         key: "emitterAngled",
         name: "Emitter Angled",
         particles: {
@@ -3794,7 +3794,7 @@
             rate: rate$3,
             fill,
         };
-    }, options$2n = {
+    }, options$2j = {
         key: "emitterImageShape",
         name: "Emitter Image Shape",
         particles: {
@@ -3872,7 +3872,7 @@
         ],
     };
 
-    const options$2m = {
+    const options$2i = {
         key: "emitterImages",
         name: "Emitter Images",
         particles: {
@@ -4005,7 +4005,7 @@
         },
     };
 
-    const options$2l = {
+    const options$2h = {
         key: "emitterPaths",
         name: "Emitter Paths",
         particles: {
@@ -4135,7 +4135,7 @@
         { x: 100, y: 0 },
         { x: 50, y: 0 },
         { x: 50, y: 25 },
-    ], options$2k = {
+    ], options$2g = {
         key: "emitterShapes",
         name: "Emitter Shapes",
         particles: {
@@ -4187,7 +4187,7 @@
     const emitterRate$2 = {
         delay: 0.1,
         quantity: 2,
-    }, options$2j = {
+    }, options$2f = {
         key: "emitterSpawnColor",
         name: "Emitter Spawn Color",
         particles: {
@@ -4413,7 +4413,7 @@
             rate: rate$1,
             fill,
         };
-    }, options$2i = {
+    }, options$2e = {
         key: "emitterTextShape",
         name: "Emitter Text Shape",
         particles: {
@@ -4517,7 +4517,7 @@
             rate,
             fill,
         };
-    }, options$2h = {
+    }, options$2d = {
         key: "emitterTextStrokeShape",
         name: "Emitter Text Stroke Shape",
         particles: {
@@ -4603,24 +4603,24 @@
     };
 
     var e = {
-        effectBubble: options$2v,
-        effectFilter: options$2u,
-        effectParticles: options$2t,
-        effectTrail: options$2s,
-        effectTrailTransform: options$2r,
-        emitter: options$2q,
-        emitterAbsorber: options$2p,
-        emitterAngled: options$2o,
-        emitterImageShape: options$2n,
-        emitterImages: options$2m,
-        emitterPaths: options$2l,
-        emitterShapes: options$2k,
-        emitterSpawnColor: options$2j,
-        emitterTextShape: options$2i,
-        emitterTextStrokeShape: options$2h,
+        effectBubble: options$2r,
+        effectFilter: options$2q,
+        effectParticles: options$2p,
+        effectTrail: options$2o,
+        effectTrailTransform: options$2n,
+        emitter: options$2m,
+        emitterAbsorber: options$2l,
+        emitterAngled: options$2k,
+        emitterImageShape: options$2j,
+        emitterImages: options$2i,
+        emitterPaths: options$2h,
+        emitterShapes: options$2g,
+        emitterSpawnColor: options$2f,
+        emitterTextShape: options$2e,
+        emitterTextStrokeShape: options$2d,
     };
 
-    const options$2g = {
+    const options$2c = {
         key: "fallingConfetti",
         name: "Falling Confetti",
         background: {
@@ -4762,59 +4762,277 @@
         },
     };
 
-    const options$2f = {
-        key: "fireworks",
-        name: "Fireworks",
-        fullScreen: {
-            enable: true,
-        },
+    const options$2b = {
+        key: "fallingConfettiWithRibbons",
+        name: "Falling Confetti with Ribbons",
         background: {
-            color: "#000",
+            color: "#000000",
         },
-        emitters: {
-            direction: "top",
-            life: {
-                count: 0,
-                duration: 0.1,
-                delay: 0.1,
+        particles: {
+            paint: {
+                fill: {
+                    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",
+                        ],
+                        animation: {
+                            enable: true,
+                            speed: 30,
+                        },
+                    },
+                    enable: true,
+                },
             },
-            rate: {
-                delay: 0.15,
-                quantity: 1,
+            move: {
+                direction: "bottom",
+                enable: true,
+                outModes: "out",
+                speed: {
+                    min: 3,
+                    max: 5,
+                },
+            },
+            number: {
+                value: 300,
+            },
+            opacity: {
+                value: 1,
+            },
+            rotate: {
+                value: {
+                    min: 0,
+                    max: 360,
+                },
+                direction: "random",
+                move: true,
+                animation: {
+                    enable: true,
+                    speed: 60,
+                },
+            },
+            tilt: {
+                direction: "random",
+                enable: true,
+                value: {
+                    min: 0,
+                    max: 360,
+                },
+                animation: {
+                    enable: true,
+                    speed: 60,
+                },
+            },
+            shape: {
+                type: ["triangle", "circle", "square", "polygon"],
+                options: {
+                    polygon: [
+                        {
+                            sides: 5,
+                        },
+                        {
+                            sides: 6,
+                        },
+                    ],
+                },
             },
             size: {
-                width: 100,
-                height: 0,
+                value: {
+                    min: 3,
+                    max: 5,
+                },
+            },
+            roll: {
+                darken: {
+                    enable: true,
+                    value: 30,
+                },
+                enlighten: {
+                    enable: true,
+                    value: 30,
+                },
+                enable: true,
+                mode: "both",
+                speed: {
+                    min: 40,
+                    max: 60,
+                },
+            },
+            wobble: {
+                distance: 30,
+                enable: true,
+                move: true,
+                speed: {
+                    min: -15,
+                    max: 15,
+                },
             },
+        },
+        emitters: {
+            direction: "bottom",
             position: {
-                y: 100,
                 x: 50,
+                y: 0,
             },
-        },
-        particles: {
-            number: {
-                value: 0,
+            size: {
+                width: 100,
+                height: 0,
             },
-            destroy: {
-                bounds: {
-                    top: 30,
-                },
-                mode: "split",
-                split: {
-                    count: 1,
-                    factor: {
-                        value: 0.333333,
+            rate: {
+                delay: 1,
+                quantity: 1,
+            },
+            particles: {
+                move: {
+                    direction: "bottom",
+                    enable: true,
+                    outModes: {
+                        top: "none",
+                        default: "destroy",
                     },
-                    rate: {
-                        value: 100,
+                    speed: {
+                        min: 4,
+                        max: 6,
                     },
-                    particles: {
-                        paint: {
-                            fill: {
-                                color: {
-                                    value: [
-                                        "#FF0000",
-                                        "#FF2A00",
+                },
+                size: {
+                    value: 8,
+                },
+                roll: {
+                    enable: false,
+                },
+                rotate: {
+                    value: 0,
+                    move: false,
+                    animation: {
+                        enable: false,
+                    },
+                },
+                tilt: {
+                    enable: false,
+                },
+                wobble: {
+                    enable: false,
+                },
+                shape: {
+                    type: "ribbon",
+                    options: {
+                        ribbon: {
+                            angle: 45,
+                            darken: {
+                                enable: true,
+                                value: 30,
+                            },
+                            count: 60,
+                            drag: 0.02,
+                            mass: 1,
+                            oscillationDistance: {
+                                min: 100,
+                                max: 140,
+                            },
+                            oscillationSpeed: {
+                                min: 3,
+                                max: 5,
+                            },
+                            particleDist: 8,
+                            velocityInherit: {
+                                min: 4,
+                                max: 6,
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    };
+
+    const options$2a = {
+        key: "fireworks",
+        name: "Fireworks",
+        fullScreen: {
+            enable: true,
+        },
+        background: {
+            color: "#000",
+        },
+        emitters: {
+            direction: "top",
+            life: {
+                count: 0,
+                duration: 0.1,
+                delay: 0.1,
+            },
+            rate: {
+                delay: 0.15,
+                quantity: 1,
+            },
+            size: {
+                width: 100,
+                height: 0,
+            },
+            position: {
+                y: 100,
+                x: 50,
+            },
+        },
+        particles: {
+            number: {
+                value: 0,
+            },
+            destroy: {
+                bounds: {
+                    top: 30,
+                },
+                mode: "split",
+                split: {
+                    count: 1,
+                    factor: {
+                        value: 0.333333,
+                    },
+                    rate: {
+                        value: 100,
+                    },
+                    particles: {
+                        paint: {
+                            fill: {
+                                color: {
+                                    value: [
+                                        "#FF0000",
+                                        "#FF2A00",
                                         "#FF5500",
                                         "#FF8000",
                                         "#FFAA00",
@@ -4993,7 +5211,7 @@
         },
     };
 
-    const options$2e = {
+    const options$29 = {
         key: "fireworks2",
         name: "Fireworks 2",
         fullScreen: {
@@ -5225,7 +5443,7 @@
         },
     };
 
-    const thirdFactor = 3, third = engine.identity / thirdFactor, options$2d = {
+    const thirdFactor = 3, third = engine.identity / thirdFactor, options$28 = {
         key: "fireworks3",
         name: "Fireworks 3",
         fullScreen: {
@@ -5435,7 +5653,7 @@
         },
     };
 
-    const options$2c = {
+    const options$27 = {
         key: "fireworksMask",
         name: "Fireworks Background Mask",
         fullScreen: {
@@ -5639,7 +5857,7 @@
         },
     };
 
-    const options$2b = {
+    const options$26 = {
         key: "fontawesome",
         name: "Font Awesome",
         interactivity: {
@@ -5740,7 +5958,7 @@
         },
     };
 
-    const options$2a = {
+    const options$25 = {
         key: "forward",
         name: "Forward",
         particles: {
@@ -5832,16 +6050,17 @@
     };
 
     var f = {
-        fallingConfetti: options$2g,
-        fireworks: options$2f,
-        fireworks2: options$2e,
-        fireworks3: options$2d,
-        fireworksMask: options$2c,
-        fontawesome: options$2b,
-        forward: options$2a,
+        fallingConfetti: options$2c,
+        fallingconfettiWithRibbons: options$2b,
+        fireworks: options$2a,
+        fireworks2: options$29,
+        fireworks3: options$28,
+        fireworksMask: options$27,
+        fontawesome: options$26,
+        forward: options$25,
     };
 
-    const options$29 = {
+    const options$24 = {
         key: "gifs",
         name: "Gifs",
         interactivity: {
@@ -5892,7 +6111,7 @@
         },
     };
 
-    const options$28 = {
+    const options$23 = {
         key: "grabRandomColor",
         name: "Grab Random Color",
         particles: {
@@ -5980,7 +6199,7 @@
         },
     };
 
-    const options$27 = {
+    const options$22 = {
         key: "gradients",
         name: "Gradients",
         particles: {
@@ -6155,7 +6374,7 @@
         },
     };
 
-    const options$26 = {
+    const options$21 = {
         key: "gravity",
         name: "Gravity",
         particles: {
@@ -6280,7 +6499,7 @@
         },
     };
 
-    const options$25 = {
+    const options$20 = {
         key: "groups",
         name: "Groups",
         particles: {
@@ -6351,7 +6570,7 @@
         },
     };
 
-    const options$24 = {
+    const options$1$ = {
         key: "growing",
         name: "Growing",
         emitters: {
@@ -6427,15 +6646,15 @@
     };
 
     var g = {
-        gifs: options$29,
-        grabRandomColor: options$28,
-        gradients: options$27,
-        gravity: options$26,
-        groups: options$25,
-        growing: options$24,
+        gifs: options$24,
+        grabRandomColor: options$23,
+        gradients: options$22,
+        gravity: options$21,
+        groups: options$20,
+        growing: options$1$,
     };
 
-    const options$23 = {
+    const options$1_ = {
         key: "hexagonPath",
         name: "Hexagon Path",
         particles: {
@@ -6513,7 +6732,7 @@
         },
     };
 
-    const options$22 = {
+    const options$1Z = {
         key: "hollowknight",
         name: "Hollow Knight",
         interactivity: {
@@ -6634,7 +6853,7 @@
         },
     };
 
-    const options$21 = {
+    const options$1Y = {
         key: "hyperspace",
         name: "Hyperspace",
         background: {
@@ -6706,12 +6925,12 @@
     };
 
     var h = {
-        hexagonPath: options$23,
-        hollowknight: options$22,
-        hyperspace: options$21,
+        hexagonPath: options$1_,
+        hollowknight: options$1Z,
+        hyperspace: options$1Y,
     };
 
-    const minFilterValue$1 = 30, minFilterAlpha$1 = 0, options$20 = {
+    const minFilterValue$1 = 30, minFilterAlpha$1 = 0, options$1X = {
         key: "imageMask",
         name: "Image Mask",
         smooth: true,
@@ -6768,7 +6987,7 @@
         },
     };
 
-    const minFilterValue = 30, minFilterAlpha = 0, options$1$ = {
+    const minFilterValue = 30, minFilterAlpha = 0, options$1W = {
         key: "imageMaskRepulse",
         name: "Image Mask Repulse Restore",
         smooth: true,
@@ -6832,7 +7051,7 @@
         },
     };
 
-    const options$1_ = {
+    const options$1V = {
         key: "images",
         name: "Images",
         interactivity: {
@@ -7046,7 +7265,7 @@
         ],
     };
 
-    const options$1Z = {
+    const options$1U = {
         key: "imagesDirections",
         name: "Images with Custom Directions",
         interactivity: {
@@ -7155,7 +7374,7 @@
         },
     };
 
-    const options$1Y = {
+    const options$1T = {
         key: "infection",
         name: "Infection",
         infection: {
@@ -7239,18 +7458,18 @@
     };
 
     var i = {
-        imageMask: options$20,
-        imageMaskRepulse: options$1$,
-        images: options$1_,
-        imagesDirections: options$1Z,
-        infection: options$1Y,
+        imageMask: options$1X,
+        imageMaskRepulse: options$1W,
+        images: options$1V,
+        imagesDirections: options$1U,
+        infection: options$1T,
     };
 
     var j = {};
 
     var k = {};
 
-    const options$1X = {
+    const options$1S = {
         key: "lch",
         name: "LCH",
         particles: {
@@ -7322,7 +7541,7 @@
         },
     };
 
-    const options$1W = {
+    const options$1R = {
         key: "life",
         name: "Life",
         particles: {
@@ -7407,7 +7626,7 @@
         },
     };
 
-    const options$1V = {
+    const options$1Q = {
         key: "lightHover",
         name: "Light Hover",
         particles: {
@@ -7482,7 +7701,7 @@
         },
     };
 
-    const options$1U = {
+    const options$1P = {
         key: "linkTriangles",
         name: "Link Triangles",
         particles: {
@@ -7574,7 +7793,7 @@
         },
     };
 
-    const options$1T = {
+    const options$1O = {
         key: "localPolygonMask",
         name: "Local Polygon Mask",
         interactivity: {
@@ -7666,14 +7885,14 @@
     };
 
     var l = {
-        lch: options$1X,
-        life: options$1W,
-        lightHover: options$1V,
-        linkTriangles: options$1U,
-        localPolygonMask: options$1T,
+        lch: options$1S,
+        life: options$1R,
+        lightHover: options$1Q,
+        linkTriangles: options$1P,
+        localPolygonMask: options$1O,
     };
 
-    const options$1S = {
+    const options$1N = {
         key: "manual",
         name: "Manual Particles",
         manualParticles: [
@@ -7761,7 +7980,7 @@
         },
     };
 
-    const options$1R = {
+    const options$1M = {
         key: "matrix",
         name: "Matrix",
         fpsLimit: 30,
@@ -7838,7 +8057,7 @@
         },
     };
 
-    const options$1Q = {
+    const options$1L = {
         key: "motionDisable",
         name: "Motion Disable",
         motion: {
@@ -7914,7 +8133,7 @@
         },
     };
 
-    const options$1P = {
+    const options$1K = {
         key: "motionReduce",
         name: "Motion Reduce",
         motion: {
@@ -8008,7 +8227,7 @@
         },
     };
 
-    const options$1O = {
+    const options$1J = {
         key: "mouseAttract",
         name: "Mouse Attract",
         particles: {
@@ -8100,7 +8319,7 @@
         },
     };
 
-    const options$1N = {
+    const options$1I = {
         key: "mouseBounce",
         name: "Mouse Bounce",
         particles: {
@@ -8187,7 +8406,7 @@
         },
     };
 
-    const options$1M = {
+    const options$1H = {
         key: "mouseCannon",
         name: "Mouse Cannon",
         particles: {
@@ -8289,7 +8508,7 @@
         },
     };
 
-    const options$1L = {
+    const options$1G = {
         key: "mouseDestroy",
         name: "Mouse Destroy",
         particles: {
@@ -8350,7 +8569,7 @@
         },
     };
 
-    const options$1K = {
+    const options$1F = {
         key: "mouseDestroyExplode",
         name: "Mouse Destroy Explode Stress",
         particles: {
@@ -8434,7 +8653,7 @@
         },
     };
 
-    const options$1J = {
+    const options$1E = {
         key: "mouseDrag",
         name: "Mouse Drag",
         particles: {
@@ -8484,7 +8703,7 @@
         },
     };
 
-    const options$1I = {
+    const options$1D = {
         key: "mouseDragMomentum",
         name: "Mouse Drag Momentum",
         particles: {
@@ -8539,7 +8758,7 @@
         },
     };
 
-    const options$1H = {
+    const options$1C = {
         key: "mouseFollow",
         name: "Mouse Follow",
         background: {
@@ -8607,7 +8826,7 @@
         detectRetina: true,
     };
 
-    const options$1G = {
+    const options$1B = {
         key: "mouseParticle",
         name: "Mouse Particle",
         fullScreen: {
@@ -8662,7 +8881,7 @@
         },
     };
 
-    const options$1F = {
+    const options$1A = {
         key: "mouseParticle2",
         name: "Mouse Particle 2",
         background: {
@@ -8728,7 +8947,7 @@
         },
     };
 
-    const options$1E = {
+    const options$1z = {
         key: "mouseTrail",
         name: "Mouse Trail",
         particles: {
@@ -8857,7 +9076,7 @@
         },
     };
 
-    const options$1D = {
+    const options$1y = {
         key: "mouseTrailNoise",
         name: "Mouse Trail Noise",
         particles: {
@@ -8999,7 +9218,7 @@
         },
     };
 
-    const options$1C = {
+    const options$1x = {
         key: "moveAngle",
         name: "Move Angle",
         particles: {
@@ -9087,7 +9306,7 @@
         },
     };
 
-    const options$1B = {
+    const options$1w = {
         key: "moveDistance",
         name: "Move Distance",
         particles: {
@@ -9175,7 +9394,7 @@
         },
     };
 
-    const options$1A = {
+    const options$1v = {
         key: "moveInside",
         name: "Move Inside",
         particles: {
@@ -9222,7 +9441,7 @@
         },
     };
 
-    const options$1z = {
+    const options$1u = {
         key: "moveOutside",
         name: "Move Outside",
         particles: {
@@ -9269,7 +9488,7 @@
         },
     };
 
-    const options$1y = {
+    const options$1t = {
         key: "multipleClickEmitters",
         name: "Multiple Click Emitters",
         background: {
@@ -9381,7 +9600,7 @@
         emitters: [],
     };
 
-    const options$1x = {
+    const options$1s = {
         key: "multiplePolygonMasks",
         name: "Multiple Polygon Masks",
         interactivity: {
@@ -9509,32 +9728,111 @@
         },
     };
 
+    const chars = ["♪", "♫", "♩", "♬", "♭", "♮", "♯"], options$1r = {
+        key: "musicEmitter",
+        name: "Music Emitter",
+        particles: {
+            paint: {
+                color: {
+                    value: [
+                        "#ff5733",
+                        "#33ff57",
+                        "#3357ff",
+                        "#ff33a1",
+                        "#a133ff",
+                        "#33fff6",
+                        "#f4d03f",
+                    ],
+                },
+            },
+            opacity: {
+                value: {
+                    min: 0,
+                    max: 1,
+                },
+                animation: {
+                    enable: true,
+                    speed: 1.25,
+                    startValue: "max",
+                    destroy: "min",
+                    sync: true,
+                    count: 1,
+                },
+            },
+            move: {
+                enable: true,
+                outModes: "destroy",
+                speed: 10,
+                straight: true,
+            },
+            life: {
+                enable: true,
+                count: 1,
+            },
+            size: {
+                value: { min: 5, max: 30 },
+                animation: {
+                    enable: true,
+                    speed: 50,
+                    startValue: "max",
+                    destroy: "min",
+                    sync: true,
+                    count: 1,
+                },
+            },
+            shape: {
+                type: "text",
+                options: {
+                    text: {
+                        value: chars,
+                    },
+                },
+            },
+        },
+        emitters: {
+            direction: "top",
+            position: {
+                x: 50,
+                y: 50,
+            },
+            size: {
+                width: 10,
+                height: 10,
+            },
+            rate: {
+                delay: 0.15,
+                quantity: 1,
+            },
+        },
+    };
+
     var m = {
-        manual: options$1S,
-        matrix: options$1R,
-        motionDisable: options$1Q,
-        motionReduce: options$1P,
-        mouseAttract: options$1O,
-        mouseBounce: options$1N,
-        mouseCannon: options$1M,
-        mouseDestroy: options$1L,
-        mouseDestroyExplode: options$1K,
-        mouseDrag: options$1J,
-        mouseDragMomentum: options$1I,
-        mouseFollow: options$1H,
-        mouseParticle: options$1G,
-        mouseParticle2: options$1F,
-        mouseTrail: options$1E,
-        mouseTrailNoise: options$1D,
-        moveAngle: options$1C,
-        moveDistance: options$1B,
-        moveInside: options$1A,
-        moveOutside: options$1z,
-        multipleClickEmitters: options$1y,
-        multiplePolygonMasks: options$1x,
+        manual: options$1N,
+        matrix: options$1M,
+        motionDisable: options$1L,
+        motionReduce: options$1K,
+        mouseAttract: options$1J,
+        mouseBounce: options$1I,
+        mouseCannon: options$1H,
+        mouseDestroy: options$1G,
+        mouseDestroyExplode: options$1F,
+        mouseDrag: options$1E,
+        mouseDragMomentum: options$1D,
+        mouseFollow: options$1C,
+        mouseParticle: options$1B,
+        mouseParticle2: options$1A,
+        mouseTrail: options$1z,
+        mouseTrailNoise: options$1y,
+        moveAngle: options$1x,
+        moveDistance: options$1w,
+        moveInside: options$1v,
+        moveOutside: options$1u,
+        multipleClickEmitters: options$1t,
+        multiplePolygonMasks: options$1s,
+        musicEmitter: options$1r,
     };
 
-    const options$1w = {
+    const options$1q = {
         key: "namedColors",
         name: "Named Colors",
         particles: {
@@ -9594,7 +9892,7 @@
         },
     };
 
-    const options$1v = {
+    const options$1p = {
         key: "nasa",
         name: "NASA",
         particles: {
@@ -9684,7 +9982,7 @@
         },
     };
 
-    const options$1u = {
+    const options$1o = {
         key: "noClear",
         name: "No Clear",
         clear: false,
@@ -9788,12 +10086,12 @@
         },
     };
 
-    const options$1t = {
+    const options$1n = {
         key: "noConfig",
         name: "No Config",
     };
 
-    const options$1s = {
+    const options$1m = {
         key: "noisePlanesFractal",
         name: "Noise Planes Fractal",
         background: {
@@ -9884,7 +10182,7 @@
         },
     };
 
-    const options$1r = {
+    const options$1l = {
         key: "noisePlanesPerlin",
         name: "Noise Planes Perlin",
         background: {
@@ -9975,7 +10273,7 @@
         },
     };
 
-    const options$1q = {
+    const options$1k = {
         key: "noisePlanesSimplex",
         name: "Noise Planes Simplex",
         background: {
@@ -10066,7 +10364,7 @@
         },
     };
 
-    const options$1p = {
+    const options$1j = {
         key: "nyancat",
         name: "Nyan Cat",
         particles: {
@@ -10130,7 +10428,7 @@
         },
     };
 
-    const options$1o = {
+    const options$1i = {
         key: "nyancat2",
         name: "Nyan Cat 2",
         particles: {
@@ -10196,18 +10494,18 @@
     };
 
     var n = {
-        namedColors: options$1w,
-        nasa: options$1v,
-        noClear: options$1u,
-        noConfig: options$1t,
-        noisePlanesFractal: options$1s,
-        noisePlanesPerlin: options$1r,
-        noisePlanesSimplex: options$1q,
-        nyancat: options$1p,
-        nyancat2: options$1o,
+        namedColors: options$1q,
+        nasa: options$1p,
+        noClear: options$1o,
+        noConfig: options$1n,
+        noisePlanesFractal: options$1m,
+        noisePlanesPerlin: options$1l,
+        noisePlanesSimplex: options$1k,
+        nyancat: options$1j,
+        nyancat2: options$1i,
     };
 
-    const options$1n = {
+    const options$1h = {
         key: "oklch",
         name: "OKLCH",
         particles: {
@@ -10279,7 +10577,7 @@
         },
     };
 
-    const options$1m = {
+    const options$1g = {
         key: "orbit",
         name: "Orbit",
         particles: {
@@ -10336,8 +10634,8 @@
     };
 
     var o = {
-        oklch: options$1n,
-        orbit: options$1m,
+        oklch: options$1h,
+        orbit: options$1g,
     };
 
     const palettes$1 = {
@@ -10379,7 +10677,7 @@
     });
     var palettes = Object.entries(palettes$1).map(([k, value]) => getPaletteOptions(k, value));
 
-    const options$1l = {
+    const options$1f = {
         key: "parallax",
         name: "Parallax",
         particles: {
@@ -10467,7 +10765,7 @@
         },
     };
 
-    const options$1k = {
+    const options$1e = {
         key: "pathBranches",
         name: "Path Branches",
         particles: {
@@ -10560,7 +10858,7 @@
         },
     };
 
-    const options$1j = {
+    const options$1d = {
         key: "pathBranchesInertia",
         name: "Path Branches Inertia",
         particles: {
@@ -10657,7 +10955,7 @@
         },
     };
 
-    const angleDeltaFactor = 18, options$1i = {
+    const angleDeltaFactor = 18, options$1c = {
         key: "pathBrownian",
         name: "Path Brownian",
         particles: {
@@ -10748,7 +11046,7 @@
         },
     };
 
-    const options$1h = {
+    const options$1b = {
         key: "pathGrid",
         name: "Path Grid",
         particles: {
@@ -10838,7 +11136,7 @@
         },
     };
 
-    const options$1g = {
+    const options$1a = {
         key: "pathLevy",
         name: "Path Levy",
         particles: {
@@ -10930,7 +11228,7 @@
         },
     };
 
-    const options$1f = {
+    const options$19 = {
         key: "pathMaze",
         name: "Path Maze",
         particles: {
@@ -11021,7 +11319,7 @@
         },
     };
 
-    const options$1e = {
+    const options$18 = {
         key: "pathPolygonMask",
         name: "Path Polygon Mask",
         interactivity: {
@@ -11121,7 +11419,7 @@
         },
     };
 
-    const options$1d = {
+    const options$17 = {
         key: "pathSpiral",
         name: "Path Spiral",
         particles: {
@@ -11213,7 +11511,7 @@
         },
     };
 
-    const options$1c = {
+    const options$16 = {
         key: "pathSvg",
         name: "Path SVG",
         particles: {
@@ -11307,7 +11605,7 @@
         },
     };
 
-    const options$1b = {
+    const options$15 = {
         key: "pathZigZag",
         name: "Path Zig Zag",
         particles: {
@@ -11394,7 +11692,7 @@
         },
     };
 
-    const options$1a = {
+    const options$14 = {
         key: "planes",
         name: "Planes",
         interactivity: {
@@ -11448,7 +11746,7 @@
         detectRetina: true,
     };
 
-    const options$19 = {
+    const options$13 = {
         key: "plasma",
         name: "Plasma",
         background: {
@@ -11510,7 +11808,7 @@
         detectRetina: true,
     };
 
-    const options$18 = {
+    const options$12 = {
         key: "poisson",
         name: "Poisson",
         particles: {
@@ -11554,7 +11852,7 @@
         },
     };
 
-    const options$17 = {
+    const options$11 = {
         key: "polygonMask",
         name: "Polygon Mask",
         interactivity: {
@@ -11682,7 +11980,7 @@
         },
     };
 
-    const options$16 = {
+    const options$10 = {
         key: "polygons",
         name: "Polygon Shape",
         particles: {
@@ -11831,7 +12129,7 @@
         },
     };
 
-    const options$15 = {
+    const options$$ = {
         key: "pop",
         name: "Pop",
         particles: {
@@ -11912,28 +12210,28 @@
     }, {});
     var p = {
         ...paletteMap,
-        parallax: options$1l,
-        pathBranches: options$1k,
-        pathBranchesInertia: options$1j,
-        pathBrownian: options$1i,
-        pathGrid: options$1h,
-        pathLevy: options$1g,
-        pathMaze: options$1f,
-        pathPolygonMask: options$1e,
-        pathSpiral: options$1d,
-        pathSvg: options$1c,
-        pathZigZag: options$1b,
-        planes: options$1a,
-        plasma: options$19,
-        poisson: options$18,
-        polygonMask: options$17,
-        polygons: options$16,
-        pop: options$15,
+        parallax: options$1f,
+        pathBranches: options$1e,
+        pathBranchesInertia: options$1d,
+        pathBrownian: options$1c,
+        pathGrid: options$1b,
+        pathLevy: options$1a,
+        pathMaze: options$19,
+        pathPolygonMask: options$18,
+        pathSpiral: options$17,
+        pathSvg: options$16,
+        pathZigZag: options$15,
+        planes: options$14,
+        plasma: options$13,
+        poisson: options$12,
+        polygonMask: options$11,
+        polygons: options$10,
+        pop: options$$,
     };
 
     var q = {};
 
-    const options$14 = {
+    const options$_ = {
         key: "random",
         name: "Random Colors",
         interactivity: {
@@ -12030,7 +12328,7 @@
         },
     };
 
-    const options$13 = {
+    const options$Z = {
         key: "randomShapes",
         name: "Random Shapes",
         interactivity: {
@@ -12354,743 +12652,121 @@
                                     color: {
                                         value: "#000000",
                                     },
-                                },
-                            },
-                        },
-                    },
-                },
-                type: "random",
-            },
-            size: {
-                value: 16,
-            },
-        },
-        background: {
-            color: "#fff",
-        },
-        preload: [
-            {
-                src: "https://particles.js.org/images/hdr/fruits/apple.png",
-                name: "apple",
-                width: 32,
-                height: 32,
-            },
-            {
-                src: "https://particles.js.org/images/hdr/fruits/avocado.png",
-                name: "avocado",
-                width: 32,
-                height: 32,
-            },
-            {
-                src: "https://particles.js.org/images/hdr/fruits/banana.png",
-                name: "banana",
-                width: 32,
-                height: 32,
-            },
-            {
-                src: "https://particles.js.org/images/hdr/fruits/berries.png",
-                name: "berries",
-                width: 32,
-                height: 32,
-            },
-            {
-                src: "https://particles.js.org/images/hdr/fruits/cherry.png",
-                name: "cherry",
-                width: 32,
-                height: 32,
-            },
-            {
-                src: "https://particles.js.org/images/hdr/fruits/grapes.png",
-                name: "grapes",
-                width: 32,
-                height: 32,
-            },
-            {
-                src: "https://particles.js.org/images/hdr/fruits/lemon.png",
-                name: "lemon",
-                width: 32,
-                height: 32,
-            },
-            {
-                src: "https://particles.js.org/images/hdr/fruits/orange.png",
-                name: "orange",
-                width: 32,
-                height: 32,
-            },
-            {
-                src: "https://particles.js.org/images/hdr/fruits/peach.png",
-                name: "peach",
-                width: 32,
-                height: 32,
-            },
-            {
-                src: "https://particles.js.org/images/hdr/fruits/pear.png",
-                name: "pear",
-                width: 32,
-                height: 32,
-            },
-            {
-                src: "https://particles.js.org/images/hdr/fruits/pepper.png",
-                name: "pepper",
-                width: 32,
-                height: 32,
-            },
-            {
-                src: "https://particles.js.org/images/hdr/fruits/plum.png",
-                name: "plum",
-                width: 32,
-                height: 32,
-            },
-            {
-                src: "https://particles.js.org/images/hdr/fruits/star.png",
-                name: "star",
-                width: 32,
-                height: 32,
-            },
-            {
-                src: "https://particles.js.org/images/hdr/fruits/strawberry.png",
-                name: "strawberry",
-                width: 32,
-                height: 32,
-            },
-            {
-                src: "https://particles.js.org/images/hdr/fruits/watermelon.png",
-                name: "watermelon",
-                width: 32,
-                height: 32,
-            },
-            {
-                src: "https://particles.js.org/images/hdr/fruits/watermelon_slice.png",
-                name: "watermelon_slice",
-                width: 32,
-                height: 32,
-            },
-        ],
-    };
-
-    const options$12 = {
-        key: "reactBubbles",
-        name: "React Bubbles",
-        interactivity: {
-            events: {
-                onClick: {
-                    enable: true,
-                    mode: "repulse",
-                },
-                onHover: {
-                    enable: true,
-                    mode: "bubble",
-                },
-            },
-            modes: {
-                bubble: {
-                    distance: 250,
-                    duration: 2,
-                    opacity: 0,
-                    size: 0,
-                },
-                connect: {
-                    distance: 80,
-                    links: {
-                        opacity: 0.5,
-                    },
-                    radius: 60,
-                },
-                grab: {
-                    distance: 180,
-                    links: {
-                        opacity: 0.35,
-                    },
-                },
-                push: {
-                    quantity: 4,
-                },
-                remove: {
-                    quantity: 2,
-                },
-                repulse: {
-                    distance: 200,
-                    duration: 4,
-                },
-                slow: {
-                    factor: 1,
-                    radius: 0,
-                },
-            },
-        },
-        particles: {
-            paint: {
-                fill: {
-                    color: {
-                        value: "#FFF",
-                    },
-                    enable: true,
-                },
-            },
-            collisions: {
-                enable: true,
-            },
-            move: {
-                direction: "top",
-                enable: true,
-                speed: {
-                    min: 0.1,
-                    max: 1,
-                },
-            },
-            number: {
-                value: 160,
-            },
-            opacity: {
-                animation: {
-                    enable: true,
-                    speed: 1,
-                    sync: false,
-                },
-                value: {
-                    min: 0.1,
-                    max: 0.5,
-                },
-            },
-            shape: {
-                type: "circle",
-            },
-            size: {
-                value: {
-                    min: 1,
-                    max: 3,
-                },
-            },
-        },
-        pauseOnBlur: true,
-        background: {
-            color: "#0d47a1",
-            image: "",
-            position: "50% 50%",
-            repeat: "no-repeat",
-            size: "cover",
-        },
-    };
-
-    const options$11 = {
-        key: "reactDefaults",
-        name: "React Defaults",
-        particles: {
-            number: {
-                value: 40,
-            },
-            paint: {
-                fill: {
-                    color: {
-                        value: "#FFF",
-                    },
-                    enable: true,
-                },
-            },
-            shape: {
-                type: "circle",
-            },
-            opacity: {
-                value: {
-                    min: 0.1,
-                    max: 0.5,
-                },
-                animation: {
-                    enable: true,
-                    speed: 1,
-                    sync: false,
-                },
-            },
-            size: {
-                value: 1,
-            },
-            links: {
-                enable: true,
-                distance: 150,
-                color: "#FFF",
-                opacity: 0.6,
-                width: 1,
-            },
-            move: {
-                enable: true,
-                speed: 3,
-                outModes: "bounce",
-            },
-            collisions: {
-                enable: true,
-            },
-        },
-        background: {
-            color: "#0d47a1",
-        },
-    };
-
-    const options$10 = {
-        key: "reactMultipleImages",
-        name: "React Multiple Images",
-        particles: {
-            paint: {
-                fill: {
-                    color: {
-                        value: "#CCC",
-                    },
-                    enable: true,
-                },
-            },
-            collisions: {
-                enable: true,
-            },
-            links: {
-                blink: false,
-                color: "#fff",
-                consent: false,
-                distance: 150,
-                enable: false,
-                opacity: 0.6,
-                width: 1,
-            },
-            move: {
-                enable: true,
-                speed: 1,
-            },
-            number: {
-                density: {
-                    enable: true,
-                },
-                value: 8,
-            },
-            opacity: {
-                animation: {
-                    enable: true,
-                    speed: 1,
-                    sync: false,
-                },
-                value: {
-                    min: 0.1,
-                    max: 0.5,
-                },
-            },
-            shape: {
-                options: {
-                    image: [
-                        {
-                            height: 20,
-                            replaceColor: true,
-                            src: "https://particles.js.org/images/hdr/fruits/cherry.png",
-                            width: 23,
-                        },
-                        {
-                            height: 20,
-                            replaceColor: true,
-                            src: "https://particles.js.org/images/hdr/fruits/grapes.png",
-                            width: 20,
-                        },
-                        {
-                            height: 20,
-                            replaceColor: true,
-                            src: "https://particles.js.org/images/hdr/fruits/lemon.png",
-                            width: 20,
-                        },
-                    ],
-                },
-                type: ["image", "circle"],
-            },
-            size: {
-                animation: {
-                    enable: true,
-                    speed: 4,
-                    sync: false,
-                },
-                value: {
-                    min: 10,
-                    max: 30,
-                },
-            },
-        },
-        pauseOnBlur: true,
-        background: {
-            color: "#0d47a1",
-            image: "",
-            position: "50% 50%",
-            repeat: "no-repeat",
-            size: "cover",
-        },
-    };
-
-    const options$$ = {
-        key: "reactNightSky",
-        name: "React Night Sky",
-        interactivity: {
-            events: {
-                onClick: {
-                    enable: true,
-                    mode: "push",
-                },
-            },
-            modes: {
-                push: {
-                    quantity: 1,
-                },
-            },
-        },
-        particles: {
-            paint: {
-                fill: {
-                    color: {
-                        value: "#FFF",
-                    },
-                    enable: true,
-                },
-            },
-            links: {
-                blink: false,
-                color: {
-                    value: "#fff",
-                },
-                consent: false,
-                distance: 150,
-                enable: true,
-                opacity: 0.02,
-                width: 1,
-            },
-            move: {
-                direction: "right",
-                enable: true,
-                outModes: "bounce",
-                speed: 0.05,
-            },
-            collisions: {
-                enable: true,
-            },
-            number: {
-                density: {
-                    enable: true,
-                },
-                value: 60,
-            },
-            opacity: {
-                animation: {
-                    enable: true,
-                    speed: 1,
-                    sync: false,
-                },
-                value: {
-                    min: 0.05,
-                    max: 0.5,
-                },
-            },
-            shape: {
-                type: "circle",
-            },
-            size: {
-                value: 1,
-            },
-        },
-        pauseOnBlur: true,
-        background: {
-            color: "#0d47a1",
-            image: "",
-            position: "50% 50%",
-            repeat: "no-repeat",
-            size: "cover",
-        },
-    };
-
-    const options$_ = {
-        key: "reactPolygonMask",
-        name: "React Polygon Mask",
-        interactivity: {
-            events: {
-                onHover: {
-                    enable: true,
-                    mode: "bubble",
-                },
-            },
-            modes: {
-                bubble: {
-                    distance: 40,
-                    duration: 0.4,
-                    opacity: 1,
-                    size: 6,
-                },
-            },
-        },
-        particles: {
-            paint: {
-                fill: {
-                    color: {
-                        value: "#FFF",
-                    },
-                    enable: true,
-                },
-            },
-            links: {
-                blink: false,
-                color: {
-                    value: "#fff",
-                },
-                consent: false,
-                distance: 30,
-                enable: true,
-                opacity: 0.4,
-                width: 1,
-            },
-            move: {
-                enable: true,
-                outModes: "bounce",
-                speed: 1,
-            },
-            number: {
-                value: 200,
-            },
-            opacity: {
-                animation: {
-                    enable: true,
-                    speed: 2,
-                    sync: false,
-                },
-                value: {
-                    min: 0.05,
-                    max: 0.4,
-                },
-            },
-            shape: {
-                type: "circle",
-            },
-            size: {
-                value: 1,
-            },
-        },
-        polygon: {
-            draw: {
-                enable: true,
-                stroke: {
-                    color: "rgba(255, 255, 255, .2)",
-                    width: 0.5,
-                    opacity: 0.2,
-                },
-            },
-            enable: true,
-            inline: {
-                arrangement: "equidistant",
-            },
-            move: {
-                radius: 10,
-                type: "path",
-            },
-            scale: 0.5,
-            type: "inline",
-            url: "https://particles.js.org/images/hdr/smalldeer.svg",
-        },
-        pauseOnBlur: true,
-        background: {
-            color: "#0d47a1",
-            image: "",
-            position: "50% 50%",
-            repeat: "no-repeat",
-            size: "cover",
-        },
-    };
-
-    const options$Z = {
-        key: "reactSimple",
-        name: "React Simple",
-        interactivity: {
-            events: {
-                onHover: {
-                    enable: true,
-                    mode: "repulse",
-                },
-            },
-            modes: {
-                repulse: {
-                    distance: 100,
-                    duration: 5,
-                },
-            },
-        },
-        particles: {
-            paint: {
-                fill: {
-                    color: {
-                        value: "#FFF",
-                    },
-                    enable: true,
-                },
-                stroke: {
-                    color: {
-                        value: "#ff0000",
-                    },
-                    width: 0,
-                    opacity: 1,
-                },
-            },
-            links: {
-                blink: false,
-                color: {
-                    value: "#fff",
-                },
-                consent: false,
-                distance: 150,
-                enable: true,
-                opacity: 0.6,
-                width: 1,
-            },
-            move: {
-                enable: true,
-                outModes: "bounce",
-                speed: 3,
-            },
-            collisions: {
-                enable: true,
-            },
-            number: {
-                value: 50,
-            },
-            opacity: {
-                animation: {
-                    enable: true,
-                    speed: 1,
-                    sync: false,
-                },
-                value: {
-                    min: 0.1,
-                    max: 0.5,
-                },
-            },
-            shape: {
-                type: "circle",
-            },
-            size: {
-                value: 3,
-            },
-        },
-        backgroundMask: {
-            cover: {
-                color: "#fff",
-                opacity: 1,
-            },
-            enable: false,
-        },
-        pauseOnBlur: true,
-        background: {
-            color: "#0d47a1",
-            image: "",
-            position: "50% 50%",
-            repeat: "no-repeat",
-            size: "cover",
-        },
-    };
-
-    const options$Y = {
-        key: "reactSnow",
-        name: "React Snow",
-        interactivity: {
-            events: {
-                onClick: {
-                    enable: true,
-                    mode: "remove",
-                },
-            },
-            modes: {
-                bubble: {
-                    distance: 200,
-                    duration: 0.4,
-                    opacity: 1,
-                    size: 80,
-                },
-                connect: {
-                    distance: 80,
-                    links: {
-                        opacity: 0.5,
-                    },
-                    radius: 60,
-                },
-                grab: {
-                    distance: 180,
-                    links: {
-                        opacity: 0.35,
-                    },
-                },
-                push: {
-                    quantity: 4,
-                },
-                remove: {
-                    quantity: 10,
-                },
-                repulse: {
-                    distance: 100,
-                    duration: 5,
-                },
-                slow: {
-                    factor: 1,
-                    radius: 0,
+                                },
+                            },
+                        },
+                    },
                 },
+                type: "random",
+            },
+            size: {
+                value: 16,
             },
         },
-        particles: {
-            paint: {
-                fill: {
-                    color: {
-                        value: "#FFF",
-                    },
-                    enable: true,
-                },
+        background: {
+            color: "#fff",
+        },
+        preload: [
+            {
+                src: "https://particles.js.org/images/hdr/fruits/apple.png",
+                name: "apple",
+                width: 32,
+                height: 32,
             },
-            links: {
-                blink: false,
-                color: {
-                    value: "#fff",
-                },
-                consent: false,
-                distance: 150,
-                enable: false,
-                opacity: 0.6,
-                width: 1,
+            {
+                src: "https://particles.js.org/images/hdr/fruits/avocado.png",
+                name: "avocado",
+                width: 32,
+                height: 32,
             },
-            move: {
-                direction: "bottom",
-                enable: true,
-                speed: 3,
+            {
+                src: "https://particles.js.org/images/hdr/fruits/banana.png",
+                name: "banana",
+                width: 32,
+                height: 32,
             },
-            collisions: {
-                enable: true,
+            {
+                src: "https://particles.js.org/images/hdr/fruits/berries.png",
+                name: "berries",
+                width: 32,
+                height: 32,
             },
-            number: {
-                value: 160,
+            {
+                src: "https://particles.js.org/images/hdr/fruits/cherry.png",
+                name: "cherry",
+                width: 32,
+                height: 32,
             },
-            opacity: {
-                animation: {
-                    enable: true,
-                    speed: 1,
-                    sync: false,
-                },
-                value: {
-                    min: 0.1,
-                    max: 0.5,
-                },
+            {
+                src: "https://particles.js.org/images/hdr/fruits/grapes.png",
+                name: "grapes",
+                width: 32,
+                height: 32,
             },
-            shape: {
-                type: "circle",
+            {
+                src: "https://particles.js.org/images/hdr/fruits/lemon.png",
+                name: "lemon",
+                width: 32,
+                height: 32,
             },
-            size: {
-                value: {
-                    min: 1,
-                    max: 10,
-                },
+            {
+                src: "https://particles.js.org/images/hdr/fruits/orange.png",
+                name: "orange",
+                width: 32,
+                height: 32,
             },
-        },
-        pauseOnBlur: true,
-        background: {
-            color: "#0d47a1",
-            image: "",
-            position: "50% 50%",
-            repeat: "no-repeat",
-            size: "cover",
-        },
+            {
+                src: "https://particles.js.org/images/hdr/fruits/peach.png",
+                name: "peach",
+                width: 32,
+                height: 32,
+            },
+            {
+                src: "https://particles.js.org/images/hdr/fruits/pear.png",
+                name: "pear",
+                width: 32,
+                height: 32,
+            },
+            {
+                src: "https://particles.js.org/images/hdr/fruits/pepper.png",
+                name: "pepper",
+                width: 32,
+                height: 32,
+            },
+            {
+                src: "https://particles.js.org/images/hdr/fruits/plum.png",
+                name: "plum",
+                width: 32,
+                height: 32,
+            },
+            {
+                src: "https://particles.js.org/images/hdr/fruits/star.png",
+                name: "star",
+                width: 32,
+                height: 32,
+            },
+            {
+                src: "https://particles.js.org/images/hdr/fruits/strawberry.png",
+                name: "strawberry",
+                width: 32,
+                height: 32,
+            },
+            {
+                src: "https://particles.js.org/images/hdr/fruits/watermelon.png",
+                name: "watermelon",
+                width: 32,
+                height: 32,
+            },
+            {
+                src: "https://particles.js.org/images/hdr/fruits/watermelon_slice.png",
+                name: "watermelon_slice",
+                width: 32,
+                height: 32,
+            },
+        ],
     };
 
-    const options$X = {
+    const options$Y = {
         key: "reduceDuplicates",
         name: "Reduce Duplicates",
         particles: {
@@ -13223,7 +12899,7 @@
         },
     };
 
-    const options$W = {
+    const options$X = {
         key: "repulse",
         name: "Repulse",
         particles: {
@@ -13336,7 +13012,7 @@
         },
     };
 
-    const options$V = {
+    const options$W = {
         key: "repulseBack",
         name: "Repulse Back",
         particles: {
@@ -13392,7 +13068,7 @@
         },
     };
 
-    const options$U = {
+    const options$V = {
         key: "repulseBounce",
         name: "Repulse Bounce",
         particles: {
@@ -13448,7 +13124,7 @@
         },
     };
 
-    const options$T = {
+    const options$U = {
         key: "repulseCirc",
         name: "Repulse Circ",
         particles: {
@@ -13504,7 +13180,7 @@
         },
     };
 
-    const options$S = {
+    const options$T = {
         key: "repulseCubic",
         name: "Repulse Cubic",
         particles: {
@@ -13560,7 +13236,7 @@
         },
     };
 
-    const options$R = {
+    const options$S = {
         key: "repulseElastic",
         name: "Repulse Elastic",
         particles: {
@@ -13616,7 +13292,7 @@
         },
     };
 
-    const options$Q = {
+    const options$R = {
         key: "repulseExpo",
         name: "Repulse Expo",
         particles: {
@@ -13672,7 +13348,7 @@
         },
     };
 
-    const options$P = {
+    const options$Q = {
         key: "repulseGaussian",
         name: "Repulse Gaussian",
         particles: {
@@ -13728,7 +13404,7 @@
         },
     };
 
-    const options$O = {
+    const options$P = {
         key: "repulseExpo",
         name: "Repulse Quart",
         particles: {
@@ -13784,7 +13460,7 @@
         },
     };
 
-    const options$N = {
+    const options$O = {
         key: "repulseQuint",
         name: "Repulse Quint",
         particles: {
@@ -13840,7 +13516,7 @@
         },
     };
 
-    const options$M = {
+    const options$N = {
         key: "repulseSigmoid",
         name: "Repulse Sigmoid",
         particles: {
@@ -13896,7 +13572,7 @@
         },
     };
 
-    const options$L = {
+    const options$M = {
         key: "repulseSine",
         name: "Repulse Sine",
         particles: {
@@ -13952,7 +13628,7 @@
         },
     };
 
-    const options$K = {
+    const options$L = {
         key: "repulseSmoothstep",
         name: "Repulse Smoothstep",
         particles: {
@@ -14008,7 +13684,7 @@
         },
     };
 
-    const options$J = {
+    const options$K = {
         key: "responsive",
         name: "Responsive",
         particles: {
@@ -14128,7 +13804,7 @@
         },
     };
 
-    const options$I = {
+    const options$J = {
         key: "ring",
         name: "Ring",
         particles: {
@@ -14204,34 +13880,27 @@
     };
 
     var r = {
-        random: options$14,
-        randomShapes: options$13,
-        reactBubbles: options$12,
-        reactDefaults: options$11,
-        reactMultipleImages: options$10,
-        reactNightSky: options$$,
-        reactPolygonMask: options$_,
-        reactSimple: options$Z,
-        reactSnow: options$Y,
-        reduceDuplicates: options$X,
-        repulse: options$W,
-        repulseBack: options$V,
-        repulseBounce: options$U,
-        repulseCirc: options$T,
-        repulseCubic: options$S,
-        repulseElastic: options$R,
-        repulseExpo: options$Q,
-        repulseGaussian: options$P,
-        repulseQuart: options$O,
-        repulseQuint: options$N,
-        repulseSigmoid: options$M,
-        repulseSine: options$L,
-        repulseSmoothstep: options$K,
-        responsive: options$J,
-        ring: options$I,
+        random: options$_,
+        randomShapes: options$Z,
+        reduceDuplicates: options$Y,
+        repulse: options$X,
+        repulseBack: options$W,
+        repulseBounce: options$V,
+        repulseCirc: options$U,
+        repulseCubic: options$T,
+        repulseElastic: options$S,
+        repulseExpo: options$R,
+        repulseGaussian: options$Q,
+        repulseQuart: options$P,
+        repulseQuint: options$O,
+        repulseSigmoid: options$N,
+        repulseSine: options$M,
+        repulseSmoothstep: options$L,
+        responsive: options$K,
+        ring: options$J,
     };
 
-    const options$H = {
+    const options$I = {
         key: "seaAnemone",
         name: "Sea Anemone",
         particles: {
@@ -14320,7 +13989,7 @@
         },
     };
 
-    const options$G = {
+    const options$H = {
         key: "shadow",
         name: "Shadow",
         smooth: true,
@@ -14420,7 +14089,7 @@
         },
     };
 
-    const options$F = {
+    const options$G = {
         key: "shapeArrow",
         name: "Shape Arrow",
         particles: {
@@ -14480,7 +14149,7 @@
         },
     };
 
-    const options$E = {
+    const options$F = {
         key: "shapeCog",
         name: "Shape Cog",
         particles: {
@@ -14581,7 +14250,7 @@
     const emitterRate$1 = {
         delay: 0.2,
         quantity: 1,
-    }, options$D = {
+    }, options$E = {
         key: "shapeEmoji",
         name: "Shape Emoji",
         particles: {
@@ -14765,7 +14434,7 @@
     const emitterRate = {
         delay: 0.2,
         quantity: 1,
-    }, options$C = {
+    }, options$D = {
         key: "shapeEmojiPadding",
         name: "Shape Emoji Padding",
         particles: {
@@ -14877,7 +14546,7 @@
         ],
     };
 
-    const options$B = {
+    const options$C = {
         key: "shapeHeart",
         name: "Shape Heart",
         particles: {
@@ -14964,7 +14633,7 @@
         },
     };
 
-    const options$A = {
+    const options$B = {
         key: "shapeInfinity",
         name: "Shape Infinity",
         particles: {
@@ -15054,7 +14723,7 @@
         },
     };
 
-    const options$z = {
+    const options$A = {
         key: "shapeMultilineText",
         name: "Shape Multiline Text",
         particles: {
@@ -15107,7 +14776,7 @@
         },
     };
 
-    const options$y = {
+    const options$z = {
         key: "shapeOptions",
         name: "Shape Options",
         particles: {
@@ -15171,7 +14840,7 @@
         },
     };
 
-    const options$x = {
+    const options$y = {
         key: "shapePath",
         name: "Shape Path",
         particles: {
@@ -15343,6 +15012,79 @@
         },
     };
 
+    const options$x = {
+        key: "shapeRibbon",
+        name: "Shape Ribbon",
+        particles: {
+            number: {
+                value: 18,
+                density: {
+                    enable: false,
+                },
+            },
+            paint: {
+                fill: {
+                    color: {
+                        value: "#ff0000",
+                        animation: {
+                            enable: true,
+                            speed: 8,
+                            sync: true,
+                        },
+                    },
+                    enable: true,
+                },
+                stroke: {
+                    color: {
+                        value: "#ffffff",
+                        animation: {
+                            enable: true,
+                            speed: 8,
+                            sync: true,
+                        },
+                    },
+                    width: 1,
+                },
+            },
+            shape: {
+                type: "ribbon",
+                options: {
+                    ribbon: {
+                        angle: 45,
+                        darken: {
+                            enable: true,
+                            value: 30,
+                        },
+                        count: 50,
+                        drag: 0.05,
+                        mass: 1,
+                        oscillationDistance: 40,
+                        oscillationSpeed: 3,
+                        particleDist: 8,
+                        velocityInherit: 5,
+                    },
+                },
+            },
+            opacity: {
+                value: 1,
+            },
+            size: {
+                value: 8,
+            },
+            links: {
+                enable: false,
+            },
+            move: {
+                enable: true,
+                direction: "none",
+                speed: 2,
+            },
+        },
+        background: {
+            color: "#000000",
+        },
+    };
+
     const options$w = {
         key: "shapeRoundedPolygon",
         name: "Shape Rounded Polygon",
@@ -17150,17 +16892,18 @@
     };
 
     var s = {
-        seaAnemone: options$H,
-        shadow: options$G,
-        shapeArrow: options$F,
-        shapeCog: options$E,
-        shapeEmoji: options$D,
-        shapeEmojiPadding: options$C,
-        shapeHeart: options$B,
-        shapeInfinity: options$A,
-        shapeMultilineText: options$z,
-        shapeOptions: options$y,
-        shapePath: options$x,
+        seaAnemone: options$I,
+        shadow: options$H,
+        shapeArrow: options$G,
+        shapeCog: options$F,
+        shapeEmoji: options$E,
+        shapeEmojiPadding: options$D,
+        shapeHeart: options$C,
+        shapeInfinity: options$B,
+        shapeMultilineText: options$A,
+        shapeOptions: options$z,
+        shapePath: options$y,
+        shapeRibbon: options$x,
         shapeRoundedPolygon: options$w,
         shapeRoundedRect: options$v,
         shapeSpiral: options$u,