tsparticles 1.34.1 → 1.35.0

package/tsparticles.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
- * v1.34.1
+ * v1.35.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -18,10 +18,66 @@
 })(this, function() {
 return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
-/******/ 	// The require scope
-/******/ 	var __webpack_require__ = {};
+/******/ 	var __webpack_modules__ = ({});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = __webpack_modules__;
 /******/ 	
 /************************************************************************/
+/******/ 	/* webpack/runtime/create fake namespace object */
+/******/ 	(() => {
+/******/ 		var getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__);
+/******/ 		var leafPrototypes;
+/******/ 		// create a fake namespace object
+/******/ 		// mode & 1: value is a module id, require it
+/******/ 		// mode & 2: merge all properties of value into the ns
+/******/ 		// mode & 4: return value when already ns object
+/******/ 		// mode & 16: return value when it's Promise-like
+/******/ 		// mode & 8|1: behave like require
+/******/ 		__webpack_require__.t = function(value, mode) {
+/******/ 			if(mode & 1) value = this(value);
+/******/ 			if(mode & 8) return value;
+/******/ 			if(typeof value === 'object' && value) {
+/******/ 				if((mode & 4) && value.__esModule) return value;
+/******/ 				if((mode & 16) && typeof value.then === 'function') return value;
+/******/ 			}
+/******/ 			var ns = Object.create(null);
+/******/ 			__webpack_require__.r(ns);
+/******/ 			var def = {};
+/******/ 			leafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];
+/******/ 			for(var current = mode & 2 && value; typeof current == 'object' && !~leafPrototypes.indexOf(current); current = getProto(current)) {
+/******/ 				Object.getOwnPropertyNames(current).forEach((key) => (def[key] = () => (value[key])));
+/******/ 			}
+/******/ 			def['default'] = () => (value);
+/******/ 			__webpack_require__.d(ns, def);
+/******/ 			return ns;
+/******/ 		};
+/******/ 	})();
+/******/ 	
 /******/ 	/* webpack/runtime/define property getters */
 /******/ 	(() => {
 /******/ 		// define getter functions for harmony exports
@@ -34,11 +90,91 @@ return /******/ (() => { // webpackBootstrap
 /******/ 		};
 /******/ 	})();
 /******/ 	
+/******/ 	/* webpack/runtime/ensure chunk */
+/******/ 	(() => {
+/******/ 		__webpack_require__.f = {};
+/******/ 		// This file contains only the entry chunk.
+/******/ 		// The chunk loading function for additional chunks
+/******/ 		__webpack_require__.e = (chunkId) => {
+/******/ 			return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
+/******/ 				__webpack_require__.f[key](chunkId, promises);
+/******/ 				return promises;
+/******/ 			}, []));
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/get javascript chunk filename */
+/******/ 	(() => {
+/******/ 		// This function allow to reference async chunks
+/******/ 		__webpack_require__.u = (chunkId) => {
+/******/ 			// return url for filenames based on template
+/******/ 			return "" + chunkId + ".js";
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/global */
+/******/ 	(() => {
+/******/ 		__webpack_require__.g = (function() {
+/******/ 			if (typeof globalThis === 'object') return globalThis;
+/******/ 			try {
+/******/ 				return this || new Function('return this')();
+/******/ 			} catch (e) {
+/******/ 				if (typeof window === 'object') return window;
+/******/ 			}
+/******/ 		})();
+/******/ 	})();
+/******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
 /******/ 	(() => {
 /******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 /******/ 	})();
 /******/ 	
+/******/ 	/* webpack/runtime/load script */
+/******/ 	(() => {
+/******/ 		var inProgress = {};
+/******/ 		var dataWebpackPrefix = "tsparticles:";
+/******/ 		// loadScript function to load a script via script tag
+/******/ 		__webpack_require__.l = (url, done, key, chunkId) => {
+/******/ 			if(inProgress[url]) { inProgress[url].push(done); return; }
+/******/ 			var script, needAttach;
+/******/ 			if(key !== undefined) {
+/******/ 				var scripts = document.getElementsByTagName("script");
+/******/ 				for(var i = 0; i < scripts.length; i++) {
+/******/ 					var s = scripts[i];
+/******/ 					if(s.getAttribute("src") == url || s.getAttribute("data-webpack") == dataWebpackPrefix + key) { script = s; break; }
+/******/ 				}
+/******/ 			}
+/******/ 			if(!script) {
+/******/ 				needAttach = true;
+/******/ 				script = document.createElement('script');
+/******/ 		
+/******/ 				script.charset = 'utf-8';
+/******/ 				script.timeout = 120;
+/******/ 				if (__webpack_require__.nc) {
+/******/ 					script.setAttribute("nonce", __webpack_require__.nc);
+/******/ 				}
+/******/ 				script.setAttribute("data-webpack", dataWebpackPrefix + key);
+/******/ 				script.src = url;
+/******/ 			}
+/******/ 			inProgress[url] = [done];
+/******/ 			var onScriptComplete = (prev, event) => {
+/******/ 				// avoid mem leaks in IE.
+/******/ 				script.onerror = script.onload = null;
+/******/ 				clearTimeout(timeout);
+/******/ 				var doneFns = inProgress[url];
+/******/ 				delete inProgress[url];
+/******/ 				script.parentNode && script.parentNode.removeChild(script);
+/******/ 				doneFns && doneFns.forEach((fn) => (fn(event)));
+/******/ 				if(prev) return prev(event);
+/******/ 			}
+/******/ 			;
+/******/ 			var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
+/******/ 			script.onerror = onScriptComplete.bind(null, script.onerror);
+/******/ 			script.onload = onScriptComplete.bind(null, script.onload);
+/******/ 			needAttach && document.head.appendChild(script);
+/******/ 		};
+/******/ 	})();
+/******/ 	
 /******/ 	/* webpack/runtime/make namespace object */
 /******/ 	(() => {
 /******/ 		// define __esModule on exports
@@ -50,6 +186,117 @@ return /******/ (() => { // webpackBootstrap
 /******/ 		};
 /******/ 	})();
 /******/ 	
+/******/ 	/* webpack/runtime/publicPath */
+/******/ 	(() => {
+/******/ 		var scriptUrl;
+/******/ 		if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
+/******/ 		var document = __webpack_require__.g.document;
+/******/ 		if (!scriptUrl && document) {
+/******/ 			if (document.currentScript)
+/******/ 				scriptUrl = document.currentScript.src
+/******/ 			if (!scriptUrl) {
+/******/ 				var scripts = document.getElementsByTagName("script");
+/******/ 				if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
+/******/ 			}
+/******/ 		}
+/******/ 		// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
+/******/ 		// or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
+/******/ 		if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
+/******/ 		scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
+/******/ 		__webpack_require__.p = scriptUrl;
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/jsonp chunk loading */
+/******/ 	(() => {
+/******/ 		// no baseURI
+/******/ 		
+/******/ 		// object to store loaded and loading chunks
+/******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
+/******/ 		var installedChunks = {
+/******/ 			649: 0,
+/******/ 			155: 0
+/******/ 		};
+/******/ 		
+/******/ 		__webpack_require__.f.j = (chunkId, promises) => {
+/******/ 				// JSONP chunk loading for javascript
+/******/ 				var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
+/******/ 				if(installedChunkData !== 0) { // 0 means "already installed".
+/******/ 		
+/******/ 					// a Promise means "currently loading".
+/******/ 					if(installedChunkData) {
+/******/ 						promises.push(installedChunkData[2]);
+/******/ 					} else {
+/******/ 						if(true) { // all chunks have JS
+/******/ 							// setup Promise in chunk cache
+/******/ 							var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
+/******/ 							promises.push(installedChunkData[2] = promise);
+/******/ 		
+/******/ 							// start chunk loading
+/******/ 							var url = __webpack_require__.p + __webpack_require__.u(chunkId);
+/******/ 							// create error before stack unwound to get useful stacktrace later
+/******/ 							var error = new Error();
+/******/ 							var loadingEnded = (event) => {
+/******/ 								if(__webpack_require__.o(installedChunks, chunkId)) {
+/******/ 									installedChunkData = installedChunks[chunkId];
+/******/ 									if(installedChunkData !== 0) installedChunks[chunkId] = undefined;
+/******/ 									if(installedChunkData) {
+/******/ 										var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ 										var realSrc = event && event.target && event.target.src;
+/******/ 										error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
+/******/ 										error.name = 'ChunkLoadError';
+/******/ 										error.type = errorType;
+/******/ 										error.request = realSrc;
+/******/ 										installedChunkData[1](error);
+/******/ 									}
+/******/ 								}
+/******/ 							};
+/******/ 							__webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
+/******/ 						} else installedChunks[chunkId] = 0;
+/******/ 					}
+/******/ 				}
+/******/ 		};
+/******/ 		
+/******/ 		// no prefetching
+/******/ 		
+/******/ 		// no preloaded
+/******/ 		
+/******/ 		// no HMR
+/******/ 		
+/******/ 		// no HMR manifest
+/******/ 		
+/******/ 		// no on chunks loaded
+/******/ 		
+/******/ 		// install a JSONP callback for chunk loading
+/******/ 		var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
+/******/ 			var [chunkIds, moreModules, runtime] = data;
+/******/ 			// add "moreModules" to the modules object,
+/******/ 			// then flag all "chunkIds" as loaded and fire callback
+/******/ 			var moduleId, chunkId, i = 0;
+/******/ 			if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
+/******/ 				for(moduleId in moreModules) {
+/******/ 					if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ 						__webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ 					}
+/******/ 				}
+/******/ 				if(runtime) var result = runtime(__webpack_require__);
+/******/ 			}
+/******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
+/******/ 			for(;i < chunkIds.length; i++) {
+/******/ 				chunkId = chunkIds[i];
+/******/ 				if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ 					installedChunks[chunkId][0]();
+/******/ 				}
+/******/ 				installedChunks[chunkIds[i]] = 0;
+/******/ 			}
+/******/ 		
+/******/ 		}
+/******/ 		
+/******/ 		var chunkLoadingGlobal = this["webpackChunktsparticles"] = this["webpackChunktsparticles"] || [];
+/******/ 		chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
+/******/ 		chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
+/******/ 	})();
+/******/ 	
 /************************************************************************/
 var __webpack_exports__ = {};
 // ESM COMPAT FLAG
@@ -60,12 +307,10 @@ __webpack_require__.d(__webpack_exports__, {
   "AbsorberClickMode": () => (/* reexport */ AbsorberClickMode),
   "AlterType": () => (/* reexport */ AlterType),
   "AnimationStatus": () => (/* reexport */ AnimationStatus),
-  "CanvasUtils": () => (/* reexport */ CanvasUtils_namespaceObject),
   "Circle": () => (/* reexport */ Circle),
   "CircleWarp": () => (/* reexport */ CircleWarp),
   "ClickMode": () => (/* reexport */ ClickMode),
   "CollisionMode": () => (/* reexport */ CollisionMode),
-  "ColorUtils": () => (/* reexport */ ColorUtils_namespaceObject),
   "Constants": () => (/* reexport */ Constants),
   "Container": () => (/* reexport */ Container),
   "DestroyMode": () => (/* reexport */ DestroyMode),
@@ -84,7 +329,6 @@ __webpack_require__.d(__webpack_exports__, {
   "Main": () => (/* reexport */ Main),
   "MoveDirection": () => (/* reexport */ MoveDirection),
   "MoveType": () => (/* reexport */ MoveType),
-  "NumberUtils": () => (/* reexport */ NumberUtils_namespaceObject),
   "OrbitType": () => (/* reexport */ OrbitType),
   "OutMode": () => (/* reexport */ OutMode),
   "OutModeDirection": () => (/* reexport */ OutModeDirection),
@@ -92,6 +336,7 @@ __webpack_require__.d(__webpack_exports__, {
   "ParticlesInteractorBase": () => (/* reexport */ ParticlesInteractorBase),
   "Point": () => (/* reexport */ Point),
   "Rectangle": () => (/* reexport */ Rectangle),
+  "RollMode": () => (/* reexport */ RollMode),
   "RotateDirection": () => (/* reexport */ RotateDirection),
   "ShapeType": () => (/* reexport */ ShapeType),
   "SizeMode": () => (/* reexport */ SizeMode),
@@ -99,107 +344,83 @@ __webpack_require__.d(__webpack_exports__, {
   "ThemeMode": () => (/* reexport */ ThemeMode),
   "TiltDirection": () => (/* reexport */ TiltDirection),
   "Type": () => (/* reexport */ Type),
-  "Utils": () => (/* reexport */ Utils_namespaceObject),
   "Vector": () => (/* reexport */ Vector),
+  "alterHsl": () => (/* reexport */ alterHsl),
+  "animate": () => (/* reexport */ animate),
+  "areBoundsInside": () => (/* reexport */ areBoundsInside),
+  "arrayRandomIndex": () => (/* reexport */ arrayRandomIndex),
+  "calcEasing": () => (/* reexport */ calcEasing),
+  "calculateBounds": () => (/* reexport */ calculateBounds),
+  "cancelAnimation": () => (/* reexport */ cancelAnimation),
+  "circleBounce": () => (/* reexport */ circleBounce),
+  "circleBounceDataFromParticle": () => (/* reexport */ circleBounceDataFromParticle),
+  "clamp": () => (/* reexport */ clamp),
+  "clear": () => (/* reexport */ clear),
+  "collisionVelocity": () => (/* reexport */ collisionVelocity),
+  "colorMix": () => (/* reexport */ colorMix),
+  "colorToHsl": () => (/* reexport */ colorToHsl),
+  "colorToRgb": () => (/* reexport */ colorToRgb),
+  "deepExtend": () => (/* reexport */ deepExtend),
+  "divMode": () => (/* reexport */ divMode),
+  "divModeExecute": () => (/* reexport */ divModeExecute),
+  "drawConnectLine": () => (/* reexport */ drawConnectLine),
+  "drawEllipse": () => (/* reexport */ drawEllipse),
+  "drawGrabLine": () => (/* reexport */ drawGrabLine),
+  "drawLinkLine": () => (/* reexport */ drawLinkLine),
+  "drawLinkTriangle": () => (/* reexport */ drawLinkTriangle),
+  "drawParticle": () => (/* reexport */ drawParticle),
+  "drawParticlePlugin": () => (/* reexport */ drawParticlePlugin),
+  "drawPlugin": () => (/* reexport */ drawPlugin),
+  "drawShape": () => (/* reexport */ drawShape),
+  "drawShapeAfterEffect": () => (/* reexport */ drawShapeAfterEffect),
+  "getDistance": () => (/* reexport */ getDistance),
+  "getDistances": () => (/* reexport */ getDistances),
+  "getHslAnimationFromHsl": () => (/* reexport */ getHslAnimationFromHsl),
+  "getHslFromAnimation": () => (/* reexport */ getHslFromAnimation),
+  "getLinkColor": () => (/* reexport */ getLinkColor),
+  "getLinkRandomColor": () => (/* reexport */ getLinkRandomColor),
+  "getParticleBaseVelocity": () => (/* reexport */ getParticleBaseVelocity),
+  "getParticleDirectionAngle": () => (/* reexport */ getParticleDirectionAngle),
+  "getRandomRgbColor": () => (/* reexport */ getRandomRgbColor),
+  "getRangeMax": () => (/* reexport */ getRangeMax),
+  "getRangeMin": () => (/* reexport */ getRangeMin),
+  "getRangeValue": () => (/* reexport */ getRangeValue),
+  "getStyleFromHsl": () => (/* reexport */ getStyleFromHsl),
+  "getStyleFromHsv": () => (/* reexport */ getStyleFromHsv),
+  "getStyleFromRgb": () => (/* reexport */ getStyleFromRgb),
+  "getValue": () => (/* reexport */ getValue),
+  "gradient": () => (/* reexport */ gradient),
+  "hslToHsv": () => (/* reexport */ hslToHsv),
+  "hslToRgb": () => (/* reexport */ hslToRgb),
+  "hslaToHsva": () => (/* reexport */ hslaToHsva),
+  "hslaToRgba": () => (/* reexport */ hslaToRgba),
+  "hsvToHsl": () => (/* reexport */ hsvToHsl),
+  "hsvToRgb": () => (/* reexport */ hsvToRgb),
+  "hsvaToHsla": () => (/* reexport */ hsvaToHsla),
+  "hsvaToRgba": () => (/* reexport */ hsvaToRgba),
+  "isDivModeEnabled": () => (/* reexport */ isDivModeEnabled),
+  "isInArray": () => (/* reexport */ isInArray),
+  "isPointInside": () => (/* reexport */ isPointInside),
+  "isSsr": () => (/* reexport */ isSsr),
+  "itemFromArray": () => (/* reexport */ itemFromArray),
+  "loadFont": () => (/* reexport */ loadFont),
   "loadFull": () => (/* reexport */ loadFull),
+  "mix": () => (/* reexport */ mix),
   "pJSDom": () => (/* binding */ pJSDom),
+  "paintBase": () => (/* reexport */ paintBase),
   "particlesJS": () => (/* binding */ particlesJS),
+  "randomInRange": () => (/* reexport */ randomInRange),
+  "rectBounce": () => (/* reexport */ rectBounce),
+  "rgbToHsl": () => (/* reexport */ rgbToHsl),
+  "rgbToHsv": () => (/* reexport */ rgbToHsv),
+  "rgbaToHsva": () => (/* reexport */ rgbaToHsva),
+  "setRangeValue": () => (/* reexport */ setRangeValue),
+  "singleDivModeExecute": () => (/* reexport */ singleDivModeExecute),
+  "stringToAlpha": () => (/* reexport */ stringToAlpha),
+  "stringToRgb": () => (/* reexport */ stringToRgb),
   "tsParticles": () => (/* binding */ tsParticles)
 });
 
-// NAMESPACE OBJECT: ./dist/browser/Utils/NumberUtils.js
-var NumberUtils_namespaceObject = {};
-__webpack_require__.r(NumberUtils_namespaceObject);
-__webpack_require__.d(NumberUtils_namespaceObject, {
-  "calcEasing": () => (calcEasing),
-  "clamp": () => (clamp),
-  "collisionVelocity": () => (collisionVelocity),
-  "getDistance": () => (getDistance),
-  "getDistances": () => (getDistances),
-  "getParticleBaseVelocity": () => (getParticleBaseVelocity),
-  "getParticleDirectionAngle": () => (getParticleDirectionAngle),
-  "getRangeMax": () => (getRangeMax),
-  "getRangeMin": () => (getRangeMin),
-  "getRangeValue": () => (getRangeValue),
-  "getValue": () => (getValue),
-  "mix": () => (mix),
-  "randomInRange": () => (randomInRange),
-  "setRangeValue": () => (setRangeValue)
-});
-
-// NAMESPACE OBJECT: ./dist/browser/Utils/Utils.js
-var Utils_namespaceObject = {};
-__webpack_require__.r(Utils_namespaceObject);
-__webpack_require__.d(Utils_namespaceObject, {
-  "animate": () => (animate),
-  "areBoundsInside": () => (areBoundsInside),
-  "arrayRandomIndex": () => (arrayRandomIndex),
-  "calculateBounds": () => (calculateBounds),
-  "cancelAnimation": () => (cancelAnimation),
-  "circleBounce": () => (circleBounce),
-  "circleBounceDataFromParticle": () => (circleBounceDataFromParticle),
-  "deepExtend": () => (deepExtend),
-  "divMode": () => (divMode),
-  "divModeExecute": () => (divModeExecute),
-  "isDivModeEnabled": () => (isDivModeEnabled),
-  "isInArray": () => (isInArray),
-  "isPointInside": () => (isPointInside),
-  "isSsr": () => (isSsr),
-  "itemFromArray": () => (itemFromArray),
-  "loadFont": () => (loadFont),
-  "rectBounce": () => (rectBounce),
-  "singleDivModeExecute": () => (singleDivModeExecute)
-});
-
-// NAMESPACE OBJECT: ./dist/browser/Utils/ColorUtils.js
-var ColorUtils_namespaceObject = {};
-__webpack_require__.r(ColorUtils_namespaceObject);
-__webpack_require__.d(ColorUtils_namespaceObject, {
-  "colorMix": () => (colorMix),
-  "colorToHsl": () => (colorToHsl),
-  "colorToRgb": () => (colorToRgb),
-  "getHslAnimationFromHsl": () => (getHslAnimationFromHsl),
-  "getHslFromAnimation": () => (getHslFromAnimation),
-  "getLinkColor": () => (getLinkColor),
-  "getLinkRandomColor": () => (getLinkRandomColor),
-  "getRandomRgbColor": () => (getRandomRgbColor),
-  "getStyleFromHsl": () => (getStyleFromHsl),
-  "getStyleFromHsv": () => (getStyleFromHsv),
-  "getStyleFromRgb": () => (getStyleFromRgb),
-  "hslToHsv": () => (hslToHsv),
-  "hslToRgb": () => (hslToRgb),
-  "hslaToHsva": () => (hslaToHsva),
-  "hslaToRgba": () => (hslaToRgba),
-  "hsvToHsl": () => (hsvToHsl),
-  "hsvToRgb": () => (hsvToRgb),
-  "hsvaToHsla": () => (hsvaToHsla),
-  "hsvaToRgba": () => (hsvaToRgba),
-  "rgbToHsl": () => (rgbToHsl),
-  "rgbToHsv": () => (rgbToHsv),
-  "rgbaToHsva": () => (rgbaToHsva),
-  "stringToAlpha": () => (stringToAlpha),
-  "stringToRgb": () => (stringToRgb)
-});
-
-// NAMESPACE OBJECT: ./dist/browser/Utils/CanvasUtils.js
-var CanvasUtils_namespaceObject = {};
-__webpack_require__.r(CanvasUtils_namespaceObject);
-__webpack_require__.d(CanvasUtils_namespaceObject, {
-  "clear": () => (clear),
-  "drawConnectLine": () => (drawConnectLine),
-  "drawEllipse": () => (drawEllipse),
-  "drawGrabLine": () => (drawGrabLine),
-  "drawLinkLine": () => (drawLinkLine),
-  "drawLinkTriangle": () => (drawLinkTriangle),
-  "drawParticle": () => (drawParticle),
-  "drawParticlePlugin": () => (drawParticlePlugin),
-  "drawPlugin": () => (drawPlugin),
-  "drawShape": () => (drawShape),
-  "drawShapeAfterEffect": () => (drawShapeAfterEffect),
-  "gradient": () => (gradient),
-  "paintBase": () => (paintBase)
-});
-
 ;// CONCATENATED MODULE: ./dist/browser/pjs.js
 const initPjs = main => {
   const particlesJS = (tagId, options) => {
@@ -333,6 +554,14 @@ var OutMode;
   OutMode["destroy"] = "destroy";
   OutMode["split"] = "split";
 })(OutMode || (OutMode = {}));
+;// CONCATENATED MODULE: ./dist/browser/Enums/Modes/RollMode.js
+var RollMode;
+
+(function (RollMode) {
+  RollMode["both"] = "both";
+  RollMode["horizontal"] = "horizontal";
+  RollMode["vertical"] = "vertical";
+})(RollMode || (RollMode = {}));
 ;// CONCATENATED MODULE: ./dist/browser/Enums/Modes/SizeMode.js
 var SizeMode;
 
@@ -357,6 +586,7 @@ var ThemeMode;
 
 
 
+
 ;// CONCATENATED MODULE: ./dist/browser/Enums/AnimationStatus.js
 var AnimationStatus;
 
@@ -510,7 +740,7 @@ class Vector {
   }
 
   get length() {
-    return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
+    return Math.sqrt(this.x ** 2 + this.y ** 2);
   }
 
   set length(length) {
@@ -558,7 +788,7 @@ class Vector {
   }
 
   getLengthSq() {
-    return Math.pow(this.x, 2) + Math.pow(this.y, 2);
+    return this.x ** 2 + this.y ** 2;
   }
 
   distanceToSq(v) {
@@ -698,16 +928,16 @@ function collisionVelocity(v1, v2, m1, m2) {
 function calcEasing(value, type) {
   switch (type) {
     case EasingType.easeOutQuad:
-      return 1 - Math.pow(1 - value, 2);
+      return 1 - (1 - value) ** 2;
 
     case EasingType.easeOutCubic:
-      return 1 - Math.pow(1 - value, 3);
+      return 1 - (1 - value) ** 3;
 
     case EasingType.easeOutQuart:
-      return 1 - Math.pow(1 - value, 4);
+      return 1 - (1 - value) ** 4;
 
     case EasingType.easeOutQuint:
-      return 1 - Math.pow(1 - value, 5);
+      return 1 - (1 - value) ** 5;
 
     case EasingType.easeOutExpo:
       return value === 1 ? 1 : 1 - Math.pow(2, -10 * value);
@@ -730,38 +960,6 @@ function calcEasing(value, type) {
   }
 }
 ;// CONCATENATED MODULE: ./dist/browser/Utils/Utils.js
-var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
 
 
 
@@ -807,14 +1005,12 @@ function cancelAnimation() {
 function isInArray(value, array) {
   return value === array || array instanceof Array && array.indexOf(value) > -1;
 }
-function loadFont(character) {
+async function loadFont(character) {
   var _a, _b;
 
-  return __awaiter(this, void 0, void 0, function* () {
-    try {
-      yield document.fonts.load(`${(_a = character.weight) !== null && _a !== void 0 ? _a : "400"} 36px '${(_b = character.font) !== null && _b !== void 0 ? _b : "Verdana"}'`);
-    } catch (_c) {}
-  });
+  try {
+    await document.fonts.load(`${(_a = character.weight) !== null && _a !== void 0 ? _a : "400"} 36px '${(_b = character.font) !== null && _b !== void 0 ? _b : "Verdana"}'`);
+  } catch (_c) {}
 }
 function arrayRandomIndex(array) {
   return Math.floor(Math.random() * array.length);
@@ -1681,7 +1877,7 @@ function drawGrabLine(context, width, begin, end, colorLine, opacity) {
   context.restore();
 }
 function drawParticle(container, context, particle, delta, fillColorValue, strokeColorValue, backgroundMask, composite, radius, opacity, shadow, gradient) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f;
 
   const pos = particle.getPosition();
   const tiltOptions = particle.options.tilt;
@@ -1689,13 +1885,17 @@ function drawParticle(container, context, particle, delta, fillColorValue, strok
   context.save();
 
   if (tiltOptions.enable || rollOptions.enable) {
-    context.setTransform(rollOptions.enable ? Math.cos(particle.rollAngle) : 1, tiltOptions.enable ? Math.cos(particle.tilt.value) * particle.tilt.cosDirection : 0, tiltOptions.enable ? Math.sin(particle.tilt.value) * particle.tilt.sinDirection : 0, rollOptions.enable ? Math.sin(particle.rollAngle) : 1, pos.x, pos.y);
+    const roll = rollOptions.enable && particle.roll;
+    const tilt = tiltOptions.enable && particle.tilt;
+    const rollHorizontal = roll && (rollOptions.mode === RollMode.horizontal || rollOptions.mode === RollMode.both);
+    const rollVertical = roll && (rollOptions.mode === RollMode.vertical || rollOptions.mode === RollMode.both);
+    context.setTransform(rollHorizontal ? Math.cos(particle.roll.angle) : 1, tilt ? Math.cos(particle.tilt.value) * particle.tilt.cosDirection : 0, tilt ? Math.sin(particle.tilt.value) * particle.tilt.sinDirection : 0, rollVertical ? Math.sin(particle.roll.angle) : 1, pos.x, pos.y);
   } else {
     context.translate(pos.x, pos.y);
   }
 
   context.beginPath();
-  const angle = particle.rotate.value + (particle.options.rotate.path ? particle.velocity.angle : 0);
+  const angle = ((_b = (_a = particle.rotate) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 0) + (particle.options.rotate.path ? particle.velocity.angle : 0);
 
   if (angle !== 0) {
     context.rotate(angle);
@@ -1723,7 +1923,7 @@ function drawParticle(container, context, particle, delta, fillColorValue, strok
         h: color.value.h.value,
         s: color.value.s.value,
         l: color.value.l.value
-      }, (_b = (_a = color.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : opacity));
+      }, (_d = (_c = color.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : opacity));
     }
 
     context.fillStyle = fillGradient;
@@ -1734,7 +1934,7 @@ function drawParticle(container, context, particle, delta, fillColorValue, strok
   }
 
   const stroke = particle.stroke;
-  context.lineWidth = particle.strokeWidth;
+  context.lineWidth = (_e = particle.strokeWidth) !== null && _e !== void 0 ? _e : 0;
 
   if (strokeColorValue) {
     context.strokeStyle = strokeColorValue;
@@ -1742,7 +1942,7 @@ function drawParticle(container, context, particle, delta, fillColorValue, strok
 
   drawShape(container, context, particle, radius, opacity, delta);
 
-  if (stroke.width > 0) {
+  if (((_f = stroke === null || stroke === void 0 ? void 0 : stroke.width) !== null && _f !== void 0 ? _f : 0) > 0) {
     context.stroke();
   }
 
@@ -1757,7 +1957,7 @@ function drawParticle(container, context, particle, delta, fillColorValue, strok
   context.restore();
   context.save();
 
-  if (tiltOptions.enable) {
+  if (tiltOptions.enable && particle.tilt) {
     context.setTransform(1, Math.cos(particle.tilt.value) * particle.tilt.cosDirection, Math.sin(particle.tilt.value) * particle.tilt.sinDirection, 1, pos.x, pos.y);
   } else {
     context.translate(pos.x, pos.y);
@@ -1833,6 +2033,13 @@ function drawEllipse(context, particle, fillColorValue, radius, opacity, width,
   context.ellipse(pos.x, pos.y, radius / 2, radius * 2, rotationRadian, start, end);
   context.stroke();
 }
+function alterHsl(color, type, value) {
+  return {
+    h: color.h,
+    s: color.s,
+    l: color.l + (type === AlterType.darken ? -1 : 1) * value
+  };
+}
 ;// CONCATENATED MODULE: ./dist/browser/Utils/Range.js
 class Range {
   constructor(x, y) {
@@ -2044,6 +2251,8 @@ class EventListeners {
 
     this.visibilityChangeHandler = () => this.handleVisibilityChange();
 
+    this.themeChangeHandler = e => this.handleThemeChange(e);
+
     this.resizeHandler = () => this.handleWindowResize();
   }
 
@@ -2073,6 +2282,12 @@ class EventListeners {
       container.interactivity.element = container.canvas.element;
     }
 
+    const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
+
+    if (mediaMatch) {
+      manageListener(mediaMatch, "change", this.themeChangeHandler, add);
+    }
+
     const interactivityEl = container.interactivity.element;
 
     if (!interactivityEl) {
@@ -2332,6 +2547,16 @@ class EventListeners {
     }
   }
 
+  handleThemeChange(e) {
+    const mediaEvent = e;
+    const themeName = mediaEvent.matches ? this.container.options.defaultDarkTheme : this.container.options.defaultLightTheme;
+    const theme = this.container.options.themes.find(theme => theme.name === themeName);
+
+    if (theme && theme.default.auto) {
+      this.container.loadTheme(themeName);
+    }
+  }
+
   handleClickMode(mode) {
     const container = this.container;
     const options = container.actualOptions;
@@ -2628,7 +2853,6 @@ class QuadTree {
 ;// CONCATENATED MODULE: ./dist/browser/Core/Canvas.js
 
 
-
 class Canvas {
   constructor(container) {
     this.container = container;
@@ -2771,7 +2995,7 @@ class Canvas {
 
       const pos1 = p1.getPosition();
       const pos2 = p2.getPosition();
-      drawConnectLine(ctx, (_a = p1.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
+      drawConnectLine(ctx, (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
     });
   }
 
@@ -2781,12 +3005,12 @@ class Canvas {
       var _a;
 
       const beginPos = particle.getPosition();
-      drawGrabLine(ctx, (_a = particle.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, beginPos, mousePos, lineColor, opacity);
+      drawGrabLine(ctx, (_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, beginPos, mousePos, lineColor, opacity);
     });
   }
 
   drawParticle(particle, delta) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
 
     if (particle.spawning || particle.destroyed) {
       return;
@@ -2818,10 +3042,10 @@ class Canvas {
 
     const options = this.container.actualOptions;
     const zIndexOptions = particle.options.zIndex;
-    const zOpacityFactor = Math.pow(1 - particle.zIndexFactor, zIndexOptions.opacityRate);
+    const zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate;
     const radius = particle.getRadius();
-    const opacity = twinkling ? twinkle.opacity : (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : particle.opacity.value;
-    const strokeOpacity = (_c = particle.stroke.opacity) !== null && _c !== void 0 ? _c : opacity;
+    const opacity = twinkling ? twinkle.opacity : (_d = (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
+    const strokeOpacity = (_f = (_e = particle.stroke) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : opacity;
     const zOpacity = opacity * zOpacityFactor;
     const fillColorValue = fColor ? getStyleFromHsl(fColor, zOpacity) : undefined;
 
@@ -2829,9 +3053,8 @@ class Canvas {
       return;
     }
 
-    const orbitOptions = particle.options.orbit;
     this.draw(ctx => {
-      const zSizeFactor = Math.pow(1 - particle.zIndexFactor, zIndexOptions.sizeRate);
+      const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate;
       const zStrokeOpacity = strokeOpacity * zOpacityFactor;
       const strokeColorValue = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : fillColorValue;
 
@@ -2839,42 +3062,24 @@ class Canvas {
         return;
       }
 
-      if (orbitOptions.enable) {
-        this.drawOrbit(particle, OrbitType.back);
+      const container = this.container;
+
+      for (const updater of container.particles.updaters) {
+        if (updater.beforeDraw) {
+          updater.beforeDraw(particle);
+        }
       }
 
       drawParticle(this.container, ctx, particle, delta, fillColorValue, strokeColorValue, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow, particle.gradient);
 
-      if (orbitOptions.enable) {
-        this.drawOrbit(particle, OrbitType.front);
+      for (const updater of container.particles.updaters) {
+        if (updater.afterDraw) {
+          updater.afterDraw(particle);
+        }
       }
     });
   }
 
-  drawOrbit(particle, type) {
-    const container = this.container;
-    const orbitOptions = particle.options.orbit;
-    let start;
-    let end;
-
-    if (type === OrbitType.back) {
-      start = Math.PI / 2;
-      end = Math.PI * 3 / 2;
-    } else if (type === OrbitType.front) {
-      start = Math.PI * 3 / 2;
-      end = Math.PI / 2;
-    } else {
-      start = 0;
-      end = 2 * Math.PI;
-    }
-
-    this.draw(ctx => {
-      var _a, _b, _c, _d;
-
-      drawEllipse(ctx, particle, (_a = particle.orbitColor) !== null && _a !== void 0 ? _a : particle.getFillColor(), (_c = (_b = particle.orbitRadius) !== null && _b !== void 0 ? _b : container.retina.orbitRadius) !== null && _c !== void 0 ? _c : particle.getRadius(), orbitOptions.opacity, orbitOptions.width, ((_d = particle.orbitRotation) !== null && _d !== void 0 ? _d : 0) * container.retina.pixelRatio, start, end);
-    });
-  }
-
   drawPlugin(plugin, delta) {
     this.draw(ctx => {
       drawPlugin(ctx, plugin, delta);
@@ -3021,7 +3226,8 @@ class OptionsColor {
   }
 
   static create(source, data) {
-    const color = source !== null && source !== void 0 ? source : new OptionsColor();
+    const color = new OptionsColor();
+    color.load(source);
 
     if (data !== undefined) {
       if (typeof data === "string" || data instanceof Array) {
@@ -4193,12 +4399,17 @@ class AnimatableColor extends OptionsColor {
   }
 
   static create(source, data) {
-    const color = source !== null && source !== void 0 ? source : new AnimatableColor();
+    const color = new AnimatableColor();
+    color.load(source);
 
     if (data !== undefined) {
-      color.load(typeof data === "string" ? {
-        value: data
-      } : data);
+      if (typeof data === "string" || data instanceof Array) {
+        color.load({
+          value: data
+        });
+      } else {
+        color.load(data);
+      }
     }
 
     return color;
@@ -4636,11 +4847,13 @@ class RollLight {
 
 
 
+
 class Roll {
   constructor() {
     this.darken = new RollLight();
     this.enable = false;
     this.enlighten = new RollLight();
+    this.mode = RollMode.vertical;
     this.speed = 25;
   }
 
@@ -4661,6 +4874,10 @@ class Roll {
 
     this.enlighten.load(data.enlighten);
 
+    if (data.mode !== undefined) {
+      this.mode = data.mode;
+    }
+
     if (data.speed !== undefined) {
       this.speed = setRangeValue(data.speed);
     }
@@ -5048,7 +5265,7 @@ class ParticlesOptions {
     }
 
     this.bounce.load(data.bounce);
-    this.color = AnimatableColor.create(this.color, data.color);
+    this.color.load(AnimatableColor.create(this.color, data.color));
     this.destroy.load(data.destroy);
     this.life.load(data.life);
     const links = (_b = (_a = data.links) !== null && _a !== void 0 ? _a : data.lineLinked) !== null && _b !== void 0 ? _b : data.line_linked;
@@ -5209,9 +5426,20 @@ class Vector3d extends Vector {
 
 
 
+
+const fixOutMode = data => {
+  if (isInArray(data.outMode, data.checkModes) || isInArray(data.outMode, data.checkModes)) {
+    if (data.coord > data.maxCoord - data.radius * 2) {
+      data.setCb(-data.radius);
+    } else if (data.coord < data.radius * 2) {
+      data.setCb(data.radius);
+    }
+  }
+};
+
 class Particle {
   constructor(id, container, position, overrideOptions, group) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
 
     this.id = id;
     this.container = container;
@@ -5223,11 +5451,13 @@ class Particle {
     this.unbreakable = false;
     this.splitCount = 0;
     this.misplaced = false;
-    this.maxDistance = {};
+    this.retina = {
+      maxDistance: {}
+    };
     const pxRatio = container.retina.pixelRatio;
-    const options = container.actualOptions;
+    const mainOptions = container.actualOptions;
     const particlesOptions = new ParticlesOptions();
-    particlesOptions.load(options.particles);
+    particlesOptions.load(mainOptions.particles);
     const shapeType = particlesOptions.shape.type;
     const reduceDuplicates = particlesOptions.reduceDuplicates;
     this.shape = shapeType instanceof Array ? itemFromArray(shapeType, this.id, reduceDuplicates) : shapeType;
@@ -5259,16 +5489,14 @@ class Particle {
     this.fill = (_d = (_c = this.shapeData) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : this.fill;
     this.close = (_f = (_e = this.shapeData) === null || _e === void 0 ? void 0 : _e.close) !== null && _f !== void 0 ? _f : this.close;
     this.options = particlesOptions;
-    const zIndexValue = getRangeValue(this.options.zIndex.value);
     this.pathDelay = getValue(this.options.move.path.delay) * 1000;
-    this.wobbleDistance = 0;
+    const zIndexValue = getRangeValue(this.options.zIndex.value);
     container.retina.initParticle(this);
-    const sizeOptions = this.options.size;
-    const sizeValue = getValue(sizeOptions) * container.retina.pixelRatio;
-    const sizeRange = sizeOptions.value;
+    const sizeOptions = this.options.size,
+          sizeRange = sizeOptions.value;
     this.size = {
       enable: sizeOptions.animation.enable,
-      value: sizeValue,
+      value: getValue(sizeOptions) * container.retina.pixelRatio,
       max: getRangeMax(sizeRange) * pxRatio,
       min: getRangeMin(sizeRange) * pxRatio,
       loops: 0,
@@ -5297,7 +5525,7 @@ class Particle {
           break;
       }
 
-      this.size.velocity = ((_g = this.sizeAnimationSpeed) !== null && _g !== void 0 ? _g : container.retina.sizeAnimationSpeed) / 100 * container.retina.reduceFactor;
+      this.size.velocity = ((_g = this.retina.sizeAnimationSpeed) !== null && _g !== void 0 ? _g : container.retina.sizeAnimationSpeed) / 100 * container.retina.reduceFactor;
 
       if (!sizeAnimation.sync) {
         this.size.velocity *= Math.random();
@@ -5310,200 +5538,7 @@ class Particle {
     };
     this.initialVelocity = this.calculateVelocity();
     this.velocity = this.initialVelocity.copy();
-    const rotateOptions = this.options.rotate;
-    this.rotate = {
-      enable: rotateOptions.animation.enable,
-      value: getRangeValue(rotateOptions.value) * Math.PI / 180
-    };
-    let rotateDirection = rotateOptions.direction;
-
-    if (rotateDirection === RotateDirection.random) {
-      const index = Math.floor(Math.random() * 2);
-      rotateDirection = index > 0 ? RotateDirection.counterClockwise : RotateDirection.clockwise;
-    }
-
-    switch (rotateDirection) {
-      case RotateDirection.counterClockwise:
-      case "counterClockwise":
-        this.rotate.status = AnimationStatus.decreasing;
-        break;
-
-      case RotateDirection.clockwise:
-        this.rotate.status = AnimationStatus.increasing;
-        break;
-    }
-
-    const rotateAnimation = this.options.rotate.animation;
-
-    if (rotateAnimation.enable) {
-      this.rotate.velocity = rotateAnimation.speed / 360 * container.retina.reduceFactor;
-
-      if (!rotateAnimation.sync) {
-        this.rotate.velocity *= Math.random();
-      }
-    }
-
-    const tiltOptions = this.options.tilt;
-    this.tilt = {
-      enable: tiltOptions.enable,
-      value: getRangeValue(tiltOptions.value) * Math.PI / 180,
-      sinDirection: Math.random() >= 0.5 ? 1 : -1,
-      cosDirection: Math.random() >= 0.5 ? 1 : -1
-    };
-    let tiltDirection = tiltOptions.direction;
-
-    if (tiltDirection === TiltDirection.random) {
-      const index = Math.floor(Math.random() * 2);
-      tiltDirection = index > 0 ? TiltDirection.counterClockwise : TiltDirection.clockwise;
-    }
-
-    switch (tiltDirection) {
-      case TiltDirection.counterClockwise:
-      case "counterClockwise":
-        this.tilt.status = AnimationStatus.decreasing;
-        break;
-
-      case TiltDirection.clockwise:
-        this.tilt.status = AnimationStatus.increasing;
-        break;
-    }
-
-    const tiltAnimation = this.options.tilt.animation;
-
-    if (tiltAnimation.enable) {
-      this.tilt.velocity = tiltAnimation.speed / 360 * container.retina.reduceFactor;
-
-      if (!tiltAnimation.sync) {
-        this.tilt.velocity *= Math.random();
-      }
-    }
-
-    const orbitOptions = particlesOptions.orbit;
-
-    if (orbitOptions.enable) {
-      this.orbitRotation = getRangeValue(orbitOptions.rotation.value);
-      this.orbitColor = colorToHsl(orbitOptions.color);
-    }
-
-    const hslColor = colorToHsl(this.options.color, this.id, reduceDuplicates);
-
-    if (hslColor) {
-      this.color = getHslAnimationFromHsl(hslColor, this.options.color.animation, container.retina.reduceFactor);
-    }
-
-    const gradient = this.options.gradient instanceof Array ? itemFromArray(this.options.gradient) : this.options.gradient;
-
-    if (gradient) {
-      this.gradient = {
-        angle: {
-          value: gradient.angle.value,
-          enable: gradient.angle.animation.enable,
-          velocity: gradient.angle.animation.speed / 360 * container.retina.reduceFactor
-        },
-        type: gradient.type,
-        colors: []
-      };
-      let rotateDirection = gradient.angle.direction;
-
-      if (rotateDirection === RotateDirection.random) {
-        const index = Math.floor(Math.random() * 2);
-        rotateDirection = index > 0 ? RotateDirection.counterClockwise : RotateDirection.clockwise;
-      }
-
-      switch (rotateDirection) {
-        case RotateDirection.counterClockwise:
-        case "counterClockwise":
-          this.gradient.angle.status = AnimationStatus.decreasing;
-          break;
-
-        case RotateDirection.clockwise:
-          this.gradient.angle.status = AnimationStatus.increasing;
-          break;
-      }
-
-      for (const grColor of gradient.colors) {
-        const grHslColor = colorToHsl(grColor.value, this.id, reduceDuplicates);
-
-        if (grHslColor) {
-          const grHslAnimation = getHslAnimationFromHsl(grHslColor, grColor.value.animation, container.retina.reduceFactor);
-          const addColor = {
-            stop: grColor.stop,
-            value: grHslAnimation,
-            opacity: grColor.opacity ? {
-              enable: grColor.opacity.animation.enable,
-              max: getRangeMax(grColor.opacity.value),
-              min: getRangeMin(grColor.opacity.value),
-              status: AnimationStatus.increasing,
-              value: getRangeValue(grColor.opacity.value),
-              velocity: grColor.opacity.animation.speed / 100 * container.retina.reduceFactor
-            } : undefined
-          };
-
-          if (grColor.opacity && addColor.opacity) {
-            const opacityRange = grColor.opacity.value;
-            addColor.opacity.min = getRangeMin(opacityRange);
-            addColor.opacity.max = getRangeMax(opacityRange);
-            const opacityAnimation = grColor.opacity.animation;
-
-            switch (opacityAnimation.startValue) {
-              case StartValueType.min:
-                addColor.opacity.value = addColor.opacity.min;
-                addColor.opacity.status = AnimationStatus.increasing;
-                break;
-
-              case StartValueType.random:
-                addColor.opacity.value = randomInRange(addColor.opacity);
-                addColor.opacity.status = Math.random() >= 0.5 ? AnimationStatus.increasing : AnimationStatus.decreasing;
-                break;
-
-              case StartValueType.max:
-              default:
-                addColor.opacity.value = addColor.opacity.max;
-                addColor.opacity.status = AnimationStatus.decreasing;
-                break;
-            }
-          }
-
-          this.gradient.colors.push(addColor);
-        }
-      }
-    }
-
-    const rollOpt = this.options.roll;
-
-    if (rollOpt.enable) {
-      if (this.color) {
-        if (rollOpt.backColor) {
-          this.backColor = colorToHsl(rollOpt.backColor);
-        } else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
-          this.alterType = Math.random() >= 0.5 ? AlterType.darken : AlterType.enlighten;
-          this.alterValue = this.alterType === AlterType.darken ? rollOpt.darken.value : rollOpt.enlighten.value;
-        } else if (rollOpt.darken.enable) {
-          this.alterType = AlterType.darken;
-          this.alterValue = rollOpt.darken.value;
-        } else if (rollOpt.enlighten.enable) {
-          this.alterType = AlterType.enlighten;
-          this.alterValue = rollOpt.enlighten.value;
-        }
-      }
-
-      this.rollAngle = Math.random() * Math.PI * 2;
-      this.rollSpeed = getRangeValue(rollOpt.speed) / 360;
-    } else {
-      this.rollAngle = 0;
-      this.rollSpeed = 0;
-    }
-
-    const wobbleOpt = this.options.wobble;
-
-    if (wobbleOpt.enable) {
-      this.wobbleAngle = Math.random() * Math.PI * 2;
-      this.wobbleSpeed = getRangeValue(wobbleOpt.speed) / 360;
-    } else {
-      this.wobbleAngle = 0;
-      this.wobbleSpeed = 0;
-    }
-
+    this.moveDecay = 1 - getRangeValue(this.options.move.decay);
     this.position = this.calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
     this.initialPosition = this.position.copy();
     this.offset = Vector.origin;
@@ -5511,48 +5546,6 @@ class Particle {
     particles.needsSort = particles.needsSort || particles.lastZIndex < this.position.z;
     particles.lastZIndex = this.position.z;
     this.zIndexFactor = this.position.z / container.zLayers;
-    const opacityOptions = this.options.opacity;
-    this.opacity = {
-      enable: opacityOptions.animation.enable,
-      max: getRangeMax(opacityOptions.value),
-      min: getRangeMin(opacityOptions.value),
-      value: getRangeValue(opacityOptions.value),
-      loops: 0,
-      maxLoops: opacityOptions.animation.count
-    };
-    const opacityAnimation = opacityOptions.animation;
-
-    if (opacityAnimation.enable) {
-      this.opacity.status = AnimationStatus.increasing;
-      const opacityRange = opacityOptions.value;
-      this.opacity.min = getRangeMin(opacityRange);
-      this.opacity.max = getRangeMax(opacityRange);
-
-      switch (opacityAnimation.startValue) {
-        case StartValueType.min:
-          this.opacity.value = this.opacity.min;
-          this.opacity.status = AnimationStatus.increasing;
-          break;
-
-        case StartValueType.random:
-          this.opacity.value = randomInRange(this.opacity);
-          this.opacity.status = Math.random() >= 0.5 ? AnimationStatus.increasing : AnimationStatus.decreasing;
-          break;
-
-        case StartValueType.max:
-        default:
-          this.opacity.value = this.opacity.max;
-          this.opacity.status = AnimationStatus.decreasing;
-          break;
-      }
-
-      this.opacity.velocity = opacityAnimation.speed / 100 * container.retina.reduceFactor;
-
-      if (!opacityAnimation.sync) {
-        this.opacity.velocity *= Math.random();
-      }
-    }
-
     this.sides = 24;
     let drawer = container.drawers.get(this.shape);
 
@@ -5574,19 +5567,11 @@ class Particle {
       this.sides = sideCountFunc(this);
     }
 
-    this.stroke = this.options.stroke instanceof Array ? itemFromArray(this.options.stroke, this.id, reduceDuplicates) : this.options.stroke;
-    this.strokeWidth = this.stroke.width * container.retina.pixelRatio;
-    const strokeHslColor = (_h = colorToHsl(this.stroke.color)) !== null && _h !== void 0 ? _h : this.getFillColor();
-
-    if (strokeHslColor) {
-      this.strokeColor = getHslAnimationFromHsl(strokeHslColor, (_j = this.stroke.color) === null || _j === void 0 ? void 0 : _j.animation, container.retina.reduceFactor);
-    }
-
     this.life = this.loadLife();
     this.spawning = this.life.delay > 0;
 
     if (this.options.move.spin.enable) {
-      const spinPos = (_k = this.options.move.spin.position) !== null && _k !== void 0 ? _k : {
+      const spinPos = (_h = this.options.move.spin.position) !== null && _h !== void 0 ? _h : {
         x: 50,
         y: 50
       };
@@ -5601,12 +5586,18 @@ class Particle {
         direction: this.velocity.x >= 0 ? RotateDirection.clockwise : RotateDirection.counterClockwise,
         angle: this.velocity.angle,
         radius: distance,
-        acceleration: getRangeValue(this.options.move.spin.acceleration)
+        acceleration: (_j = this.retina.spinAcceleration) !== null && _j !== void 0 ? _j : getRangeValue(this.options.move.spin.acceleration)
       };
     }
 
     this.shadowColor = colorToRgb(this.options.shadow.color);
 
+    for (const updater of container.particles.updaters) {
+      if (updater.init) {
+        updater.init(this);
+      }
+    }
+
     if (drawer && drawer.particleInit) {
       drawer.particleInit(container, this);
     }
@@ -5647,33 +5638,30 @@ class Particle {
   }
 
   getRadius() {
-    return this.bubble.radius || this.size.value;
+    var _a;
+
+    return (_a = this.bubble.radius) !== null && _a !== void 0 ? _a : this.size.value;
   }
 
   getMass() {
-    const radius = this.getRadius();
-    return Math.pow(radius, 2) * Math.PI / 2;
+    return this.getRadius() ** 2 * Math.PI / 2;
   }
 
   getFillColor() {
-    if (this.bubble.color) {
-      return this.bubble.color;
-    }
+    var _a, _b, _c;
 
-    const color = getHslFromAnimation(this.color);
+    const color = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.color);
 
-    if (color && (this.backColor || this.alterType && this.alterValue !== undefined)) {
-      const rolled = Math.floor(this.rollAngle / (Math.PI / 2)) % 2;
+    if (color && this.roll && (this.backColor || this.roll.alter)) {
+      const rolled = Math.floor(((_c = (_b = this.roll) === null || _b === void 0 ? void 0 : _b.angle) !== null && _c !== void 0 ? _c : 0) / (Math.PI / 2)) % 2;
 
       if (rolled) {
         if (this.backColor) {
           return this.backColor;
-        } else if (this.alterType && this.alterValue !== undefined) {
-          return {
-            h: color.h,
-            s: color.s,
-            l: color.l + (this.alterType === AlterType.darken ? -1 : 1) * this.alterValue
-          };
+        }
+
+        if (this.roll.alter) {
+          return alterHsl(color, this.roll.alter.type, this.roll.alter.value);
         }
       }
     }
@@ -5716,7 +5704,10 @@ class Particle {
   }
 
   reset() {
-    this.opacity.loops = 0;
+    if (this.opacity) {
+      this.opacity.loops = 0;
+    }
+
     this.size.loops = 0;
   }
 
@@ -5748,26 +5739,27 @@ class Particle {
     const canvasSize = container.canvas.size;
     const pos = Vector3d.create((_a = position === null || position === void 0 ? void 0 : position.x) !== null && _a !== void 0 ? _a : Math.random() * canvasSize.width, (_b = position === null || position === void 0 ? void 0 : position.y) !== null && _b !== void 0 ? _b : Math.random() * canvasSize.height, zIndex);
     const radius = this.getRadius();
-    const outModes = this.options.move.outModes;
-
-    const fixHorizontal = outMode => {
-      if (isInArray(outMode, OutMode.bounce) || isInArray(outMode, OutMode.bounceHorizontal)) {
-        if (pos.x > container.canvas.size.width - radius * 2) {
-          pos.x -= radius;
-        } else if (pos.x < radius * 2) {
-          pos.x += radius;
-        }
-      }
-    };
 
-    const fixVertical = outMode => {
-      if (isInArray(outMode, OutMode.bounce) || isInArray(outMode, OutMode.bounceVertical)) {
-        if (pos.y > container.canvas.size.height - radius * 2) {
-          pos.y -= radius;
-        } else if (pos.y < radius * 2) {
-          pos.y += radius;
-        }
-      }
+    const outModes = this.options.move.outModes,
+          fixHorizontal = outMode => {
+      fixOutMode({
+        outMode,
+        checkModes: [OutMode.bounce, OutMode.bounceHorizontal],
+        coord: pos.x,
+        maxCoord: container.canvas.size.width,
+        setCb: value => pos.x += value,
+        radius
+      });
+    },
+          fixVertical = outMode => {
+      fixOutMode({
+        outMode,
+        checkModes: [OutMode.bounce, OutMode.bounceVertical],
+        coord: pos.y,
+        maxCoord: container.canvas.size.height,
+        setCb: value => pos.y += value,
+        radius
+      });
     };
 
     fixHorizontal((_c = outModes.left) !== null && _c !== void 0 ? _c : outModes.default);
@@ -5924,8 +5916,8 @@ function applyDistance(particle) {
   } = getDistances(initialPosition, particle.position);
   const dxFixed = Math.abs(dx),
         dyFixed = Math.abs(dy);
-  const hDistance = particle.maxDistance.horizontal;
-  const vDistance = particle.maxDistance.vertical;
+  const hDistance = particle.retina.maxDistance.horizontal;
+  const vDistance = particle.retina.maxDistance.vertical;
 
   if (!hDistance && !vDistance) {
     return;
@@ -5974,6 +5966,8 @@ class Mover {
   moveParticle(particle, delta) {
     var _a, _b, _c;
 
+    var _d, _e;
+
     const particleOptions = particle.options;
     const moveOptions = particleOptions.move;
 
@@ -5983,8 +5977,8 @@ class Mover {
 
     const container = this.container,
           slowFactor = this.getProximitySpeedFactor(particle),
-          baseSpeed = ((_a = particle.moveSpeed) !== null && _a !== void 0 ? _a : particle.moveSpeed = getRangeValue(moveOptions.speed) * container.retina.pixelRatio) * container.retina.reduceFactor,
-          moveDrift = (_b = particle.moveDrift) !== null && _b !== void 0 ? _b : particle.moveDrift = getRangeValue(particle.options.move.drift) * container.retina.pixelRatio,
+          baseSpeed = ((_a = (_d = particle.retina).moveSpeed) !== null && _a !== void 0 ? _a : _d.moveSpeed = getRangeValue(moveOptions.speed) * container.retina.pixelRatio) * container.retina.reduceFactor,
+          moveDrift = (_b = (_e = particle.retina).moveDrift) !== null && _b !== void 0 ? _b : _e.moveDrift = getRangeValue(particle.options.move.drift) * container.retina.pixelRatio,
           maxSize = getRangeMax(particleOptions.size.value) * container.retina.pixelRatio,
           sizeFactor = moveOptions.size ? particle.getRadius() / maxSize : 1,
           diffFactor = 2,
@@ -6002,14 +5996,14 @@ class Mover {
       particle.velocity.x += moveDrift * delta.factor / (60 * moveSpeed);
     }
 
-    const decay = 1 - particle.options.move.decay;
+    const decay = particle.moveDecay;
 
     if (decay != 1) {
       particle.velocity.multTo(decay);
     }
 
     const velocity = particle.velocity.mult(moveSpeed);
-    const maxSpeed = (_c = particle.maxSpeed) !== null && _c !== void 0 ? _c : container.retina.maxSpeed;
+    const maxSpeed = (_c = particle.retina.maxSpeed) !== null && _c !== void 0 ? _c : container.retina.maxSpeed;
 
     if (gravityOptions.enable && gravityOptions.maxSpeed > 0 && (!gravityOptions.inverse && velocity.y >= 0 && velocity.y >= maxSpeed || gravityOptions.inverse && velocity.y <= 0 && velocity.y <= -maxSpeed)) {
       velocity.y = gravityFactor * maxSpeed;
@@ -6020,7 +6014,7 @@ class Mover {
     }
 
     const zIndexOptions = particle.options.zIndex,
-          zVelocityFactor = Math.pow(1 - particle.zIndexFactor, zIndexOptions.velocityRate);
+          zVelocityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.velocityRate;
 
     if (moveOptions.spin.enable) {
       this.spin(particle, moveSpeed);
@@ -6168,8 +6162,10 @@ class Particles {
     this.limit = 0;
     this.needsSort = false;
     this.lastZIndex = 0;
-    this.linksFreq = new Map();
-    this.trianglesFreq = new Map();
+    this.freqs = {
+      links: new Map(),
+      triangles: new Map()
+    };
     this.interactionManager = new InteractionManager(container);
     const canvasSize = this.container.canvas.size;
     this.linksColors = new Map();
@@ -6188,8 +6184,8 @@ class Particles {
     const options = container.actualOptions;
     this.lastZIndex = 0;
     this.needsSort = false;
-    this.linksFreq = new Map();
-    this.trianglesFreq = new Map();
+    this.freqs.links = new Map();
+    this.freqs.triangles = new Map();
     let handled = false;
 
     for (const [, plugin] of container.plugins) {
@@ -6414,11 +6410,11 @@ class Particles {
 
   getLinkFrequency(p1, p2) {
     const key = `${Math.min(p1.id, p2.id)}_${Math.max(p1.id, p2.id)}`;
-    let res = this.linksFreq.get(key);
+    let res = this.freqs.links.get(key);
 
     if (res === undefined) {
       res = Math.random();
-      this.linksFreq.set(key, res);
+      this.freqs.links.set(key, res);
     }
 
     return res;
@@ -6440,11 +6436,11 @@ class Particles {
     }
 
     const key = `${id1}_${id2}_${id3}`;
-    let res = this.trianglesFreq.get(key);
+    let res = this.freqs.triangles.get(key);
 
     if (res === undefined) {
       res = Math.random();
-      this.trianglesFreq.set(key, res);
+      this.freqs.triangles.set(key, res);
     }
 
     return res;
@@ -6504,7 +6500,7 @@ class Particles {
 
     const canvas = container.canvas.element;
     const pxRatio = container.retina.pixelRatio;
-    return canvas.width * canvas.height / (densityOptions.factor * Math.pow(pxRatio, 2) * densityOptions.area);
+    return canvas.width * canvas.height / (densityOptions.factor * pxRatio ** 2 * densityOptions.area);
   }
 
   pushParticle(position, overrideOptions, group, initializer) {
@@ -6607,24 +6603,22 @@ class Retina {
     const options = particle.options;
     const ratio = this.pixelRatio;
     const moveDistance = options.move.distance;
-    const orbit = options.orbit;
-    particle.attractDistance = options.move.attract.distance * ratio;
-    particle.linksDistance = options.links.distance * ratio;
-    particle.linksWidth = options.links.width * ratio;
-    particle.moveDrift = getRangeValue(options.move.drift) * ratio;
-    particle.moveSpeed = getRangeValue(options.move.speed) * ratio;
-    particle.sizeAnimationSpeed = options.size.animation.speed * ratio;
-    particle.orbitRadius = (orbit === null || orbit === void 0 ? void 0 : orbit.radius) !== undefined ? orbit.radius * ratio : undefined;
+    const props = particle.retina;
+    props.attractDistance = options.move.attract.distance * ratio;
+    props.linksDistance = options.links.distance * ratio;
+    props.linksWidth = options.links.width * ratio;
+    props.moveDrift = getRangeValue(options.move.drift) * ratio;
+    props.moveSpeed = getRangeValue(options.move.speed) * ratio;
+    props.sizeAnimationSpeed = options.size.animation.speed * ratio;
 
     if (particle.spin) {
-      particle.spin.acceleration = getRangeValue(options.move.spin.acceleration) * ratio;
+      props.spinAcceleration = getRangeValue(options.move.spin.acceleration) * ratio;
     }
 
-    const maxDistance = particle.maxDistance;
+    const maxDistance = props.maxDistance;
     maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;
     maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;
-    particle.wobbleDistance = getRangeValue(options.wobble.distance) * ratio;
-    particle.maxSpeed = options.move.gravity.maxSpeed * ratio;
+    props.maxSpeed = options.move.gravity.maxSpeed * ratio;
   }
 
   handleMotionChange(mediaQuery) {
@@ -7713,15 +7707,20 @@ class Background {
 
 class ThemeDefault {
   constructor() {
+    this.auto = false;
     this.mode = ThemeMode.any;
     this.value = false;
   }
 
   load(data) {
-    if (data === undefined) {
+    if (!data) {
       return;
     }
 
+    if (data.auto !== undefined) {
+      this.auto = data.auto;
+    }
+
     if (data.mode !== undefined) {
       this.mode = data.mode;
     }
@@ -7870,6 +7869,14 @@ class Responsive {
 
 }
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/Options.js
+var __classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+
+var _Options_instances, _Options_findDefaultTheme;
+
 
 
 
@@ -7883,6 +7890,8 @@ class Responsive {
 
 class Options {
   constructor() {
+    _Options_instances.add(this);
+
     this.autoPlay = true;
     this.background = new Background();
     this.backgroundMask = new BackgroundMask();
@@ -7926,7 +7935,7 @@ class Options {
   }
 
   load(data) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
 
     if (data === undefined) {
       return;
@@ -7975,7 +7984,14 @@ class Options {
     }
 
     this.background.load(data.background);
-    this.fullScreen.load((_c = data.fullScreen) !== null && _c !== void 0 ? _c : data.backgroundMode);
+    const fullScreen = (_c = data.fullScreen) !== null && _c !== void 0 ? _c : data.backgroundMode;
+
+    if (typeof fullScreen === "boolean") {
+      this.fullScreen.enable = fullScreen;
+    } else {
+      this.fullScreen.load(fullScreen);
+    }
+
     this.backgroundMask.load(data.backgroundMask);
     this.interactivity.load(data.interactivity);
 
@@ -8008,6 +8024,9 @@ class Options {
         this.themes.push(optTheme);
       }
     }
+
+    this.defaultDarkTheme = (_d = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, ThemeMode.dark)) === null || _d === void 0 ? void 0 : _d.name;
+    this.defaultLightTheme = (_e = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, ThemeMode.light)) === null || _e === void 0 ? void 0 : _e.name;
   }
 
   setTheme(name) {
@@ -8018,12 +8037,9 @@ class Options {
         this.load(chosenTheme.options);
       }
     } else {
-      const clientDarkMode = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)").matches;
-      let defaultTheme = this.themes.find(theme => theme.default.value && (theme.default.mode === ThemeMode.dark && clientDarkMode || theme.default.mode === ThemeMode.light && !clientDarkMode));
-
-      if (!defaultTheme) {
-        defaultTheme = this.themes.find(theme => theme.default.value && theme.default.mode === ThemeMode.any);
-      }
+      const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)"),
+            clientDarkMode = mediaMatch && mediaMatch.matches,
+            defaultTheme = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, clientDarkMode ? ThemeMode.dark : ThemeMode.light);
 
       if (defaultTheme) {
         this.load(defaultTheme.options);
@@ -8031,10 +8047,6 @@ class Options {
     }
   }
 
-  importPreset(preset) {
-    this.load(Plugins.getPreset(preset));
-  }
-
   setResponsive(width, pxRatio, defaultOptions) {
     var _a;
 
@@ -8042,40 +8054,17 @@ class Options {
     this.load((_a = this.responsive.find(t => t.maxWidth * pxRatio > width)) === null || _a === void 0 ? void 0 : _a.options);
   }
 
-}
-;// CONCATENATED MODULE: ./dist/browser/Core/Container.js
-var Container_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
+  importPreset(preset) {
+    this.load(Plugins.getPreset(preset));
   }
 
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
+}
+_Options_instances = new WeakSet(), _Options_findDefaultTheme = function _Options_findDefaultTheme(mode) {
+  var _a;
 
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
+  return (_a = this.themes.find(theme => theme.default.value && theme.default.mode === mode)) !== null && _a !== void 0 ? _a : this.themes.find(theme => theme.default.value && theme.default.mode === ThemeMode.any);
 };
-
+;// CONCATENATED MODULE: ./dist/browser/Core/Container.js
 
 
 
@@ -8327,37 +8316,33 @@ class Container {
     delete this.particles.linksColor;
   }
 
-  loadTheme(name) {
-    return Container_awaiter(this, void 0, void 0, function* () {
-      this.currentTheme = name;
-      yield this.refresh();
-    });
+  async loadTheme(name) {
+    this.currentTheme = name;
+    await this.refresh();
   }
 
-  start() {
-    return Container_awaiter(this, void 0, void 0, function* () {
-      if (this.started) {
-        return;
-      }
+  async start() {
+    if (this.started) {
+      return;
+    }
 
-      yield this.init();
-      this.started = true;
-      this.eventListeners.addListeners();
+    await this.init();
+    this.started = true;
+    this.eventListeners.addListeners();
 
-      if (this.interactivity.element instanceof HTMLElement && this.intersectionObserver) {
-        this.intersectionObserver.observe(this.interactivity.element);
-      }
+    if (this.interactivity.element instanceof HTMLElement && this.intersectionObserver) {
+      this.intersectionObserver.observe(this.interactivity.element);
+    }
 
-      for (const [, plugin] of this.plugins) {
-        if (plugin.startAsync !== undefined) {
-          yield plugin.startAsync();
-        } else if (plugin.start !== undefined) {
-          plugin.start();
-        }
+    for (const [, plugin] of this.plugins) {
+      if (plugin.startAsync !== undefined) {
+        await plugin.startAsync();
+      } else if (plugin.start !== undefined) {
+        plugin.start();
       }
+    }
 
-      this.play();
-    });
+    this.play();
   }
 
   addClickHandler(callback) {
@@ -8465,68 +8450,66 @@ class Container {
     this.actualOptions.setTheme(this.currentTheme);
   }
 
-  init() {
-    return Container_awaiter(this, void 0, void 0, function* () {
-      this.actualOptions = new Options();
-      this.actualOptions.load(this._options);
-      this.retina.init();
-      this.canvas.init();
-      this.updateActualOptions();
-      this.canvas.initBackground();
-      this.canvas.resize();
-      this.zLayers = this.actualOptions.zLayers;
-      this.duration = getRangeValue(this.actualOptions.duration);
-      this.lifeTime = 0;
-      this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 60;
-      const availablePlugins = Plugins.getAvailablePlugins(this);
-
-      for (const [id, plugin] of availablePlugins) {
-        this.plugins.set(id, plugin);
-      }
-
-      for (const [, drawer] of this.drawers) {
-        if (drawer.init) {
-          yield drawer.init(this);
-        }
+  async init() {
+    this.actualOptions = new Options();
+    this.actualOptions.load(this._options);
+    this.retina.init();
+    this.canvas.init();
+    this.updateActualOptions();
+    this.canvas.initBackground();
+    this.canvas.resize();
+    this.zLayers = this.actualOptions.zLayers;
+    this.duration = getRangeValue(this.actualOptions.duration);
+    this.lifeTime = 0;
+    this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 60;
+    const availablePlugins = Plugins.getAvailablePlugins(this);
+
+    for (const [id, plugin] of availablePlugins) {
+      this.plugins.set(id, plugin);
+    }
+
+    for (const [, drawer] of this.drawers) {
+      if (drawer.init) {
+        await drawer.init(this);
       }
+    }
 
-      for (const [, plugin] of this.plugins) {
-        if (plugin.init) {
-          plugin.init(this.actualOptions);
-        } else if (plugin.initAsync !== undefined) {
-          yield plugin.initAsync(this.actualOptions);
-        }
+    for (const [, plugin] of this.plugins) {
+      if (plugin.init) {
+        plugin.init(this.actualOptions);
+      } else if (plugin.initAsync !== undefined) {
+        await plugin.initAsync(this.actualOptions);
       }
+    }
 
-      const pathOptions = this.actualOptions.particles.move.path;
+    const pathOptions = this.actualOptions.particles.move.path;
 
-      if (pathOptions.generator) {
-        const customGenerator = Plugins.getPathGenerator(pathOptions.generator);
+    if (pathOptions.generator) {
+      const customGenerator = Plugins.getPathGenerator(pathOptions.generator);
 
-        if (customGenerator) {
-          if (customGenerator.init) {
-            this.pathGenerator.init = customGenerator.init;
-          }
+      if (customGenerator) {
+        if (customGenerator.init) {
+          this.pathGenerator.init = customGenerator.init;
+        }
 
-          if (customGenerator.generate) {
-            this.pathGenerator.generate = customGenerator.generate;
-          }
+        if (customGenerator.generate) {
+          this.pathGenerator.generate = customGenerator.generate;
+        }
 
-          if (customGenerator.update) {
-            this.pathGenerator.update = customGenerator.update;
-          }
+        if (customGenerator.update) {
+          this.pathGenerator.update = customGenerator.update;
         }
       }
+    }
 
-      this.particles.init();
-      this.particles.setDensity();
+    this.particles.init();
+    this.particles.setDensity();
 
-      for (const [, plugin] of this.plugins) {
-        if (plugin.particlesSetup !== undefined) {
-          plugin.particlesSetup();
-        }
+    for (const [, plugin] of this.plugins) {
+      if (plugin.particlesSetup !== undefined) {
+        plugin.particlesSetup();
       }
-    });
+    }
   }
 
   intersectionManager(entries) {
@@ -8549,38 +8532,6 @@ class Container {
 
 }
 ;// CONCATENATED MODULE: ./dist/browser/Core/Loader.js
-var Loader_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
 
 
 const tsParticlesDom = [];
@@ -8606,101 +8557,93 @@ class Loader {
     dom.splice(index, 1);
   }
 
-  static load(tagId, options, index) {
-    return Loader_awaiter(this, void 0, void 0, function* () {
-      let domContainer = document.getElementById(tagId);
+  static async load(tagId, options, index) {
+    let domContainer = document.getElementById(tagId);
 
-      if (!domContainer) {
-        domContainer = document.createElement("div");
-        domContainer.id = tagId;
-        document.append(domContainer);
-      }
+    if (!domContainer) {
+      domContainer = document.createElement("div");
+      domContainer.id = tagId;
+      document.append(domContainer);
+    }
 
-      return Loader.set(tagId, domContainer, options, index);
-    });
+    return Loader.set(tagId, domContainer, options, index);
   }
 
-  static set(id, domContainer, options, index) {
-    return Loader_awaiter(this, void 0, void 0, function* () {
-      const currentOptions = options instanceof Array ? itemFromArray(options, index) : options;
-      const dom = Loader.dom();
-      const oldIndex = dom.findIndex(v => v.id === id);
+  static async set(id, domContainer, options, index) {
+    const currentOptions = options instanceof Array ? itemFromArray(options, index) : options;
+    const dom = Loader.dom();
+    const oldIndex = dom.findIndex(v => v.id === id);
 
-      if (oldIndex >= 0) {
-        const old = Loader.domItem(oldIndex);
+    if (oldIndex >= 0) {
+      const old = Loader.domItem(oldIndex);
 
-        if (old && !old.destroyed) {
-          old.destroy();
-          dom.splice(oldIndex, 1);
-        }
+      if (old && !old.destroyed) {
+        old.destroy();
+        dom.splice(oldIndex, 1);
       }
+    }
 
-      let canvasEl;
-      let generatedCanvas;
-
-      if (domContainer.tagName.toLowerCase() === "canvas") {
-        canvasEl = domContainer;
-        generatedCanvas = false;
-      } else {
-        const existingCanvases = domContainer.getElementsByTagName("canvas");
+    let canvasEl;
+    let generatedCanvas;
 
-        if (existingCanvases.length) {
-          canvasEl = existingCanvases[0];
+    if (domContainer.tagName.toLowerCase() === "canvas") {
+      canvasEl = domContainer;
+      generatedCanvas = false;
+    } else {
+      const existingCanvases = domContainer.getElementsByTagName("canvas");
 
-          if (!canvasEl.className) {
-            canvasEl.className = Constants.canvasClass;
-          }
+      if (existingCanvases.length) {
+        canvasEl = existingCanvases[0];
 
-          generatedCanvas = false;
-        } else {
-          generatedCanvas = true;
-          canvasEl = document.createElement("canvas");
+        if (!canvasEl.className) {
           canvasEl.className = Constants.canvasClass;
-          canvasEl.style.width = "100%";
-          canvasEl.style.height = "100%";
-          domContainer.appendChild(canvasEl);
         }
-      }
-
-      const newItem = new Container(id, currentOptions);
 
-      if (oldIndex >= 0) {
-        dom.splice(oldIndex, 0, newItem);
+        generatedCanvas = false;
       } else {
-        dom.push(newItem);
+        generatedCanvas = true;
+        canvasEl = document.createElement("canvas");
+        canvasEl.className = Constants.canvasClass;
+        canvasEl.style.width = "100%";
+        canvasEl.style.height = "100%";
+        domContainer.appendChild(canvasEl);
       }
+    }
 
-      newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
-      yield newItem.start();
-      return newItem;
-    });
+    const newItem = new Container(id, currentOptions);
+
+    if (oldIndex >= 0) {
+      dom.splice(oldIndex, 0, newItem);
+    } else {
+      dom.push(newItem);
+    }
+
+    newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
+    await newItem.start();
+    return newItem;
   }
 
-  static loadJSON(tagId, jsonUrl, index) {
-    return Loader_awaiter(this, void 0, void 0, function* () {
-      const url = jsonUrl instanceof Array ? itemFromArray(jsonUrl, index) : jsonUrl;
-      const response = yield fetch(url);
+  static async loadJSON(tagId, jsonUrl, index) {
+    const url = jsonUrl instanceof Array ? itemFromArray(jsonUrl, index) : jsonUrl;
+    const response = await fetch(url);
 
-      if (response.ok) {
-        return Loader.load(tagId, yield response.json());
-      } else {
-        fetchError(response.status);
-      }
-    });
+    if (response.ok) {
+      return Loader.load(tagId, await response.json());
+    } else {
+      fetchError(response.status);
+    }
   }
 
-  static setJSON(id, domContainer, jsonUrl, index) {
-    return Loader_awaiter(this, void 0, void 0, function* () {
-      const url = jsonUrl instanceof Array ? itemFromArray(jsonUrl, index) : jsonUrl;
-      const response = yield fetch(url);
+  static async setJSON(id, domContainer, jsonUrl, index) {
+    const url = jsonUrl instanceof Array ? itemFromArray(jsonUrl, index) : jsonUrl;
+    const response = await fetch(url);
 
-      if (response.ok) {
-        const options = yield response.json();
-        return Loader.set(id, domContainer, options);
-      } else {
-        fetchError(response.status);
-      }
-    });
+    if (response.ok) {
+      const options = await response.json();
+      return Loader.set(id, domContainer, options);
+    } else {
+      fetchError(response.status);
+    }
   }
 
   static setOnClickHandler(callback) {
@@ -8717,38 +8660,6 @@ class Loader {
 
 }
 ;// CONCATENATED MODULE: ./dist/browser/main.js
-var main_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
 var __classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function (receiver, state, value, kind, f) {
   if (kind === "m") throw new TypeError("Private method is not writable");
   if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
@@ -8756,7 +8667,7 @@ var __classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || fu
   return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
 };
 
-var __classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function (receiver, state, kind, f) {
+var main_classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function (receiver, state, kind, f) {
   if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
   if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
   return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
@@ -8774,37 +8685,29 @@ class Main {
   }
 
   init() {
-    if (!__classPrivateFieldGet(this, _Main_initialized, "f")) {
+    if (!main_classPrivateFieldGet(this, _Main_initialized, "f")) {
       __classPrivateFieldSet(this, _Main_initialized, true, "f");
     }
   }
 
-  loadFromArray(tagId, options, index) {
-    return main_awaiter(this, void 0, void 0, function* () {
-      return Loader.load(tagId, options, index);
-    });
+  async loadFromArray(tagId, options, index) {
+    return Loader.load(tagId, options, index);
   }
 
-  load(tagId, options) {
-    return main_awaiter(this, void 0, void 0, function* () {
-      return Loader.load(tagId, options);
-    });
+  async load(tagId, options) {
+    return Loader.load(tagId, options);
   }
 
-  set(id, element, options) {
-    return main_awaiter(this, void 0, void 0, function* () {
-      return Loader.set(id, element, options);
-    });
+  async set(id, element, options) {
+    return Loader.set(id, element, options);
   }
 
   loadJSON(tagId, pathConfigJson, index) {
     return Loader.loadJSON(tagId, pathConfigJson, index);
   }
 
-  setJSON(id, element, pathConfigJson, index) {
-    return main_awaiter(this, void 0, void 0, function* () {
-      return Loader.setJSON(id, element, pathConfigJson, index);
-    });
+  async setJSON(id, element, pathConfigJson, index) {
+    return Loader.setJSON(id, element, pathConfigJson, index);
   }
 
   setOnClickHandler(callback) {
@@ -9015,7 +8918,7 @@ class AbsorberInstance {
       particle.position.x = this.position.x + orbitRadius * updateFunc.x(orbitAngle);
       particle.position.y = this.position.y + orbitRadius * updateFunc.y(orbitAngle);
       particle.absorberOrbit.length -= v.length;
-      particle.absorberOrbit.angle += ((_a = particle.moveSpeed) !== null && _a !== void 0 ? _a : 0) * container.retina.pixelRatio / 100 * container.retina.reduceFactor;
+      particle.absorberOrbit.angle += ((_a = particle.retina.moveSpeed) !== null && _a !== void 0 ? _a : 0) * container.retina.pixelRatio / 100 * container.retina.reduceFactor;
     } else {
       const addV = Vector.origin;
       addV.length = v.length;
@@ -9621,7 +9524,7 @@ class EmitterInstance {
     for (let i = 0; i < quantity; i++) {
       const particlesOptions = deepExtend({}, this.particlesOptions);
 
-      if (this.spawnColor !== undefined) {
+      if (this.spawnColor) {
         const colorAnimation = (_a = this.emitterOptions.spawnColor) === null || _a === void 0 ? void 0 : _a.animation;
 
         if (colorAnimation) {
@@ -9981,7 +9884,7 @@ class CircleShape {
       }
     };
 
-    const radius = (x, y, theta) => x * y / Math.sqrt(Math.pow(y * Math.cos(theta), 2) + Math.pow(x * Math.sin(theta), 2));
+    const radius = (x, y, theta) => x * y / Math.sqrt((y * Math.cos(theta)) ** 2 + (x * Math.sin(theta)) ** 2);
 
     const [a, b] = [offset.x / 2, offset.y / 2];
     const randomTheta = generateTheta(a, b),
@@ -10378,43 +10281,7 @@ class PolygonMask {
   }
 
 }
-;// CONCATENATED MODULE: ./dist/browser/Plugins/PolygonMask/PolygonMaskInstance.js
-var PolygonMaskInstance_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
-
-
-
-
+;// CONCATENATED MODULE: ./dist/browser/Plugins/PolygonMask/utils.js
 
 function drawPolygonMask(context, rawData, stroke) {
   const color = colorToRgb(stroke.color);
@@ -10435,7 +10302,6 @@ function drawPolygonMask(context, rawData, stroke) {
   context.lineWidth = stroke.width;
   context.stroke();
 }
-
 function drawPolygonMaskPath(context, path, stroke, position) {
   context.translate(position.x, position.y);
   const color = colorToRgb(stroke.color);
@@ -10448,23 +10314,24 @@ function drawPolygonMaskPath(context, path, stroke, position) {
   context.lineWidth = stroke.width;
   context.stroke(path);
 }
-
 function parsePaths(paths, scale, offset) {
+  var _a;
+
   const res = [];
 
   for (const path of paths) {
     const segments = path.element.pathSegList;
-    const len = segments.numberOfItems;
+    const len = (_a = segments === null || segments === void 0 ? void 0 : segments.numberOfItems) !== null && _a !== void 0 ? _a : 0;
     const p = {
       x: 0,
       y: 0
     };
 
     for (let i = 0; i < len; i++) {
-      const segment = segments.getItem(i);
+      const segment = segments === null || segments === void 0 ? void 0 : segments.getItem(i);
       const svgPathSeg = window.SVGPathSeg;
 
-      switch (segment.pathSegType) {
+      switch (segment === null || segment === void 0 ? void 0 : segment.pathSegType) {
         case svgPathSeg.PATHSEG_MOVETO_ABS:
         case svgPathSeg.PATHSEG_LINETO_ABS:
         case svgPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
@@ -10523,7 +10390,6 @@ function parsePaths(paths, scale, offset) {
 
   return res;
 }
-
 function calcClosestPtOnSegment(s1, s2, pos) {
   const {
     dx,
@@ -10533,7 +10399,7 @@ function calcClosestPtOnSegment(s1, s2, pos) {
     dx: dxx,
     dy: dyy
   } = getDistances(s2, s1);
-  const t = (dx * dxx + dy * dyy) / (Math.pow(dxx, 2) + Math.pow(dyy, 2));
+  const t = (dx * dxx + dy * dyy) / (dxx ** 2 + dyy ** 2);
   let x = s1.x + dxx * t;
   let y = s1.y + dyy * t;
 
@@ -10551,7 +10417,6 @@ function calcClosestPtOnSegment(s1, s2, pos) {
     isOnSegment: t >= 0 && t <= 1
   };
 }
-
 function segmentBounce(start, stop, velocity) {
   const {
     dx,
@@ -10564,6 +10429,11 @@ function segmentBounce(start, stop, velocity) {
   velocity.x -= d * wallNormalX;
   velocity.y -= d * wallNormalY;
 }
+;// CONCATENATED MODULE: ./dist/browser/Plugins/PolygonMask/PolygonMaskInstance.js
+
+
+
+
 
 class PolygonMaskInstance {
   constructor(container) {
@@ -10577,16 +10447,14 @@ class PolygonMaskInstance {
     this.polygonMaskMoveRadius = this.options.move.radius * container.retina.pixelRatio;
   }
 
-  initAsync(options) {
-    return PolygonMaskInstance_awaiter(this, void 0, void 0, function* () {
-      this.options.load(options === null || options === void 0 ? void 0 : options.polygon);
-      const polygonMaskOptions = this.options;
-      this.polygonMaskMoveRadius = polygonMaskOptions.move.radius * this.container.retina.pixelRatio;
+  async initAsync(options) {
+    this.options.load(options === null || options === void 0 ? void 0 : options.polygon);
+    const polygonMaskOptions = this.options;
+    this.polygonMaskMoveRadius = polygonMaskOptions.move.radius * this.container.retina.pixelRatio;
 
-      if (polygonMaskOptions.enable) {
-        yield this.initRawData();
-      }
-    });
+    if (polygonMaskOptions.enable) {
+      await this.initRawData();
+    }
   }
 
   resize() {
@@ -10601,10 +10469,10 @@ class PolygonMaskInstance {
       clearTimeout(this.redrawTimeout);
     }
 
-    this.redrawTimeout = window.setTimeout(() => PolygonMaskInstance_awaiter(this, void 0, void 0, function* () {
-      yield this.initRawData(true);
+    this.redrawTimeout = window.setTimeout(async () => {
+      await this.initRawData(true);
       container.particles.redraw();
-    }), 250);
+    }, 250);
   }
 
   stop() {
@@ -10676,7 +10544,7 @@ class PolygonMaskInstance {
     }
   }
 
-  polygonBounce(particle, delta, direction) {
+  polygonBounce(particle, _delta, direction) {
     const options = this.options;
 
     if (!this.raw || !options.enable || direction !== OutModeDirection.top) {
@@ -10813,24 +10681,22 @@ class PolygonMaskInstance {
     return parsePaths(this.paths, scale, this.offset);
   }
 
-  downloadSvgPath(svgUrl, force) {
-    return PolygonMaskInstance_awaiter(this, void 0, void 0, function* () {
-      const options = this.options;
-      const url = svgUrl || options.url;
-      const forceDownload = force !== null && force !== void 0 ? force : false;
+  async downloadSvgPath(svgUrl, force) {
+    const options = this.options;
+    const url = svgUrl || options.url;
+    const forceDownload = force !== null && force !== void 0 ? force : false;
 
-      if (!url || this.paths !== undefined && !forceDownload) {
-        return this.raw;
-      }
+    if (!url || this.paths !== undefined && !forceDownload) {
+      return this.raw;
+    }
 
-      const req = yield fetch(url);
+    const req = await fetch(url);
 
-      if (!req.ok) {
-        throw new Error("tsParticles Error - Error occurred during polygon mask download");
-      }
+    if (!req.ok) {
+      throw new Error("tsParticles Error - Error occurred during polygon mask download");
+    }
 
-      return this.parseSvgPath(yield req.text(), force);
-    });
+    return this.parseSvgPath(await req.text(), force);
   }
 
   drawPoints() {
@@ -10999,29 +10865,27 @@ class PolygonMaskInstance {
     }
   }
 
-  initRawData(force) {
-    return PolygonMaskInstance_awaiter(this, void 0, void 0, function* () {
-      const options = this.options;
-
-      if (options.url) {
-        this.raw = yield this.downloadSvgPath(options.url, force);
-      } else if (options.data) {
-        const data = options.data;
-        let svg;
+  async initRawData(force) {
+    const options = this.options;
 
-        if (typeof data !== "string") {
-          const path = data.path instanceof Array ? data.path.map(t => `<path d="${t}" />`).join("") : `<path d="${data.path}" />`;
-          const namespaces = 'xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"';
-          svg = `<svg ${namespaces} width="${data.size.width}" height="${data.size.height}">${path}</svg>`;
-        } else {
-          svg = data;
-        }
+    if (options.url) {
+      this.raw = await this.downloadSvgPath(options.url, force);
+    } else if (options.data) {
+      const data = options.data;
+      let svg;
 
-        this.raw = this.parseSvgPath(svg, force);
+      if (typeof data !== "string") {
+        const path = data.path instanceof Array ? data.path.map(t => `<path d="${t}" />`).join("") : `<path d="${data.path}" />`;
+        const namespaces = 'xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"';
+        svg = `<svg ${namespaces} width="${data.size.width}" height="${data.size.height}">${path}</svg>`;
+      } else {
+        svg = data;
       }
 
-      this.createPath2D();
-    });
+      this.raw = this.parseSvgPath(svg, force);
+    }
+
+    this.createPath2D();
   }
 
 }
@@ -11062,7 +10926,11 @@ class plugin_Plugin {
 
 }
 
-function loadPolygonMaskPlugin(tsParticles) {
+async function loadPolygonMaskPlugin(tsParticles) {
+  if (!window.SVGPathSeg) {
+    await __webpack_require__.e(/* import() */ 167).then(__webpack_require__.t.bind(__webpack_require__, 167, 23));
+  }
+
   const plugin = new plugin_Plugin();
   tsParticles.addPlugin(plugin);
 }
@@ -11083,38 +10951,6 @@ function loadCircleShape(tsParticles) {
   tsParticles.addShape("circle", new CircleDrawer());
 }
 ;// CONCATENATED MODULE: ./dist/browser/Shapes/Image/Utils.js
-var Utils_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
 
 function loadImage(source) {
   return new Promise((resolve, reject) => {
@@ -11138,30 +10974,28 @@ function loadImage(source) {
     img.src = source;
   });
 }
-function downloadSvgImage(source) {
-  return Utils_awaiter(this, void 0, void 0, function* () {
-    if (!source) {
-      throw new Error("Error tsParticles - No image.src");
-    }
+async function downloadSvgImage(source) {
+  if (!source) {
+    throw new Error("Error tsParticles - No image.src");
+  }
 
-    const image = {
-      source: source,
-      type: source.substr(source.length - 3)
-    };
+  const image = {
+    source: source,
+    type: source.substr(source.length - 3)
+  };
 
-    if (image.type !== "svg") {
-      return loadImage(source);
-    }
+  if (image.type !== "svg") {
+    return loadImage(source);
+  }
 
-    const response = yield fetch(image.source);
+  const response = await fetch(image.source);
 
-    if (!response.ok) {
-      throw new Error("Error tsParticles - Image not found");
-    }
+  if (!response.ok) {
+    throw new Error("Error tsParticles - Image not found");
+  }
 
-    image.svgData = yield response.text();
-    return image;
-  });
+  image.svgData = await response.text();
+  return image;
 }
 function replaceColorSvg(imageShape, color, opacity) {
   const {
@@ -11181,38 +11015,6 @@ function replaceColorSvg(imageShape, color, opacity) {
   return `${svgData.substring(0, preFillIndex)} fill="${getStyleFromHsl(color, opacity)}"${svgData.substring(preFillIndex)}`;
 }
 ;// CONCATENATED MODULE: ./dist/browser/Shapes/Image/ImageDrawer.js
-var ImageDrawer_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
 var ImageDrawer_classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function (receiver, state, value, kind, f) {
   if (kind === "m") throw new TypeError("Private method is not writable");
   if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
@@ -11262,97 +11064,91 @@ class ImageDrawer {
     containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
   }
 
-  init(container) {
-    return ImageDrawer_awaiter(this, void 0, void 0, function* () {
-      yield this.loadImagesFromParticlesOptions(container, container.actualOptions.particles);
-      yield this.loadImagesFromParticlesOptions(container, container.actualOptions.interactivity.modes.trail.particles);
+  async init(container) {
+    await this.loadImagesFromParticlesOptions(container, container.actualOptions.particles);
+    await this.loadImagesFromParticlesOptions(container, container.actualOptions.interactivity.modes.trail.particles);
 
-      for (const manualParticle of container.actualOptions.manualParticles) {
-        yield this.loadImagesFromParticlesOptions(container, manualParticle.options);
-      }
+    for (const manualParticle of container.actualOptions.manualParticles) {
+      await this.loadImagesFromParticlesOptions(container, manualParticle.options);
+    }
 
-      const emitterOptions = container.actualOptions;
+    const emitterOptions = container.actualOptions;
 
-      if (emitterOptions.emitters) {
-        if (emitterOptions.emitters instanceof Array) {
-          for (const emitter of emitterOptions.emitters) {
-            yield this.loadImagesFromParticlesOptions(container, emitter.particles);
-          }
-        } else {
-          yield this.loadImagesFromParticlesOptions(container, emitterOptions.emitters.particles);
+    if (emitterOptions.emitters) {
+      if (emitterOptions.emitters instanceof Array) {
+        for (const emitter of emitterOptions.emitters) {
+          await this.loadImagesFromParticlesOptions(container, emitter.particles);
         }
+      } else {
+        await this.loadImagesFromParticlesOptions(container, emitterOptions.emitters.particles);
       }
+    }
 
-      const interactiveEmitters = emitterOptions.interactivity.modes.emitters;
+    const interactiveEmitters = emitterOptions.interactivity.modes.emitters;
 
-      if (interactiveEmitters) {
-        if (interactiveEmitters instanceof Array) {
-          for (const emitter of interactiveEmitters) {
-            yield this.loadImagesFromParticlesOptions(container, emitter.particles);
-          }
-        } else {
-          yield this.loadImagesFromParticlesOptions(container, interactiveEmitters.particles);
+    if (interactiveEmitters) {
+      if (interactiveEmitters instanceof Array) {
+        for (const emitter of interactiveEmitters) {
+          await this.loadImagesFromParticlesOptions(container, emitter.particles);
         }
+      } else {
+        await this.loadImagesFromParticlesOptions(container, interactiveEmitters.particles);
       }
-    });
+    }
   }
 
   destroy() {
     ImageDrawer_classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
   }
 
-  loadImagesFromParticlesOptions(container, options) {
+  async loadImagesFromParticlesOptions(container, options) {
     var _a, _b, _c;
 
-    return ImageDrawer_awaiter(this, void 0, void 0, function* () {
-      const shapeOptions = options === null || options === void 0 ? void 0 : options.shape;
+    const shapeOptions = options === null || options === void 0 ? void 0 : options.shape;
 
-      if (!(shapeOptions === null || shapeOptions === void 0 ? void 0 : shapeOptions.type) || !shapeOptions.options || !isInArray(ShapeType.image, shapeOptions.type) && !isInArray(ShapeType.images, shapeOptions.type)) {
-        return;
-      }
+    if (!(shapeOptions === null || shapeOptions === void 0 ? void 0 : shapeOptions.type) || !shapeOptions.options || !isInArray(ShapeType.image, shapeOptions.type) && !isInArray(ShapeType.images, shapeOptions.type)) {
+      return;
+    }
 
-      const idx = ImageDrawer_classPrivateFieldGet(this, _ImageDrawer_images, "f").findIndex(t => t.id === container.id);
+    const idx = ImageDrawer_classPrivateFieldGet(this, _ImageDrawer_images, "f").findIndex(t => t.id === container.id);
 
-      if (idx >= 0) {
-        ImageDrawer_classPrivateFieldGet(this, _ImageDrawer_images, "f").splice(idx, 1);
-      }
+    if (idx >= 0) {
+      ImageDrawer_classPrivateFieldGet(this, _ImageDrawer_images, "f").splice(idx, 1);
+    }
 
-      const imageOptions = (_a = shapeOptions.options[ShapeType.images]) !== null && _a !== void 0 ? _a : shapeOptions.options[ShapeType.image];
+    const imageOptions = (_a = shapeOptions.options[ShapeType.images]) !== null && _a !== void 0 ? _a : shapeOptions.options[ShapeType.image];
 
-      if (imageOptions instanceof Array) {
-        for (const optionsImage of imageOptions) {
-          yield this.loadImageShape(container, optionsImage);
-        }
-      } else {
-        yield this.loadImageShape(container, imageOptions);
+    if (imageOptions instanceof Array) {
+      for (const optionsImage of imageOptions) {
+        await this.loadImageShape(container, optionsImage);
       }
+    } else {
+      await this.loadImageShape(container, imageOptions);
+    }
 
-      if (options === null || options === void 0 ? void 0 : options.groups) {
-        for (const groupName in options.groups) {
-          const group = options.groups[groupName];
-          yield this.loadImagesFromParticlesOptions(container, group);
-        }
+    if (options === null || options === void 0 ? void 0 : options.groups) {
+      for (const groupName in options.groups) {
+        const group = options.groups[groupName];
+        await this.loadImagesFromParticlesOptions(container, group);
       }
+    }
 
-      if ((_c = (_b = options === null || options === void 0 ? void 0 : options.destroy) === null || _b === void 0 ? void 0 : _b.split) === null || _c === void 0 ? void 0 : _c.particles) {
-        yield this.loadImagesFromParticlesOptions(container, options === null || options === void 0 ? void 0 : options.destroy.split.particles);
-      }
-    });
+    if ((_c = (_b = options === null || options === void 0 ? void 0 : options.destroy) === null || _b === void 0 ? void 0 : _b.split) === null || _c === void 0 ? void 0 : _c.particles) {
+      await this.loadImagesFromParticlesOptions(container, options === null || options === void 0 ? void 0 : options.destroy.split.particles);
+    }
   }
 
-  loadImageShape(container, imageShape) {
-    return ImageDrawer_awaiter(this, void 0, void 0, function* () {
-      try {
-        const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
-        const image = yield imageFunc(imageShape.src);
+  async loadImageShape(container, imageShape) {
+    try {
+      const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
+      const image = await imageFunc(imageShape.src);
 
-        if (image) {
-          this.addImage(container, image);
-        }
-      } catch (_a) {
-        console.warn(`tsParticles error - ${imageShape.src} not found`);
+      if (image) {
+        this.addImage(container, image);
       }
-    });
+    } catch (_a) {
+      console.warn(`tsParticles error - ${imageShape.src} not found`);
+    }
   }
 
   draw(context, particle, radius, opacity) {
@@ -11387,7 +11183,7 @@ class ImageDrawer {
   }
 
   loadShape(particle) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
 
     if (particle.shape !== "image" && particle.shape !== "images") {
       return;
@@ -11404,7 +11200,7 @@ class ImageDrawer {
     }
 
     if (image.svgData !== undefined && imageData.replaceColor && color) {
-      const svgColoredData = replaceColorSvg(image, color, particle.opacity.value);
+      const svgColoredData = replaceColorSvg(image, color, (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1);
       const svg = new Blob([svgColoredData], {
         type: "image/svg+xml"
       });
@@ -11416,7 +11212,7 @@ class ImageDrawer {
           svgData: svgColoredData
         }),
         ratio: imageData.width / imageData.height,
-        replaceColor: (_b = imageData.replaceColor) !== null && _b !== void 0 ? _b : imageData.replace_color,
+        replaceColor: (_d = imageData.replaceColor) !== null && _d !== void 0 ? _d : imageData.replace_color,
         source: imageData.src
       };
       img.addEventListener("load", () => {
@@ -11446,7 +11242,7 @@ class ImageDrawer {
         data: image,
         loaded: true,
         ratio: imageData.width / imageData.height,
-        replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+        replaceColor: (_e = imageData.replaceColor) !== null && _e !== void 0 ? _e : imageData.replace_color,
         source: imageData.src
       };
     }
@@ -11455,8 +11251,8 @@ class ImageDrawer {
       imageRes.ratio = 1;
     }
 
-    const fill = (_d = imageData.fill) !== null && _d !== void 0 ? _d : particle.fill;
-    const close = (_e = imageData.close) !== null && _e !== void 0 ? _e : particle.close;
+    const fill = (_f = imageData.fill) !== null && _f !== void 0 ? _f : particle.fill;
+    const close = (_g = imageData.close) !== null && _g !== void 0 ? _g : particle.close;
     const imageShape = {
       image: imageRes,
       fill,
@@ -11641,38 +11437,6 @@ function loadStarShape(tsParticles) {
   tsParticles.addShape("star", new StarDrawer());
 }
 ;// CONCATENATED MODULE: ./dist/browser/Shapes/Text/TextDrawer.js
-var TextDrawer_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
 
 const validTypes = ["text", "character", "char"];
 class TextDrawer {
@@ -11680,28 +11444,26 @@ class TextDrawer {
     return 12;
   }
 
-  init(container) {
-    return TextDrawer_awaiter(this, void 0, void 0, function* () {
-      const options = container.actualOptions;
+  async init(container) {
+    const options = container.actualOptions;
 
-      if (validTypes.find(t => isInArray(t, options.particles.shape.type))) {
-        const shapeOptions = validTypes.map(t => options.particles.shape.options[t]).find(t => !!t);
+    if (validTypes.find(t => isInArray(t, options.particles.shape.type))) {
+      const shapeOptions = validTypes.map(t => options.particles.shape.options[t]).find(t => !!t);
 
-        if (shapeOptions instanceof Array) {
-          const promises = [];
+      if (shapeOptions instanceof Array) {
+        const promises = [];
 
-          for (const character of shapeOptions) {
-            promises.push(loadFont(character));
-          }
+        for (const character of shapeOptions) {
+          promises.push(loadFont(character));
+        }
 
-          yield Promise.allSettled(promises);
-        } else {
-          if (shapeOptions !== undefined) {
-            yield loadFont(shapeOptions);
-          }
+        await Promise.allSettled(promises);
+      } else {
+        if (shapeOptions !== undefined) {
+          await loadFont(shapeOptions);
         }
       }
-    });
+    }
   }
 
   draw(context, particle, radius, opacity) {
@@ -11761,34 +11523,41 @@ function loadTextShape(tsParticles) {
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Angle/AngleUpdater.js
 
 
+
 function updateAngle(particle, delta) {
   var _a;
 
-  const rotate = particle.options.rotate;
-  const rotateAnimation = rotate.animation;
-  const speed = ((_a = particle.rotate.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor;
+  const rotate = particle.rotate;
+
+  if (!rotate) {
+    return;
+  }
+
+  const rotateOptions = particle.options.rotate;
+  const rotateAnimation = rotateOptions.animation;
+  const speed = ((_a = rotate.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor;
   const max = 2 * Math.PI;
 
   if (!rotateAnimation.enable) {
     return;
   }
 
-  switch (particle.rotate.status) {
+  switch (rotate.status) {
     case AnimationStatus.increasing:
-      particle.rotate.value += speed;
+      rotate.value += speed;
 
-      if (particle.rotate.value > max) {
-        particle.rotate.value -= max;
+      if (rotate.value > max) {
+        rotate.value -= max;
       }
 
       break;
 
     case AnimationStatus.decreasing:
     default:
-      particle.rotate.value -= speed;
+      rotate.value -= speed;
 
-      if (particle.rotate.value < 0) {
-        particle.rotate.value += max;
+      if (rotate.value < 0) {
+        rotate.value += max;
       }
 
       break;
@@ -11796,6 +11565,45 @@ function updateAngle(particle, delta) {
 }
 
 class AngleUpdater {
+  constructor(container) {
+    this.container = container;
+  }
+
+  init(particle) {
+    const rotateOptions = particle.options.rotate;
+    particle.rotate = {
+      enable: rotateOptions.animation.enable,
+      value: getRangeValue(rotateOptions.value) * Math.PI / 180
+    };
+    let rotateDirection = rotateOptions.direction;
+
+    if (rotateDirection === RotateDirection.random) {
+      const index = Math.floor(Math.random() * 2);
+      rotateDirection = index > 0 ? RotateDirection.counterClockwise : RotateDirection.clockwise;
+    }
+
+    switch (rotateDirection) {
+      case RotateDirection.counterClockwise:
+      case "counterClockwise":
+        particle.rotate.status = AnimationStatus.decreasing;
+        break;
+
+      case RotateDirection.clockwise:
+        particle.rotate.status = AnimationStatus.increasing;
+        break;
+    }
+
+    const rotateAnimation = particle.options.rotate.animation;
+
+    if (rotateAnimation.enable) {
+      particle.rotate.velocity = rotateAnimation.speed / 360 * this.container.retina.reduceFactor;
+
+      if (!rotateAnimation.sync) {
+        particle.rotate.velocity *= Math.random();
+      }
+    }
+  }
+
   isEnabled(particle) {
     const rotate = particle.options.rotate;
     const rotateAnimation = rotate.animation;
@@ -11814,7 +11622,7 @@ class AngleUpdater {
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Angle/index.js
 
 function loadAngleUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("angle", () => new AngleUpdater());
+  tsParticles.addParticleUpdater("angle", container => new AngleUpdater(container));
 }
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Color/ColorUpdater.js
 
@@ -11872,6 +11680,18 @@ function updateColor(particle, delta) {
 }
 
 class ColorUpdater {
+  constructor(container) {
+    this.container = container;
+  }
+
+  init(particle) {
+    const hslColor = colorToHsl(particle.options.color, particle.id, particle.options.reduceDuplicates);
+
+    if (hslColor) {
+      particle.color = getHslAnimationFromHsl(hslColor, particle.options.color.animation, this.container.retina.reduceFactor);
+    }
+  }
+
   isEnabled(particle) {
     var _a, _b, _c;
 
@@ -11887,7 +11707,7 @@ class ColorUpdater {
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Color/index.js
 
 function loadColorUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("color", () => new ColorUpdater());
+  tsParticles.addParticleUpdater("color", container => new ColorUpdater(container));
 }
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Life/LifeUpdater.js
 
@@ -11896,6 +11716,8 @@ class LifeUpdater {
     this.container = container;
   }
 
+  init() {}
+
   isEnabled(particle) {
     return !particle.destroyed;
   }
@@ -11995,6 +11817,10 @@ function checkDestroy(particle, value, minValue, maxValue) {
 function updateOpacity(particle, delta) {
   var _a, _b, _c, _d, _e;
 
+  if (!particle.opacity) {
+    return;
+  }
+
   const minValue = particle.opacity.min;
   const maxValue = particle.opacity.max;
 
@@ -12042,10 +11868,58 @@ function updateOpacity(particle, delta) {
 }
 
 class OpacityUpdater {
+  constructor(container) {
+    this.container = container;
+  }
+
+  init(particle) {
+    const opacityOptions = particle.options.opacity;
+    particle.opacity = {
+      enable: opacityOptions.animation.enable,
+      max: getRangeMax(opacityOptions.value),
+      min: getRangeMin(opacityOptions.value),
+      value: getRangeValue(opacityOptions.value),
+      loops: 0,
+      maxLoops: opacityOptions.animation.count
+    };
+    const opacityAnimation = opacityOptions.animation;
+
+    if (opacityAnimation.enable) {
+      particle.opacity.status = AnimationStatus.increasing;
+      const opacityRange = opacityOptions.value;
+      particle.opacity.min = getRangeMin(opacityRange);
+      particle.opacity.max = getRangeMax(opacityRange);
+
+      switch (opacityAnimation.startValue) {
+        case StartValueType.min:
+          particle.opacity.value = particle.opacity.min;
+          particle.opacity.status = AnimationStatus.increasing;
+          break;
+
+        case StartValueType.random:
+          particle.opacity.value = randomInRange(particle.opacity);
+          particle.opacity.status = Math.random() >= 0.5 ? AnimationStatus.increasing : AnimationStatus.decreasing;
+          break;
+
+        case StartValueType.max:
+        default:
+          particle.opacity.value = particle.opacity.max;
+          particle.opacity.status = AnimationStatus.decreasing;
+          break;
+      }
+
+      particle.opacity.velocity = opacityAnimation.speed / 100 * this.container.retina.reduceFactor;
+
+      if (!opacityAnimation.sync) {
+        particle.opacity.velocity *= Math.random();
+      }
+    }
+  }
+
   isEnabled(particle) {
     var _a, _b, _c;
 
-    return !particle.destroyed && !particle.spawning && particle.opacity.enable && (((_a = particle.opacity.maxLoops) !== null && _a !== void 0 ? _a : 0) <= 0 || ((_b = particle.opacity.loops) !== null && _b !== void 0 ? _b : 0) < ((_c = particle.opacity.maxLoops) !== null && _c !== void 0 ? _c : 0));
+    return !particle.destroyed && !particle.spawning && !!particle.opacity && particle.opacity.enable && (((_a = particle.opacity.maxLoops) !== null && _a !== void 0 ? _a : 0) <= 0 || ((_b = particle.opacity.loops) !== null && _b !== void 0 ? _b : 0) < ((_c = particle.opacity.maxLoops) !== null && _c !== void 0 ? _c : 0));
   }
 
   update(particle, delta) {
@@ -12060,7 +11934,7 @@ class OpacityUpdater {
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Opacity/index.js
 
 function loadOpacityUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("opacity", () => new OpacityUpdater());
+  tsParticles.addParticleUpdater("opacity", container => new OpacityUpdater(container));
 }
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Size/SizeUpdater.js
 
@@ -12134,6 +12008,8 @@ function updateSize(particle, delta) {
 }
 
 class SizeUpdater {
+  init() {}
+
   isEnabled(particle) {
     var _a, _b, _c;
 
@@ -12192,26 +12068,26 @@ function StrokeColorUpdater_updateColorValue(delta, value, valueAnimation, max,
 }
 
 function updateStrokeColor(particle, delta) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
 
-  if (!particle.stroke.color) {
+  if (!((_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color)) {
     return;
   }
 
   const animationOptions = particle.stroke.color.animation;
-  const h = (_b = (_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h) !== null && _b !== void 0 ? _b : (_c = particle.color) === null || _c === void 0 ? void 0 : _c.h;
+  const h = (_c = (_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h) !== null && _c !== void 0 ? _c : (_d = particle.color) === null || _d === void 0 ? void 0 : _d.h;
 
   if (h) {
     StrokeColorUpdater_updateColorValue(delta, h, animationOptions.h, 360, false);
   }
 
-  const s = (_e = (_d = particle.strokeColor) === null || _d === void 0 ? void 0 : _d.s) !== null && _e !== void 0 ? _e : (_f = particle.color) === null || _f === void 0 ? void 0 : _f.s;
+  const s = (_f = (_e = particle.strokeColor) === null || _e === void 0 ? void 0 : _e.s) !== null && _f !== void 0 ? _f : (_g = particle.color) === null || _g === void 0 ? void 0 : _g.s;
 
   if (s) {
     StrokeColorUpdater_updateColorValue(delta, s, animationOptions.s, 100, true);
   }
 
-  const l = (_h = (_g = particle.strokeColor) === null || _g === void 0 ? void 0 : _g.l) !== null && _h !== void 0 ? _h : (_j = particle.color) === null || _j === void 0 ? void 0 : _j.l;
+  const l = (_j = (_h = particle.strokeColor) === null || _h === void 0 ? void 0 : _h.l) !== null && _j !== void 0 ? _j : (_k = particle.color) === null || _k === void 0 ? void 0 : _k.l;
 
   if (l) {
     StrokeColorUpdater_updateColorValue(delta, l, animationOptions.l, 100, true);
@@ -12219,11 +12095,28 @@ function updateStrokeColor(particle, delta) {
 }
 
 class StrokeColorUpdater {
+  constructor(container) {
+    this.container = container;
+  }
+
+  init(particle) {
+    var _a, _b;
+
+    const container = this.container;
+    particle.stroke = particle.options.stroke instanceof Array ? itemFromArray(particle.options.stroke, particle.id, particle.options.reduceDuplicates) : particle.options.stroke;
+    particle.strokeWidth = particle.stroke.width * container.retina.pixelRatio;
+    const strokeHslColor = (_a = colorToHsl(particle.stroke.color)) !== null && _a !== void 0 ? _a : particle.getFillColor();
+
+    if (strokeHslColor) {
+      particle.strokeColor = getHslAnimationFromHsl(strokeHslColor, (_b = particle.stroke.color) === null || _b === void 0 ? void 0 : _b.animation, container.retina.reduceFactor);
+    }
+  }
+
   isEnabled(particle) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
 
-    const color = particle.stroke.color;
-    return !particle.destroyed && !particle.spawning && color !== undefined && (((_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h.value) !== undefined && color.animation.h.enable || ((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.s.value) !== undefined && color.animation.s.enable || ((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.l.value) !== undefined && color.animation.l.enable);
+    const color = (_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color;
+    return !particle.destroyed && !particle.spawning && !!color && (((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h.value) !== undefined && color.animation.h.enable || ((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.s.value) !== undefined && color.animation.s.enable || ((_d = particle.strokeColor) === null || _d === void 0 ? void 0 : _d.l.value) !== undefined && color.animation.l.enable);
   }
 
   update(particle, delta) {
@@ -12238,7 +12131,7 @@ class StrokeColorUpdater {
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/StrokeColor/index.js
 
 function loadStrokeColorUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("strokeColor", () => new StrokeColorUpdater());
+  tsParticles.addParticleUpdater("strokeColor", container => new StrokeColorUpdater(container));
 }
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/OutModes/Utils.js
 
@@ -12310,6 +12203,8 @@ class OutOfCanvasUpdater {
     this.container = container;
   }
 
+  init() {}
+
   isEnabled(particle) {
     return !particle.destroyed && !particle.spawning;
   }
@@ -12492,23 +12387,62 @@ function loadOutModesUpdater(tsParticles) {
   tsParticles.addParticleUpdater("outModes", container => new OutOfCanvasUpdater(container));
 }
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Roll/RollUpdater.js
+
+
+
 function updateRoll(particle, delta) {
   const roll = particle.options.roll;
-  const speed = particle.rollSpeed * delta.factor;
-  const max = 2 * Math.PI;
 
-  if (!roll.enable) {
+  if (!particle.roll || !roll.enable) {
     return;
   }
 
-  particle.rollAngle += speed;
+  const speed = particle.roll.speed * delta.factor;
+  const max = 2 * Math.PI;
+  particle.roll.angle += speed;
 
-  if (particle.rollAngle > max) {
-    particle.rollAngle -= max;
+  if (particle.roll.angle > max) {
+    particle.roll.angle -= max;
   }
 }
 
 class RollUpdater {
+  init(particle) {
+    const rollOpt = particle.options.roll;
+
+    if (rollOpt.enable) {
+      particle.roll = {
+        angle: Math.random() * Math.PI * 2,
+        speed: getRangeValue(rollOpt.speed) / 360
+      };
+
+      if (rollOpt.backColor) {
+        particle.backColor = colorToHsl(rollOpt.backColor);
+      } else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
+        const alterType = Math.random() >= 0.5 ? AlterType.darken : AlterType.enlighten;
+        particle.roll.alter = {
+          type: alterType,
+          value: alterType === AlterType.darken ? rollOpt.darken.value : rollOpt.enlighten.value
+        };
+      } else if (rollOpt.darken.enable) {
+        particle.roll.alter = {
+          type: AlterType.darken,
+          value: rollOpt.darken.value
+        };
+      } else if (rollOpt.enlighten.enable) {
+        particle.roll.alter = {
+          type: AlterType.enlighten,
+          value: rollOpt.enlighten.value
+        };
+      }
+    } else {
+      particle.roll = {
+        angle: 0,
+        speed: 0
+      };
+    }
+  }
+
   isEnabled(particle) {
     const roll = particle.options.roll;
     return !particle.destroyed && !particle.spawning && roll.enable;
@@ -12531,9 +12465,14 @@ function loadRollUpdater(tsParticles) {
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Tilt/TiltUpdater.js
 
 
+
 function updateTilt(particle, delta) {
   var _a;
 
+  if (!particle.tilt) {
+    return;
+  }
+
   const tilt = particle.options.tilt;
   const tiltAnimation = tilt.animation;
   const speed = ((_a = particle.tilt.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor;
@@ -12566,6 +12505,47 @@ function updateTilt(particle, delta) {
 }
 
 class TiltUpdater {
+  constructor(container) {
+    this.container = container;
+  }
+
+  init(particle) {
+    const tiltOptions = particle.options.tilt;
+    particle.tilt = {
+      enable: tiltOptions.enable,
+      value: getRangeValue(tiltOptions.value) * Math.PI / 180,
+      sinDirection: Math.random() >= 0.5 ? 1 : -1,
+      cosDirection: Math.random() >= 0.5 ? 1 : -1
+    };
+    let tiltDirection = tiltOptions.direction;
+
+    if (tiltDirection === TiltDirection.random) {
+      const index = Math.floor(Math.random() * 2);
+      tiltDirection = index > 0 ? TiltDirection.counterClockwise : TiltDirection.clockwise;
+    }
+
+    switch (tiltDirection) {
+      case TiltDirection.counterClockwise:
+      case "counterClockwise":
+        particle.tilt.status = AnimationStatus.decreasing;
+        break;
+
+      case TiltDirection.clockwise:
+        particle.tilt.status = AnimationStatus.increasing;
+        break;
+    }
+
+    const tiltAnimation = particle.options.tilt.animation;
+
+    if (tiltAnimation.enable) {
+      particle.tilt.velocity = tiltAnimation.speed / 360 * this.container.retina.reduceFactor;
+
+      if (!tiltAnimation.sync) {
+        particle.tilt.velocity *= Math.random();
+      }
+    }
+  }
+
   isEnabled(particle) {
     const tilt = particle.options.tilt;
     const tiltAnimation = tilt.animation;
@@ -12584,33 +12564,58 @@ class TiltUpdater {
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Tilt/index.js
 
 function loadTiltUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("tilt", () => new TiltUpdater());
+  tsParticles.addParticleUpdater("tilt", container => new TiltUpdater(container));
 }
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Wobble/WobbleUpdater.js
+
+
 function updateWobble(particle, delta) {
+  var _a;
+
   const wobble = particle.options.wobble;
-  const speed = particle.wobbleSpeed * delta.factor;
-  const distance = particle.wobbleDistance * delta.factor / (1000 / 60);
-  const max = 2 * Math.PI;
 
-  if (!wobble.enable) {
+  if (!wobble.enable || !particle.wobble) {
     return;
   }
 
-  particle.wobbleAngle += speed;
+  const speed = particle.wobble.speed * delta.factor;
+  const distance = ((_a = particle.retina.wobbleDistance) !== null && _a !== void 0 ? _a : 0) * delta.factor / (1000 / 60);
+  const max = 2 * Math.PI;
+  particle.wobble.angle += speed;
 
-  if (particle.wobbleAngle > max) {
-    particle.wobbleAngle -= max;
+  if (particle.wobble.angle > max) {
+    particle.wobble.angle -= max;
   }
 
-  particle.position.x += distance * Math.cos(particle.wobbleAngle);
-  particle.position.y += distance * Math.abs(Math.sin(particle.wobbleAngle));
+  particle.position.x += distance * Math.cos(particle.wobble.angle);
+  particle.position.y += distance * Math.abs(Math.sin(particle.wobble.angle));
 }
 
 class WobbleUpdater {
+  constructor(container) {
+    this.container = container;
+  }
+
+  init(particle) {
+    const wobbleOpt = particle.options.wobble;
+
+    if (wobbleOpt.enable) {
+      particle.wobble = {
+        angle: Math.random() * Math.PI * 2,
+        speed: getRangeValue(wobbleOpt.speed) / 360
+      };
+    } else {
+      particle.wobble = {
+        angle: 0,
+        speed: 0
+      };
+    }
+
+    particle.retina.wobbleDistance = getRangeValue(wobbleOpt.distance) * this.container.retina.pixelRatio;
+  }
+
   isEnabled(particle) {
-    const wobble = particle.options.wobble;
-    return !particle.destroyed && !particle.spawning && wobble.enable;
+    return !particle.destroyed && !particle.spawning && particle.options.wobble.enable;
   }
 
   update(particle, delta) {
@@ -12625,7 +12630,7 @@ class WobbleUpdater {
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Wobble/index.js
 
 function loadWobbleUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("wobble", () => new WobbleUpdater());
+  tsParticles.addParticleUpdater("wobble", container => new WobbleUpdater(container));
 }
 ;// CONCATENATED MODULE: ./dist/browser/Core/ExternalInteractorBase.js
 
@@ -12826,7 +12831,7 @@ class Bouncer extends ExternalInteractorBase {
         circleBounce(circleBounceDataFromParticle(particle), {
           position,
           radius,
-          mass: Math.pow(radius, 2) * Math.PI / 2,
+          mass: radius ** 2 * Math.PI / 2,
           velocity: Vector.origin,
           factor: Vector.origin
         });
@@ -13015,6 +13020,8 @@ class Bubbler extends ExternalInteractorBase {
   }
 
   clickBubble() {
+    var _a, _b;
+
     const container = this.container,
           options = container.actualOptions,
           mouseClickPos = container.interactivity.mouse.clickPosition;
@@ -13064,7 +13071,7 @@ class Bubbler extends ExternalInteractorBase {
         },
         particlesObj: {
           optValue: getRangeMax(particle.options.opacity.value),
-          value: particle.opacity.value
+          value: (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1
         },
         type: ProcessBubbleType.opacity
       };
@@ -13133,7 +13140,7 @@ class Bubbler extends ExternalInteractorBase {
   }
 
   hoverBubbleOpacity(particle, ratio, divBubble) {
-    var _a;
+    var _a, _b, _c;
 
     const container = this.container,
           options = container.actualOptions,
@@ -13144,7 +13151,7 @@ class Bubbler extends ExternalInteractorBase {
     }
 
     const optOpacity = particle.options.opacity.value;
-    const pOpacity = particle.opacity.value;
+    const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
     const opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
 
     if (opacity !== undefined) {
@@ -13459,7 +13466,7 @@ class Repulser extends ExternalInteractorBase {
           dy,
           distance
         } = getDistances(mouseClickPos, particle.position),
-              d = Math.pow(distance, 2),
+              d = distance ** 2,
               velocity = container.actualOptions.interactivity.modes.repulse.speed,
               force = -repulseRadius * velocity / d;
 
@@ -13576,7 +13583,7 @@ class Attractor_Attractor extends ParticlesInteractorBase {
     var _a;
 
     const container = this.container,
-          distance = (_a = p1.attractDistance) !== null && _a !== void 0 ? _a : container.retina.attractDistance,
+          distance = (_a = p1.retina.attractDistance) !== null && _a !== void 0 ? _a : container.retina.attractDistance,
           pos1 = p1.getPosition(),
           query = container.particles.quadTree.queryCircle(pos1, distance);
 
@@ -13802,7 +13809,7 @@ class Linker extends ParticlesInteractorBase {
 
     const linkOpt1 = p1.options.links;
     const optOpacity = linkOpt1.opacity;
-    const optDistance = (_a = p1.linksDistance) !== null && _a !== void 0 ? _a : container.retina.linksDistance;
+    const optDistance = (_a = p1.retina.linksDistance) !== null && _a !== void 0 ? _a : container.retina.linksDistance;
     const warp = linkOpt1.warp;
     const range = warp ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize) : new Circle(pos1.x, pos1.y, optDistance);
     const query = container.particles.quadTree.query(range);
@@ -13988,8 +13995,8 @@ class LinkInstance {
         return;
       }
 
-      const width = (_a = p1.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth;
-      const maxDistance = (_b = p1.linksDistance) !== null && _b !== void 0 ? _b : container.retina.linksDistance;
+      const width = (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth;
+      const maxDistance = (_b = p1.retina.linksDistance) !== null && _b !== void 0 ? _b : container.retina.linksDistance;
       drawLinkLine(ctx, width, pos1, pos2, maxDistance, container.canvas.size, p1.options.links.warp, options.backgroundMask.enable, options.backgroundMask.composite, colorLine, opacity, p1.options.links.shadow);
     });
   }
@@ -14102,10 +14109,6 @@ function loadFull(tsParticles) {
 
 
 
-
-
-
-
 const tsParticles = new Main();
 tsParticles.init();
 loadFull(tsParticles);
@@ -14126,6 +14129,10 @@ const {
 
 
 
+
+
+
+
 /******/ 	return __webpack_exports__;
 /******/ })()
 ;