@tsparticles/plugin-motion 4.0.0-alpha.1 → 4.0.0-alpha.15

package/222.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_plugin_motion=this.webpackChunk_tsparticles_plugin_motion||[]).push([[222],{222(i,t,e){e.d(t,{MotionPlugin:()=>a});var s=e(303);class l{factor;value;constructor(){this.factor=4,this.value=!0}load(i){(0,s.isNull)(i)||(void 0!==i.factor&&(this.factor=i.factor),void 0!==i.value&&(this.value=i.value))}}class o{disable;reduce;constructor(){this.disable=!0,this.reduce=new l}load(i){(0,s.isNull)(i)||(void 0!==i.disable&&(this.disable=i.disable),this.reduce.load(i.reduce))}}class a{id="motion";async getPlugin(i){let{MotionPluginInstance:t}=await e.e(493).then(e.bind(e,493));return new t(i)}loadOptions(i,t,e){if(!this.needsPlugin())return;let s=t.motion;s?.load||(t.motion=s=new o),s.load(e?.motion)}needsPlugin(){return!0}}}}]);

package/493.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_plugin_motion=this.webpackChunk_tsparticles_plugin_motion||[]).push([[493],{493(e,t,a){a.d(t,{MotionPluginInstance:()=>i});var n=a(303);class i{_container;constructor(e){this._container=e}async init(){let e=this._container,t=e.actualOptions.motion;if(!(t&&(t.disable||t.reduce.value))){e.retina.reduceFactor=1;return}let a=(0,n.safeMatchMedia)("(prefers-reduced-motion: reduce)");if(!a){e.retina.reduceFactor=1;return}this._handleMotionChange(a);let i=()=>{(async()=>{this._handleMotionChange(a);try{await e.refresh()}catch{}})()};a.addEventListener("change",i),await Promise.resolve()}_handleMotionChange=e=>{let t=this._container,a=t.actualOptions.motion;a&&(e.matches?a.disable?t.retina.reduceFactor=0:t.retina.reduceFactor=a.reduce.value?1/a.reduce.factor:1:t.retina.reduceFactor=1)}}}}]);

package/browser/MotionPlugin.js

@@ -1,13 +1,11 @@
 import { Motion } from "./Options/Classes/Motion.js";
-import { MotionInstance } from "./MotionInstance.js";
 export class MotionPlugin {
-    constructor() {
-        this.id = "motion";
+    id = "motion";
+    async getPlugin(container) {
+        const { MotionPluginInstance } = await import("./MotionPluginInstance.js");
+        return new MotionPluginInstance(container);
     }
-    getPlugin(container) {
-        return Promise.resolve(new MotionInstance(container));
-    }
-    loadOptions(options, source) {
+    loadOptions(_container, options, source) {
         if (!this.needsPlugin()) {
             return;
         }

package/{esm/MotionInstance.js → browser/MotionPluginInstance.js}

@@ -1,24 +1,8 @@
 import { safeMatchMedia } from "@tsparticles/engine";
 const defaultFactor = 1, defaultReduce = 1, disableReduce = 0, identity = 1;
-export class MotionInstance {
+export class MotionPluginInstance {
+    _container;
     constructor(container) {
-        this._handleMotionChange = mediaQuery => {
-            const container = this._container, motion = container.actualOptions.motion;
-            if (!motion) {
-                return;
-            }
-            if (mediaQuery.matches) {
-                if (motion.disable) {
-                    container.retina.reduceFactor = disableReduce;
-                }
-                else {
-                    container.retina.reduceFactor = motion.reduce.value ? identity / motion.reduce.factor : defaultFactor;
-                }
-            }
-            else {
-                container.retina.reduceFactor = defaultReduce;
-            }
-        };
         this._container = container;
     }
     async init() {
@@ -46,4 +30,21 @@ export class MotionInstance {
         mediaQuery.addEventListener("change", handleChange);
         await Promise.resolve();
     }
+    _handleMotionChange = mediaQuery => {
+        const container = this._container, motion = container.actualOptions.motion;
+        if (!motion) {
+            return;
+        }
+        if (mediaQuery.matches) {
+            if (motion.disable) {
+                container.retina.reduceFactor = disableReduce;
+            }
+            else {
+                container.retina.reduceFactor = motion.reduce.value ? identity / motion.reduce.factor : defaultFactor;
+            }
+        }
+        else {
+            container.retina.reduceFactor = defaultReduce;
+        }
+    };
 }

package/browser/Options/Classes/Motion.js

@@ -1,6 +1,8 @@
 import { isNull } from "@tsparticles/engine";
 import { MotionReduce } from "./MotionReduce.js";
 export class Motion {
+    disable;
+    reduce;
     constructor() {
         this.disable = true;
         this.reduce = new MotionReduce();

package/browser/Options/Classes/MotionReduce.js

@@ -1,5 +1,7 @@
 import { isNull } from "@tsparticles/engine";
 export class MotionReduce {
+    factor;
+    value;
     constructor() {
         this.factor = 4;
         this.value = true;

package/browser/index.js

@@ -1,6 +1,6 @@
-export function loadMotionPlugin(engine) {
-    engine.checkVersion("4.0.0-alpha.1");
-    engine.register(async (e) => {
+export async function loadMotionPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.15");
+    await engine.register(async (e) => {
         const { MotionPlugin } = await import("./MotionPlugin.js");
         e.addPlugin(new MotionPlugin());
     });

package/cjs/MotionPlugin.js

@@ -1,13 +1,11 @@
 import { Motion } from "./Options/Classes/Motion.js";
-import { MotionInstance } from "./MotionInstance.js";
 export class MotionPlugin {
-    constructor() {
-        this.id = "motion";
+    id = "motion";
+    async getPlugin(container) {
+        const { MotionPluginInstance } = await import("./MotionPluginInstance.js");
+        return new MotionPluginInstance(container);
     }
-    getPlugin(container) {
-        return Promise.resolve(new MotionInstance(container));
-    }
-    loadOptions(options, source) {
+    loadOptions(_container, options, source) {
         if (!this.needsPlugin()) {
             return;
         }

package/{browser/MotionInstance.js → cjs/MotionPluginInstance.js}

@@ -1,24 +1,8 @@
 import { safeMatchMedia } from "@tsparticles/engine";
 const defaultFactor = 1, defaultReduce = 1, disableReduce = 0, identity = 1;
-export class MotionInstance {
+export class MotionPluginInstance {
+    _container;
     constructor(container) {
-        this._handleMotionChange = mediaQuery => {
-            const container = this._container, motion = container.actualOptions.motion;
-            if (!motion) {
-                return;
-            }
-            if (mediaQuery.matches) {
-                if (motion.disable) {
-                    container.retina.reduceFactor = disableReduce;
-                }
-                else {
-                    container.retina.reduceFactor = motion.reduce.value ? identity / motion.reduce.factor : defaultFactor;
-                }
-            }
-            else {
-                container.retina.reduceFactor = defaultReduce;
-            }
-        };
         this._container = container;
     }
     async init() {
@@ -46,4 +30,21 @@ export class MotionInstance {
         mediaQuery.addEventListener("change", handleChange);
         await Promise.resolve();
     }
+    _handleMotionChange = mediaQuery => {
+        const container = this._container, motion = container.actualOptions.motion;
+        if (!motion) {
+            return;
+        }
+        if (mediaQuery.matches) {
+            if (motion.disable) {
+                container.retina.reduceFactor = disableReduce;
+            }
+            else {
+                container.retina.reduceFactor = motion.reduce.value ? identity / motion.reduce.factor : defaultFactor;
+            }
+        }
+        else {
+            container.retina.reduceFactor = defaultReduce;
+        }
+    };
 }

package/cjs/Options/Classes/Motion.js

@@ -1,6 +1,8 @@
 import { isNull } from "@tsparticles/engine";
 import { MotionReduce } from "./MotionReduce.js";
 export class Motion {
+    disable;
+    reduce;
     constructor() {
         this.disable = true;
         this.reduce = new MotionReduce();

package/cjs/Options/Classes/MotionReduce.js

@@ -1,5 +1,7 @@
 import { isNull } from "@tsparticles/engine";
 export class MotionReduce {
+    factor;
+    value;
     constructor() {
         this.factor = 4;
         this.value = true;

package/cjs/index.js

@@ -1,6 +1,6 @@
-export function loadMotionPlugin(engine) {
-    engine.checkVersion("4.0.0-alpha.1");
-    engine.register(async (e) => {
+export async function loadMotionPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.15");
+    await engine.register(async (e) => {
         const { MotionPlugin } = await import("./MotionPlugin.js");
         e.addPlugin(new MotionPlugin());
     });

package/dist_browser_MotionPluginInstance_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
+ * v4.0.0-alpha.15
+ */
+"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_motion"] = this["webpackChunk_tsparticles_plugin_motion"] || []).push([["dist_browser_MotionPluginInstance_js"],{
+
+/***/ "./dist/browser/MotionPluginInstance.js"
+/*!**********************************************!*\
+  !*** ./dist/browser/MotionPluginInstance.js ***!
+  \**********************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   MotionPluginInstance: () => (/* binding */ MotionPluginInstance)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst defaultFactor = 1, defaultReduce = 1, disableReduce = 0, identity = 1;\nclass MotionPluginInstance {\n    _container;\n    constructor(container){\n        this._container = container;\n    }\n    async init() {\n        const container = this._container, options = container.actualOptions.motion;\n        if (!(options && (options.disable || options.reduce.value))) {\n            container.retina.reduceFactor = 1;\n            return;\n        }\n        const mediaQuery = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeMatchMedia)(\"(prefers-reduced-motion: reduce)\");\n        if (!mediaQuery) {\n            container.retina.reduceFactor = defaultFactor;\n            return;\n        }\n        this._handleMotionChange(mediaQuery);\n        const handleChange = ()=>{\n            void (async ()=>{\n                this._handleMotionChange(mediaQuery);\n                try {\n                    await container.refresh();\n                } catch  {}\n            })();\n        };\n        mediaQuery.addEventListener(\"change\", handleChange);\n        await Promise.resolve();\n    }\n    _handleMotionChange = (mediaQuery)=>{\n        const container = this._container, motion = container.actualOptions.motion;\n        if (!motion) {\n            return;\n        }\n        if (mediaQuery.matches) {\n            if (motion.disable) {\n                container.retina.reduceFactor = disableReduce;\n            } else {\n                container.retina.reduceFactor = motion.reduce.value ? identity / motion.reduce.factor : defaultFactor;\n            }\n        } else {\n            container.retina.reduceFactor = defaultReduce;\n        }\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-motion/./dist/browser/MotionPluginInstance.js?\n}");
+
+/***/ }
+
+}]);

package/dist_browser_MotionPlugin_js.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
- * v4.0.0-alpha.1
+ * v4.0.0-alpha.15
  */
 "use strict";
 /*
@@ -17,23 +17,13 @@
  */
 (this["webpackChunk_tsparticles_plugin_motion"] = this["webpackChunk_tsparticles_plugin_motion"] || []).push([["dist_browser_MotionPlugin_js"],{
 
-/***/ "./dist/browser/MotionInstance.js"
-/*!****************************************!*\
-  !*** ./dist/browser/MotionInstance.js ***!
-  \****************************************/
-(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
-
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   MotionInstance: () => (/* binding */ MotionInstance)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst defaultFactor = 1,\n  defaultReduce = 1,\n  disableReduce = 0,\n  identity = 1;\nclass MotionInstance {\n  constructor(container) {\n    this._handleMotionChange = mediaQuery => {\n      const container = this._container,\n        motion = container.actualOptions.motion;\n      if (!motion) {\n        return;\n      }\n      if (mediaQuery.matches) {\n        if (motion.disable) {\n          container.retina.reduceFactor = disableReduce;\n        } else {\n          container.retina.reduceFactor = motion.reduce.value ? identity / motion.reduce.factor : defaultFactor;\n        }\n      } else {\n        container.retina.reduceFactor = defaultReduce;\n      }\n    };\n    this._container = container;\n  }\n  async init() {\n    const container = this._container,\n      options = container.actualOptions.motion;\n    if (!(options && (options.disable || options.reduce.value))) {\n      container.retina.reduceFactor = 1;\n      return;\n    }\n    const mediaQuery = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeMatchMedia)(\"(prefers-reduced-motion: reduce)\");\n    if (!mediaQuery) {\n      container.retina.reduceFactor = defaultFactor;\n      return;\n    }\n    this._handleMotionChange(mediaQuery);\n    const handleChange = () => {\n      void (async () => {\n        this._handleMotionChange(mediaQuery);\n        try {\n          await container.refresh();\n        } catch {}\n      })();\n    };\n    mediaQuery.addEventListener(\"change\", handleChange);\n    await Promise.resolve();\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-motion/./dist/browser/MotionInstance.js?\n}");
-
-/***/ },
-
 /***/ "./dist/browser/MotionPlugin.js"
 /*!**************************************!*\
   !*** ./dist/browser/MotionPlugin.js ***!
   \**************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   MotionPlugin: () => (/* binding */ MotionPlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_Motion_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/Motion.js */ \"./dist/browser/Options/Classes/Motion.js\");\n/* harmony import */ var _MotionInstance_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MotionInstance.js */ \"./dist/browser/MotionInstance.js\");\n\n\nclass MotionPlugin {\n  constructor() {\n    this.id = \"motion\";\n  }\n  getPlugin(container) {\n    return Promise.resolve(new _MotionInstance_js__WEBPACK_IMPORTED_MODULE_1__.MotionInstance(container));\n  }\n  loadOptions(options, source) {\n    if (!this.needsPlugin()) {\n      return;\n    }\n    let motionOptions = options.motion;\n    if (!motionOptions?.load) {\n      options.motion = motionOptions = new _Options_Classes_Motion_js__WEBPACK_IMPORTED_MODULE_0__.Motion();\n    }\n    motionOptions.load(source?.motion);\n  }\n  needsPlugin() {\n    return true;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-motion/./dist/browser/MotionPlugin.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   MotionPlugin: () => (/* binding */ MotionPlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_Motion_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/Motion.js */ \"./dist/browser/Options/Classes/Motion.js\");\n\nclass MotionPlugin {\n    id = \"motion\";\n    async getPlugin(container) {\n        const { MotionPluginInstance } = await __webpack_require__.e(/*! import() */ \"dist_browser_MotionPluginInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./MotionPluginInstance.js */ \"./dist/browser/MotionPluginInstance.js\"));\n        return new MotionPluginInstance(container);\n    }\n    loadOptions(_container, options, source) {\n        if (!this.needsPlugin()) {\n            return;\n        }\n        let motionOptions = options.motion;\n        if (!motionOptions?.load) {\n            options.motion = motionOptions = new _Options_Classes_Motion_js__WEBPACK_IMPORTED_MODULE_0__.Motion();\n        }\n        motionOptions.load(source?.motion);\n    }\n    needsPlugin() {\n        return true;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-motion/./dist/browser/MotionPlugin.js?\n}");
 
 /***/ },
 
@@ -43,7 +33,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Motion: () => (/* binding */ Motion)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _MotionReduce_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MotionReduce.js */ \"./dist/browser/Options/Classes/MotionReduce.js\");\n\n\nclass Motion {\n  constructor() {\n    this.disable = true;\n    this.reduce = new _MotionReduce_js__WEBPACK_IMPORTED_MODULE_1__.MotionReduce();\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.disable !== undefined) {\n      this.disable = data.disable;\n    }\n    this.reduce.load(data.reduce);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-motion/./dist/browser/Options/Classes/Motion.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Motion: () => (/* binding */ Motion)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _MotionReduce_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MotionReduce.js */ \"./dist/browser/Options/Classes/MotionReduce.js\");\n\n\nclass Motion {\n    disable;\n    reduce;\n    constructor(){\n        this.disable = true;\n        this.reduce = new _MotionReduce_js__WEBPACK_IMPORTED_MODULE_1__.MotionReduce();\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        if (data.disable !== undefined) {\n            this.disable = data.disable;\n        }\n        this.reduce.load(data.reduce);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-motion/./dist/browser/Options/Classes/Motion.js?\n}");
 
 /***/ },
 
@@ -53,7 +43,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \******************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   MotionReduce: () => (/* binding */ MotionReduce)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass MotionReduce {\n  constructor() {\n    this.factor = 4;\n    this.value = true;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.factor !== undefined) {\n      this.factor = data.factor;\n    }\n    if (data.value !== undefined) {\n      this.value = data.value;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-motion/./dist/browser/Options/Classes/MotionReduce.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   MotionReduce: () => (/* binding */ MotionReduce)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass MotionReduce {\n    factor;\n    value;\n    constructor(){\n        this.factor = 4;\n        this.value = true;\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        if (data.factor !== undefined) {\n            this.factor = data.factor;\n        }\n        if (data.value !== undefined) {\n            this.value = data.value;\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-motion/./dist/browser/Options/Classes/MotionReduce.js?\n}");
 
 /***/ }
 

package/esm/MotionPlugin.js

@@ -1,13 +1,11 @@
 import { Motion } from "./Options/Classes/Motion.js";
-import { MotionInstance } from "./MotionInstance.js";
 export class MotionPlugin {
-    constructor() {
-        this.id = "motion";
+    id = "motion";
+    async getPlugin(container) {
+        const { MotionPluginInstance } = await import("./MotionPluginInstance.js");
+        return new MotionPluginInstance(container);
     }
-    getPlugin(container) {
-        return Promise.resolve(new MotionInstance(container));
-    }
-    loadOptions(options, source) {
+    loadOptions(_container, options, source) {
         if (!this.needsPlugin()) {
             return;
         }

package/{cjs/MotionInstance.js → esm/MotionPluginInstance.js}

@@ -1,24 +1,8 @@
 import { safeMatchMedia } from "@tsparticles/engine";
 const defaultFactor = 1, defaultReduce = 1, disableReduce = 0, identity = 1;
-export class MotionInstance {
+export class MotionPluginInstance {
+    _container;
     constructor(container) {
-        this._handleMotionChange = mediaQuery => {
-            const container = this._container, motion = container.actualOptions.motion;
-            if (!motion) {
-                return;
-            }
-            if (mediaQuery.matches) {
-                if (motion.disable) {
-                    container.retina.reduceFactor = disableReduce;
-                }
-                else {
-                    container.retina.reduceFactor = motion.reduce.value ? identity / motion.reduce.factor : defaultFactor;
-                }
-            }
-            else {
-                container.retina.reduceFactor = defaultReduce;
-            }
-        };
         this._container = container;
     }
     async init() {
@@ -46,4 +30,21 @@ export class MotionInstance {
         mediaQuery.addEventListener("change", handleChange);
         await Promise.resolve();
     }
+    _handleMotionChange = mediaQuery => {
+        const container = this._container, motion = container.actualOptions.motion;
+        if (!motion) {
+            return;
+        }
+        if (mediaQuery.matches) {
+            if (motion.disable) {
+                container.retina.reduceFactor = disableReduce;
+            }
+            else {
+                container.retina.reduceFactor = motion.reduce.value ? identity / motion.reduce.factor : defaultFactor;
+            }
+        }
+        else {
+            container.retina.reduceFactor = defaultReduce;
+        }
+    };
 }

package/esm/Options/Classes/Motion.js

@@ -1,6 +1,8 @@
 import { isNull } from "@tsparticles/engine";
 import { MotionReduce } from "./MotionReduce.js";
 export class Motion {
+    disable;
+    reduce;
     constructor() {
         this.disable = true;
         this.reduce = new MotionReduce();

package/esm/Options/Classes/MotionReduce.js

@@ -1,5 +1,7 @@
 import { isNull } from "@tsparticles/engine";
 export class MotionReduce {
+    factor;
+    value;
     constructor() {
         this.factor = 4;
         this.value = true;

package/esm/index.js

@@ -1,6 +1,6 @@
-export function loadMotionPlugin(engine) {
-    engine.checkVersion("4.0.0-alpha.1");
-    engine.register(async (e) => {
+export async function loadMotionPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.15");
+    await engine.register(async (e) => {
         const { MotionPlugin } = await import("./MotionPlugin.js");
         e.addPlugin(new MotionPlugin());
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-motion",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.15",
   "description": "tsParticles motion sickness plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -86,7 +86,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.1"
+    "@tsparticles/engine": "4.0.0-alpha.15"
   },
   "publishConfig": {
     "access": "public"