@tsparticles/configs 3.0.2 → 3.1.0

package/tsparticles.configs.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.0.2
+ * v3.1.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -98,6 +98,7 @@ __webpack_require__.d(__webpack_exports__, {
 var engine_root_window_ = __webpack_require__(533);
 ;// CONCATENATED MODULE: ./dist/browser/a/absorbers.js
 const options = {
+  key: "absorbers",
   name: "Absorbers",
   particles: {
     number: {
@@ -166,6 +167,7 @@ const options = {
 /* harmony default export */ const absorbers = (options);
 ;// CONCATENATED MODULE: ./dist/browser/a/amongUs.js
 const amongUs_options = {
+  key: "amongUs",
   name: "Among Us",
   particles: {
     groups: {
@@ -301,6 +303,7 @@ const amongUs_options = {
 });
 ;// CONCATENATED MODULE: ./dist/browser/b/backgroundMask.js
 const backgroundMask_options = {
+  key: "backgroundMask",
   name: "Background Mask",
   particles: {
     number: {
@@ -381,6 +384,7 @@ const backgroundMask_options = {
 /* harmony default export */ const backgroundMask = (backgroundMask_options);
 ;// CONCATENATED MODULE: ./dist/browser/b/basic.js
 const basic_options = {
+  key: "basic",
   name: "Basic",
   particles: {
     number: {
@@ -448,6 +452,7 @@ const basic_options = {
 /* harmony default export */ const basic = (basic_options);
 ;// CONCATENATED MODULE: ./dist/browser/b/big.js
 const big_options = {
+  key: "big",
   name: "Big Particles",
   particles: {
     number: {
@@ -489,6 +494,7 @@ const big_options = {
 /* harmony default export */ const big = (big_options);
 ;// CONCATENATED MODULE: ./dist/browser/b/blackHole.js
 const blackHole_options = {
+  key: "blackHole",
   name: "Black Hole",
   particles: {
     number: {
@@ -562,6 +568,7 @@ const blackHole_options = {
 /* harmony default export */ const blackHole = (blackHole_options);
 ;// CONCATENATED MODULE: ./dist/browser/b/bubble.js
 const bubble_options = {
+  key: "bubble",
   name: "Bubble",
   particles: {
     number: {
@@ -662,6 +669,7 @@ const bubble_options = {
 });
 ;// CONCATENATED MODULE: ./dist/browser/c/cards.js
 const cards_options = {
+  key: "cards",
   name: "Cards",
   particles: {
     number: {
@@ -742,6 +750,7 @@ const cards_options = {
 /* harmony default export */ const cards = (cards_options);
 ;// CONCATENATED MODULE: ./dist/browser/c/chars.js
 const chars_options = {
+  key: "chars",
   name: "Chars",
   particles: {
     number: {
@@ -847,6 +856,7 @@ const chars_options = {
 /* harmony default export */ const chars = (chars_options);
 ;// CONCATENATED MODULE: ./dist/browser/c/clickPause.js
 const clickPause_options = {
+  key: "clickPause",
   name: "Click Pause",
   particles: {
     number: {
@@ -924,6 +934,7 @@ const clickPause_options = {
 /* harmony default export */ const clickPause = (clickPause_options);
 ;// CONCATENATED MODULE: ./dist/browser/c/collisionsAbsorb.js
 const collisionsAbsorb_options = {
+  key: "collisionsAbsorb",
   name: "Collisions Absorb",
   particles: {
     number: {
@@ -1013,6 +1024,7 @@ const collisionsAbsorb_options = {
 /* harmony default export */ const collisionsAbsorb = (collisionsAbsorb_options);
 ;// CONCATENATED MODULE: ./dist/browser/c/collisionsBounce.js
 const collisionsBounce_options = {
+  key: "collisionsBounce",
   name: "Collisions Bounce",
   particles: {
     number: {
@@ -1098,6 +1110,7 @@ const collisionsBounce_options = {
 /* harmony default export */ const collisionsBounce = (collisionsBounce_options);
 ;// CONCATENATED MODULE: ./dist/browser/c/collisionsDestroy.js
 const collisionsDestroy_options = {
+  key: "collisionsDestroy",
   name: "Collisions Destroy",
   particles: {
     number: {
@@ -1210,6 +1223,7 @@ const collisionsDestroy_options = {
 /* harmony default export */ const collisionsDestroy = (collisionsDestroy_options);
 ;// CONCATENATED MODULE: ./dist/browser/c/colorAnimation.js
 const colorAnimation_options = {
+  key: "colorAnimation",
   name: "Color Animation",
   particles: {
     number: {
@@ -1221,10 +1235,30 @@ const colorAnimation_options = {
     color: {
       value: "#ff0000",
       animation: {
-        count: 1,
-        enable: true,
-        speed: 60,
-        sync: true
+        h: {
+          enable: true,
+          speed: {
+            min: 30,
+            max: 60
+          },
+          sync: true
+        },
+        s: {
+          enable: true,
+          speed: {
+            min: 5,
+            max: 10
+          },
+          sync: true
+        },
+        l: {
+          enable: true,
+          speed: {
+            min: 5,
+            max: 10
+          },
+          sync: true
+        }
       }
     },
     stroke: {
@@ -1232,10 +1266,30 @@ const colorAnimation_options = {
       color: {
         value: "#0000ff",
         animation: {
-          count: 1,
-          enable: true,
-          speed: 60,
-          sync: true
+          h: {
+            enable: true,
+            speed: {
+              min: 30,
+              max: 60
+            },
+            sync: true
+          },
+          s: {
+            enable: true,
+            speed: {
+              min: 5,
+              max: 10
+            },
+            sync: true
+          },
+          l: {
+            enable: true,
+            speed: {
+              min: 5,
+              max: 10
+            },
+            sync: true
+          }
         }
       }
     },
@@ -1260,6 +1314,7 @@ const colorAnimation_options = {
 /* harmony default export */ const colorAnimation = (colorAnimation_options);
 ;// CONCATENATED MODULE: ./dist/browser/c/connect.js
 const connect_options = {
+  key: "connect",
   name: "Connect",
   interactivity: {
     events: {
@@ -1371,6 +1426,7 @@ const connect_options = {
 /* harmony default export */ const connect = (connect_options);
 ;// CONCATENATED MODULE: ./dist/browser/c/curlNoise.js
 const curlNoise_options = {
+  key: "curlNoise",
   name: "Curl Noise",
   particles: {
     number: {
@@ -1442,6 +1498,7 @@ const curlNoise_options = {
 });
 ;// CONCATENATED MODULE: ./dist/browser/d/dataImages.js
 const dataImages_options = {
+  key: "dataImages",
   name: "Data URI Images",
   interactivity: {
     events: {
@@ -1557,6 +1614,7 @@ const dataImages_options = {
 /* harmony default export */ const dataImages = (dataImages_options);
 ;// CONCATENATED MODULE: ./dist/browser/d/delay.js
 const delay_options = {
+  key: "delay",
   name: "Delay",
   delay: 5,
   particles: {
@@ -1625,6 +1683,7 @@ const delay_options = {
 /* harmony default export */ const delay = (delay_options);
 ;// CONCATENATED MODULE: ./dist/browser/d/delayColor.js
 const delayColor_options = {
+  key: "delayColor",
   name: "Delay Color",
   background: {
     color: {
@@ -1665,6 +1724,7 @@ const delayColor_options = {
 /* harmony default export */ const delayColor = (delayColor_options);
 ;// CONCATENATED MODULE: ./dist/browser/d/delayOpacity.js
 const delayOpacity_options = {
+  key: "delayOpacity",
   name: "Delay Opacity",
   background: {
     color: {
@@ -1706,6 +1766,7 @@ const delayOpacity_options = {
 /* harmony default export */ const delayOpacity = (delayOpacity_options);
 ;// CONCATENATED MODULE: ./dist/browser/d/delaySize.js
 const delaySize_options = {
+  key: "delaySize",
   name: "Delay Size",
   background: {
     color: {
@@ -1747,6 +1808,7 @@ const delaySize_options = {
 /* harmony default export */ const delaySize = (delaySize_options);
 ;// CONCATENATED MODULE: ./dist/browser/d/delayStrokeColor.js
 const delayStrokeColor_options = {
+  key: "delayStrokeColor",
   name: "Delay Stroke Color",
   background: {
     color: {
@@ -1792,6 +1854,7 @@ const delayStrokeColor_options = {
 /* harmony default export */ const delayStrokeColor = (delayStrokeColor_options);
 ;// CONCATENATED MODULE: ./dist/browser/d/destroy.js
 const destroy_options = {
+  key: "destroy",
   name: "Destroy",
   particles: {
     number: {
@@ -1870,6 +1933,7 @@ const destroy_options = {
 /* harmony default export */ const destroy = (destroy_options);
 ;// CONCATENATED MODULE: ./dist/browser/d/disappearing.js
 const disappearing_options = {
+  key: "disappearing",
   name: "Disappearing",
   background: {
     color: {
@@ -1956,6 +2020,7 @@ const disappearing_options = {
 /* harmony default export */ const disappearing = (disappearing_options);
 ;// CONCATENATED MODULE: ./dist/browser/d/divEvents.js
 const divEvents_options = {
+  key: "divEvents",
   name: "Div Events",
   background: {
     color: "#0d47a1"
@@ -2080,6 +2145,7 @@ const divEvents_options = {
 });
 ;// CONCATENATED MODULE: ./dist/browser/e/effectBubble.js
 const effectBubble_options = {
+  key: "effectBubble",
   name: "Effect Bubble",
   particles: {
     number: {
@@ -2158,6 +2224,7 @@ const effectBubble_options = {
 /* harmony default export */ const effectBubble = (effectBubble_options);
 ;// CONCATENATED MODULE: ./dist/browser/e/effectTrail.js
 const effectTrail_options = {
+  key: "effectTrail",
   name: "Effect Trail",
   particles: {
     number: {
@@ -2216,6 +2283,7 @@ const effectTrail_options = {
 /* harmony default export */ const effectTrail = (effectTrail_options);
 ;// CONCATENATED MODULE: ./dist/browser/e/emitter.js
 const emitter_options = {
+  key: "emitter",
   name: "Emitter",
   particles: {
     number: {
@@ -2464,6 +2532,7 @@ const emitter_options = {
 /* harmony default export */ const emitter = (emitter_options);
 ;// CONCATENATED MODULE: ./dist/browser/e/emitterAbsorber.js
 const emitterAbsorber_options = {
+  key: "emitterAbsorber",
   name: "Emitter and Absorber",
   particles: {
     number: {
@@ -2599,6 +2668,7 @@ const emitterAbsorber_options = {
 /* harmony default export */ const emitterAbsorber = (emitterAbsorber_options);
 ;// CONCATENATED MODULE: ./dist/browser/e/emitterAngled.js
 const emitterAngled_options = {
+  key: "emitterAngled",
   name: "Emitter Angled",
   particles: {
     number: {
@@ -2653,90 +2723,94 @@ const emitterAngled_options = {
 };
 /* harmony default export */ const emitterAngled = (emitterAngled_options);
 ;// CONCATENATED MODULE: ./dist/browser/e/emitterImageShape.js
-const rate = {
-  delay: 0.1,
-  quantity: 100
-};
-const generateEmitter = (shape, options, fill, position) => {
-  return {
-    shape: {
-      replace: {
-        color: true,
-        opacity: true
+const minFilterValue = 30,
+  minFilterAlpha = 0,
+  rate = {
+    delay: 0.1,
+    quantity: 100
+  },
+  generateEmitter = (shape, options, fill, position) => {
+    return {
+      shape: {
+        replace: {
+          color: true,
+          opacity: true
+        },
+        type: shape,
+        options
       },
-      type: shape,
-      options
-    },
-    position: position,
-    size: {
-      width: 500,
-      height: 500,
-      mode: "precise"
-    },
-    startCount: 300,
-    rate,
-    fill
-  };
-};
-const emitterImageShape_options = {
-  name: "Emitter Image Shape",
-  particles: {
-    number: {
-      value: 0
-    },
-    color: {
-      value: ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722"]
-    },
-    life: {
-      count: 1,
-      duration: {
-        value: 1.5
+      position: position,
+      size: {
+        width: 500,
+        height: 500,
+        mode: "precise"
+      },
+      startCount: 300,
+      rate,
+      fill
+    };
+  },
+  emitterImageShape_options = {
+    key: "emitterImageShape",
+    name: "Emitter Image Shape",
+    particles: {
+      number: {
+        value: 0
+      },
+      color: {
+        value: ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722"]
+      },
+      life: {
+        count: 1,
+        duration: {
+          value: 1.5
+        }
+      },
+      move: {
+        enable: true,
+        speed: 0.5
+      },
+      shape: {
+        type: "circle"
+      },
+      opacity: {
+        value: 1
+      },
+      size: {
+        value: {
+          min: 1,
+          max: 10
+        },
+        animation: {
+          enable: true,
+          speed: 30,
+          sync: true,
+          startValue: "min",
+          count: 2
+        }
       }
     },
-    move: {
-      enable: true,
-      speed: 0.5
-    },
-    shape: {
-      type: "circle"
-    },
-    opacity: {
-      value: 1
+    background: {
+      color: "#fff"
     },
-    size: {
-      value: {
-        min: 1,
-        max: 10
+    emitters: [generateEmitter("canvas", {
+      scale: 5,
+      pixels: {
+        filter: pixel => pixel.r < minFilterValue && pixel.g < minFilterValue && pixel.b < minFilterValue ? false : pixel.a > minFilterAlpha,
+        offset: 4
       },
-      animation: {
-        enable: true,
-        speed: 30,
-        sync: true,
-        startValue: "min",
-        count: 2
+      image: {
+        src: "https://particles.js.org/images/amongus_cyan.png"
       }
-    }
-  },
-  background: {
-    color: "#fff"
-  },
-  emitters: [generateEmitter("canvas", {
-    scale: 5,
-    pixels: {
-      filter: "pixelFilter",
-      offset: 4
-    },
-    image: {
-      src: "https://particles.js.org/images/amongus_cyan.png"
-    }
-  }, true, {
-    x: 50,
-    y: 50
-  })]
-};
+    }, true, {
+      x: 50,
+      y: 50
+    })]
+  };
 /* harmony default export */ const emitterImageShape = (emitterImageShape_options);
 ;// CONCATENATED MODULE: ./dist/browser/e/emitterImages.js
 const emitterImages_options = {
+  key: "emitterImages",
   name: "Emitter Images",
   particles: {
     move: {
@@ -2853,6 +2927,7 @@ const emitterImages_options = {
 /* harmony default export */ const emitterImages = (emitterImages_options);
 ;// CONCATENATED MODULE: ./dist/browser/e/emitterPaths.js
 const emitterPaths_options = {
+  key: "emitterPaths",
   name: "Emitter Paths",
   particles: {
     number: {
@@ -3003,6 +3078,7 @@ const path = [{
   y: 25
 }];
 const emitterShapes_options = {
+  key: "emitterShapes",
   name: "Emitter Shapes",
   particles: {
     number: {
@@ -3061,180 +3137,184 @@ const emitterShapes_options = {
 };
 /* harmony default export */ const emitterShapes = (emitterShapes_options);
 ;// CONCATENATED MODULE: ./dist/browser/e/emitterTextShape.js
-const emitterTextShape_rate = {
-  delay: 0.1,
-  quantity: 100
-};
-const emitterTextShape_generateEmitter = (shape, options, fill, position) => {
-  return {
-    shape: {
-      type: shape,
-      options
-    },
-    position: position,
-    size: {
-      width: 500,
-      height: 500,
-      mode: "precise"
-    },
-    startCount: 300,
-    rate: emitterTextShape_rate,
-    fill
-  };
-};
-const emitterTextShape_options = {
-  name: "Emitter Text Shape",
-  particles: {
-    number: {
-      value: 0
-    },
-    color: {
-      value: ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722"]
-    },
-    life: {
-      count: 1,
-      duration: {
-        value: 1.5
-      }
-    },
-    move: {
-      enable: true,
-      speed: 0.5
-    },
-    shape: {
-      type: "circle"
-    },
-    opacity: {
-      value: 1
-    },
-    size: {
-      value: {
-        min: 1,
-        max: 10
+const minAlphaFilter = 0,
+  emitterTextShape_rate = {
+    delay: 0.1,
+    quantity: 100
+  },
+  emitterTextShape_generateEmitter = (shape, options, fill, position) => {
+    return {
+      shape: {
+        type: shape,
+        options
       },
-      animation: {
+      position: position,
+      size: {
+        width: 500,
+        height: 500,
+        mode: "precise"
+      },
+      startCount: 300,
+      rate: emitterTextShape_rate,
+      fill
+    };
+  },
+  emitterTextShape_options = {
+    key: "emitterTextShape",
+    name: "Emitter Text Shape",
+    particles: {
+      number: {
+        value: 0
+      },
+      color: {
+        value: ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722"]
+      },
+      life: {
+        count: 1,
+        duration: {
+          value: 1.5
+        }
+      },
+      move: {
         enable: true,
-        speed: 30,
-        sync: true,
-        startValue: "min",
-        count: 2
+        speed: 0.5
+      },
+      shape: {
+        type: "circle"
+      },
+      opacity: {
+        value: 1
+      },
+      size: {
+        value: {
+          min: 1,
+          max: 10
+        },
+        animation: {
+          enable: true,
+          speed: 30,
+          sync: true,
+          startValue: "min",
+          count: 2
+        }
       }
-    }
-  },
-  background: {
-    color: "#fff"
-  },
-  emitters: [emitterTextShape_generateEmitter("canvas", {
-    scale: 1,
-    pixels: {
-      filter: "pixelTextFilter",
-      offset: 4
     },
-    text: {
-      color: "#ff0000",
-      font: {
-        size: 500,
-        family: "Verdana"
+    background: {
+      color: "#fff"
+    },
+    emitters: [emitterTextShape_generateEmitter("canvas", {
+      scale: 1,
+      pixels: {
+        filter: pixel => pixel.a > minAlphaFilter,
+        offset: 4
       },
-      text: "Particles",
-      lines: {
-        separator: "\n",
-        spacing: 10
+      text: {
+        color: "#ff0000",
+        font: {
+          size: 500,
+          family: "Verdana"
+        },
+        text: "Particles",
+        lines: {
+          separator: "\n",
+          spacing: 10
+        }
       }
-    }
-  }, true, {
-    x: 50,
-    y: 50
-  })]
-};
+    }, true, {
+      x: 50,
+      y: 50
+    })]
+  };
 /* harmony default export */ const emitterTextShape = (emitterTextShape_options);
 ;// CONCATENATED MODULE: ./dist/browser/e/emitterTextStrokeShape.js
-const emitterTextStrokeShape_rate = {
-  delay: 0.1,
-  quantity: 100
-};
-const emitterTextStrokeShape_generateEmitter = (shape, options, fill, position) => {
-  return {
-    shape: {
-      type: shape,
-      options
-    },
-    position: position,
-    size: {
-      width: 500,
-      height: 500,
-      mode: "precise"
-    },
-    startCount: 300,
-    rate: emitterTextStrokeShape_rate,
-    fill
-  };
-};
-const emitterTextStrokeShape_options = {
-  name: "Emitter Text Stroke Shape",
-  particles: {
-    number: {
-      value: 0
-    },
-    color: {
-      value: ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722"]
-    },
-    life: {
-      count: 1,
-      duration: {
-        value: 1.5
-      }
-    },
-    move: {
-      enable: true,
-      speed: 0.5
-    },
-    shape: {
-      type: "circle"
-    },
-    opacity: {
-      value: 1
-    },
-    size: {
-      value: {
-        min: 1,
-        max: 10
+const emitterTextStrokeShape_minAlphaFilter = 0,
+  emitterTextStrokeShape_rate = {
+    delay: 0.1,
+    quantity: 100
+  },
+  emitterTextStrokeShape_generateEmitter = (shape, options, fill, position) => {
+    return {
+      shape: {
+        type: shape,
+        options
       },
-      animation: {
+      position: position,
+      size: {
+        width: 500,
+        height: 500,
+        mode: "precise"
+      },
+      startCount: 300,
+      rate: emitterTextStrokeShape_rate,
+      fill
+    };
+  },
+  emitterTextStrokeShape_options = {
+    key: "emitterTextStrokeShape",
+    name: "Emitter Text Stroke Shape",
+    particles: {
+      number: {
+        value: 0
+      },
+      color: {
+        value: ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722"]
+      },
+      life: {
+        count: 1,
+        duration: {
+          value: 1.5
+        }
+      },
+      move: {
         enable: true,
-        speed: 30,
-        sync: true,
-        startValue: "min",
-        count: 2
+        speed: 0.5
+      },
+      shape: {
+        type: "circle"
+      },
+      opacity: {
+        value: 1
+      },
+      size: {
+        value: {
+          min: 1,
+          max: 10
+        },
+        animation: {
+          enable: true,
+          speed: 30,
+          sync: true,
+          startValue: "min",
+          count: 2
+        }
       }
-    }
-  },
-  background: {
-    color: "#fff"
-  },
-  emitters: [emitterTextStrokeShape_generateEmitter("canvas", {
-    scale: 1,
-    pixels: {
-      filter: "pixelTextFilter",
-      offset: 4
     },
-    text: {
-      color: "#ff0000",
-      font: {
-        size: 500,
-        family: "Verdana"
+    background: {
+      color: "#fff"
+    },
+    emitters: [emitterTextStrokeShape_generateEmitter("canvas", {
+      scale: 1,
+      pixels: {
+        filter: pixel => pixel.a > emitterTextStrokeShape_minAlphaFilter,
+        offset: 4
       },
-      text: "Particles",
-      lines: {
-        separator: "\n",
-        spacing: 10
+      text: {
+        color: "#ff0000",
+        font: {
+          size: 500,
+          family: "Verdana"
+        },
+        text: "Particles",
+        lines: {
+          separator: "\n",
+          spacing: 10
+        }
       }
-    }
-  }, false, {
-    x: 50,
-    y: 50
-  })]
-};
+    }, false, {
+      x: 50,
+      y: 50
+    })]
+  };
 /* harmony default export */ const emitterTextStrokeShape = (emitterTextStrokeShape_options);
 ;// CONCATENATED MODULE: ./dist/browser/e/index.js
 
@@ -3263,6 +3343,7 @@ const emitterTextStrokeShape_options = {
 });
 ;// CONCATENATED MODULE: ./dist/browser/f/fireworks.js
 const fireworks_options = {
+  key: "fireworks",
   name: "Fireworks",
   fullScreen: {
     enable: true
@@ -3430,8 +3511,8 @@ const fireworks_options = {
   sounds: {
     enable: true,
     events: [{
-      event: "particleDestroyed",
-      filter: "explodeSoundCheck",
+      event: "particleRemoved",
+      filter: args => args.data.particle.options.move.gravity.inverse,
       audio: ["https://particles.js.org/audio/explosion0.mp3", "https://particles.js.org/audio/explosion1.mp3", "https://particles.js.org/audio/explosion2.mp3"]
     }],
     volume: 50
@@ -3440,6 +3521,7 @@ const fireworks_options = {
 /* harmony default export */ const fireworks = (fireworks_options);
 ;// CONCATENATED MODULE: ./dist/browser/f/fireworks2.js
 const fireworks2_options = {
+  key: "fireworks2",
   name: "Fireworks 2",
   fullScreen: {
     enable: true
@@ -3588,9 +3670,6 @@ const fireworks2_options = {
         }
       }
     },
-    rotate: {
-      path: true
-    },
     shape: {
       type: "circle"
     },
@@ -3619,7 +3698,7 @@ const fireworks2_options = {
     enable: true,
     events: [{
       event: "particleRemoved",
-      filter: "explodeSoundCheck",
+      filter: args => args.data.particle.options.move.gravity.inverse,
       audio: ["https://particles.js.org/audio/explosion0.mp3", "https://particles.js.org/audio/explosion1.mp3", "https://particles.js.org/audio/explosion2.mp3"]
     }],
     volume: 50
@@ -3628,6 +3707,7 @@ const fireworks2_options = {
 /* harmony default export */ const fireworks2 = (fireworks2_options);
 ;// CONCATENATED MODULE: ./dist/browser/f/fontawesome.js
 const fontawesome_options = {
+  key: "fontawesome",
   name: "Font Awesome",
   interactivity: {
     events: {
@@ -3728,6 +3808,7 @@ const fontawesome_options = {
 /* harmony default export */ const fontawesome = (fontawesome_options);
 ;// CONCATENATED MODULE: ./dist/browser/f/forward.js
 const forward_options = {
+  key: "forward",
   name: "Forward",
   particles: {
     number: {
@@ -3829,6 +3910,7 @@ const forward_options = {
 });
 ;// CONCATENATED MODULE: ./dist/browser/g/gifs.js
 const gifs_options = {
+  key: "gifs",
   name: "Gifs",
   interactivity: {
     events: {
@@ -3888,6 +3970,7 @@ const gifs_options = {
 /* harmony default export */ const gifs = (gifs_options);
 ;// CONCATENATED MODULE: ./dist/browser/g/grabRandomColor.js
 const grabRandomColor_options = {
+  key: "grabRandomColor",
   name: "Grab Random Color",
   particles: {
     number: {
@@ -3971,6 +4054,7 @@ const grabRandomColor_options = {
 /* harmony default export */ const grabRandomColor = (grabRandomColor_options);
 ;// CONCATENATED MODULE: ./dist/browser/g/gradients.js
 const gradients_options = {
+  key: "gradients",
   name: "Gradients",
   particles: {
     number: {
@@ -4026,6 +4110,64 @@ const gradients_options = {
         value: "#000000",
         opacity: 0
       }]
+    }, {
+      type: "radial",
+      colors: [{
+        stop: 0.25,
+        value: {
+          value: "#ff0000",
+          animation: {
+            enable: true,
+            speed: 60,
+            sync: true
+          }
+        }
+      }, {
+        stop: 0.5,
+        value: {
+          value: "#00ff00",
+          animation: {
+            enable: true,
+            speed: 60,
+            sync: true
+          }
+        }
+      }, {
+        stop: 0.75,
+        value: {
+          value: "#0000ff",
+          animation: {
+            enable: true,
+            speed: 60,
+            sync: true
+          }
+        }
+      }, {
+        stop: 1,
+        value: "#000000",
+        opacity: 0
+      }]
+    }, {
+      type: "linear",
+      angle: {
+        value: 0,
+        direction: "random",
+        animation: {
+          enable: true,
+          speed: 60,
+          sync: true
+        }
+      },
+      colors: [{
+        stop: 0,
+        value: "#00ffff"
+      }, {
+        stop: 0.5,
+        value: "#ff00ff"
+      }, {
+        stop: 1,
+        value: "#ffff00"
+      }]
     }],
     shape: {
       type: "circle"
@@ -4056,6 +4198,7 @@ const gradients_options = {
 /* harmony default export */ const gradients = (gradients_options);
 ;// CONCATENATED MODULE: ./dist/browser/g/gravity.js
 const gravity_options = {
+  key: "gravity",
   name: "Gravity",
   particles: {
     destroy: {
@@ -4176,6 +4319,7 @@ const gravity_options = {
 /* harmony default export */ const gravity = (gravity_options);
 ;// CONCATENATED MODULE: ./dist/browser/g/growing.js
 const growing_options = {
+  key: "growing",
   name: "Growing",
   emitters: {
     direction: "top",
@@ -4258,6 +4402,7 @@ const growing_options = {
 });
 ;// CONCATENATED MODULE: ./dist/browser/h/hexagonPath.js
 const hexagonPath_options = {
+  key: "hexagonPath",
   name: "Hexagon Path",
   particles: {
     color: {
@@ -4333,6 +4478,7 @@ const hexagonPath_options = {
 /* harmony default export */ const hexagonPath = (hexagonPath_options);
 ;// CONCATENATED MODULE: ./dist/browser/h/hollowknight.js
 const hollowknight_options = {
+  key: "hollowknight",
   name: "Hollow Knight",
   interactivity: {
     events: {
@@ -4451,6 +4597,7 @@ const hollowknight_options = {
 /* harmony default export */ const hollowknight = (hollowknight_options);
 ;// CONCATENATED MODULE: ./dist/browser/h/hyperspace.js
 const hyperspace_options = {
+  key: "hyperspace",
   name: "Hyperspace",
   background: {
     color: "#000"
@@ -4526,71 +4673,75 @@ const hyperspace_options = {
   hyperspace: hyperspace
 });
 ;// CONCATENATED MODULE: ./dist/browser/i/imageMask.js
-const imageMask_options = {
-  name: "Image Mask",
-  smooth: true,
-  interactivity: {
-    events: {
-      onHover: {
-        enable: true,
-        mode: "bubble",
-        parallax: {
-          enable: false,
-          force: 2,
-          smooth: 10
+const imageMask_minFilterValue = 30,
+  imageMask_minFilterAlpha = 0,
+  imageMask_options = {
+    key: "imageMask",
+    name: "Image Mask",
+    smooth: true,
+    interactivity: {
+      events: {
+        onHover: {
+          enable: true,
+          mode: "bubble",
+          parallax: {
+            enable: false,
+            force: 2,
+            smooth: 10
+          }
+        }
+      },
+      modes: {
+        bubble: {
+          distance: 40,
+          duration: 2,
+          opacity: 8,
+          size: 15
         }
       }
     },
-    modes: {
-      bubble: {
-        distance: 40,
-        duration: 2,
-        opacity: 8,
-        size: 15
+    particles: {
+      move: {
+        direction: "none",
+        distance: 10,
+        enable: true,
+        speed: 1
+      },
+      number: {
+        value: 600
+      },
+      shape: {
+        type: ["circle", "square", "triangle"]
+      },
+      size: {
+        value: {
+          min: 3,
+          max: 5
+        }
       }
-    }
-  },
-  particles: {
-    move: {
-      direction: "none",
-      distance: 10,
-      enable: true,
-      speed: 1
-    },
-    number: {
-      value: 600
     },
-    shape: {
-      type: ["circle", "square", "triangle"]
-    },
-    size: {
-      value: {
-        min: 3,
-        max: 5
+    canvasMask: {
+      enable: true,
+      scale: 5,
+      pixels: {
+        filter: pixel => pixel.r < imageMask_minFilterValue && pixel.g < imageMask_minFilterValue && pixel.b < imageMask_minFilterValue ? false : pixel.a > imageMask_minFilterAlpha
+      },
+      image: {
+        src: "https://particles.js.org/images/amongus_cyan.png"
       }
-    }
-  },
-  canvasMask: {
-    enable: true,
-    scale: 5,
-    pixels: {
-      filter: "pixelFilter"
     },
-    image: {
-      src: "https://particles.js.org/images/amongus_cyan.png"
-    }
-  },
-  background: {
-    color: "#000000",
-    image: "",
-    position: "50% 50%",
-    repeat: "no-repeat",
-    size: "cover"
-  }
-};
+    background: {
+      color: "#000000",
+      image: "",
+      position: "50% 50%",
+      repeat: "no-repeat",
+      size: "cover"
+    }
+  };
 /* harmony default export */ const imageMask = (imageMask_options);
 ;// CONCATENATED MODULE: ./dist/browser/i/images.js
 const images_options = {
+  key: "images",
   name: "Images",
   interactivity: {
     events: {
@@ -4774,6 +4925,7 @@ const images_options = {
 /* harmony default export */ const i_images = (images_options);
 ;// CONCATENATED MODULE: ./dist/browser/i/imagesDirections.js
 const imagesDirections_options = {
+  key: "imagesDirections",
   name: "Images with Custom Directions",
   interactivity: {
     events: {
@@ -4880,6 +5032,7 @@ const imagesDirections_options = {
 /* harmony default export */ const imagesDirections = (imagesDirections_options);
 ;// CONCATENATED MODULE: ./dist/browser/i/infection.js
 const infection_options = {
+  key: "infection",
   name: "Infection",
   infection: {
     enable: true,
@@ -4965,6 +5118,7 @@ const infection_options = {
 /* harmony default export */ const k = ({});
 ;// CONCATENATED MODULE: ./dist/browser/l/life.js
 const life_options = {
+  key: "life",
   name: "Life",
   particles: {
     number: {
@@ -5045,6 +5199,7 @@ const life_options = {
 /* harmony default export */ const life = (life_options);
 ;// CONCATENATED MODULE: ./dist/browser/l/lightHover.js
 const lightHover_options = {
+  key: "lightHover",
   name: "Light Hover",
   particles: {
     number: {
@@ -5115,6 +5270,7 @@ const lightHover_options = {
 /* harmony default export */ const lightHover = (lightHover_options);
 ;// CONCATENATED MODULE: ./dist/browser/l/linkTriangles.js
 const linkTriangles_options = {
+  key: "linkTriangles",
   name: "Link Triangles",
   particles: {
     number: {
@@ -5202,6 +5358,7 @@ const linkTriangles_options = {
 /* harmony default export */ const linkTriangles = (linkTriangles_options);
 ;// CONCATENATED MODULE: ./dist/browser/l/localPolygonMask.js
 const localPolygonMask_options = {
+  key: "localPolygonMask",
   name: "Local Polygon Mask",
   interactivity: {
     events: {
@@ -5299,6 +5456,7 @@ const localPolygonMask_options = {
 });
 ;// CONCATENATED MODULE: ./dist/browser/m/manual.js
 const manual_options = {
+  key: "manual",
   name: "Manual Particles",
   manualParticles: [{
     position: {
@@ -5376,6 +5534,7 @@ const manual_options = {
 /* harmony default export */ const manual = (manual_options);
 ;// CONCATENATED MODULE: ./dist/browser/m/motionDisable.js
 const motionDisable_options = {
+  key: "motionDisable",
   name: "Motion Disable",
   motion: {
     disable: true
@@ -5447,6 +5606,7 @@ const motionDisable_options = {
 /* harmony default export */ const motionDisable = (motionDisable_options);
 ;// CONCATENATED MODULE: ./dist/browser/m/motionReduce.js
 const motionReduce_options = {
+  key: "motionReduce",
   name: "Motion Reduce",
   motion: {
     disable: false,
@@ -5536,6 +5696,7 @@ const motionReduce_options = {
 /* harmony default export */ const motionReduce = (motionReduce_options);
 ;// CONCATENATED MODULE: ./dist/browser/m/mouseAttract.js
 const mouseAttract_options = {
+  key: "mouseAttract",
   name: "Mouse Attract",
   particles: {
     number: {
@@ -5623,6 +5784,7 @@ const mouseAttract_options = {
 /* harmony default export */ const mouseAttract = (mouseAttract_options);
 ;// CONCATENATED MODULE: ./dist/browser/m/mouseBounce.js
 const mouseBounce_options = {
+  key: "mouseBounce",
   name: "Mouse Bounce",
   particles: {
     number: {
@@ -5705,6 +5867,7 @@ const mouseBounce_options = {
 /* harmony default export */ const mouseBounce = (mouseBounce_options);
 ;// CONCATENATED MODULE: ./dist/browser/m/mouseFollow.js
 const mouseFollow_options = {
+  key: "mouseFollow",
   name: "Mouse Follow",
   background: {
     color: "#000000"
@@ -5768,6 +5931,7 @@ const mouseFollow_options = {
 /* harmony default export */ const mouseFollow = (mouseFollow_options);
 ;// CONCATENATED MODULE: ./dist/browser/m/mouseTrail.js
 const mouseTrail_options = {
+  key: "mouseTrail",
   name: "Mouse Trail",
   particles: {
     number: {
@@ -5887,6 +6051,7 @@ const mouseTrail_options = {
 /* harmony default export */ const mouseTrail = (mouseTrail_options);
 ;// CONCATENATED MODULE: ./dist/browser/m/mouseTrailNoise.js
 const mouseTrailNoise_options = {
+  key: "mouseTrailNoise",
   name: "Mouse Trail Noise",
   particles: {
     number: {
@@ -6009,6 +6174,7 @@ const mouseTrailNoise_options = {
 /* harmony default export */ const mouseTrailNoise = (mouseTrailNoise_options);
 ;// CONCATENATED MODULE: ./dist/browser/m/moveAngle.js
 const moveAngle_options = {
+  key: "moveAngle",
   name: "Move Angle",
   particles: {
     number: {
@@ -6092,6 +6258,7 @@ const moveAngle_options = {
 /* harmony default export */ const moveAngle = (moveAngle_options);
 ;// CONCATENATED MODULE: ./dist/browser/m/moveDistance.js
 const moveDistance_options = {
+  key: "moveDistance",
   name: "Move Distance",
   particles: {
     number: {
@@ -6176,6 +6343,7 @@ const moveDistance_options = {
 /* harmony default export */ const moveDistance = (moveDistance_options);
 ;// CONCATENATED MODULE: ./dist/browser/m/moveInside.js
 const moveInside_options = {
+  key: "moveInside",
   name: "Move Inside",
   particles: {
     number: {
@@ -6218,6 +6386,7 @@ const moveInside_options = {
 /* harmony default export */ const moveInside = (moveInside_options);
 ;// CONCATENATED MODULE: ./dist/browser/m/moveOutside.js
 const moveOutside_options = {
+  key: "moveOutside",
   name: "Move Outside",
   particles: {
     number: {
@@ -6260,6 +6429,7 @@ const moveOutside_options = {
 /* harmony default export */ const moveOutside = (moveOutside_options);
 ;// CONCATENATED MODULE: ./dist/browser/m/multipleClickEmitters.js
 const multipleClickEmitters_options = {
+  key: "multipleClickEmitters",
   name: "Multiple Click Emitters",
   background: {
     color: "#f00"
@@ -6361,6 +6531,7 @@ const multipleClickEmitters_options = {
 /* harmony default export */ const multipleClickEmitters = (multipleClickEmitters_options);
 ;// CONCATENATED MODULE: ./dist/browser/m/multiplePolygonMasks.js
 const multiplePolygonMasks_options = {
+  key: "multiplePolygonMasks",
   name: "Multiple Polygon Masks",
   interactivity: {
     events: {
@@ -6520,6 +6691,7 @@ const multiplePolygonMasks_options = {
 });
 ;// CONCATENATED MODULE: ./dist/browser/n/nasa.js
 const nasa_options = {
+  key: "nasa",
   name: "NASA",
   particles: {
     number: {
@@ -6606,6 +6778,7 @@ const nasa_options = {
 /* harmony default export */ const nasa = (nasa_options);
 ;// CONCATENATED MODULE: ./dist/browser/n/noClear.js
 const noClear_options = {
+  key: "noClear",
   name: "No Clear",
   clear: false,
   interactivity: {
@@ -6654,11 +6827,13 @@ const noClear_options = {
 /* harmony default export */ const noClear = (noClear_options);
 ;// CONCATENATED MODULE: ./dist/browser/n/noConfig.js
 const noConfig_options = {
+  key: "noConfig",
   name: "No Config"
 };
 /* harmony default export */ const noConfig = (noConfig_options);
 ;// CONCATENATED MODULE: ./dist/browser/n/noisePlanes.js
 const noisePlanes_options = {
+  key: "noisePlanes",
   name: "Noise Planes",
   background: {
     color: "#000"
@@ -6750,6 +6925,7 @@ const noisePlanes_options = {
 /* harmony default export */ const noisePlanes = (noisePlanes_options);
 ;// CONCATENATED MODULE: ./dist/browser/n/nyancat.js
 const nyancat_options = {
+  key: "nyancat",
   name: "Nyan Cat",
   particles: {
     number: {
@@ -6809,6 +6985,7 @@ const nyancat_options = {
 /* harmony default export */ const nyancat = (nyancat_options);
 ;// CONCATENATED MODULE: ./dist/browser/n/nyancat2.js
 const nyancat2_options = {
+  key: "nyancat2",
   name: "Nyan Cat 2",
   particles: {
     number: {
@@ -6884,6 +7061,7 @@ const nyancat2_options = {
 });
 ;// CONCATENATED MODULE: ./dist/browser/o/orbit.js
 const orbit_options = {
+  key: "orbit",
   name: "Orbit",
   particles: {
     color: {
@@ -6942,6 +7120,7 @@ const orbit_options = {
 });
 ;// CONCATENATED MODULE: ./dist/browser/p/parallax.js
 const parallax_options = {
+  key: "parallax",
   name: "Parallax",
   particles: {
     number: {
@@ -7037,6 +7216,7 @@ const parallax_options = {
 /* harmony default export */ const parallax = (parallax_options);
 ;// CONCATENATED MODULE: ./dist/browser/p/pathPolygonMask.js
 const pathPolygonMask_options = {
+  key: "pathPolygonMask",
   name: "Path Polygon Mask",
   interactivity: {
     events: {
@@ -7132,6 +7312,7 @@ const pathPolygonMask_options = {
 /* harmony default export */ const pathPolygonMask = (pathPolygonMask_options);
 ;// CONCATENATED MODULE: ./dist/browser/p/pathSvg.js
 const pathSvg_options = {
+  key: "pathSvg",
   name: "Path SVG",
   particles: {
     color: {
@@ -7185,8 +7366,64 @@ const pathSvg_options = {
   }
 };
 /* harmony default export */ const pathSvg = (pathSvg_options);
+;// CONCATENATED MODULE: ./dist/browser/p/pathZigZag.js
+const pathZigZag_options = {
+  key: "pathZigZag",
+  name: "Path Zig Zag",
+  particles: {
+    color: {
+      value: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
+    },
+    move: {
+      enable: true,
+      outModes: "out",
+      speed: {
+        min: 1,
+        max: 3
+      },
+      path: {
+        enable: true,
+        options: {
+          waveLength: {
+            min: 3,
+            max: 7
+          },
+          waveHeight: {
+            min: 1,
+            max: 5
+          }
+        },
+        generator: "zigZagPathGenerator"
+      },
+      trail: {
+        enable: true,
+        length: 20,
+        fill: {
+          color: "#000000"
+        }
+      }
+    },
+    number: {
+      value: 80
+    },
+    opacity: {
+      value: 1
+    },
+    shape: {
+      type: "circle"
+    },
+    size: {
+      value: 3
+    }
+  },
+  background: {
+    color: "#000000"
+  }
+};
+/* harmony default export */ const pathZigZag = (pathZigZag_options);
 ;// CONCATENATED MODULE: ./dist/browser/p/planes.js
 const planes_options = {
+  key: "planes",
   name: "Planes",
   interactivity: {
     events: {
@@ -7244,6 +7481,7 @@ const planes_options = {
 /* harmony default export */ const planes = (planes_options);
 ;// CONCATENATED MODULE: ./dist/browser/p/plasma.js
 const plasma_options = {
+  key: "plasma",
   name: "Plasma",
   background: {
     color: {
@@ -7299,8 +7537,49 @@ const plasma_options = {
   detectRetina: true
 };
 /* harmony default export */ const plasma = (plasma_options);
+;// CONCATENATED MODULE: ./dist/browser/p/poisson.js
+const poisson_options = {
+  key: "poisson",
+  name: "Poisson",
+  particles: {
+    number: {
+      value: 100
+    },
+    color: {
+      value: "#ffffff"
+    },
+    links: {
+      enable: true,
+      distance: 200
+    },
+    shape: {
+      type: "circle"
+    },
+    opacity: {
+      value: 1
+    },
+    size: {
+      value: {
+        min: 4,
+        max: 6
+      }
+    },
+    move: {
+      enable: true,
+      speed: 2
+    }
+  },
+  background: {
+    color: "#000000"
+  },
+  poisson: {
+    enable: true
+  }
+};
+/* harmony default export */ const poisson = (poisson_options);
 ;// CONCATENATED MODULE: ./dist/browser/p/polygonMask.js
 const polygonMask_options = {
+  key: "polygonMask",
   name: "Polygon Mask",
   interactivity: {
     events: {
@@ -7429,6 +7708,7 @@ const polygonMask_options = {
 /* harmony default export */ const polygonMask = (polygonMask_options);
 ;// CONCATENATED MODULE: ./dist/browser/p/polygons.js
 const polygons_options = {
+  key: "polygons",
   name: "Polygon Shape",
   particles: {
     number: {
@@ -7562,6 +7842,7 @@ const polygons_options = {
 /* harmony default export */ const polygons = (polygons_options);
 ;// CONCATENATED MODULE: ./dist/browser/p/pop.js
 const pop_options = {
+  key: "pop",
   name: "Pop",
   particles: {
     number: {
@@ -7637,12 +7918,16 @@ const pop_options = {
 
 
 
+
+
 /* harmony default export */ const p = ({
   parallax: parallax,
   pathPolygonMask: pathPolygonMask,
   pathSvg: pathSvg,
+  pathZigZag: pathZigZag,
   planes: planes,
   plasma: plasma,
+  poisson: poisson,
   polygonMask: polygonMask,
   polygons: polygons,
   pop: pop
@@ -7651,6 +7936,7 @@ const pop_options = {
 /* harmony default export */ const q = ({});
 ;// CONCATENATED MODULE: ./dist/browser/r/random.js
 const random_options = {
+  key: "random",
   name: "Random Colors",
   interactivity: {
     events: {
@@ -7750,6 +8036,7 @@ const random_options = {
 /* harmony default export */ const random = (random_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/reactBubbles.js
 const reactBubbles_options = {
+  key: "reactBubbles",
   name: "React Bubbles",
   interactivity: {
     events: {
@@ -7856,6 +8143,7 @@ const reactBubbles_options = {
 /* harmony default export */ const reactBubbles = (reactBubbles_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/reactDefaults.js
 const reactDefaults_options = {
+  key: "reactDefaults",
   name: "React Defaults",
   particles: {
     number: {
@@ -7909,6 +8197,7 @@ const reactDefaults_options = {
 /* harmony default export */ const reactDefaults = (reactDefaults_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/reactMultipleImages.js
 const reactMultipleImages_options = {
+  key: "reactMultipleImages",
   name: "React Multiple Images",
   particles: {
     color: {
@@ -7998,6 +8287,7 @@ const reactMultipleImages_options = {
 /* harmony default export */ const reactMultipleImages = (reactMultipleImages_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/reactNightSky.js
 const reactNightSky_options = {
+  key: "reactNightSky",
   name: "React Night Sky",
   interactivity: {
     events: {
@@ -8086,6 +8376,7 @@ const reactNightSky_options = {
 /* harmony default export */ const reactNightSky = (reactNightSky_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/reactPolygonMask.js
 const reactPolygonMask_options = {
+  key: "reactPolygonMask",
   name: "React Polygon Mask",
   interactivity: {
     events: {
@@ -8184,6 +8475,7 @@ const reactPolygonMask_options = {
 /* harmony default export */ const reactPolygonMask = (reactPolygonMask_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/reactSimple.js
 const reactSimple_options = {
+  key: "reactSimple",
   name: "React Simple",
   interactivity: {
     events: {
@@ -8310,6 +8602,7 @@ const reactSimple_options = {
 /* harmony default export */ const reactSimple = (reactSimple_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/reactSnow.js
 const reactSnow_options = {
+  key: "reactSnow",
   name: "React Snow",
   interactivity: {
     events: {
@@ -8420,6 +8713,7 @@ const reactSnow_options = {
 /* harmony default export */ const reactSnow = (reactSnow_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/reduceDuplicates.js
 const reduceDuplicates_options = {
+  key: "reduceDuplicates",
   name: "Reduce Duplicates",
   particles: {
     color: {
@@ -8531,6 +8825,7 @@ const reduceDuplicates_options = {
 /* harmony default export */ const reduceDuplicates = (reduceDuplicates_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/repulse.js
 const repulse_options = {
+  key: "repulse",
   name: "Repulse",
   particles: {
     groups: {
@@ -8639,6 +8934,7 @@ const repulse_options = {
 /* harmony default export */ const repulse = (repulse_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/repulseBack.js
 const repulseBack_options = {
+  key: "repulseBack",
   name: "Repulse Back",
   particles: {
     number: {
@@ -8690,6 +8986,7 @@ const repulseBack_options = {
 /* harmony default export */ const repulseBack = (repulseBack_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/repulseCirc.js
 const repulseCirc_options = {
+  key: "repulseCirc",
   name: "Repulse Circ",
   particles: {
     number: {
@@ -8741,6 +9038,7 @@ const repulseCirc_options = {
 /* harmony default export */ const repulseCirc = (repulseCirc_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/repulseCubic.js
 const repulseCubic_options = {
+  key: "repulseCubic",
   name: "Repulse Cubic",
   particles: {
     number: {
@@ -8792,6 +9090,7 @@ const repulseCubic_options = {
 /* harmony default export */ const repulseCubic = (repulseCubic_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/repulseExpo.js
 const repulseExpo_options = {
+  key: "repulseExpo",
   name: "Repulse Expo",
   particles: {
     number: {
@@ -8843,6 +9142,7 @@ const repulseExpo_options = {
 /* harmony default export */ const repulseExpo = (repulseExpo_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/repulseQuart.js
 const repulseQuart_options = {
+  key: "repulseExpo",
   name: "Repulse Quart",
   particles: {
     number: {
@@ -8894,6 +9194,7 @@ const repulseQuart_options = {
 /* harmony default export */ const repulseQuart = (repulseQuart_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/repulseQuint.js
 const repulseQuint_options = {
+  key: "repulseQuint",
   name: "Repulse Quint",
   particles: {
     number: {
@@ -8945,6 +9246,7 @@ const repulseQuint_options = {
 /* harmony default export */ const repulseQuint = (repulseQuint_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/repulseSine.js
 const repulseSine_options = {
+  key: "repulseSine",
   name: "Repulse Sine",
   particles: {
     number: {
@@ -8996,6 +9298,7 @@ const repulseSine_options = {
 /* harmony default export */ const repulseSine = (repulseSine_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/responsive.js
 const responsive_options = {
+  key: "responsive",
   name: "Responsive",
   particles: {
     number: {
@@ -9098,6 +9401,7 @@ const responsive_options = {
 /* harmony default export */ const responsive = (responsive_options);
 ;// CONCATENATED MODULE: ./dist/browser/r/ring.js
 const ring_options = {
+  key: "ring",
   name: "Ring",
   particles: {
     number: {
@@ -9144,7 +9448,9 @@ const ring_options = {
   },
   emitters: {
     fill: false,
-    shape: "circle",
+    shape: {
+      type: "circle"
+    },
     position: {
       x: 50,
       y: 50
@@ -9209,6 +9515,7 @@ const ring_options = {
 });
 ;// CONCATENATED MODULE: ./dist/browser/s/seaAnemone.js
 const seaAnemone_options = {
+  key: "seaAnemone",
   name: "Sea Anemone",
   particles: {
     color: {
@@ -9292,6 +9599,7 @@ const seaAnemone_options = {
 /* harmony default export */ const seaAnemone = (seaAnemone_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/shadow.js
 const shadow_options = {
+  key: "shadow",
   name: "Shadow",
   smooth: true,
   particles: {
@@ -9389,6 +9697,7 @@ const shadow_options = {
 /* harmony default export */ const shadow = (shadow_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/shapeArrow.js
 const shapeArrow_options = {
+  key: "shapeArrow",
   name: "Shape Arrow",
   particles: {
     number: {
@@ -9447,6 +9756,7 @@ const shapeArrow_options = {
 /* harmony default export */ const shapeArrow = (shapeArrow_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/shapeCog.js
 const shapeCog_options = {
+  key: "shapeCog",
   name: "Shape Cog",
   particles: {
     color: {
@@ -9547,6 +9857,7 @@ const emitterRate = {
     quantity: 2
   },
   shapeEmoji_options = {
+    key: "shapeEmoji",
     name: "Shape Emoji",
     particles: {
       opacity: {
@@ -9713,7 +10024,7 @@ const emitterRate = {
           type: "emoji",
           options: {
             emoji: {
-              value: "👻"
+              value: "🍑"
             }
           }
         }
@@ -9723,6 +10034,7 @@ const emitterRate = {
 /* harmony default export */ const shapeEmoji = (shapeEmoji_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/shapeHeart.js
 const shapeHeart_options = {
+  key: "shapeHeart",
   name: "Shape Heart",
   particles: {
     number: {
@@ -9805,6 +10117,7 @@ const shapeHeart_options = {
 /* harmony default export */ const shapeHeart = (shapeHeart_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/shapeMultilineText.js
 const shapeMultilineText_options = {
+  key: "shapeMultilineText",
   name: "Shape Multiline Text",
   particles: {
     number: {
@@ -9853,6 +10166,7 @@ const shapeMultilineText_options = {
 /* harmony default export */ const shapeMultilineText = (shapeMultilineText_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/shapeOptions.js
 const shapeOptions_options = {
+  key: "shapeOptions",
   name: "Shape Options",
   particles: {
     color: {
@@ -9909,6 +10223,7 @@ const shapeOptions_options = {
 /* harmony default export */ const shapeOptions = (shapeOptions_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/shapePath.js
 const shapePath_options = {
+  key: "shapePath",
   name: "Shape Path",
   particles: {
     number: {
@@ -10037,6 +10352,7 @@ const shapePath_options = {
 /* harmony default export */ const shapePath = (shapePath_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/shapeRoundedPolygon.js
 const shapeRoundedPolygon_options = {
+  key: "shapeRoundedPolygon",
   name: "Shape Rounded Polygon",
   particles: {
     number: {
@@ -10136,6 +10452,7 @@ const shapeRoundedPolygon_options = {
 /* harmony default export */ const shapeRoundedPolygon = (shapeRoundedPolygon_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/shapeRoundedRect.js
 const shapeRoundedRect_options = {
+  key: "shapeRoundedRect",
   name: "Shape Rounded Rect",
   particles: {
     number: {
@@ -10231,6 +10548,7 @@ const shapeRoundedRect_options = {
 /* harmony default export */ const shapeRoundedRect = (shapeRoundedRect_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/shapeSpiral.js
 const shapeSpiral_options = {
+  key: "shapeSpiral",
   name: "Shape Spiral",
   particles: {
     number: {
@@ -10331,6 +10649,7 @@ const shapeSpiral_options = {
 /* harmony default export */ const shapeSpiral = (shapeSpiral_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/slow.js
 const slow_options = {
+  key: "slow",
   name: "Slow",
   particles: {
     number: {
@@ -10417,6 +10736,7 @@ const slow_options = {
 /* harmony default export */ const slow = (slow_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/snow.js
 const snow_options = {
+  key: "snow",
   name: "Snow",
   particles: {
     number: {
@@ -10465,6 +10785,7 @@ const snow_options = {
 /* harmony default export */ const snow = (snow_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/soundsAudio.js
 const soundsAudio_options = {
+  key: "soundsAudio",
   name: "Sounds Audio",
   particles: {
     number: {
@@ -10526,6 +10847,7 @@ const soundsAudio_options = {
 /* harmony default export */ const soundsAudio = (soundsAudio_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/soundsLoop.js
 const soundsLoop_options = {
+  key: "soundsLoop",
   name: "Sounds Loop",
   particles: {
     number: {
@@ -10590,6 +10912,7 @@ const soundsLoop_options = {
 /* harmony default export */ const soundsLoop = (soundsLoop_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/soundsMelodies.js
 const soundsMelodies_options = {
+  key: "soundsMelodies",
   name: "Sounds Melodies",
   particles: {
     number: {
@@ -10667,6 +10990,7 @@ const soundsMelodies_options = {
 /* harmony default export */ const soundsMelodies = (soundsMelodies_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/soundsMelodyLoop.js
 const soundsMelodyLoop_options = {
+  key: "soundsMelodyLoop",
   name: "Sounds Melody Loop",
   particles: {
     number: {
@@ -10933,6 +11257,7 @@ const soundsMelodyLoop_options = {
 /* harmony default export */ const soundsMelodyLoop = (soundsMelodyLoop_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/soundsNotes.js
 const soundsNotes_options = {
+  key: "soundsNotes",
   name: "Sounds Notes",
   particles: {
     number: {
@@ -11006,6 +11331,7 @@ const soundsNotes_options = {
 /* harmony default export */ const soundsNotes = (soundsNotes_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/speedDecay.js
 const speedDecay_options = {
+  key: "speedDecay",
   name: "Speed Decay",
   particles: {
     number: {
@@ -11150,6 +11476,7 @@ const speedDecay_options = {
 /* harmony default export */ const speedDecay = (speedDecay_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/spin.js
 const spin_options = {
+  key: "spin",
   name: "Spin",
   particles: {
     number: {
@@ -11204,6 +11531,7 @@ const spin_options = {
 /* harmony default export */ const spin = (spin_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/star.js
 const star_options = {
+  key: "star",
   name: "Star",
   particles: {
     number: {
@@ -11297,6 +11625,7 @@ const star_options = {
 /* harmony default export */ const star = (star_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/strokeAnimation.js
 const strokeAnimation_options = {
+  key: "strokeAnimation",
   name: "Stroke Animation",
   particles: {
     number: {
@@ -11390,6 +11719,7 @@ const strokeAnimation_options = {
 /* harmony default export */ const strokeAnimation = (strokeAnimation_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/style.js
 const style_options = {
+  key: "style",
   name: "Style",
   particles: {
     number: {
@@ -11474,6 +11804,7 @@ const style_options = {
 /* harmony default export */ const style = (style_options);
 ;// CONCATENATED MODULE: ./dist/browser/s/svgReplace.js
 const svgReplace_options = {
+  key: "svgReplace",
   name: "SVG Replace",
   interactivity: {
     events: {
@@ -11647,6 +11978,7 @@ const svgReplace_options = {
 });
 ;// CONCATENATED MODULE: ./dist/browser/t/test.js
 const test_options = {
+  key: "test",
   name: "Test",
   fullScreen: {
     enable: false
@@ -11681,166 +12013,171 @@ const test_options = {
 };
 /* harmony default export */ const test = (test_options);
 ;// CONCATENATED MODULE: ./dist/browser/t/textMask.js
-const textMask_options = {
-  name: "Text Mask",
-  smooth: true,
-  interactivity: {
-    events: {
-      onHover: {
-        enable: true,
-        mode: "bubble",
-        parallax: {
-          enable: false,
-          force: 2,
-          smooth: 10
+const textMask_minAlphaFilter = 0,
+  textMask_options = {
+    key: "textMask",
+    name: "Text Mask",
+    smooth: true,
+    interactivity: {
+      events: {
+        onHover: {
+          enable: true,
+          mode: "bubble",
+          parallax: {
+            enable: false,
+            force: 2,
+            smooth: 10
+          }
+        }
+      },
+      modes: {
+        bubble: {
+          distance: 40,
+          duration: 2,
+          opacity: 8,
+          size: 15
         }
       }
     },
-    modes: {
-      bubble: {
-        distance: 40,
-        duration: 2,
-        opacity: 8,
-        size: 15
+    particles: {
+      move: {
+        direction: "none",
+        distance: 2,
+        enable: true,
+        speed: 1
+      },
+      number: {
+        value: 600
+      },
+      color: {
+        value: "random"
+      },
+      shape: {
+        type: ["circle", "square", "triangle"]
+      },
+      size: {
+        value: {
+          min: 1,
+          max: 3
+        }
       }
-    }
-  },
-  particles: {
-    move: {
-      direction: "none",
-      distance: 2,
-      enable: true,
-      speed: 1
     },
-    number: {
-      value: 600
-    },
-    color: {
-      value: "random"
-    },
-    shape: {
-      type: ["circle", "square", "triangle"]
-    },
-    size: {
-      value: {
-        min: 1,
-        max: 3
+    canvasMask: {
+      enable: true,
+      override: {
+        color: false
+      },
+      scale: 1,
+      pixels: {
+        filter: pixel => pixel.a > textMask_minAlphaFilter
+      },
+      position: {
+        x: 70,
+        y: 30
+      },
+      text: {
+        color: "#ff0000",
+        font: {
+          size: 500
+        },
+        text: "Hello"
       }
-    }
-  },
-  canvasMask: {
-    enable: true,
-    override: {
-      color: false
-    },
-    scale: 1,
-    pixels: {
-      filter: "pixelTextFilter"
-    },
-    position: {
-      x: 70,
-      y: 30
     },
-    text: {
-      color: "#ff0000",
-      font: {
-        size: 500
-      },
-      text: "Hello"
+    background: {
+      color: "#000000",
+      image: "",
+      position: "50% 50%",
+      repeat: "no-repeat",
+      size: "cover"
     }
-  },
-  background: {
-    color: "#000000",
-    image: "",
-    position: "50% 50%",
-    repeat: "no-repeat",
-    size: "cover"
-  }
-};
+  };
 /* harmony default export */ const textMask = (textMask_options);
 ;// CONCATENATED MODULE: ./dist/browser/t/textMaskMultiline.js
-const textMaskMultiline_options = {
-  name: "Text Mask Multiline",
-  smooth: true,
-  interactivity: {
-    events: {
-      onHover: {
-        enable: true,
-        mode: "bubble",
-        parallax: {
-          enable: false,
-          force: 2,
-          smooth: 10
+const textMaskMultiline_minAlphaFilter = 0,
+  textMaskMultiline_options = {
+    key: "textMaskMultiline",
+    name: "Text Mask Multiline",
+    smooth: true,
+    interactivity: {
+      events: {
+        onHover: {
+          enable: true,
+          mode: "bubble",
+          parallax: {
+            enable: false,
+            force: 2,
+            smooth: 10
+          }
+        }
+      },
+      modes: {
+        bubble: {
+          distance: 40,
+          duration: 2,
+          opacity: 8,
+          size: 15
         }
       }
     },
-    modes: {
-      bubble: {
-        distance: 40,
-        duration: 2,
-        opacity: 8,
-        size: 15
-      }
-    }
-  },
-  particles: {
-    move: {
-      direction: "none",
-      distance: 2,
-      enable: true,
-      speed: 1
-    },
-    number: {
-      value: 600
-    },
-    color: {
-      value: "random"
-    },
-    shape: {
-      type: ["circle", "square", "triangle"]
-    },
-    size: {
-      value: {
-        min: 1,
-        max: 3
+    particles: {
+      move: {
+        direction: "none",
+        distance: 2,
+        enable: true,
+        speed: 1
+      },
+      number: {
+        value: 600
+      },
+      color: {
+        value: "random"
+      },
+      shape: {
+        type: ["circle", "square", "triangle"]
+      },
+      size: {
+        value: {
+          min: 1,
+          max: 3
+        }
       }
-    }
-  },
-  canvasMask: {
-    enable: true,
-    override: {
-      color: false
-    },
-    scale: 1,
-    pixels: {
-      filter: "pixelTextFilter"
-    },
-    position: {
-      x: 50,
-      y: 50
     },
-    text: {
-      color: "#ff0000",
-      font: {
-        size: 300
+    canvasMask: {
+      enable: true,
+      override: {
+        color: false
       },
-      text: "Hello\nWorld\nHello\nWorld",
-      lines: {
-        spacing: 50
+      scale: 1,
+      pixels: {
+        filter: pixel => pixel.a > textMaskMultiline_minAlphaFilter
+      },
+      position: {
+        x: 50,
+        y: 50
+      },
+      text: {
+        color: "#ff0000",
+        font: {
+          size: 300
+        },
+        text: "Hello\nWorld\nHello\nWorld",
+        lines: {
+          spacing: 50
+        }
       }
+    },
+    background: {
+      color: "#000000",
+      image: "",
+      position: "50% 50%",
+      repeat: "no-repeat",
+      size: "cover"
     }
-  },
-  background: {
-    color: "#000000",
-    image: "",
-    position: "50% 50%",
-    repeat: "no-repeat",
-    size: "cover"
-  }
-};
+  };
 /* harmony default export */ const textMaskMultiline = (textMaskMultiline_options);
 ;// CONCATENATED MODULE: ./dist/browser/t/themes.js
 const themes_options = {
+  key: "themes",
   name: "Themes",
   themes: [{
     name: "light",
@@ -12002,6 +12339,7 @@ const themes_options = {
 /* harmony default export */ const themes = (themes_options);
 ;// CONCATENATED MODULE: ./dist/browser/t/tilt.js
 const tilt_options = {
+  key: "tilt",
   name: "Tilt",
   background: {
     color: "#000000"
@@ -12103,6 +12441,7 @@ const tilt_options = {
 /* harmony default export */ const tilt = (tilt_options);
 ;// CONCATENATED MODULE: ./dist/browser/t/trail.js
 const trail_options = {
+  key: "trails",
   name: "Trails",
   background: {
     color: "#000"
@@ -12205,6 +12544,7 @@ const trail_options = {
 /* harmony default export */ const trail = (trail_options);
 ;// CONCATENATED MODULE: ./dist/browser/t/trailImage.js
 const trailImage_options = {
+  key: "trailsImage",
   name: "Trails Image",
   background: {
     color: "#ffffff",
@@ -12323,6 +12663,7 @@ const trailImage_options = {
 /* harmony default export */ const trailImage = (trailImage_options);
 ;// CONCATENATED MODULE: ./dist/browser/t/triangles.js
 const triangles_options = {
+  key: "triangles",
   name: "Triangles",
   particles: {
     number: {
@@ -12369,6 +12710,7 @@ const triangles_options = {
 /* harmony default export */ const triangles = (triangles_options);
 ;// CONCATENATED MODULE: ./dist/browser/t/twinkle.js
 const twinkle_options = {
+  key: "twinkle",
   name: "Twinkle",
   particles: {
     number: {
@@ -12496,6 +12838,7 @@ const twinkle_options = {
 /* harmony default export */ const u = ({});
 ;// CONCATENATED MODULE: ./dist/browser/v/vibrate.js
 const vibrate_options = {
+  key: "vibrate",
   name: "Vibrate",
   particles: {
     number: {
@@ -12571,6 +12914,7 @@ const vibrate_options = {
 /* harmony default export */ const vibrate = (vibrate_options);
 ;// CONCATENATED MODULE: ./dist/browser/v/virus.js
 const virus_options = {
+  key: "virus",
   name: "Virus",
   interactivity: {
     events: {
@@ -12649,6 +12993,7 @@ const virus_options = {
 });
 ;// CONCATENATED MODULE: ./dist/browser/w/warp.js
 const warp_options = {
+  key: "warp",
   name: "Warp",
   fullScreen: false,
   fpsLimit: 120,
@@ -12731,6 +13076,7 @@ const warp_options = {
 /* harmony default export */ const warp = (warp_options);
 ;// CONCATENATED MODULE: ./dist/browser/w/wobble.js
 const wobble_options = {
+  key: "wobble",
   name: "Wobble",
   background: {
     color: "#000000"
@@ -12881,6 +13227,7 @@ const wobble_options = {
 /* harmony default export */ const y = ({});
 ;// CONCATENATED MODULE: ./dist/browser/z/zIndex.js
 const zIndex_options = {
+  key: "zIndex",
   name: "Z Index",
   particles: {
     groups: {