@tsparticles/interaction-light 4.0.0-alpha.5 → 4.0.0-beta.0

package/396.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_light=this.webpackChunk_tsparticles_interaction_light||[]).push([[396],{396(t,e,i){i.d(e,{ExternalLighter:()=>s});var a=i(303),n=i(702),r=i(183),o=i(12);class s extends n.ExternalInteractorBase{maxDistance=0;_engine;constructor(t,e){super(t),this._engine=e}clear(){}init(){}interact(t){let e=this.container,i=e.actualOptions;if(!i.interactivity?.events.onHover.enable||"pointermove"!==t.status)return;let a=t.mouse.position;a&&e.canvas.draw(t=>{(0,r.tM)(e,t,a)})}isEnabled(t,e){let i=this.container,n=t.mouse,o=e?.interactivity??i.actualOptions.interactivity,s=o?.events;if(!(s?.onHover.enable&&n.position))return!1;let l=(0,a.isInArray)(r.EF,s.onHover.mode);if(l&&o?.modes.light){let t=o.modes.light.area.gradient;i.canvas.mouseLight={start:(0,a.rangeColorToRgb)(this._engine,t.start),stop:(0,a.rangeColorToRgb)(this._engine,t.stop)}}return l}loadModeOptions(t,...e){for(let i of(t.light??=new o.v,e))t.light.load(i?.light)}reset(){}}},183(t,e,i){i.d(e,{EF:()=>o,No:()=>l,tM:()=>s});var a=i(303);let n=Math.PI*a.half,r=Math.PI*a.quarter,o="light";function s(t,e,i){let n=t.actualOptions.interactivity?.modes.light?.area;if(!n)return;e.beginPath(),e.arc(i.x,i.y,n.radius,0,a.doublePI);let r=e.createRadialGradient(i.x,i.y,0,i.x,i.y,n.radius),o=t.canvas.mouseLight;o?.start&&o.stop&&(r.addColorStop(0,(0,a.getStyleFromRgb)(o.start,t.hdr)),r.addColorStop(1,(0,a.getStyleFromRgb)(o.stop,t.hdr)),e.fillStyle=r,e.fill())}function l(t,e,i,o){let s=i.getPosition(),l=t.actualOptions.interactivity?.modes.light?.shadow;if(!l)return;let h=i.lightShadow;if(!h)return;let d=i.getRadius(),g=i.sides,c=a.doublePI/g,u=-i.rotation+r,y=[];for(let t=0;t<g;t++)y.push({x:s.x+d*Math.sin(u+c*t)*1,y:s.y+d*Math.cos(u+c*t)*1});let p=[],f=l.length;for(let t of y){let e=Math.atan2(o.y-t.y,o.x-t.x),i={x:t.x+f*Math.sin(-e-n),y:t.y+f*Math.cos(-e-n)};p.push({end:i,start:t})}let v=(0,a.getStyleFromRgb)(h,t.hdr),x=p.length-1;for(let t=x,i=0;t>=0;i=t--){e.beginPath();let a=p[t],n=p[i];a&&n&&(e.moveTo(a.start.x,a.start.y),e.lineTo(n.start.x,n.start.y),e.lineTo(n.end.x,n.end.y),e.lineTo(a.end.x,a.end.y),e.fillStyle=v,e.fill())}}}}]);

package/830.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_light=this.webpackChunk_tsparticles_interaction_light||[]).push([[830],{830(t,e,i){i.d(e,{ParticlesLighter:()=>o});var a=i(303),r=i(702),n=i(183);class o extends r.ParticlesInteractorBase{maxDistance;_engine;constructor(t,e){super(t),this._engine=e,this.maxDistance=0}clear(){}init(){}interact(t,e){let i=this.container,a=i.actualOptions;if(!a.interactivity?.events.onHover.enable||"pointermove"!==e.status)return;let r=e.mouse.position;r&&i.canvas.draw(e=>{(0,n.No)(i,e,t,r)})}isEnabled(t,e){let i=t.interactivity,r=e.mouse,o=i.events;if(!(o.onHover.enable&&r.position))return!1;let s=(0,a.isInArray)(n.EF,o.onHover.mode);if(s&&i.modes.light){let e=i.modes.light.shadow;t.lightShadow=(0,a.rangeColorToRgb)(this._engine,e.color)}return s}reset(){}}},183(t,e,i){i.d(e,{EF:()=>o,No:()=>l,tM:()=>s});var a=i(303);let r=Math.PI*a.half,n=Math.PI*a.quarter,o="light";function s(t,e,i){let r=t.actualOptions.interactivity?.modes.light?.area;if(!r)return;e.beginPath(),e.arc(i.x,i.y,r.radius,0,a.doublePI);let n=e.createRadialGradient(i.x,i.y,0,i.x,i.y,r.radius),o=t.canvas.mouseLight;o?.start&&o.stop&&(n.addColorStop(0,(0,a.getStyleFromRgb)(o.start,t.hdr)),n.addColorStop(1,(0,a.getStyleFromRgb)(o.stop,t.hdr)),e.fillStyle=n,e.fill())}function l(t,e,i,o){let s=i.getPosition(),l=t.actualOptions.interactivity?.modes.light?.shadow;if(!l)return;let h=i.lightShadow;if(!h)return;let c=i.getRadius(),d=i.sides,u=a.doublePI/d,g=-i.rotation+n,y=[];for(let t=0;t<d;t++)y.push({x:s.x+c*Math.sin(g+u*t)*1,y:s.y+c*Math.cos(g+u*t)*1});let p=[],f=l.length;for(let t of y){let e=Math.atan2(o.y-t.y,o.x-t.x),i={x:t.x+f*Math.sin(-e-r),y:t.y+f*Math.cos(-e-r)};p.push({end:i,start:t})}let x=(0,a.getStyleFromRgb)(h,t.hdr),m=p.length-1;for(let t=m,i=0;t>=0;i=t--){e.beginPath();let a=p[t],r=p[i];a&&r&&(e.moveTo(a.start.x,a.start.y),e.lineTo(r.start.x,r.start.y),e.lineTo(r.end.x,r.end.y),e.lineTo(a.end.x,a.end.y),e.fillStyle=x,e.fill())}}}}]);

package/README.md

@@ -26,6 +26,7 @@ Once the scripts are loaded you can set up `tsParticles` and the interaction plu
 
 ```javascript
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadLightInteraction(tsParticles);
 
   await tsParticles.load({
@@ -55,9 +56,11 @@ Then you need to import it in the app, like this:
 
 ```javascript
 const { tsParticles } = require("@tsparticles/engine");
+const { loadInteractivityPlugin } = require("@tsparticles/plugin-interactivity");
 const { loadLightInteraction } = require("@tsparticles/interaction-light");
 
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadLightInteraction(tsParticles);
 })();
 ```
@@ -66,9 +69,11 @@ or
 
 ```javascript
 import { tsParticles } from "@tsparticles/engine";
+import { loadInteractivityPlugin } from "@tsparticles/plugin-interactivity";
 import { loadLightInteraction } from "@tsparticles/interaction-light";
 
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadLightInteraction(tsParticles);
 })();
 ```

package/browser/ExternalLighter.js

@@ -3,6 +3,8 @@ import { ExternalInteractorBase, } from "@tsparticles/plugin-interactivity";
 import { drawLight, lightMode } from "./Utils.js";
 import { Light } from "./Options/Classes/Light.js";
 export class ExternalLighter extends ExternalInteractorBase {
+    maxDistance = 0;
+    _engine;
     constructor(container, engine) {
         super(container);
         this._engine = engine;

package/browser/Options/Classes/Light.js

@@ -2,6 +2,8 @@ import { isNull } from "@tsparticles/engine";
 import { LightArea } from "./LightArea.js";
 import { LightShadow } from "./LightShadow.js";
 export class Light {
+    area;
+    shadow;
     constructor() {
         this.area = new LightArea();
         this.shadow = new LightShadow();

package/browser/Options/Classes/LightArea.js

@@ -1,6 +1,8 @@
 import { isNull } from "@tsparticles/engine";
 import { LightGradient } from "./LightGradient.js";
 export class LightArea {
+    gradient;
+    radius;
     constructor() {
         this.gradient = new LightGradient();
         this.radius = 1000;

package/browser/Options/Classes/LightGradient.js

@@ -1,5 +1,7 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LightGradient {
+    start;
+    stop;
     constructor() {
         this.start = new OptionsColor();
         this.stop = new OptionsColor();

package/browser/Options/Classes/LightShadow.js

@@ -1,5 +1,7 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LightShadow {
+    color;
+    length;
     constructor() {
         this.color = new OptionsColor();
         this.color.value = "#000000";

package/browser/ParticlesLighter.js

@@ -2,9 +2,12 @@ import { isInArray, rangeColorToRgb } from "@tsparticles/engine";
 import { ParticlesInteractorBase } from "@tsparticles/plugin-interactivity";
 import { drawParticleShadow, lightMode } from "./Utils.js";
 export class ParticlesLighter extends ParticlesInteractorBase {
+    maxDistance;
+    _engine;
     constructor(container, engine) {
         super(container);
         this._engine = engine;
+        this.maxDistance = 0;
     }
     clear() {
     }

package/browser/Utils.js

@@ -11,8 +11,7 @@ export function drawLight(container, context, mousePos) {
     }
     context.beginPath();
     context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, doublePI);
-    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius);
-    const gradientRgb = container.canvas.mouseLight;
+    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius), gradientRgb = container.canvas.mouseLight;
     if (!gradientRgb?.start || !gradientRgb.stop) {
         return;
     }

package/browser/index.js

@@ -1,8 +1,8 @@
 export async function loadLightInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity");
-        await loadInteractivityPlugin(e);
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
         e.addInteractor?.("externalLight", async (container) => {
             const { ExternalLighter } = await import("./ExternalLighter.js");
             return new ExternalLighter(container, engine);

package/cjs/ExternalLighter.js

@@ -3,6 +3,8 @@ import { ExternalInteractorBase, } from "@tsparticles/plugin-interactivity";
 import { drawLight, lightMode } from "./Utils.js";
 import { Light } from "./Options/Classes/Light.js";
 export class ExternalLighter extends ExternalInteractorBase {
+    maxDistance = 0;
+    _engine;
     constructor(container, engine) {
         super(container);
         this._engine = engine;

package/cjs/Options/Classes/Light.js

@@ -2,6 +2,8 @@ import { isNull } from "@tsparticles/engine";
 import { LightArea } from "./LightArea.js";
 import { LightShadow } from "./LightShadow.js";
 export class Light {
+    area;
+    shadow;
     constructor() {
         this.area = new LightArea();
         this.shadow = new LightShadow();

package/cjs/Options/Classes/LightArea.js

@@ -1,6 +1,8 @@
 import { isNull } from "@tsparticles/engine";
 import { LightGradient } from "./LightGradient.js";
 export class LightArea {
+    gradient;
+    radius;
     constructor() {
         this.gradient = new LightGradient();
         this.radius = 1000;

package/cjs/Options/Classes/LightGradient.js

@@ -1,5 +1,7 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LightGradient {
+    start;
+    stop;
     constructor() {
         this.start = new OptionsColor();
         this.stop = new OptionsColor();

package/cjs/Options/Classes/LightShadow.js

@@ -1,5 +1,7 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LightShadow {
+    color;
+    length;
     constructor() {
         this.color = new OptionsColor();
         this.color.value = "#000000";

package/cjs/ParticlesLighter.js

@@ -2,9 +2,12 @@ import { isInArray, rangeColorToRgb } from "@tsparticles/engine";
 import { ParticlesInteractorBase } from "@tsparticles/plugin-interactivity";
 import { drawParticleShadow, lightMode } from "./Utils.js";
 export class ParticlesLighter extends ParticlesInteractorBase {
+    maxDistance;
+    _engine;
     constructor(container, engine) {
         super(container);
         this._engine = engine;
+        this.maxDistance = 0;
     }
     clear() {
     }

package/cjs/Utils.js

@@ -11,8 +11,7 @@ export function drawLight(container, context, mousePos) {
     }
     context.beginPath();
     context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, doublePI);
-    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius);
-    const gradientRgb = container.canvas.mouseLight;
+    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius), gradientRgb = container.canvas.mouseLight;
     if (!gradientRgb?.start || !gradientRgb.stop) {
         return;
     }

package/cjs/index.js

@@ -1,8 +1,8 @@
 export async function loadLightInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity");
-        await loadInteractivityPlugin(e);
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
         e.addInteractor?.("externalLight", async (container) => {
             const { ExternalLighter } = await import("./ExternalLighter.js");
             return new ExternalLighter(container, engine);

package/dist_browser_ExternalLighter_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.5
+ * v4.0.0-beta.0
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \*****************************************/
 (__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 */   ExternalLighter: () => (/* binding */ ExternalLighter)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n/* harmony import */ var _Options_Classes_Light_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Options/Classes/Light.js */ \"./dist/browser/Options/Classes/Light.js\");\n\n\n\n\nclass ExternalLighter extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.ExternalInteractorBase {\n  constructor(container, engine) {\n    super(container);\n    this._engine = engine;\n  }\n  clear() {}\n  init() {}\n  interact(interactivityData) {\n    const container = this.container,\n      options = container.actualOptions,\n      interactivity = interactivityData;\n    if (!options.interactivity?.events.onHover.enable || interactivity.status !== \"pointermove\") {\n      return;\n    }\n    const mousePos = interactivity.mouse.position;\n    if (!mousePos) {\n      return;\n    }\n    container.canvas.draw(ctx => {\n      (0,_Utils_js__WEBPACK_IMPORTED_MODULE_2__.drawLight)(container, ctx, mousePos);\n    });\n  }\n  isEnabled(interactivityData, particle) {\n    const container = this.container,\n      mouse = interactivityData.mouse,\n      interactivity = particle?.interactivity ?? container.actualOptions.interactivity,\n      events = interactivity?.events;\n    if (!(events?.onHover.enable && mouse.position)) {\n      return false;\n    }\n    const res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(_Utils_js__WEBPACK_IMPORTED_MODULE_2__.lightMode, events.onHover.mode);\n    if (res && interactivity?.modes.light) {\n      const lightGradient = interactivity.modes.light.area.gradient;\n      container.canvas.mouseLight = {\n        start: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, lightGradient.start),\n        stop: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, lightGradient.stop)\n      };\n    }\n    return res;\n  }\n  loadModeOptions(options, ...sources) {\n    options.light ??= new _Options_Classes_Light_js__WEBPACK_IMPORTED_MODULE_3__.Light();\n    for (const source of sources) {\n      options.light.load(source?.light);\n    }\n  }\n  reset() {}\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-light/./dist/browser/ExternalLighter.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ExternalLighter: () => (/* binding */ ExternalLighter)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n/* harmony import */ var _Options_Classes_Light_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Options/Classes/Light.js */ \"./dist/browser/Options/Classes/Light.js\");\n\n\n\n\nclass ExternalLighter extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.ExternalInteractorBase {\n    maxDistance = 0;\n    _engine;\n    constructor(container, engine){\n        super(container);\n        this._engine = engine;\n    }\n    clear() {}\n    init() {}\n    interact(interactivityData) {\n        const container = this.container, options = container.actualOptions, interactivity = interactivityData;\n        if (!options.interactivity?.events.onHover.enable || interactivity.status !== \"pointermove\") {\n            return;\n        }\n        const mousePos = interactivity.mouse.position;\n        if (!mousePos) {\n            return;\n        }\n        container.canvas.draw((ctx)=>{\n            (0,_Utils_js__WEBPACK_IMPORTED_MODULE_2__.drawLight)(container, ctx, mousePos);\n        });\n    }\n    isEnabled(interactivityData, particle) {\n        const container = this.container, mouse = interactivityData.mouse, interactivity = particle?.interactivity ?? container.actualOptions.interactivity, events = interactivity?.events;\n        if (!(events?.onHover.enable && mouse.position)) {\n            return false;\n        }\n        const res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(_Utils_js__WEBPACK_IMPORTED_MODULE_2__.lightMode, events.onHover.mode);\n        if (res && interactivity?.modes.light) {\n            const lightGradient = interactivity.modes.light.area.gradient;\n            container.canvas.mouseLight = {\n                start: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, lightGradient.start),\n                stop: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, lightGradient.stop)\n            };\n        }\n        return res;\n    }\n    loadModeOptions(options, ...sources) {\n        options.light ??= new _Options_Classes_Light_js__WEBPACK_IMPORTED_MODULE_3__.Light();\n        for (const source of sources){\n            options.light.load(source?.light);\n        }\n    }\n    reset() {}\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-light/./dist/browser/ExternalLighter.js?\n}");
 
 /***/ },
 
@@ -33,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 */   drawLight: () => (/* binding */ drawLight),\n/* harmony export */   drawParticleShadow: () => (/* binding */ drawParticleShadow),\n/* harmony export */   lightMode: () => (/* binding */ lightMode)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst gradientPos = {\n    max: 1,\n    min: 0\n  },\n  halfPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n  quarterPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.quarter,\n  arcStart = 0;\nconst lightMode = \"light\";\nfunction drawLight(container, context, mousePos) {\n  const lightOptions = container.actualOptions.interactivity?.modes.light?.area;\n  if (!lightOptions) {\n    return;\n  }\n  context.beginPath();\n  context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI);\n  const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius);\n  const gradientRgb = container.canvas.mouseLight;\n  if (!gradientRgb?.start || !gradientRgb.stop) {\n    return;\n  }\n  gradientAmbientLight.addColorStop(gradientPos.min, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(gradientRgb.start, container.hdr));\n  gradientAmbientLight.addColorStop(gradientPos.max, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(gradientRgb.stop, container.hdr));\n  context.fillStyle = gradientAmbientLight;\n  context.fill();\n}\nfunction drawParticleShadow(container, context, particle, mousePos) {\n  const pos = particle.getPosition(),\n    shadowOptions = container.actualOptions.interactivity?.modes.light?.shadow;\n  if (!shadowOptions) {\n    return;\n  }\n  const shadowRgb = particle.lightShadow;\n  if (!shadowRgb) {\n    return;\n  }\n  const radius = particle.getRadius(),\n    sides = particle.sides,\n    full = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI / sides,\n    angle = -particle.rotation + quarterPI,\n    factor = 1,\n    dots = [];\n  for (let i = 0; i < sides; i++) {\n    dots.push({\n      x: pos.x + radius * Math.sin(angle + full * i) * factor,\n      y: pos.y + radius * Math.cos(angle + full * i) * factor\n    });\n  }\n  const points = [],\n    shadowLength = shadowOptions.length;\n  for (const dot of dots) {\n    const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x),\n      end = {\n        x: dot.x + shadowLength * Math.sin(-dotAngle - halfPI),\n        y: dot.y + shadowLength * Math.cos(-dotAngle - halfPI)\n      };\n    points.push({\n      end: end,\n      start: dot\n    });\n  }\n  const shadowColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(shadowRgb, container.hdr),\n    lastOffset = 1,\n    firstPos = 0,\n    last = points.length - lastOffset;\n  for (let i = last, n = 0; i >= firstPos; n = i--) {\n    context.beginPath();\n    const iPoint = points[i],\n      nPoint = points[n];\n    if (!iPoint || !nPoint) {\n      continue;\n    }\n    context.moveTo(iPoint.start.x, iPoint.start.y);\n    context.lineTo(nPoint.start.x, nPoint.start.y);\n    context.lineTo(nPoint.end.x, nPoint.end.y);\n    context.lineTo(iPoint.end.x, iPoint.end.y);\n    context.fillStyle = shadowColor;\n    context.fill();\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-light/./dist/browser/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   drawLight: () => (/* binding */ drawLight),\n/* harmony export */   drawParticleShadow: () => (/* binding */ drawParticleShadow),\n/* harmony export */   lightMode: () => (/* binding */ lightMode)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst gradientPos = {\n    max: 1,\n    min: 0\n}, halfPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, quarterPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.quarter, arcStart = 0;\nconst lightMode = \"light\";\nfunction drawLight(container, context, mousePos) {\n    const lightOptions = container.actualOptions.interactivity?.modes.light?.area;\n    if (!lightOptions) {\n        return;\n    }\n    context.beginPath();\n    context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI);\n    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius), gradientRgb = container.canvas.mouseLight;\n    if (!gradientRgb?.start || !gradientRgb.stop) {\n        return;\n    }\n    gradientAmbientLight.addColorStop(gradientPos.min, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(gradientRgb.start, container.hdr));\n    gradientAmbientLight.addColorStop(gradientPos.max, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(gradientRgb.stop, container.hdr));\n    context.fillStyle = gradientAmbientLight;\n    context.fill();\n}\nfunction drawParticleShadow(container, context, particle, mousePos) {\n    const pos = particle.getPosition(), shadowOptions = container.actualOptions.interactivity?.modes.light?.shadow;\n    if (!shadowOptions) {\n        return;\n    }\n    const shadowRgb = particle.lightShadow;\n    if (!shadowRgb) {\n        return;\n    }\n    const radius = particle.getRadius(), sides = particle.sides, full = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI / sides, angle = -particle.rotation + quarterPI, factor = 1, dots = [];\n    for(let i = 0; i < sides; i++){\n        dots.push({\n            x: pos.x + radius * Math.sin(angle + full * i) * factor,\n            y: pos.y + radius * Math.cos(angle + full * i) * factor\n        });\n    }\n    const points = [], shadowLength = shadowOptions.length;\n    for (const dot of dots){\n        const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), end = {\n            x: dot.x + shadowLength * Math.sin(-dotAngle - halfPI),\n            y: dot.y + shadowLength * Math.cos(-dotAngle - halfPI)\n        };\n        points.push({\n            end: end,\n            start: dot\n        });\n    }\n    const shadowColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(shadowRgb, container.hdr), lastOffset = 1, firstPos = 0, last = points.length - lastOffset;\n    for(let i = last, n = 0; i >= firstPos; n = i--){\n        context.beginPath();\n        const iPoint = points[i], nPoint = points[n];\n        if (!iPoint || !nPoint) {\n            continue;\n        }\n        context.moveTo(iPoint.start.x, iPoint.start.y);\n        context.lineTo(nPoint.start.x, nPoint.start.y);\n        context.lineTo(nPoint.end.x, nPoint.end.y);\n        context.lineTo(iPoint.end.x, iPoint.end.y);\n        context.fillStyle = shadowColor;\n        context.fill();\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-light/./dist/browser/Utils.js?\n}");
 
 /***/ }
 

package/dist_browser_ParticlesLighter_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.5
+ * v4.0.0-beta.0
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \******************************************/
 (__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 */   ParticlesLighter: () => (/* binding */ ParticlesLighter)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\n\nclass ParticlesLighter extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.ParticlesInteractorBase {\n  constructor(container, engine) {\n    super(container);\n    this._engine = engine;\n  }\n  clear() {}\n  init() {}\n  interact(particle, interactivityData) {\n    const container = this.container,\n      options = container.actualOptions;\n    if (!options.interactivity?.events.onHover.enable || interactivityData.status !== \"pointermove\") {\n      return;\n    }\n    const mousePos = interactivityData.mouse.position;\n    if (!mousePos) {\n      return;\n    }\n    container.canvas.draw(ctx => {\n      (0,_Utils_js__WEBPACK_IMPORTED_MODULE_2__.drawParticleShadow)(container, ctx, particle, mousePos);\n    });\n  }\n  isEnabled(particle, interactivityData) {\n    const interactivity = particle.interactivity,\n      mouse = interactivityData.mouse,\n      events = interactivity.events;\n    if (!(events.onHover.enable && mouse.position)) {\n      return false;\n    }\n    const res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(_Utils_js__WEBPACK_IMPORTED_MODULE_2__.lightMode, events.onHover.mode);\n    if (res && interactivity.modes.light) {\n      const shadowOptions = interactivity.modes.light.shadow;\n      particle.lightShadow = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, shadowOptions.color);\n    }\n    return res;\n  }\n  reset() {}\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-light/./dist/browser/ParticlesLighter.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ParticlesLighter: () => (/* binding */ ParticlesLighter)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\n\nclass ParticlesLighter extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.ParticlesInteractorBase {\n    maxDistance;\n    _engine;\n    constructor(container, engine){\n        super(container);\n        this._engine = engine;\n        this.maxDistance = 0;\n    }\n    clear() {}\n    init() {}\n    interact(particle, interactivityData) {\n        const container = this.container, options = container.actualOptions;\n        if (!options.interactivity?.events.onHover.enable || interactivityData.status !== \"pointermove\") {\n            return;\n        }\n        const mousePos = interactivityData.mouse.position;\n        if (!mousePos) {\n            return;\n        }\n        container.canvas.draw((ctx)=>{\n            (0,_Utils_js__WEBPACK_IMPORTED_MODULE_2__.drawParticleShadow)(container, ctx, particle, mousePos);\n        });\n    }\n    isEnabled(particle, interactivityData) {\n        const interactivity = particle.interactivity, mouse = interactivityData.mouse, events = interactivity.events;\n        if (!(events.onHover.enable && mouse.position)) {\n            return false;\n        }\n        const res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(_Utils_js__WEBPACK_IMPORTED_MODULE_2__.lightMode, events.onHover.mode);\n        if (res && interactivity.modes.light) {\n            const shadowOptions = interactivity.modes.light.shadow;\n            particle.lightShadow = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, shadowOptions.color);\n        }\n        return res;\n    }\n    reset() {}\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-light/./dist/browser/ParticlesLighter.js?\n}");
 
 /***/ },
 
@@ -33,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 */   drawLight: () => (/* binding */ drawLight),\n/* harmony export */   drawParticleShadow: () => (/* binding */ drawParticleShadow),\n/* harmony export */   lightMode: () => (/* binding */ lightMode)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst gradientPos = {\n    max: 1,\n    min: 0\n  },\n  halfPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n  quarterPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.quarter,\n  arcStart = 0;\nconst lightMode = \"light\";\nfunction drawLight(container, context, mousePos) {\n  const lightOptions = container.actualOptions.interactivity?.modes.light?.area;\n  if (!lightOptions) {\n    return;\n  }\n  context.beginPath();\n  context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI);\n  const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius);\n  const gradientRgb = container.canvas.mouseLight;\n  if (!gradientRgb?.start || !gradientRgb.stop) {\n    return;\n  }\n  gradientAmbientLight.addColorStop(gradientPos.min, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(gradientRgb.start, container.hdr));\n  gradientAmbientLight.addColorStop(gradientPos.max, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(gradientRgb.stop, container.hdr));\n  context.fillStyle = gradientAmbientLight;\n  context.fill();\n}\nfunction drawParticleShadow(container, context, particle, mousePos) {\n  const pos = particle.getPosition(),\n    shadowOptions = container.actualOptions.interactivity?.modes.light?.shadow;\n  if (!shadowOptions) {\n    return;\n  }\n  const shadowRgb = particle.lightShadow;\n  if (!shadowRgb) {\n    return;\n  }\n  const radius = particle.getRadius(),\n    sides = particle.sides,\n    full = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI / sides,\n    angle = -particle.rotation + quarterPI,\n    factor = 1,\n    dots = [];\n  for (let i = 0; i < sides; i++) {\n    dots.push({\n      x: pos.x + radius * Math.sin(angle + full * i) * factor,\n      y: pos.y + radius * Math.cos(angle + full * i) * factor\n    });\n  }\n  const points = [],\n    shadowLength = shadowOptions.length;\n  for (const dot of dots) {\n    const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x),\n      end = {\n        x: dot.x + shadowLength * Math.sin(-dotAngle - halfPI),\n        y: dot.y + shadowLength * Math.cos(-dotAngle - halfPI)\n      };\n    points.push({\n      end: end,\n      start: dot\n    });\n  }\n  const shadowColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(shadowRgb, container.hdr),\n    lastOffset = 1,\n    firstPos = 0,\n    last = points.length - lastOffset;\n  for (let i = last, n = 0; i >= firstPos; n = i--) {\n    context.beginPath();\n    const iPoint = points[i],\n      nPoint = points[n];\n    if (!iPoint || !nPoint) {\n      continue;\n    }\n    context.moveTo(iPoint.start.x, iPoint.start.y);\n    context.lineTo(nPoint.start.x, nPoint.start.y);\n    context.lineTo(nPoint.end.x, nPoint.end.y);\n    context.lineTo(iPoint.end.x, iPoint.end.y);\n    context.fillStyle = shadowColor;\n    context.fill();\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-light/./dist/browser/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   drawLight: () => (/* binding */ drawLight),\n/* harmony export */   drawParticleShadow: () => (/* binding */ drawParticleShadow),\n/* harmony export */   lightMode: () => (/* binding */ lightMode)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst gradientPos = {\n    max: 1,\n    min: 0\n}, halfPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, quarterPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.quarter, arcStart = 0;\nconst lightMode = \"light\";\nfunction drawLight(container, context, mousePos) {\n    const lightOptions = container.actualOptions.interactivity?.modes.light?.area;\n    if (!lightOptions) {\n        return;\n    }\n    context.beginPath();\n    context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI);\n    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius), gradientRgb = container.canvas.mouseLight;\n    if (!gradientRgb?.start || !gradientRgb.stop) {\n        return;\n    }\n    gradientAmbientLight.addColorStop(gradientPos.min, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(gradientRgb.start, container.hdr));\n    gradientAmbientLight.addColorStop(gradientPos.max, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(gradientRgb.stop, container.hdr));\n    context.fillStyle = gradientAmbientLight;\n    context.fill();\n}\nfunction drawParticleShadow(container, context, particle, mousePos) {\n    const pos = particle.getPosition(), shadowOptions = container.actualOptions.interactivity?.modes.light?.shadow;\n    if (!shadowOptions) {\n        return;\n    }\n    const shadowRgb = particle.lightShadow;\n    if (!shadowRgb) {\n        return;\n    }\n    const radius = particle.getRadius(), sides = particle.sides, full = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI / sides, angle = -particle.rotation + quarterPI, factor = 1, dots = [];\n    for(let i = 0; i < sides; i++){\n        dots.push({\n            x: pos.x + radius * Math.sin(angle + full * i) * factor,\n            y: pos.y + radius * Math.cos(angle + full * i) * factor\n        });\n    }\n    const points = [], shadowLength = shadowOptions.length;\n    for (const dot of dots){\n        const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), end = {\n            x: dot.x + shadowLength * Math.sin(-dotAngle - halfPI),\n            y: dot.y + shadowLength * Math.cos(-dotAngle - halfPI)\n        };\n        points.push({\n            end: end,\n            start: dot\n        });\n    }\n    const shadowColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(shadowRgb, container.hdr), lastOffset = 1, firstPos = 0, last = points.length - lastOffset;\n    for(let i = last, n = 0; i >= firstPos; n = i--){\n        context.beginPath();\n        const iPoint = points[i], nPoint = points[n];\n        if (!iPoint || !nPoint) {\n            continue;\n        }\n        context.moveTo(iPoint.start.x, iPoint.start.y);\n        context.lineTo(nPoint.start.x, nPoint.start.y);\n        context.lineTo(nPoint.end.x, nPoint.end.y);\n        context.lineTo(iPoint.end.x, iPoint.end.y);\n        context.fillStyle = shadowColor;\n        context.fill();\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-light/./dist/browser/Utils.js?\n}");
 
 /***/ }
 

package/esm/ExternalLighter.js

@@ -3,6 +3,8 @@ import { ExternalInteractorBase, } from "@tsparticles/plugin-interactivity";
 import { drawLight, lightMode } from "./Utils.js";
 import { Light } from "./Options/Classes/Light.js";
 export class ExternalLighter extends ExternalInteractorBase {
+    maxDistance = 0;
+    _engine;
     constructor(container, engine) {
         super(container);
         this._engine = engine;

package/esm/Options/Classes/Light.js

@@ -2,6 +2,8 @@ import { isNull } from "@tsparticles/engine";
 import { LightArea } from "./LightArea.js";
 import { LightShadow } from "./LightShadow.js";
 export class Light {
+    area;
+    shadow;
     constructor() {
         this.area = new LightArea();
         this.shadow = new LightShadow();

package/esm/Options/Classes/LightArea.js

@@ -1,6 +1,8 @@
 import { isNull } from "@tsparticles/engine";
 import { LightGradient } from "./LightGradient.js";
 export class LightArea {
+    gradient;
+    radius;
     constructor() {
         this.gradient = new LightGradient();
         this.radius = 1000;

package/esm/Options/Classes/LightGradient.js

@@ -1,5 +1,7 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LightGradient {
+    start;
+    stop;
     constructor() {
         this.start = new OptionsColor();
         this.stop = new OptionsColor();

package/esm/Options/Classes/LightShadow.js

@@ -1,5 +1,7 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LightShadow {
+    color;
+    length;
     constructor() {
         this.color = new OptionsColor();
         this.color.value = "#000000";

package/esm/ParticlesLighter.js

@@ -2,9 +2,12 @@ import { isInArray, rangeColorToRgb } from "@tsparticles/engine";
 import { ParticlesInteractorBase } from "@tsparticles/plugin-interactivity";
 import { drawParticleShadow, lightMode } from "./Utils.js";
 export class ParticlesLighter extends ParticlesInteractorBase {
+    maxDistance;
+    _engine;
     constructor(container, engine) {
         super(container);
         this._engine = engine;
+        this.maxDistance = 0;
     }
     clear() {
     }

package/esm/Utils.js

@@ -11,8 +11,7 @@ export function drawLight(container, context, mousePos) {
     }
     context.beginPath();
     context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, doublePI);
-    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius);
-    const gradientRgb = container.canvas.mouseLight;
+    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius), gradientRgb = container.canvas.mouseLight;
     if (!gradientRgb?.start || !gradientRgb.stop) {
         return;
     }

package/esm/index.js

@@ -1,8 +1,8 @@
 export async function loadLightInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity");
-        await loadInteractivityPlugin(e);
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
         e.addInteractor?.("externalLight", async (container) => {
             const { ExternalLighter } = await import("./ExternalLighter.js");
             return new ExternalLighter(container, engine);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/interaction-light",
-  "version": "4.0.0-alpha.5",
+  "version": "4.0.0-beta.0",
   "description": "tsParticles Light interaction",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -101,8 +101,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.5",
-    "@tsparticles/plugin-interactivity": "4.0.0-alpha.5"
+    "@tsparticles/engine": "4.0.0-beta.0",
+    "@tsparticles/plugin-interactivity": "4.0.0-beta.0"
   },
   "publishConfig": {
     "access": "public"