@tsparticles/plugin-emitters 3.1.0 → 3.2.1

package/cjs/index.js

@@ -10,112 +10,34 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadEmittersPlugin = void 0;
-const engine_1 = require("@tsparticles/engine");
-const Emitter_js_1 = require("./Options/Classes/Emitter.js");
-const Emitters_js_1 = require("./Emitters.js");
-const ShapeManager_js_1 = require("./ShapeManager.js");
-class EmittersPlugin {
-    constructor(engine) {
-        this._engine = engine;
-        this.id = "emitters";
-    }
-    getPlugin(container) {
-        return new Emitters_js_1.Emitters(this._engine, container);
-    }
-    loadOptions(options, source) {
-        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
-            return;
-        }
-        if (source?.emitters) {
-            options.emitters = (0, engine_1.executeOnSingleOrMultiple)(source.emitters, (emitter) => {
-                const tmp = new Emitter_js_1.Emitter();
-                tmp.load(emitter);
-                return tmp;
-            });
-        }
-        const interactivityEmitters = source?.interactivity?.modes?.emitters;
-        if (interactivityEmitters) {
-            if ((0, engine_1.isArray)(interactivityEmitters)) {
-                options.interactivity.modes.emitters = {
-                    random: {
-                        count: 1,
-                        enable: true,
-                    },
-                    value: interactivityEmitters.map((s) => {
-                        const tmp = new Emitter_js_1.Emitter();
-                        tmp.load(s);
-                        return tmp;
-                    }),
-                };
-            }
-            else {
-                const emitterMode = interactivityEmitters;
-                if (emitterMode.value !== undefined) {
-                    const defaultCount = 1;
-                    if ((0, engine_1.isArray)(emitterMode.value)) {
-                        options.interactivity.modes.emitters = {
-                            random: {
-                                count: emitterMode.random.count ?? defaultCount,
-                                enable: emitterMode.random.enable ?? false,
-                            },
-                            value: emitterMode.value.map((s) => {
-                                const tmp = new Emitter_js_1.Emitter();
-                                tmp.load(s);
-                                return tmp;
-                            }),
-                        };
-                    }
-                    else {
-                        const tmp = new Emitter_js_1.Emitter();
-                        tmp.load(emitterMode.value);
-                        options.interactivity.modes.emitters = {
-                            random: {
-                                count: emitterMode.random.count ?? defaultCount,
-                                enable: emitterMode.random.enable ?? false,
-                            },
-                            value: tmp,
-                        };
-                    }
-                }
-                else {
-                    const emitterOptions = (options.interactivity.modes.emitters = {
-                        random: {
-                            count: 1,
-                            enable: false,
-                        },
-                        value: new Emitter_js_1.Emitter(),
-                    });
-                    emitterOptions.value.load(interactivityEmitters);
-                }
-            }
-        }
-    }
-    needsPlugin(options) {
-        if (!options) {
-            return false;
-        }
-        const emitters = options.emitters;
-        return (((0, engine_1.isArray)(emitters) && !!emitters.length) ||
-            emitters !== undefined ||
-            (!!options.interactivity?.events?.onClick?.mode &&
-                (0, engine_1.isInArray)("emitter", options.interactivity.events.onClick.mode)));
-    }
-}
 async function loadEmittersPlugin(engine, refresh = true) {
     if (!engine.emitterShapeManager) {
-        engine.emitterShapeManager = new ShapeManager_js_1.ShapeManager(engine);
+        const { ShapeManager } = await Promise.resolve().then(() => __importStar(require("./ShapeManager.js")));
+        engine.emitterShapeManager = new ShapeManager(engine);
     }
     if (!engine.addEmitterShapeGenerator) {
         engine.addEmitterShapeGenerator = (name, generator) => {
             engine.emitterShapeManager?.addShapeGenerator(name, generator);
         };
     }
-    const plugin = new EmittersPlugin(engine);
+    const { EmittersPlugin } = await Promise.resolve().then(() => __importStar(require("./EmittersPlugin.js"))), plugin = new EmittersPlugin(engine);
     await engine.addPlugin(plugin, refresh);
 }
 exports.loadEmittersPlugin = loadEmittersPlugin;

package/dist_browser_EmitterInstance_js.js

@@ -0,0 +1,30 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v3.2.1
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_plugin_emitters"] = this["webpackChunk_tsparticles_plugin_emitters"] || []).push([["dist_browser_EmitterInstance_js"],{
+
+/***/ "./dist/browser/EmitterInstance.js":
+/*!*****************************************!*\
+  !*** ./dist/browser/EmitterInstance.js ***!
+  \*****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmitterInstance: () => (/* binding */ EmitterInstance)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Options_Classes_Emitter_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Options/Classes/Emitter.js */ \"./dist/browser/Options/Classes/Emitter.js\");\n/* harmony import */ var _Options_Classes_EmitterSize_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/EmitterSize.js */ \"./dist/browser/Options/Classes/EmitterSize.js\");\n\n\n\nconst half = 0.5,\n  defaultLifeDelay = 0,\n  minLifeCount = 0,\n  defaultSpawnDelay = 0,\n  defaultEmitDelay = 0,\n  defaultLifeCount = -1,\n  defaultColorAnimationFactor = 1;\nfunction setParticlesOptionsColor(particlesOptions, color) {\n  if (particlesOptions.color) {\n    particlesOptions.color.value = color;\n  } else {\n    particlesOptions.color = {\n      value: color\n    };\n  }\n}\nclass EmitterInstance {\n  constructor(engine, emitters, container, options, position) {\n    this.emitters = emitters;\n    this.container = container;\n    this._destroy = () => {\n      this._mutationObserver?.disconnect();\n      this._mutationObserver = undefined;\n      this._resizeObserver?.disconnect();\n      this._resizeObserver = undefined;\n      this.emitters.removeEmitter(this);\n      this._engine.dispatchEvent(\"emitterDestroyed\", {\n        container: this.container,\n        data: {\n          emitter: this\n        }\n      });\n    };\n    this._prepareToDie = () => {\n      if (this._paused) {\n        return;\n      }\n      const duration = this.options.life?.duration !== undefined ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(this.options.life.duration) : undefined,\n        minDuration = 0,\n        minLifeCount = 0;\n      if (this.container.retina.reduceFactor && (this._lifeCount > minLifeCount || this._immortal) && duration !== undefined && duration > minDuration) {\n        this._duration = duration * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds;\n      }\n    };\n    this._setColorAnimation = (animation, initValue, maxValue, factor = defaultColorAnimationFactor) => {\n      const container = this.container;\n      if (!animation.enable) {\n        return initValue;\n      }\n      const colorOffset = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRange)(animation.offset),\n        delay = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(this.options.rate.delay),\n        emitFactor = delay * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds / container.retina.reduceFactor,\n        defaultColorSpeed = 0,\n        colorSpeed = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(animation.speed ?? defaultColorSpeed);\n      return (initValue + colorSpeed * container.fpsLimit / emitFactor + colorOffset * factor) % maxValue;\n    };\n    this._engine = engine;\n    this._currentDuration = 0;\n    this._currentEmitDelay = 0;\n    this._currentSpawnDelay = 0;\n    this._initialPosition = position;\n    if (options instanceof _Options_Classes_Emitter_js__WEBPACK_IMPORTED_MODULE_1__.Emitter) {\n      this.options = options;\n    } else {\n      this.options = new _Options_Classes_Emitter_js__WEBPACK_IMPORTED_MODULE_1__.Emitter();\n      this.options.load(options);\n    }\n    this._spawnDelay = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(this.options.life.delay ?? defaultLifeDelay) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds / this.container.retina.reduceFactor;\n    this.position = this._initialPosition ?? this._calcPosition();\n    this.name = this.options.name;\n    this.fill = this.options.fill;\n    this._firstSpawn = !this.options.life.wait;\n    this._startParticlesAdded = false;\n    let particlesOptions = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, this.options.particles);\n    particlesOptions ??= {};\n    particlesOptions.move ??= {};\n    particlesOptions.move.direction ??= this.options.direction;\n    if (this.options.spawnColor) {\n      this.spawnColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToHsl)(this.options.spawnColor);\n    }\n    this._paused = !this.options.autoPlay;\n    this._particlesOptions = particlesOptions;\n    this._size = this._calcSize();\n    this.size = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getSize)(this._size, this.container.canvas.size);\n    this._lifeCount = this.options.life.count ?? defaultLifeCount;\n    this._immortal = this._lifeCount <= minLifeCount;\n    if (this.options.domId) {\n      const element = document.getElementById(this.options.domId);\n      if (element) {\n        this._mutationObserver = new MutationObserver(() => {\n          this.resize();\n        });\n        this._resizeObserver = new ResizeObserver(() => {\n          this.resize();\n        });\n        this._mutationObserver.observe(element, {\n          attributes: true,\n          attributeFilter: [\"style\", \"width\", \"height\"]\n        });\n        this._resizeObserver.observe(element);\n      }\n    }\n    const shapeOptions = this.options.shape,\n      shapeGenerator = this._engine.emitterShapeManager?.getShapeGenerator(shapeOptions.type);\n    if (shapeGenerator) {\n      this._shape = shapeGenerator.generate(this.position, this.size, this.fill, shapeOptions.options);\n    }\n    this._engine.dispatchEvent(\"emitterCreated\", {\n      container,\n      data: {\n        emitter: this\n      }\n    });\n    this.play();\n  }\n  externalPause() {\n    this._paused = true;\n    this.pause();\n  }\n  externalPlay() {\n    this._paused = false;\n    this.play();\n  }\n  async init() {\n    await this._shape?.init();\n  }\n  pause() {\n    if (this._paused) {\n      return;\n    }\n    delete this._emitDelay;\n  }\n  play() {\n    if (this._paused) {\n      return;\n    }\n    if (!(this.container.retina.reduceFactor && (this._lifeCount > minLifeCount || this._immortal || !this.options.life.count) && (this._firstSpawn || this._currentSpawnDelay >= (this._spawnDelay ?? defaultSpawnDelay)))) {\n      return;\n    }\n    if (this._emitDelay === undefined) {\n      const delay = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(this.options.rate.delay);\n      this._emitDelay = delay * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds / this.container.retina.reduceFactor;\n    }\n    if (this._lifeCount > minLifeCount || this._immortal) {\n      this._prepareToDie();\n    }\n  }\n  resize() {\n    const initialPosition = this._initialPosition;\n    this.position = initialPosition && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isPointInside)(initialPosition, this.container.canvas.size, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Vector.origin) ? initialPosition : this._calcPosition();\n    this._size = this._calcSize();\n    this.size = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getSize)(this._size, this.container.canvas.size);\n    this._shape?.resize(this.position, this.size);\n  }\n  async update(delta) {\n    if (this._paused) {\n      return;\n    }\n    if (this._firstSpawn) {\n      this._firstSpawn = false;\n      this._currentSpawnDelay = this._spawnDelay ?? defaultSpawnDelay;\n      this._currentEmitDelay = this._emitDelay ?? defaultEmitDelay;\n    }\n    if (!this._startParticlesAdded) {\n      this._startParticlesAdded = true;\n      await this._emitParticles(this.options.startCount);\n    }\n    if (this._duration !== undefined) {\n      this._currentDuration += delta.value;\n      if (this._currentDuration >= this._duration) {\n        this.pause();\n        if (this._spawnDelay !== undefined) {\n          delete this._spawnDelay;\n        }\n        if (!this._immortal) {\n          this._lifeCount--;\n        }\n        if (this._lifeCount > minLifeCount || this._immortal) {\n          this.position = this._calcPosition();\n          this._shape?.resize(this.position, this.size);\n          this._spawnDelay = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(this.options.life.delay ?? defaultLifeDelay) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds / this.container.retina.reduceFactor;\n        } else {\n          this._destroy();\n        }\n        this._currentDuration -= this._duration;\n        delete this._duration;\n      }\n    }\n    if (this._spawnDelay !== undefined) {\n      this._currentSpawnDelay += delta.value;\n      if (this._currentSpawnDelay >= this._spawnDelay) {\n        this._engine.dispatchEvent(\"emitterPlay\", {\n          container: this.container\n        });\n        this.play();\n        this._currentSpawnDelay -= this._currentSpawnDelay;\n        delete this._spawnDelay;\n      }\n    }\n    if (this._emitDelay !== undefined) {\n      this._currentEmitDelay += delta.value;\n      if (this._currentEmitDelay >= this._emitDelay) {\n        await this._emit();\n        this._currentEmitDelay -= this._emitDelay;\n      }\n    }\n  }\n  _calcPosition() {\n    if (this.options.domId) {\n      const element = document.getElementById(this.options.domId);\n      if (element) {\n        const elRect = element.getBoundingClientRect(),\n          pxRatio = this.container.retina.pixelRatio;\n        return {\n          x: (elRect.x + elRect.width * half) * pxRatio,\n          y: (elRect.y + elRect.height * half) * pxRatio\n        };\n      }\n    }\n    return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.calcPositionOrRandomFromSizeRanged)({\n      size: this.container.canvas.size,\n      position: this.options.position\n    });\n  }\n  _calcSize() {\n    const container = this.container;\n    if (this.options.domId) {\n      const element = document.getElementById(this.options.domId);\n      if (element) {\n        const elRect = element.getBoundingClientRect();\n        return {\n          width: elRect.width * container.retina.pixelRatio,\n          height: elRect.height * container.retina.pixelRatio,\n          mode: \"precise\"\n        };\n      }\n    }\n    return this.options.size ?? (() => {\n      const size = new _Options_Classes_EmitterSize_js__WEBPACK_IMPORTED_MODULE_2__.EmitterSize();\n      size.load({\n        height: 0,\n        mode: \"percent\",\n        width: 0\n      });\n      return size;\n    })();\n  }\n  async _emit() {\n    if (this._paused) {\n      return;\n    }\n    const quantity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(this.options.rate.quantity);\n    await this._emitParticles(quantity);\n  }\n  async _emitParticles(quantity) {\n    const singleParticlesOptions = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(this._particlesOptions);\n    for (let i = 0; i < quantity; i++) {\n      const particlesOptions = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, singleParticlesOptions);\n      if (this.spawnColor) {\n        const hslAnimation = this.options.spawnColor?.animation;\n        if (hslAnimation) {\n          const maxValues = {\n              h: 360,\n              s: 100,\n              l: 100\n            },\n            colorFactor = 3.6;\n          this.spawnColor.h = this._setColorAnimation(hslAnimation.h, this.spawnColor.h, maxValues.h, colorFactor);\n          this.spawnColor.s = this._setColorAnimation(hslAnimation.s, this.spawnColor.s, maxValues.s);\n          this.spawnColor.l = this._setColorAnimation(hslAnimation.l, this.spawnColor.l, maxValues.l);\n        }\n        setParticlesOptionsColor(particlesOptions, this.spawnColor);\n      }\n      const shapeOptions = this.options.shape;\n      let position = this.position;\n      if (this._shape) {\n        const shapePosData = await this._shape.randomPosition();\n        if (shapePosData) {\n          position = shapePosData.position;\n          const replaceData = shapeOptions.replace;\n          if (replaceData.color && shapePosData.color) {\n            setParticlesOptionsColor(particlesOptions, shapePosData.color);\n          }\n          if (replaceData.opacity) {\n            if (particlesOptions.opacity) {\n              particlesOptions.opacity.value = shapePosData.opacity;\n            } else {\n              particlesOptions.opacity = {\n                value: shapePosData.opacity\n              };\n            }\n          }\n        } else {\n          position = null;\n        }\n      }\n      if (position) {\n        await this.container.particles.addParticle(position, particlesOptions);\n      }\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters/./dist/browser/EmitterInstance.js?");
+
+/***/ })
+
+}]);

package/dist_browser_EmittersPlugin_js.js

@@ -0,0 +1,90 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v3.2.1
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_plugin_emitters"] = this["webpackChunk_tsparticles_plugin_emitters"] || []).push([["dist_browser_EmittersPlugin_js"],{
+
+/***/ "./dist/browser/EmittersPlugin.js":
+/*!****************************************!*\
+  !*** ./dist/browser/EmittersPlugin.js ***!
+  \****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmittersPlugin: () => (/* binding */ EmittersPlugin)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Options_Classes_Emitter_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Options/Classes/Emitter.js */ \"./dist/browser/Options/Classes/Emitter.js\");\n\n\nclass EmittersPlugin {\n  constructor(engine) {\n    this._engine = engine;\n    this.id = \"emitters\";\n  }\n  async getPlugin(container) {\n    const {\n      Emitters\n    } = await __webpack_require__.e(/*! import() */ \"dist_browser_Emitters_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Emitters.js */ \"./dist/browser/Emitters.js\"));\n    return new Emitters(this._engine, container);\n  }\n  loadOptions(options, source) {\n    if (!this.needsPlugin(options) && !this.needsPlugin(source)) {\n      return;\n    }\n    if (source?.emitters) {\n      options.emitters = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(source.emitters, emitter => {\n        const tmp = new _Options_Classes_Emitter_js__WEBPACK_IMPORTED_MODULE_1__.Emitter();\n        tmp.load(emitter);\n        return tmp;\n      });\n    }\n    const interactivityEmitters = source?.interactivity?.modes?.emitters;\n    if (interactivityEmitters) {\n      if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isArray)(interactivityEmitters)) {\n        options.interactivity.modes.emitters = {\n          random: {\n            count: 1,\n            enable: true\n          },\n          value: interactivityEmitters.map(s => {\n            const tmp = new _Options_Classes_Emitter_js__WEBPACK_IMPORTED_MODULE_1__.Emitter();\n            tmp.load(s);\n            return tmp;\n          })\n        };\n      } else {\n        const emitterMode = interactivityEmitters;\n        if (emitterMode.value !== undefined) {\n          const defaultCount = 1;\n          if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isArray)(emitterMode.value)) {\n            options.interactivity.modes.emitters = {\n              random: {\n                count: emitterMode.random.count ?? defaultCount,\n                enable: emitterMode.random.enable ?? false\n              },\n              value: emitterMode.value.map(s => {\n                const tmp = new _Options_Classes_Emitter_js__WEBPACK_IMPORTED_MODULE_1__.Emitter();\n                tmp.load(s);\n                return tmp;\n              })\n            };\n          } else {\n            const tmp = new _Options_Classes_Emitter_js__WEBPACK_IMPORTED_MODULE_1__.Emitter();\n            tmp.load(emitterMode.value);\n            options.interactivity.modes.emitters = {\n              random: {\n                count: emitterMode.random.count ?? defaultCount,\n                enable: emitterMode.random.enable ?? false\n              },\n              value: tmp\n            };\n          }\n        } else {\n          const emitterOptions = options.interactivity.modes.emitters = {\n            random: {\n              count: 1,\n              enable: false\n            },\n            value: new _Options_Classes_Emitter_js__WEBPACK_IMPORTED_MODULE_1__.Emitter()\n          };\n          emitterOptions.value.load(interactivityEmitters);\n        }\n      }\n    }\n  }\n  needsPlugin(options) {\n    if (!options) {\n      return false;\n    }\n    const emitters = options.emitters;\n    return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isArray)(emitters) && !!emitters.length || emitters !== undefined || !!options.interactivity?.events?.onClick?.mode && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(\"emitter\", options.interactivity.events.onClick.mode);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters/./dist/browser/EmittersPlugin.js?");
+
+/***/ }),
+
+/***/ "./dist/browser/Options/Classes/Emitter.js":
+/*!*************************************************!*\
+  !*** ./dist/browser/Options/Classes/Emitter.js ***!
+  \*************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Emitter: () => (/* binding */ Emitter)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _EmitterLife_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./EmitterLife.js */ \"./dist/browser/Options/Classes/EmitterLife.js\");\n/* harmony import */ var _EmitterRate_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./EmitterRate.js */ \"./dist/browser/Options/Classes/EmitterRate.js\");\n/* harmony import */ var _EmitterShape_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./EmitterShape.js */ \"./dist/browser/Options/Classes/EmitterShape.js\");\n/* harmony import */ var _EmitterSize_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./EmitterSize.js */ \"./dist/browser/Options/Classes/EmitterSize.js\");\n\n\n\n\n\nclass Emitter {\n  constructor() {\n    this.autoPlay = true;\n    this.fill = true;\n    this.life = new _EmitterLife_js__WEBPACK_IMPORTED_MODULE_1__.EmitterLife();\n    this.rate = new _EmitterRate_js__WEBPACK_IMPORTED_MODULE_2__.EmitterRate();\n    this.shape = new _EmitterShape_js__WEBPACK_IMPORTED_MODULE_3__.EmitterShape();\n    this.startCount = 0;\n  }\n  load(data) {\n    if (!data) {\n      return;\n    }\n    if (data.autoPlay !== undefined) {\n      this.autoPlay = data.autoPlay;\n    }\n    if (data.size !== undefined) {\n      if (!this.size) {\n        this.size = new _EmitterSize_js__WEBPACK_IMPORTED_MODULE_4__.EmitterSize();\n      }\n      this.size.load(data.size);\n    }\n    if (data.direction !== undefined) {\n      this.direction = data.direction;\n    }\n    this.domId = data.domId;\n    if (data.fill !== undefined) {\n      this.fill = data.fill;\n    }\n    this.life.load(data.life);\n    this.name = data.name;\n    this.particles = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(data.particles, particles => {\n      return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, particles);\n    });\n    this.rate.load(data.rate);\n    this.shape.load(data.shape);\n    if (data.position !== undefined) {\n      this.position = {};\n      if (data.position.x !== undefined) {\n        this.position.x = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.setRangeValue)(data.position.x);\n      }\n      if (data.position.y !== undefined) {\n        this.position.y = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.setRangeValue)(data.position.y);\n      }\n    }\n    if (data.spawnColor !== undefined) {\n      if (this.spawnColor === undefined) {\n        this.spawnColor = new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.AnimatableColor();\n      }\n      this.spawnColor.load(data.spawnColor);\n    }\n    if (data.startCount !== undefined) {\n      this.startCount = data.startCount;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters/./dist/browser/Options/Classes/Emitter.js?");
+
+/***/ }),
+
+/***/ "./dist/browser/Options/Classes/EmitterLife.js":
+/*!*****************************************************!*\
+  !*** ./dist/browser/Options/Classes/EmitterLife.js ***!
+  \*****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmitterLife: () => (/* binding */ EmitterLife)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nclass EmitterLife {\n  constructor() {\n    this.wait = false;\n  }\n  load(data) {\n    if (!data) {\n      return;\n    }\n    if (data.count !== undefined) {\n      this.count = data.count;\n    }\n    if (data.delay !== undefined) {\n      this.delay = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.setRangeValue)(data.delay);\n    }\n    if (data.duration !== undefined) {\n      this.duration = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.setRangeValue)(data.duration);\n    }\n    if (data.wait !== undefined) {\n      this.wait = data.wait;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters/./dist/browser/Options/Classes/EmitterLife.js?");
+
+/***/ }),
+
+/***/ "./dist/browser/Options/Classes/EmitterRate.js":
+/*!*****************************************************!*\
+  !*** ./dist/browser/Options/Classes/EmitterRate.js ***!
+  \*****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmitterRate: () => (/* binding */ EmitterRate)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nclass EmitterRate {\n  constructor() {\n    this.quantity = 1;\n    this.delay = 0.1;\n  }\n  load(data) {\n    if (data === undefined) {\n      return;\n    }\n    if (data.quantity !== undefined) {\n      this.quantity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.setRangeValue)(data.quantity);\n    }\n    if (data.delay !== undefined) {\n      this.delay = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.setRangeValue)(data.delay);\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters/./dist/browser/Options/Classes/EmitterRate.js?");
+
+/***/ }),
+
+/***/ "./dist/browser/Options/Classes/EmitterShape.js":
+/*!******************************************************!*\
+  !*** ./dist/browser/Options/Classes/EmitterShape.js ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmitterShape: () => (/* binding */ EmitterShape)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _EmitterShapeReplace_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./EmitterShapeReplace.js */ \"./dist/browser/Options/Classes/EmitterShapeReplace.js\");\n\n\nclass EmitterShape {\n  constructor() {\n    this.options = {};\n    this.replace = new _EmitterShapeReplace_js__WEBPACK_IMPORTED_MODULE_1__.EmitterShapeReplace();\n    this.type = \"square\";\n  }\n  load(data) {\n    if (!data) {\n      return;\n    }\n    if (data.options !== undefined) {\n      this.options = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, data.options ?? {});\n    }\n    this.replace.load(data.replace);\n    if (data.type !== undefined) {\n      this.type = data.type;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters/./dist/browser/Options/Classes/EmitterShape.js?");
+
+/***/ }),
+
+/***/ "./dist/browser/Options/Classes/EmitterShapeReplace.js":
+/*!*************************************************************!*\
+  !*** ./dist/browser/Options/Classes/EmitterShapeReplace.js ***!
+  \*************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmitterShapeReplace: () => (/* binding */ EmitterShapeReplace)\n/* harmony export */ });\nclass EmitterShapeReplace {\n  constructor() {\n    this.color = false;\n    this.opacity = false;\n  }\n  load(data) {\n    if (!data) {\n      return;\n    }\n    if (data.color !== undefined) {\n      this.color = data.color;\n    }\n    if (data.opacity !== undefined) {\n      this.opacity = data.opacity;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters/./dist/browser/Options/Classes/EmitterShapeReplace.js?");
+
+/***/ }),
+
+/***/ "./dist/browser/Options/Classes/EmitterSize.js":
+/*!*****************************************************!*\
+  !*** ./dist/browser/Options/Classes/EmitterSize.js ***!
+  \*****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmitterSize: () => (/* binding */ EmitterSize)\n/* harmony export */ });\nclass EmitterSize {\n  constructor() {\n    this.mode = \"percent\";\n    this.height = 0;\n    this.width = 0;\n  }\n  load(data) {\n    if (data === undefined) {\n      return;\n    }\n    if (data.mode !== undefined) {\n      this.mode = data.mode;\n    }\n    if (data.height !== undefined) {\n      this.height = data.height;\n    }\n    if (data.width !== undefined) {\n      this.width = data.width;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters/./dist/browser/Options/Classes/EmitterSize.js?");
+
+/***/ })
+
+}]);

package/dist_browser_Emitters_js.js

@@ -0,0 +1,30 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v3.2.1
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_plugin_emitters"] = this["webpackChunk_tsparticles_plugin_emitters"] || []).push([["dist_browser_Emitters_js"],{
+
+/***/ "./dist/browser/Emitters.js":
+/*!**********************************!*\
+  !*** ./dist/browser/Emitters.js ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Emitters: () => (/* binding */ Emitters)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nclass Emitters {\n  constructor(engine, container) {\n    this.container = container;\n    this._engine = engine;\n    this.array = [];\n    this.emitters = [];\n    this.interactivityEmitters = {\n      random: {\n        count: 1,\n        enable: false\n      },\n      value: []\n    };\n    const defaultIndex = 0;\n    container.getEmitter = idxOrName => idxOrName === undefined || (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNumber)(idxOrName) ? this.array[idxOrName ?? defaultIndex] : this.array.find(t => t.name === idxOrName);\n    container.addEmitter = async (options, position) => this.addEmitter(options, position);\n    container.removeEmitter = idxOrName => {\n      const emitter = container.getEmitter(idxOrName);\n      if (emitter) {\n        this.removeEmitter(emitter);\n      }\n    };\n    container.playEmitter = idxOrName => {\n      const emitter = container.getEmitter(idxOrName);\n      if (emitter) {\n        emitter.externalPlay();\n      }\n    };\n    container.pauseEmitter = idxOrName => {\n      const emitter = container.getEmitter(idxOrName);\n      if (emitter) {\n        emitter.externalPause();\n      }\n    };\n  }\n  async addEmitter(options, position) {\n    const {\n        Emitter\n      } = await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./Options/Classes/Emitter.js */ \"./dist/browser/Options/Classes/Emitter.js\")),\n      {\n        EmitterInstance\n      } = await __webpack_require__.e(/*! import() */ \"dist_browser_EmitterInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./EmitterInstance.js */ \"./dist/browser/EmitterInstance.js\")),\n      emitterOptions = new Emitter();\n    emitterOptions.load(options);\n    const emitter = new EmitterInstance(this._engine, this, this.container, emitterOptions, position);\n    await emitter.init();\n    this.array.push(emitter);\n    return emitter;\n  }\n  handleClickMode(mode) {\n    const emitterOptions = this.emitters,\n      modeEmitters = this.interactivityEmitters;\n    if (mode !== \"emitter\") {\n      return;\n    }\n    let emittersModeOptions;\n    if (modeEmitters && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isArray)(modeEmitters.value)) {\n      const minLength = 0;\n      if (modeEmitters.value.length > minLength && modeEmitters.random.enable) {\n        emittersModeOptions = [];\n        const usedIndexes = [];\n        for (let i = 0; i < modeEmitters.random.count; i++) {\n          const idx = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.arrayRandomIndex)(modeEmitters.value);\n          if (usedIndexes.includes(idx) && usedIndexes.length < modeEmitters.value.length) {\n            i--;\n            continue;\n          }\n          usedIndexes.push(idx);\n          emittersModeOptions.push((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromArray)(modeEmitters.value, idx));\n        }\n      } else {\n        emittersModeOptions = modeEmitters.value;\n      }\n    } else {\n      emittersModeOptions = modeEmitters?.value;\n    }\n    const emittersOptions = emittersModeOptions ?? emitterOptions,\n      ePosition = this.container.interactivity.mouse.clickPosition;\n    void (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(emittersOptions, async emitter => {\n      await this.addEmitter(emitter, ePosition);\n    });\n  }\n  async init() {\n    this.emitters = this.container.actualOptions.emitters;\n    this.interactivityEmitters = this.container.actualOptions.interactivity.modes.emitters;\n    if (!this.emitters) {\n      return;\n    }\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isArray)(this.emitters)) {\n      for (const emitterOptions of this.emitters) {\n        await this.addEmitter(emitterOptions);\n      }\n    } else {\n      await this.addEmitter(this.emitters);\n    }\n  }\n  pause() {\n    for (const emitter of this.array) {\n      emitter.pause();\n    }\n  }\n  play() {\n    for (const emitter of this.array) {\n      emitter.play();\n    }\n  }\n  removeEmitter(emitter) {\n    const index = this.array.indexOf(emitter),\n      minIndex = 0,\n      deleteCount = 1;\n    if (index >= minIndex) {\n      this.array.splice(index, deleteCount);\n    }\n  }\n  resize() {\n    for (const emitter of this.array) {\n      emitter.resize();\n    }\n  }\n  stop() {\n    this.array = [];\n  }\n  async update(delta) {\n    for (const emitter of this.array) {\n      await emitter.update(delta);\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters/./dist/browser/Emitters.js?");
+
+/***/ })
+
+}]);

package/dist_browser_ShapeManager_js.js

@@ -0,0 +1,30 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v3.2.1
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_plugin_emitters"] = this["webpackChunk_tsparticles_plugin_emitters"] || []).push([["dist_browser_ShapeManager_js"],{
+
+/***/ "./dist/browser/ShapeManager.js":
+/*!**************************************!*\
+  !*** ./dist/browser/ShapeManager.js ***!
+  \**************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ShapeManager: () => (/* binding */ ShapeManager)\n/* harmony export */ });\nconst shapeGeneratorss = new Map();\nclass ShapeManager {\n  constructor(engine) {\n    this._engine = engine;\n  }\n  addShapeGenerator(name, generator) {\n    if (!this.getShapeGenerator(name)) {\n      shapeGeneratorss.set(name, generator);\n    }\n  }\n  getShapeGenerator(name) {\n    return shapeGeneratorss.get(name);\n  }\n  getSupportedShapeGenerators() {\n    return shapeGeneratorss.keys();\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters/./dist/browser/ShapeManager.js?");
+
+/***/ })
+
+}]);

package/esm/EmitterInstance.js

@@ -1,7 +1,7 @@
 import { Vector, calcPositionOrRandomFromSizeRanged, deepExtend, getRangeValue, getSize, isPointInside, itemFromSingleOrMultiple, millisecondsToSeconds, randomInRange, rangeColorToHsl, } from "@tsparticles/engine";
 import { Emitter } from "./Options/Classes/Emitter.js";
 import { EmitterSize } from "./Options/Classes/EmitterSize.js";
-const half = 0.5, defaultLifeDelay = 0, minLifeCount = 0, defaultSpawnDelay = 0, defaultEmitDelay = 0, defaultLifeCount = -1;
+const half = 0.5, defaultLifeDelay = 0, minLifeCount = 0, defaultSpawnDelay = 0, defaultEmitDelay = 0, defaultLifeCount = -1, defaultColorAnimationFactor = 1;
 function setParticlesOptionsColor(particlesOptions, color) {
     if (particlesOptions.color) {
         particlesOptions.color.value = color;
@@ -41,13 +41,13 @@ export class EmitterInstance {
                 this._duration = duration * millisecondsToSeconds;
             }
         };
-        this._setColorAnimation = (animation, initValue, maxValue) => {
+        this._setColorAnimation = (animation, initValue, maxValue, factor = defaultColorAnimationFactor) => {
             const container = this.container;
             if (!animation.enable) {
                 return initValue;
             }
-            const colorOffset = randomInRange(animation.offset), delay = getRangeValue(this.options.rate.delay), emitFactor = (delay * millisecondsToSeconds) / container.retina.reduceFactor, defaultColorSpeed = 0, colorFactor = 3.6, colorSpeed = getRangeValue(animation.speed ?? defaultColorSpeed);
-            return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * colorFactor) % maxValue;
+            const colorOffset = randomInRange(animation.offset), delay = getRangeValue(this.options.rate.delay), emitFactor = (delay * millisecondsToSeconds) / container.retina.reduceFactor, defaultColorSpeed = 0, colorSpeed = getRangeValue(animation.speed ?? defaultColorSpeed);
+            return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * factor) % maxValue;
         };
         this._engine = engine;
         this._currentDuration = 0;
@@ -212,9 +212,9 @@ export class EmitterInstance {
     }
     _calcPosition() {
         if (this.options.domId) {
-            const container = this.container, element = document.getElementById(this.options.domId);
+            const element = document.getElementById(this.options.domId);
             if (element) {
-                const elRect = element.getBoundingClientRect(), pxRatio = container.retina.pixelRatio;
+                const elRect = element.getBoundingClientRect(), pxRatio = this.container.retina.pixelRatio;
                 return {
                     x: (elRect.x + elRect.width * half) * pxRatio,
                     y: (elRect.y + elRect.height * half) * pxRatio,
@@ -268,8 +268,8 @@ export class EmitterInstance {
                         h: 360,
                         s: 100,
                         l: 100,
-                    };
-                    this.spawnColor.h = this._setColorAnimation(hslAnimation.h, this.spawnColor.h, maxValues.h);
+                    }, colorFactor = 3.6;
+                    this.spawnColor.h = this._setColorAnimation(hslAnimation.h, this.spawnColor.h, maxValues.h, colorFactor);
                     this.spawnColor.s = this._setColorAnimation(hslAnimation.s, this.spawnColor.s, maxValues.s);
                     this.spawnColor.l = this._setColorAnimation(hslAnimation.l, this.spawnColor.l, maxValues.l);
                 }
@@ -301,7 +301,7 @@ export class EmitterInstance {
                 }
             }
             if (position) {
-                this.container.particles.addParticle(position, particlesOptions);
+                await this.container.particles.addParticle(position, particlesOptions);
             }
         }
     }

package/esm/Emitters.js

@@ -1,6 +1,4 @@
 import { arrayRandomIndex, executeOnSingleOrMultiple, isArray, isNumber, itemFromArray, } from "@tsparticles/engine";
-import { Emitter } from "./Options/Classes/Emitter.js";
-import { EmitterInstance } from "./EmitterInstance.js";
 export class Emitters {
     constructor(engine, container) {
         this.container = container;
@@ -39,7 +37,7 @@ export class Emitters {
         };
     }
     async addEmitter(options, position) {
-        const emitterOptions = new Emitter();
+        const { Emitter } = await import("./Options/Classes/Emitter.js"), { EmitterInstance } = await import("./EmitterInstance.js"), emitterOptions = new Emitter();
         emitterOptions.load(options);
         const emitter = new EmitterInstance(this._engine, this, this.container, emitterOptions, position);
         await emitter.init();

package/esm/EmittersPlugin.js

@@ -0,0 +1,90 @@
+import { executeOnSingleOrMultiple, isArray, isInArray, } from "@tsparticles/engine";
+import { Emitter } from "./Options/Classes/Emitter.js";
+export class EmittersPlugin {
+    constructor(engine) {
+        this._engine = engine;
+        this.id = "emitters";
+    }
+    async getPlugin(container) {
+        const { Emitters } = await import("./Emitters.js");
+        return new Emitters(this._engine, container);
+    }
+    loadOptions(options, source) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
+            return;
+        }
+        if (source?.emitters) {
+            options.emitters = executeOnSingleOrMultiple(source.emitters, (emitter) => {
+                const tmp = new Emitter();
+                tmp.load(emitter);
+                return tmp;
+            });
+        }
+        const interactivityEmitters = source?.interactivity?.modes?.emitters;
+        if (interactivityEmitters) {
+            if (isArray(interactivityEmitters)) {
+                options.interactivity.modes.emitters = {
+                    random: {
+                        count: 1,
+                        enable: true,
+                    },
+                    value: interactivityEmitters.map((s) => {
+                        const tmp = new Emitter();
+                        tmp.load(s);
+                        return tmp;
+                    }),
+                };
+            }
+            else {
+                const emitterMode = interactivityEmitters;
+                if (emitterMode.value !== undefined) {
+                    const defaultCount = 1;
+                    if (isArray(emitterMode.value)) {
+                        options.interactivity.modes.emitters = {
+                            random: {
+                                count: emitterMode.random.count ?? defaultCount,
+                                enable: emitterMode.random.enable ?? false,
+                            },
+                            value: emitterMode.value.map((s) => {
+                                const tmp = new Emitter();
+                                tmp.load(s);
+                                return tmp;
+                            }),
+                        };
+                    }
+                    else {
+                        const tmp = new Emitter();
+                        tmp.load(emitterMode.value);
+                        options.interactivity.modes.emitters = {
+                            random: {
+                                count: emitterMode.random.count ?? defaultCount,
+                                enable: emitterMode.random.enable ?? false,
+                            },
+                            value: tmp,
+                        };
+                    }
+                }
+                else {
+                    const emitterOptions = (options.interactivity.modes.emitters = {
+                        random: {
+                            count: 1,
+                            enable: false,
+                        },
+                        value: new Emitter(),
+                    });
+                    emitterOptions.value.load(interactivityEmitters);
+                }
+            }
+        }
+    }
+    needsPlugin(options) {
+        if (!options) {
+            return false;
+        }
+        const emitters = options.emitters;
+        return ((isArray(emitters) && !!emitters.length) ||
+            emitters !== undefined ||
+            (!!options.interactivity?.events?.onClick?.mode &&
+                isInArray("emitter", options.interactivity.events.onClick.mode)));
+    }
+}

package/esm/index.js

@@ -1,96 +1,6 @@
-import { executeOnSingleOrMultiple, isArray, isInArray, } from "@tsparticles/engine";
-import { Emitter } from "./Options/Classes/Emitter.js";
-import { Emitters } from "./Emitters.js";
-import { ShapeManager } from "./ShapeManager.js";
-class EmittersPlugin {
-    constructor(engine) {
-        this._engine = engine;
-        this.id = "emitters";
-    }
-    getPlugin(container) {
-        return new Emitters(this._engine, container);
-    }
-    loadOptions(options, source) {
-        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
-            return;
-        }
-        if (source?.emitters) {
-            options.emitters = executeOnSingleOrMultiple(source.emitters, (emitter) => {
-                const tmp = new Emitter();
-                tmp.load(emitter);
-                return tmp;
-            });
-        }
-        const interactivityEmitters = source?.interactivity?.modes?.emitters;
-        if (interactivityEmitters) {
-            if (isArray(interactivityEmitters)) {
-                options.interactivity.modes.emitters = {
-                    random: {
-                        count: 1,
-                        enable: true,
-                    },
-                    value: interactivityEmitters.map((s) => {
-                        const tmp = new Emitter();
-                        tmp.load(s);
-                        return tmp;
-                    }),
-                };
-            }
-            else {
-                const emitterMode = interactivityEmitters;
-                if (emitterMode.value !== undefined) {
-                    const defaultCount = 1;
-                    if (isArray(emitterMode.value)) {
-                        options.interactivity.modes.emitters = {
-                            random: {
-                                count: emitterMode.random.count ?? defaultCount,
-                                enable: emitterMode.random.enable ?? false,
-                            },
-                            value: emitterMode.value.map((s) => {
-                                const tmp = new Emitter();
-                                tmp.load(s);
-                                return tmp;
-                            }),
-                        };
-                    }
-                    else {
-                        const tmp = new Emitter();
-                        tmp.load(emitterMode.value);
-                        options.interactivity.modes.emitters = {
-                            random: {
-                                count: emitterMode.random.count ?? defaultCount,
-                                enable: emitterMode.random.enable ?? false,
-                            },
-                            value: tmp,
-                        };
-                    }
-                }
-                else {
-                    const emitterOptions = (options.interactivity.modes.emitters = {
-                        random: {
-                            count: 1,
-                            enable: false,
-                        },
-                        value: new Emitter(),
-                    });
-                    emitterOptions.value.load(interactivityEmitters);
-                }
-            }
-        }
-    }
-    needsPlugin(options) {
-        if (!options) {
-            return false;
-        }
-        const emitters = options.emitters;
-        return ((isArray(emitters) && !!emitters.length) ||
-            emitters !== undefined ||
-            (!!options.interactivity?.events?.onClick?.mode &&
-                isInArray("emitter", options.interactivity.events.onClick.mode)));
-    }
-}
 export async function loadEmittersPlugin(engine, refresh = true) {
     if (!engine.emitterShapeManager) {
+        const { ShapeManager } = await import("./ShapeManager.js");
         engine.emitterShapeManager = new ShapeManager(engine);
     }
     if (!engine.addEmitterShapeGenerator) {
@@ -98,7 +8,7 @@ export async function loadEmittersPlugin(engine, refresh = true) {
             engine.emitterShapeManager?.addShapeGenerator(name, generator);
         };
     }
-    const plugin = new EmittersPlugin(engine);
+    const { EmittersPlugin } = await import("./EmittersPlugin.js"), plugin = new EmittersPlugin(engine);
     await engine.addPlugin(plugin, refresh);
 }
 export * from "./EmitterContainer.js";