tsparticles 1.38.0 → 1.39.3

package/Core/Canvas.d.ts

@@ -1,6 +1,6 @@
+import type { IContainerPlugin, ICoordinates, IDelta, IDimension, IParticle, IRgb } from "./Interfaces";
 import type { Container } from "./Container";
 import type { Particle } from "./Particle";
-import type { IContainerPlugin, ICoordinates, IDelta, IDimension, IParticle, IRgb } from "./Interfaces";
 export declare class Canvas {
     private readonly container;
     element?: HTMLCanvasElement;

package/Core/Canvas.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
 const Utils_1 = require("../Utils");
-const Utils_2 = require("../Utils");
+const Utils_2 = require("./Utils");
 class Canvas {
     constructor(container) {
         this.container = container;
@@ -27,8 +27,8 @@ class Canvas {
             (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
         }
         this.generatedCanvas =
-            canvas.dataset && Utils_1.Constants.generatedAttribute in canvas.dataset
-                ? canvas.dataset[Utils_1.Constants.generatedAttribute] === "true"
+            canvas.dataset && Utils_2.Constants.generatedAttribute in canvas.dataset
+                ? canvas.dataset[Utils_2.Constants.generatedAttribute] === "true"
                 : this.generatedCanvas;
         this.element = canvas;
         this.originalStyle = (0, Utils_1.deepExtend)({}, this.element.style);
@@ -44,14 +44,14 @@ class Canvas {
             (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
         }
         this.draw((ctx) => {
-            (0, Utils_2.clear)(ctx, this.size);
+            (0, Utils_1.clear)(ctx, this.size);
         });
     }
     paint() {
         const options = this.container.actualOptions;
         this.draw((ctx) => {
             if (options.backgroundMask.enable && options.backgroundMask.cover && this.coverColor) {
-                (0, Utils_2.clear)(ctx, this.size);
+                (0, Utils_1.clear)(ctx, this.size);
                 this.paintBase((0, Utils_1.getStyleFromRgb)(this.coverColor, this.coverColor.a));
             }
             else {
@@ -70,7 +70,7 @@ class Canvas {
         }
         else {
             this.draw((ctx) => {
-                (0, Utils_2.clear)(ctx, this.size);
+                (0, Utils_1.clear)(ctx, this.size);
             });
         }
     }
@@ -276,12 +276,12 @@ class Canvas {
         const originalStyle = this.originalStyle;
         if (options.fullScreen.enable) {
             this.originalStyle = (0, Utils_1.deepExtend)({}, element.style);
-            element.style.position = "fixed";
-            element.style.zIndex = options.fullScreen.zIndex.toString(10);
-            element.style.top = "0";
-            element.style.left = "0";
-            element.style.width = "100%";
-            element.style.height = "100%";
+            element.style.setProperty("position", "fixed", "important");
+            element.style.setProperty("z-index", options.fullScreen.zIndex.toString(10), "important");
+            element.style.setProperty("top", "0", "important");
+            element.style.setProperty("left", "0", "important");
+            element.style.setProperty("width", "100%", "important");
+            element.style.setProperty("height", "100%", "important");
         }
         else if (originalStyle) {
             element.style.position = originalStyle.position;
@@ -299,7 +299,7 @@ class Canvas {
             if (!value) {
                 continue;
             }
-            element.style[key] = value;
+            element.style.setProperty(key, value, "important");
         }
     }
     paintBase(baseColor) {

package/Core/Container.d.ts

@@ -1,13 +1,12 @@
+import { FrameManager, Vector } from "./Utils";
+import type { IAttract, IBubble, IContainerInteractivity, IContainerPlugin, IMovePathGenerator, IRepulse, IShapeDrawer } from "./Interfaces";
 import { Canvas } from "./Canvas";
-import { Particles } from "./Particles";
-import { Retina } from "./Retina";
 import type { IOptions } from "../Options/Interfaces/IOptions";
-import { FrameManager } from "./FrameManager";
-import type { RecursivePartial } from "../Types";
 import { Options } from "../Options/Classes/Options";
 import { Particle } from "./Particle";
-import { Vector } from "./Particle/Vector";
-import { IAttract, IBubble, IContainerInteractivity, IContainerPlugin, IMovePathGenerator, IRepulse, IShapeDrawer } from "./Interfaces";
+import { Particles } from "./Particles";
+import type { RecursivePartial } from "../Types";
+import { Retina } from "./Retina";
 export declare class Container {
     readonly id: string;
     started: boolean;

package/Core/Container.js

@@ -1,17 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Container = void 0;
+const Utils_1 = require("./Utils");
+const Utils_2 = require("../Utils");
 const Canvas_1 = require("./Canvas");
+const Options_1 = require("../Options/Classes/Options");
 const Particles_1 = require("./Particles");
 const Retina_1 = require("./Retina");
-const FrameManager_1 = require("./FrameManager");
-const Options_1 = require("../Options/Classes/Options");
-const Utils_1 = require("../Utils");
-const Vector_1 = require("./Particle/Vector");
 class Container {
     constructor(id, sourceOptions, ...presets) {
         this.id = id;
-        this.fpsLimit = 60;
+        this.fpsLimit = 120;
         this.duration = 0;
         this.lifeTime = 0;
         this.firstStart = true;
@@ -26,11 +25,11 @@ class Container {
         this.retina = new Retina_1.Retina(this);
         this.canvas = new Canvas_1.Canvas(this);
         this.particles = new Particles_1.Particles(this);
-        this.drawer = new FrameManager_1.FrameManager(this);
+        this.drawer = new Utils_1.FrameManager(this);
         this.presets = presets;
         this.pathGenerator = {
             generate: () => {
-                const v = Vector_1.Vector.create(0, 0);
+                const v = Utils_1.Vector.create(0, 0);
                 v.length = Math.random();
                 v.angle = Math.random() * Math.PI * 2;
                 return v;
@@ -85,7 +84,7 @@ class Container {
     }
     pause() {
         if (this.drawAnimationFrame !== undefined) {
-            (0, Utils_1.cancelAnimation)()(this.drawAnimationFrame);
+            (0, Utils_2.cancelAnimation)()(this.drawAnimationFrame);
             delete this.drawAnimationFrame;
         }
         if (this.paused) {
@@ -102,7 +101,7 @@ class Container {
     }
     draw(force) {
         let refreshTime = force;
-        this.drawAnimationFrame = (0, Utils_1.animate)()((timestamp) => {
+        this.drawAnimationFrame = (0, Utils_2.animate)()((timestamp) => {
             if (refreshTime) {
                 this.lastFrameTime = undefined;
                 refreshTime = false;
@@ -183,7 +182,7 @@ class Container {
         this.particles.clear();
         this.canvas.clear();
         if (this.interactivity.element instanceof HTMLElement && this.intersectionObserver) {
-            this.intersectionObserver.observe(this.interactivity.element);
+            this.intersectionObserver.unobserve(this.interactivity.element);
         }
         for (const [, plugin] of this.plugins) {
             if (plugin.stop) {
@@ -332,9 +331,9 @@ class Container {
         this.canvas.initBackground();
         this.canvas.resize();
         this.zLayers = this.actualOptions.zLayers;
-        this.duration = (0, Utils_1.getRangeValue)(this.actualOptions.duration);
+        this.duration = (0, Utils_2.getRangeValue)(this.actualOptions.duration);
         this.lifeTime = 0;
-        this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 60;
+        this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 120;
         const availablePlugins = Utils_1.Plugins.getAvailablePlugins(this);
         for (const [id, plugin] of availablePlugins) {
             this.plugins.set(id, plugin);

package/Core/Interfaces/Gradients.d.ts

@@ -1,7 +1,7 @@
-import type { IColor } from "./Colors";
 import type { GradientType, RotateDirectionAlt } from "../../Enums";
-import type { RotateDirection } from "../../Enums";
+import type { IColor } from "./Colors";
 import type { RangeValue } from "../../Types";
+import type { RotateDirection } from "../../Enums";
 export interface IGradientColorOpacity {
     value: RangeValue;
 }

package/Core/Interfaces/ICircleBouncer.d.ts

@@ -1,5 +1,5 @@
-import type { Vector } from "../Particle/Vector";
 import type { ICoordinates } from "./ICoordinates";
+import type { Vector } from "../Utils";
 export interface ICircleBouncer {
     position: ICoordinates;
     velocity: Vector;

package/Core/Interfaces/IContainerPlugin.d.ts

@@ -1,10 +1,10 @@
+import type { ClickMode, OutModeDirection } from "../../Enums";
+import type { IColor } from "./Colors";
 import type { ICoordinates } from "./ICoordinates";
+import type { IDelta } from "./IDelta";
+import type { IOptions } from "../../Options/Interfaces/IOptions";
 import type { Particle } from "../Particle";
-import type { ClickMode, OutModeDirection } from "../../Enums";
 import type { RecursivePartial } from "../../Types";
-import type { IOptions } from "../../Options/Interfaces/IOptions";
-import type { IDelta } from "./IDelta";
-import type { IColor } from "./Colors";
 export interface IContainerPlugin {
     clickPositionValid?: (position: ICoordinates) => boolean;
     draw?: (context: CanvasRenderingContext2D, delta: IDelta) => void;

package/Core/Interfaces/IExternalInteractor.d.ts

@@ -1,5 +1,5 @@
-import type { IInteractor } from "./IInteractor";
 import type { IDelta } from "./IDelta";
+import type { IInteractor } from "./IInteractor";
 export interface IExternalInteractor extends IInteractor {
     isEnabled(): boolean;
     interact(delta: IDelta): void;

package/Core/Interfaces/IInteractor.d.ts

@@ -1,5 +1,5 @@
-import type { Particle } from "../Particle";
 import type { InteractorType } from "../../Enums";
+import type { Particle } from "../Particle";
 export interface IInteractor {
     type: InteractorType;
     reset(particle: Particle): void;

package/Core/Interfaces/IMovePathGenerator.d.ts

@@ -1,6 +1,6 @@
 import type { Container } from "../Container";
 import type { Particle } from "../Particle";
-import { Vector } from "../Particle/Vector";
+import { Vector } from "../Utils";
 export interface IMovePathGenerator {
     generate: (particle: Particle) => Vector;
     init: (container: Container) => void;

package/Core/Interfaces/IParticle.d.ts

@@ -1,17 +1,17 @@
-import type { IStroke } from "../../Options/Interfaces/Particles/IStroke";
-import type { ICoordinates3d } from "./ICoordinates";
-import type { ShapeType } from "../../Enums";
+import type { IHsl, IRgb } from "./Colors";
 import type { IParticleTiltValueAnimation, IParticleValueAnimation } from "./IParticleValueAnimation";
-import type { IShapeValues } from "./IShapeValues";
 import type { IBubbleParticleData } from "./IBubbleParticleData";
-import type { IParticles } from "../../Options/Interfaces/Particles/IParticles";
-import type { IHsl, IRgb } from "./Colors";
-import type { IParticleHslAnimation } from "./IParticleHslAnimation";
-import type { Vector } from "../Particle/Vector";
+import type { ICoordinates3d } from "./ICoordinates";
 import type { IParticleGradientAnimation } from "./IParticleGradientAnimation";
+import type { IParticleHslAnimation } from "./IParticleHslAnimation";
 import type { IParticleRetinaProps } from "./IParticleRetinaProps";
 import type { IParticleRoll } from "./IParticleRoll";
 import type { IParticleWobble } from "./IParticleWobble";
+import type { IParticles } from "../../Options/Interfaces/Particles/IParticles";
+import type { IShapeValues } from "./IShapeValues";
+import type { IStroke } from "../../Options/Interfaces/Particles/IStroke";
+import type { ShapeType } from "../../Enums";
+import type { Vector } from "../Utils";
 export interface IParticle {
     misplaced: boolean;
     randomIndexData?: number;

package/Core/Interfaces/IParticleGradientAnimation.d.ts

@@ -1,6 +1,6 @@
-import type { IParticleValueAnimation } from "./IParticleValueAnimation";
 import type { GradientType } from "../../Enums";
 import type { IParticleGradientColorAnimation } from "./IParticleGradientColorAnimation";
+import type { IParticleValueAnimation } from "./IParticleValueAnimation";
 export interface IParticleGradientAnimation {
     angle: IParticleValueAnimation<number>;
     type: GradientType;

package/Core/Interfaces/IParticleSpin.d.ts

@@ -1,5 +1,5 @@
-import type { RotateDirection } from "../../Enums";
 import type { ICoordinates } from "./ICoordinates";
+import type { RotateDirection } from "../../Enums";
 export interface IParticleSpin {
     acceleration: number;
     angle: number;

package/Core/Interfaces/IParticlesInteractor.d.ts

@@ -1,6 +1,6 @@
-import type { Particle } from "../Particle";
-import type { IInteractor } from "./IInteractor";
 import type { IDelta } from "./IDelta";
+import type { IInteractor } from "./IInteractor";
+import type { Particle } from "../Particle";
 export interface IParticlesInteractor extends IInteractor {
     isEnabled(particle: Particle): boolean;
     interact(particle: Particle, delta: IDelta): void;

package/Core/Interfaces/IPlugin.d.ts

@@ -1,8 +1,8 @@
 import type { Container } from "../Container";
 import type { IContainerPlugin } from "./IContainerPlugin";
 import type { IOptions } from "../../Options/Interfaces/IOptions";
-import type { RecursivePartial } from "../../Types";
 import type { Options } from "../../Options/Classes/Options";
+import type { RecursivePartial } from "../../Types";
 export interface IPlugin {
     readonly id: string;
     needsPlugin(options?: RecursivePartial<IOptions>): boolean;

package/Core/Interfaces/index.d.ts

@@ -19,13 +19,15 @@ export * from "./IParticle";
 export * from "./IParticleGradientAnimation";
 export * from "./IParticleGradientColorAnimation";
 export * from "./IParticleHslAnimation";
+export * from "./IParticlesInteractor";
 export * from "./IParticleLife";
 export * from "./IParticleLoops";
 export * from "./IParticleRetinaProps";
+export * from "./IParticleRoll";
 export * from "./IParticleSpin";
 export * from "./IParticleUpdater";
 export * from "./IParticleValueAnimation";
-export * from "./IParticlesInteractor";
+export * from "./IParticleWobble";
 export * from "./IPlugin";
 export * from "./IRangeValue";
 export * from "./IRectSideResult";

package/Core/Interfaces/index.js

@@ -31,13 +31,15 @@ __exportStar(require("./IParticle"), exports);
 __exportStar(require("./IParticleGradientAnimation"), exports);
 __exportStar(require("./IParticleGradientColorAnimation"), exports);
 __exportStar(require("./IParticleHslAnimation"), exports);
+__exportStar(require("./IParticlesInteractor"), exports);
 __exportStar(require("./IParticleLife"), exports);
 __exportStar(require("./IParticleLoops"), exports);
 __exportStar(require("./IParticleRetinaProps"), exports);
+__exportStar(require("./IParticleRoll"), exports);
 __exportStar(require("./IParticleSpin"), exports);
 __exportStar(require("./IParticleUpdater"), exports);
 __exportStar(require("./IParticleValueAnimation"), exports);
-__exportStar(require("./IParticlesInteractor"), exports);
+__exportStar(require("./IParticleWobble"), exports);
 __exportStar(require("./IPlugin"), exports);
 __exportStar(require("./IRangeValue"), exports);
 __exportStar(require("./IRectSideResult"), exports);

package/Core/Loader.d.ts

@@ -1,7 +1,7 @@
 import { Container } from "./Container";
 import type { IOptions } from "../Options/Interfaces/IOptions";
-import type { RecursivePartial } from "../Types";
 import type { Particle } from "./Particle";
+import type { RecursivePartial } from "../Types";
 import type { SingleOrMultiple } from "../Types";
 interface LoaderParams {
     element?: HTMLElement;

package/Core/Loader.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loader = void 0;
+const Utils_1 = require("./Utils");
 const Container_1 = require("./Container");
-const Utils_1 = require("../Utils");
+const Utils_2 = require("../Utils");
 const tsParticlesDom = [];
 function fetchError(statusCode) {
     console.error(`Error tsParticles - fetch status: ${statusCode}`);
@@ -30,7 +31,7 @@ class Loader {
             domContainer.id = tagId;
             (_c = document.querySelector("body")) === null || _c === void 0 ? void 0 : _c.append(domContainer);
         }
-        const currentOptions = options instanceof Array ? (0, Utils_1.itemFromArray)(options, index) : options;
+        const currentOptions = options instanceof Array ? (0, Utils_2.itemFromArray)(options, index) : options;
         const dom = Loader.dom();
         const oldIndex = dom.findIndex((v) => v.id === tagId);
         if (oldIndex >= 0) {
@@ -72,7 +73,7 @@ class Loader {
     }
     static async loadRemoteOptions(params) {
         const { url: jsonUrl, index } = params;
-        const url = jsonUrl instanceof Array ? (0, Utils_1.itemFromArray)(jsonUrl, index) : jsonUrl;
+        const url = jsonUrl instanceof Array ? (0, Utils_2.itemFromArray)(jsonUrl, index) : jsonUrl;
         if (!url) {
             return;
         }

package/Core/Particle.d.ts

@@ -1,14 +1,11 @@
+import { ShapeType } from "../Enums";
+import type { IBubbleParticleData, ICoordinates, ICoordinates3d, IDelta, IHsl, IParticle, IParticleGradientAnimation, IParticleHslAnimation, IParticleLife, IParticleNumericValueAnimation, IParticleRetinaProps, IParticleRoll, IParticleSpin, IParticleTiltValueAnimation, IParticleValueAnimation, IParticleWobble, IRgb, IShapeValues } from "./Interfaces";
+import { Vector, Vector3d } from "./Utils";
 import type { Container } from "./Container";
 import type { IParticles } from "../Options/Interfaces/Particles/IParticles";
 import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions";
-import { ShapeType } from "../Enums";
 import type { RecursivePartial } from "../Types";
 import type { Stroke } from "../Options/Classes/Particles/Stroke";
-import { Vector } from "./Particle/Vector";
-import type { IBubbleParticleData, ICoordinates, ICoordinates3d, IDelta, IHsl, IParticle, IParticleGradientAnimation, IParticleHslAnimation, IParticleLife, IParticleNumericValueAnimation, IParticleSpin, IParticleTiltValueAnimation, IParticleValueAnimation, IRgb, IShapeValues, IParticleRetinaProps } from "./Interfaces";
-import { Vector3d } from "./Particle/Vector3d";
-import { IParticleRoll } from "./Interfaces/IParticleRoll";
-import { IParticleWobble } from "./Interfaces/IParticleWobble";
 export declare class Particle implements IParticle {
     readonly id: number;
     readonly container: Container;

package/Core/Particle.js

@@ -1,14 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Particle = void 0;
+const Utils_1 = require("./Utils");
+const Utils_2 = require("../Utils");
 const ParticlesOptions_1 = require("../Options/Classes/Particles/ParticlesOptions");
 const Shape_1 = require("../Options/Classes/Particles/Shape/Shape");
-const Enums_1 = require("../Enums");
-const Utils_1 = require("../Utils");
-const Vector_1 = require("./Particle/Vector");
-const Vector3d_1 = require("./Particle/Vector3d");
 const fixOutMode = (data) => {
-    if ((0, Utils_1.isInArray)(data.outMode, data.checkModes) || (0, Utils_1.isInArray)(data.outMode, data.checkModes)) {
+    if ((0, Utils_2.isInArray)(data.outMode, data.checkModes) || (0, Utils_2.isInArray)(data.outMode, data.checkModes)) {
         if (data.coord > data.maxCoord - data.radius * 2) {
             data.setCb(-data.radius);
         }
@@ -39,13 +37,13 @@ class Particle {
         particlesOptions.load(mainOptions.particles);
         const shapeType = particlesOptions.shape.type;
         const reduceDuplicates = particlesOptions.reduceDuplicates;
-        this.shape = shapeType instanceof Array ? (0, Utils_1.itemFromArray)(shapeType, this.id, reduceDuplicates) : shapeType;
+        this.shape = shapeType instanceof Array ? (0, Utils_2.itemFromArray)(shapeType, this.id, reduceDuplicates) : shapeType;
         if (overrideOptions === null || overrideOptions === void 0 ? void 0 : overrideOptions.shape) {
             if (overrideOptions.shape.type) {
                 const overrideShapeType = overrideOptions.shape.type;
                 this.shape =
                     overrideShapeType instanceof Array
-                        ? (0, Utils_1.itemFromArray)(overrideShapeType, this.id, reduceDuplicates)
+                        ? (0, Utils_2.itemFromArray)(overrideShapeType, this.id, reduceDuplicates)
                         : overrideShapeType;
             }
             const shapeOptions = new Shape_1.Shape();
@@ -66,34 +64,34 @@ class Particle {
         this.fill = (_d = (_c = this.shapeData) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : this.fill;
         this.close = (_f = (_e = this.shapeData) === null || _e === void 0 ? void 0 : _e.close) !== null && _f !== void 0 ? _f : this.close;
         this.options = particlesOptions;
-        this.pathDelay = (0, Utils_1.getValue)(this.options.move.path.delay) * 1000;
-        const zIndexValue = (0, Utils_1.getRangeValue)(this.options.zIndex.value);
+        this.pathDelay = (0, Utils_2.getValue)(this.options.move.path.delay) * 1000;
+        const zIndexValue = (0, Utils_2.getRangeValue)(this.options.zIndex.value);
         container.retina.initParticle(this);
         const sizeOptions = this.options.size, sizeRange = sizeOptions.value;
         this.size = {
             enable: sizeOptions.animation.enable,
-            value: (0, Utils_1.getValue)(sizeOptions) * container.retina.pixelRatio,
-            max: (0, Utils_1.getRangeMax)(sizeRange) * pxRatio,
-            min: (0, Utils_1.getRangeMin)(sizeRange) * pxRatio,
+            value: (0, Utils_2.getValue)(sizeOptions) * container.retina.pixelRatio,
+            max: (0, Utils_2.getRangeMax)(sizeRange) * pxRatio,
+            min: (0, Utils_2.getRangeMin)(sizeRange) * pxRatio,
             loops: 0,
             maxLoops: sizeOptions.animation.count,
         };
         const sizeAnimation = sizeOptions.animation;
         if (sizeAnimation.enable) {
-            this.size.status = Enums_1.AnimationStatus.increasing;
+            this.size.status = 0;
             switch (sizeAnimation.startValue) {
-                case Enums_1.StartValueType.min:
+                case "min":
                     this.size.value = this.size.min;
-                    this.size.status = Enums_1.AnimationStatus.increasing;
+                    this.size.status = 0;
                     break;
-                case Enums_1.StartValueType.random:
-                    this.size.value = (0, Utils_1.randomInRange)(this.size) * pxRatio;
-                    this.size.status = Math.random() >= 0.5 ? Enums_1.AnimationStatus.increasing : Enums_1.AnimationStatus.decreasing;
+                case "random":
+                    this.size.value = (0, Utils_2.randomInRange)(this.size) * pxRatio;
+                    this.size.status = Math.random() >= 0.5 ? 0 : 1;
                     break;
-                case Enums_1.StartValueType.max:
+                case "max":
                 default:
                     this.size.value = this.size.max;
-                    this.size.status = Enums_1.AnimationStatus.decreasing;
+                    this.size.status = 1;
                     break;
             }
             this.size.velocity =
@@ -103,16 +101,16 @@ class Particle {
                 this.size.velocity *= Math.random();
             }
         }
-        this.direction = (0, Utils_1.getParticleDirectionAngle)(this.options.move.direction);
+        this.direction = (0, Utils_2.getParticleDirectionAngle)(this.options.move.direction);
         this.bubble = {
             inRange: false,
         };
         this.initialVelocity = this.calculateVelocity();
         this.velocity = this.initialVelocity.copy();
-        this.moveDecay = 1 - (0, Utils_1.getRangeValue)(this.options.move.decay);
-        this.position = this.calcPosition(container, position, (0, Utils_1.clamp)(zIndexValue, 0, container.zLayers));
+        this.moveDecay = 1 - (0, Utils_2.getRangeValue)(this.options.move.decay);
+        this.position = this.calcPosition(container, position, (0, Utils_2.clamp)(zIndexValue, 0, container.zLayers));
         this.initialPosition = this.position.copy();
-        this.offset = Vector_1.Vector.origin;
+        this.offset = Utils_1.Vector.origin;
         const particles = container.particles;
         particles.needsSort = particles.needsSort || particles.lastZIndex < this.position.z;
         particles.lastZIndex = this.position.z;
@@ -141,16 +139,16 @@ class Particle {
                 y: (spinPos.y / 100) * container.canvas.size.height,
             };
             const pos = this.getPosition();
-            const distance = (0, Utils_1.getDistance)(pos, spinCenter);
+            const distance = (0, Utils_2.getDistance)(pos, spinCenter);
             this.spin = {
                 center: spinCenter,
-                direction: this.velocity.x >= 0 ? Enums_1.RotateDirection.clockwise : Enums_1.RotateDirection.counterClockwise,
+                direction: this.velocity.x >= 0 ? "clockwise" : "counter-clockwise",
                 angle: this.velocity.angle,
                 radius: distance,
-                acceleration: (_j = this.retina.spinAcceleration) !== null && _j !== void 0 ? _j : (0, Utils_1.getRangeValue)(this.options.move.spin.acceleration),
+                acceleration: (_j = this.retina.spinAcceleration) !== null && _j !== void 0 ? _j : (0, Utils_2.getRangeValue)(this.options.move.spin.acceleration),
             };
         }
-        this.shadowColor = (0, Utils_1.colorToRgb)(this.options.shadow.color);
+        this.shadowColor = (0, Utils_2.colorToRgb)(this.options.shadow.color);
         for (const updater of container.particles.updaters) {
             if (updater.init) {
                 updater.init(this);
@@ -199,7 +197,7 @@ class Particle {
     }
     getFillColor() {
         var _a, _b, _c;
-        const color = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : (0, Utils_1.getHslFromAnimation)(this.color);
+        const color = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : (0, Utils_2.getHslFromAnimation)(this.color);
         if (color && this.roll && (this.backColor || this.roll.alter)) {
             const rolled = Math.floor(((_c = (_b = this.roll) === null || _b === void 0 ? void 0 : _b.angle) !== null && _c !== void 0 ? _c : 0) / (Math.PI / 2)) % 2;
             if (rolled) {
@@ -207,7 +205,7 @@ class Particle {
                     return this.backColor;
                 }
                 if (this.roll.alter) {
-                    return (0, Utils_1.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);
+                    return (0, Utils_2.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);
                 }
             }
         }
@@ -215,7 +213,7 @@ class Particle {
     }
     getStrokeColor() {
         var _a, _b;
-        return (_b = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : (0, Utils_1.getHslFromAnimation)(this.strokeColor)) !== null && _b !== void 0 ? _b : this.getFillColor();
+        return (_b = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : (0, Utils_2.getHslFromAnimation)(this.strokeColor)) !== null && _b !== void 0 ? _b : this.getFillColor();
     }
     destroy(override) {
         this.destroyed = true;
@@ -234,7 +232,7 @@ class Particle {
             return;
         }
         const destroyOptions = this.options.destroy;
-        if (destroyOptions.mode === Enums_1.DestroyMode.split) {
+        if (destroyOptions.mode === "split") {
             this.split();
         }
     }
@@ -249,7 +247,7 @@ class Particle {
         if (splitOptions.count >= 0 && this.splitCount++ > splitOptions.count) {
             return;
         }
-        const rate = (0, Utils_1.getRangeValue)(splitOptions.rate.value);
+        const rate = (0, Utils_2.getRangeValue)(splitOptions.rate.value);
         for (let i = 0; i < rate; i++) {
             this.container.particles.addSplitParticle(this);
         }
@@ -259,16 +257,16 @@ class Particle {
         for (const [, plugin] of container.plugins) {
             const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
             if (pluginPos !== undefined) {
-                return Vector3d_1.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
+                return Utils_1.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
             }
         }
         const canvasSize = container.canvas.size;
-        const pos = Vector3d_1.Vector3d.create((_a = position === null || position === void 0 ? void 0 : position.x) !== null && _a !== void 0 ? _a : Math.random() * canvasSize.width, (_b = position === null || position === void 0 ? void 0 : position.y) !== null && _b !== void 0 ? _b : Math.random() * canvasSize.height, zIndex);
+        const pos = Utils_1.Vector3d.create((_a = position === null || position === void 0 ? void 0 : position.x) !== null && _a !== void 0 ? _a : Math.random() * canvasSize.width, (_b = position === null || position === void 0 ? void 0 : position.y) !== null && _b !== void 0 ? _b : Math.random() * canvasSize.height, zIndex);
         const radius = this.getRadius();
         const outModes = this.options.move.outModes, fixHorizontal = (outMode) => {
             fixOutMode({
                 outMode,
-                checkModes: [Enums_1.OutMode.bounce, Enums_1.OutMode.bounceHorizontal],
+                checkModes: ["bounce", "bounce-horizontal"],
                 coord: pos.x,
                 maxCoord: container.canvas.size.width,
                 setCb: (value) => (pos.x += value),
@@ -277,7 +275,7 @@ class Particle {
         }, fixVertical = (outMode) => {
             fixOutMode({
                 outMode,
-                checkModes: [Enums_1.OutMode.bounce, Enums_1.OutMode.bounceVertical],
+                checkModes: ["bounce", "bounce-vertical"],
                 coord: pos.y,
                 maxCoord: container.canvas.size.height,
                 setCb: (value) => (pos.y += value),
@@ -309,7 +307,7 @@ class Particle {
         }
         let overlaps = false;
         for (const particle of this.container.particles.array) {
-            if ((0, Utils_1.getDistance)(pos, particle.position) < radius + particle.getRadius()) {
+            if ((0, Utils_2.getDistance)(pos, particle.position) < radius + particle.getRadius()) {
                 overlaps = true;
                 break;
             }
@@ -317,7 +315,7 @@ class Particle {
         return overlaps;
     }
     calculateVelocity() {
-        const baseVelocity = (0, Utils_1.getParticleBaseVelocity)(this.direction);
+        const baseVelocity = (0, Utils_2.getParticleBaseVelocity)(this.direction);
         const res = baseVelocity.copy();
         const moveOptions = this.options.move;
         const rad = (Math.PI / 180) * moveOptions.angle.value;
@@ -327,7 +325,7 @@ class Particle {
             right: radOffset + rad / 2,
         };
         if (!moveOptions.straight) {
-            res.angle += (0, Utils_1.randomInRange)((0, Utils_1.setRangeValue)(range.left, range.right));
+            res.angle += (0, Utils_2.randomInRange)((0, Utils_2.setRangeValue)(range.left, range.right));
         }
         if (moveOptions.random && typeof moveOptions.speed === "number") {
             res.length *= Math.random();
@@ -337,7 +335,7 @@ class Particle {
     loadShapeData(shapeOptions, reduceDuplicates) {
         const shapeData = shapeOptions.options[this.shape];
         if (shapeData) {
-            return (0, Utils_1.deepExtend)({}, shapeData instanceof Array ? (0, Utils_1.itemFromArray)(shapeData, this.id, reduceDuplicates) : shapeData);
+            return (0, Utils_2.deepExtend)({}, shapeData instanceof Array ? (0, Utils_2.itemFromArray)(shapeData, this.id, reduceDuplicates) : shapeData);
         }
     }
     loadLife() {
@@ -346,13 +344,13 @@ class Particle {
         const lifeOptions = particlesOptions.life;
         const life = {
             delay: container.retina.reduceFactor
-                ? (((0, Utils_1.getRangeValue)(lifeOptions.delay.value) * (lifeOptions.delay.sync ? 1 : Math.random())) /
+                ? (((0, Utils_2.getRangeValue)(lifeOptions.delay.value) * (lifeOptions.delay.sync ? 1 : Math.random())) /
                     container.retina.reduceFactor) *
                     1000
                 : 0,
             delayTime: 0,
             duration: container.retina.reduceFactor
-                ? (((0, Utils_1.getRangeValue)(lifeOptions.duration.value) * (lifeOptions.duration.sync ? 1 : Math.random())) /
+                ? (((0, Utils_2.getRangeValue)(lifeOptions.duration.value) * (lifeOptions.duration.sync ? 1 : Math.random())) /
                     container.retina.reduceFactor) *
                     1000
                 : 0,