tsparticles 1.41.4 → 1.42.0

package/Options/Classes/Particles/Tilt/TiltAnimation.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TiltAnimation = void 0;
+const Utils_1 = require("../../../../Utils");
 class TiltAnimation {
     constructor() {
         this.enable = false;
@@ -15,7 +16,7 @@ class TiltAnimation {
             this.enable = data.enable;
         }
         if (data.speed !== undefined) {
-            this.speed = data.speed;
+            this.speed = (0, Utils_1.setRangeValue)(data.speed);
         }
         if (data.sync !== undefined) {
             this.sync = data.sync;

package/Options/Classes/Particles/Twinkle/TwinkleValues.d.ts

@@ -1,12 +1,12 @@
+import type { RangeValue, RecursivePartial } from "../../../../Types";
 import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
 import type { ITwinkleValues } from "../../../Interfaces/Particles/Twinkle/ITwinkleValues";
 import { OptionsColor } from "../../OptionsColor";
-import type { RecursivePartial } from "../../../../Types";
 export declare class TwinkleValues implements ITwinkleValues, IOptionLoader<ITwinkleValues> {
     color?: OptionsColor;
     enable: boolean;
     frequency: number;
-    opacity: number;
+    opacity: RangeValue;
     constructor();
     load(data?: RecursivePartial<ITwinkleValues>): void;
 }

package/Options/Classes/Particles/Twinkle/TwinkleValues.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TwinkleValues = void 0;
 const OptionsColor_1 = require("../../OptionsColor");
+const Utils_1 = require("../../../../Utils");
 class TwinkleValues {
     constructor() {
         this.enable = false;
@@ -22,7 +23,7 @@ class TwinkleValues {
             this.frequency = data.frequency;
         }
         if (data.opacity !== undefined) {
-            this.opacity = data.opacity;
+            this.opacity = (0, Utils_1.setRangeValue)(data.opacity);
         }
     }
 }

package/Options/Interfaces/IAnimation.d.ts

@@ -1,6 +1,7 @@
+import { RangeValue } from "../../Types";
 export interface IAnimation {
-    count: number;
+    count: RangeValue;
     enable: boolean;
-    speed: number;
+    speed: RangeValue;
     sync: boolean;
 }

package/Options/Interfaces/Particles/Move/IAttract.d.ts

@@ -1,6 +1,7 @@
-import type { ICoordinates } from "../../../../Core/Interfaces/ICoordinates";
+import type { ICoordinates } from "../../../../Core";
+import type { RangeValue } from "../../../../Types";
 export interface IAttract {
-    distance: number;
+    distance: RangeValue;
     enable: boolean;
     rotateX: number;
     rotateY: number;

package/Options/Interfaces/Particles/Move/IMoveAngle.d.ts

@@ -1,4 +1,5 @@
+import type { RangeValue } from "../../../../Types";
 export interface IMoveAngle {
-    offset: number;
-    value: number;
+    offset: RangeValue;
+    value: RangeValue;
 }

package/Options/Interfaces/Particles/Move/IMoveGravity.d.ts

@@ -1,6 +1,7 @@
+import type { RangeValue } from "../../../../Types";
 export interface IMoveGravity {
-    acceleration: number;
+    acceleration: RangeValue;
     enable: boolean;
     inverse: boolean;
-    maxSpeed: number;
+    maxSpeed: RangeValue;
 }

package/Options/Interfaces/Particles/Orbit/IOrbit.d.ts

@@ -2,11 +2,12 @@ import type { IAnimatable } from "../../IAnimatable";
 import type { IAnimation } from "../../IAnimation";
 import type { IColor } from "../../../../Core";
 import type { IValueWithRandom } from "../../IValueWithRandom";
+import type { RangeValue } from "../../../../Types";
 export interface IOrbit extends IAnimatable<IAnimation> {
     color?: string | IColor;
     enable: boolean;
-    radius?: number;
+    radius?: RangeValue;
     rotation: IValueWithRandom;
-    opacity: number;
-    width: number;
+    opacity: RangeValue;
+    width: RangeValue;
 }

package/Options/Interfaces/Particles/Repulse/IRepulse.d.ts

@@ -1,8 +1,9 @@
 import type { IValueWithRandom } from "../../IValueWithRandom";
+import type { RangeValue } from "../../../../Types";
 export interface IRepulse extends IValueWithRandom {
     enabled: boolean;
-    distance: number;
-    duration: number;
-    factor: number;
-    speed: number;
+    distance: RangeValue;
+    duration: RangeValue;
+    factor: RangeValue;
+    speed: RangeValue;
 }

package/Options/Interfaces/Particles/Roll/IRollLight.d.ts

@@ -1,4 +1,5 @@
+import type { RangeValue } from "../../../../Types";
 export interface IRollLight {
     enable: boolean;
-    value: number;
+    value: RangeValue;
 }

package/Options/Interfaces/Particles/Rotate/IRotateAnimation.d.ts

@@ -1,5 +1,6 @@
+import type { RangeValue } from "../../../../Types";
 export interface IRotateAnimation {
     enable: boolean;
-    speed: number;
+    speed: RangeValue;
     sync: boolean;
 }

package/Options/Interfaces/Particles/Tilt/ITiltAnimation.d.ts

@@ -1,5 +1,6 @@
+import type { RangeValue } from "../../../../Types";
 export interface ITiltAnimation {
     enable: boolean;
-    speed: number;
+    speed: RangeValue;
     sync: boolean;
 }

package/Options/Interfaces/Particles/Twinkle/ITwinkleValues.d.ts

@@ -1,7 +1,8 @@
-import type { IColor } from "../../../../Core/Interfaces/Colors";
+import type { IColor } from "../../../../Core";
+import type { RangeValue } from "../../../../Types";
 export interface ITwinkleValues {
     color?: string | IColor;
     enable: boolean;
     frequency: number;
-    opacity: number;
+    opacity: RangeValue;
 }

package/Plugins/Absorbers/AbsorberInstance.js

@@ -105,7 +105,7 @@ class AbsorberInstance {
         var _a, _b;
         const container = this.container;
         const percentPosition = this.options.position;
-        return Core_1.Vector.create((((_a = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.x) !== null && _a !== void 0 ? _a : Math.random() * 100) / 100) * container.canvas.size.width, (((_b = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.y) !== null && _b !== void 0 ? _b : Math.random() * 100) / 100) * container.canvas.size.height);
+        return Core_1.Vector.create(((0, Utils_1.getRangeValue)((_a = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.x) !== null && _a !== void 0 ? _a : Math.random() * 100) / 100) * container.canvas.size.width, ((0, Utils_1.getRangeValue)((_b = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.y) !== null && _b !== void 0 ? _b : Math.random() * 100) / 100) * container.canvas.size.height);
     }
     updateParticlePosition(particle, v) {
         var _a;

package/Plugins/Absorbers/Options/Classes/Absorber.d.ts

@@ -1,7 +1,7 @@
 import { AbsorberSize } from "./AbsorberSize";
 import type { IAbsorber } from "../Interfaces/IAbsorber";
-import type { ICoordinates } from "../../../../Core";
 import type { IOptionLoader } from "../../../../Options/Interfaces/IOptionLoader";
+import type { IRangedCoordinates } from "../../../../Core";
 import { OptionsColor } from "../../../../Options/Classes/OptionsColor";
 import type { RecursivePartial } from "../../../../Types";
 export declare class Absorber implements IAbsorber, IOptionLoader<IAbsorber> {
@@ -9,7 +9,7 @@ export declare class Absorber implements IAbsorber, IOptionLoader<IAbsorber> {
     draggable: boolean;
     name?: string;
     opacity: number;
-    position?: RecursivePartial<ICoordinates>;
+    position?: RecursivePartial<IRangedCoordinates>;
     size: AbsorberSize;
     destroy: boolean;
     orbits: boolean;

package/Plugins/Absorbers/Options/Classes/Absorber.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Absorber = void 0;
 const AbsorberSize_1 = require("./AbsorberSize");
 const OptionsColor_1 = require("../../../../Options/Classes/OptionsColor");
+const Utils_1 = require("../../../../Utils");
 class Absorber {
     constructor() {
         this.color = new OptionsColor_1.OptionsColor();
@@ -28,10 +29,13 @@ class Absorber {
             this.opacity = data.opacity;
         }
         if (data.position !== undefined) {
-            this.position = {
-                x: data.position.x,
-                y: data.position.y,
-            };
+            this.position = {};
+            if (data.position.x !== undefined) {
+                this.position.x = (0, Utils_1.setRangeValue)(data.position.x);
+            }
+            if (data.position.y !== undefined) {
+                this.position.y = (0, Utils_1.setRangeValue)(data.position.y);
+            }
         }
         if (data.size !== undefined) {
             this.size.load(data.size);

package/Plugins/Absorbers/Options/Interfaces/IAbsorber.d.ts

@@ -1,11 +1,11 @@
-import type { IColor, ICoordinates } from "../../../../Core";
+import type { IColor, IRangedCoordinates } from "../../../../Core";
 import type { IAbsorberSize } from "./IAbsorberSize";
 import { RecursivePartial } from "../../../../Types";
 export interface IAbsorber {
     color: IColor | string;
     name?: string;
     opacity: number;
-    position?: RecursivePartial<ICoordinates>;
+    position?: RecursivePartial<IRangedCoordinates>;
     size: IAbsorberSize;
     draggable: boolean;
     destroy: boolean;

package/Plugins/Emitters/EmitterInstance.js

@@ -18,8 +18,8 @@ const Emitter_1 = require("./Options/Classes/Emitter");
 const EmitterSize_1 = require("./Options/Classes/EmitterSize");
 class EmitterInstance {
     constructor(engine, emitters, container, options, position) {
-        var _a, _b, _c, _d, _e, _f;
-        var _g;
+        var _a, _b, _c, _d, _e, _f, _g;
+        var _h;
         this.emitters = emitters;
         this.container = container;
         _EmitterInstance_firstSpawn.set(this, void 0);
@@ -38,22 +38,23 @@ class EmitterInstance {
             this.options.load(options);
         }
         this.spawnDelay = (((_a = this.options.life.delay) !== null && _a !== void 0 ? _a : 0) * 1000) / this.container.retina.reduceFactor;
+        this.position = (_b = this.initialPosition) !== null && _b !== void 0 ? _b : this.calcPosition();
         this.name = this.options.name;
-        this.shape = (_b = __classPrivateFieldGet(this, _EmitterInstance_engine, "f").emitterShapeManager) === null || _b === void 0 ? void 0 : _b.getShape(this.options.shape);
+        this.shape = (_c = __classPrivateFieldGet(this, _EmitterInstance_engine, "f").emitterShapeManager) === null || _c === void 0 ? void 0 : _c.getShape(this.options.shape);
         this.fill = this.options.fill;
         __classPrivateFieldSet(this, _EmitterInstance_firstSpawn, !this.options.life.wait, "f");
         __classPrivateFieldSet(this, _EmitterInstance_startParticlesAdded, false, "f");
         let particlesOptions = (0, Utils_1.deepExtend)({}, this.options.particles);
         particlesOptions !== null && particlesOptions !== void 0 ? particlesOptions : (particlesOptions = {});
-        (_c = particlesOptions.move) !== null && _c !== void 0 ? _c : (particlesOptions.move = {});
-        (_d = (_g = particlesOptions.move).direction) !== null && _d !== void 0 ? _d : (_g.direction = this.options.direction);
+        (_d = particlesOptions.move) !== null && _d !== void 0 ? _d : (particlesOptions.move = {});
+        (_e = (_h = particlesOptions.move).direction) !== null && _e !== void 0 ? _e : (_h.direction = this.options.direction);
         if (this.options.spawnColor) {
             this.spawnColor = (0, Utils_1.colorToHsl)(this.options.spawnColor);
         }
         this.paused = !this.options.autoPlay;
         this.particlesOptions = particlesOptions;
         this.size =
-            (_e = this.options.size) !== null && _e !== void 0 ? _e : (() => {
+            (_f = this.options.size) !== null && _f !== void 0 ? _f : (() => {
                 const size = new EmitterSize_1.EmitterSize();
                 size.load({
                     height: 0,
@@ -62,7 +63,7 @@ class EmitterInstance {
                 });
                 return size;
             })();
-        this.lifeCount = (_f = this.options.life.count) !== null && _f !== void 0 ? _f : -1;
+        this.lifeCount = (_g = this.options.life.count) !== null && _g !== void 0 ? _g : -1;
         this.immortal = this.lifeCount <= 0;
         this.play();
     }
@@ -210,8 +211,8 @@ class EmitterInstance {
         const container = this.container;
         const percentPosition = this.options.position;
         return {
-            x: (((_a = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.x) !== null && _a !== void 0 ? _a : Math.random() * 100) / 100) * container.canvas.size.width,
-            y: (((_b = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.y) !== null && _b !== void 0 ? _b : Math.random() * 100) / 100) * container.canvas.size.height,
+            x: ((0, Utils_1.getRangeValue)((_a = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.x) !== null && _a !== void 0 ? _a : Math.random() * 100) / 100) * container.canvas.size.width,
+            y: ((0, Utils_1.getRangeValue)((_b = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.y) !== null && _b !== void 0 ? _b : Math.random() * 100) / 100) * container.canvas.size.height,
         };
     }
     emit() {
@@ -260,7 +261,7 @@ class EmitterInstance {
         const colorOffset = (0, Utils_1.randomInRange)(animation.offset);
         const delay = (0, Utils_1.getRangeValue)(this.options.rate.delay);
         const emitFactor = (1000 * delay) / container.retina.reduceFactor;
-        const colorSpeed = (_a = animation.speed) !== null && _a !== void 0 ? _a : 0;
+        const colorSpeed = (0, Utils_1.getRangeValue)((_a = animation.speed) !== null && _a !== void 0 ? _a : 0);
         return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * 3.6) % maxValue;
     }
 }

package/Plugins/Emitters/Options/Classes/Emitter.d.ts

@@ -4,10 +4,10 @@ import { EmitterLife } from "./EmitterLife";
 import { EmitterRate } from "./EmitterRate";
 import { EmitterShapeType } from "../../Enums";
 import { EmitterSize } from "./EmitterSize";
-import type { ICoordinates } from "../../../../Core";
 import type { IEmitter } from "../Interfaces/IEmitter";
 import type { IOptionLoader } from "../../../../Options/Interfaces/IOptionLoader";
 import type { IParticles } from "../../../../Options/Interfaces/Particles/IParticles";
+import type { IRangedCoordinates } from "../../../../Core";
 import type { RecursivePartial } from "../../../../Types";
 export declare class Emitter implements IEmitter, IOptionLoader<IEmitter> {
     autoPlay: boolean;
@@ -18,7 +18,7 @@ export declare class Emitter implements IEmitter, IOptionLoader<IEmitter> {
     life: EmitterLife;
     name?: string;
     particles?: RecursivePartial<IParticles>;
-    position?: RecursivePartial<ICoordinates>;
+    position?: RecursivePartial<IRangedCoordinates>;
     rate: EmitterRate;
     shape: EmitterShapeType | keyof typeof EmitterShapeType;
     spawnColor?: AnimatableColor;

package/Plugins/Emitters/Options/Classes/Emitter.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Emitter = void 0;
+const Utils_1 = require("../../../../Utils");
 const AnimatableColor_1 = require("../../../../Options/Classes/AnimatableColor");
 const EmitterLife_1 = require("./EmitterLife");
 const EmitterRate_1 = require("./EmitterRate");
 const EmitterSize_1 = require("./EmitterSize");
-const Utils_1 = require("../../../../Utils");
 class Emitter {
     constructor() {
         this.autoPlay = true;
@@ -45,10 +45,13 @@ class Emitter {
             this.shape = data.shape;
         }
         if (data.position !== undefined) {
-            this.position = {
-                x: data.position.x,
-                y: data.position.y,
-            };
+            this.position = {};
+            if (data.position.x) {
+                this.position.x = (0, Utils_1.setRangeValue)(data.position.x);
+            }
+            if (data.position.y) {
+                this.position.y = (0, Utils_1.setRangeValue)(data.position.y);
+            }
         }
         if (data.spawnColor !== undefined) {
             if (this.spawnColor === undefined) {

package/Plugins/Emitters/Options/Interfaces/IEmitter.d.ts

@@ -1,11 +1,11 @@
 import type { MoveDirection, MoveDirectionAlt } from "../../../../Enums";
 import type { EmitterShapeType } from "../../Enums";
 import type { IAnimatableColor } from "../../../../Options/Interfaces/IAnimatableColor";
-import type { ICoordinates } from "../../../../Core";
 import type { IEmitterLife } from "./IEmitterLife";
 import type { IEmitterRate } from "./IEmitterRate";
 import type { IEmitterSize } from "./IEmitterSize";
 import type { IParticles } from "../../../../Options/Interfaces/Particles/IParticles";
+import type { IRangedCoordinates } from "../../../../Core";
 import type { RecursivePartial } from "../../../../Types";
 export interface IEmitter {
     autoPlay: boolean;
@@ -16,7 +16,7 @@ export interface IEmitter {
     life: IEmitterLife;
     name?: string;
     particles?: RecursivePartial<IParticles>;
-    position?: RecursivePartial<ICoordinates>;
+    position?: RecursivePartial<IRangedCoordinates>;
     rate: IEmitterRate;
     shape: EmitterShapeType | keyof typeof EmitterShapeType;
     spawnColor?: IAnimatableColor;

package/Updaters/Angle/AngleUpdater.js

@@ -57,7 +57,8 @@ class AngleUpdater {
         }
         const rotateAnimation = particle.options.rotate.animation;
         if (rotateAnimation.enable) {
-            particle.rotate.velocity = (rotateAnimation.speed / 360) * this.container.retina.reduceFactor;
+            particle.rotate.velocity =
+                ((0, Utils_1.getRangeValue)(rotateAnimation.speed) / 360) * this.container.retina.reduceFactor;
             if (!rotateAnimation.sync) {
                 particle.rotate.velocity *= Math.random();
             }

package/Updaters/Opacity/OpacityUpdater.js

@@ -71,7 +71,7 @@ class OpacityUpdater {
             min: (0, Utils_1.getRangeMin)(opacityOptions.value),
             value: (0, Utils_1.getRangeValue)(opacityOptions.value),
             loops: 0,
-            maxLoops: opacityOptions.animation.count,
+            maxLoops: (0, Utils_1.getRangeValue)(opacityOptions.animation.count),
         };
         const opacityAnimation = opacityOptions.animation;
         if (opacityAnimation.enable) {
@@ -95,7 +95,8 @@ class OpacityUpdater {
                     particle.opacity.status = 1;
                     break;
             }
-            particle.opacity.velocity = (opacityAnimation.speed / 100) * this.container.retina.reduceFactor;
+            particle.opacity.velocity =
+                ((0, Utils_1.getRangeValue)(opacityAnimation.speed) / 100) * this.container.retina.reduceFactor;
             if (!opacityAnimation.sync) {
                 particle.opacity.velocity *= Math.random();
             }

package/Updaters/Roll/RollUpdater.js

@@ -29,19 +29,19 @@ class RollUpdater {
                 const alterType = Math.random() >= 0.5 ? "darken" : "enlighten";
                 particle.roll.alter = {
                     type: alterType,
-                    value: alterType === "darken" ? rollOpt.darken.value : rollOpt.enlighten.value,
+                    value: (0, Utils_1.getRangeValue)(alterType === "darken" ? rollOpt.darken.value : rollOpt.enlighten.value),
                 };
             }
             else if (rollOpt.darken.enable) {
                 particle.roll.alter = {
                     type: "darken",
-                    value: rollOpt.darken.value,
+                    value: (0, Utils_1.getRangeValue)(rollOpt.darken.value),
                 };
             }
             else if (rollOpt.enlighten.enable) {
                 particle.roll.alter = {
                     type: "enlighten",
-                    value: rollOpt.enlighten.value,
+                    value: (0, Utils_1.getRangeValue)(rollOpt.enlighten.value),
                 };
             }
         }

package/Updaters/Tilt/TiltUpdater.js

@@ -58,7 +58,7 @@ class TiltUpdater {
         }
         const tiltAnimation = particle.options.tilt.animation;
         if (tiltAnimation.enable) {
-            particle.tilt.velocity = (tiltAnimation.speed / 360) * this.container.retina.reduceFactor;
+            particle.tilt.velocity = ((0, Utils_1.getRangeValue)(tiltAnimation.speed) / 360) * this.container.retina.reduceFactor;
             if (!tiltAnimation.sync) {
                 particle.tilt.velocity *= Math.random();
             }

package/Utils/ColorUtils.js

@@ -460,7 +460,7 @@ exports.getHslAnimationFromHsl = getHslAnimationFromHsl;
 function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
     colorValue.enable = colorAnimation.enable;
     if (colorValue.enable) {
-        colorValue.velocity = (colorAnimation.speed / 100) * reduceFactor;
+        colorValue.velocity = ((0, NumberUtils_1.getRangeValue)(colorAnimation.speed) / 100) * reduceFactor;
         if (colorAnimation.sync) {
             return;
         }

package/browser/Core/Canvas.js

@@ -1,4 +1,4 @@
-import { clear, colorToHsl, colorToRgb, deepExtend, drawConnectLine, drawGrabLine, drawParticle, drawParticlePlugin, drawPlugin, getStyleFromHsl, getStyleFromRgb, gradient, paintBase, } from "../Utils";
+import { clear, colorToHsl, colorToRgb, deepExtend, drawConnectLine, drawGrabLine, drawParticle, drawParticlePlugin, drawPlugin, getRangeValue, getStyleFromHsl, getStyleFromRgb, gradient, paintBase, } from "../Utils";
 import { Constants } from "./Utils";
 /**
  * Canvas manager
@@ -117,10 +117,7 @@ export class Canvas {
         const container = this.container;
         const pxRatio = container.retina.pixelRatio;
         const size = container.canvas.size;
-        const oldSize = {
-            width: size.width,
-            height: size.height,
-        };
+        const oldSize = Object.assign({}, size);
         size.width = this.element.offsetWidth * pxRatio;
         size.height = this.element.offsetHeight * pxRatio;
         this.element.width = size.width;
@@ -179,7 +176,9 @@ export class Canvas {
         const zIndexOptions = particle.options.zIndex;
         const zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate;
         const radius = particle.getRadius();
-        const opacity = twinkling ? twinkle.opacity : (_d = (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
+        const opacity = twinkling
+            ? getRangeValue(twinkle.opacity)
+            : (_d = (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
         const strokeOpacity = (_f = (_e = particle.stroke) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : opacity;
         const zOpacity = opacity * zOpacityFactor;
         const fillColorValue = fColor ? getStyleFromHsl(fColor, zOpacity) : undefined;

package/browser/Core/Interfaces/ICoordinates.d.ts

@@ -1,6 +1,7 @@
 /**
  * @category Interfaces
  */
+import type { RangeValue } from "../../Types";
 export interface ICoordinates {
     x: number;
     y: number;
@@ -8,3 +9,10 @@ export interface ICoordinates {
 export interface ICoordinates3d extends ICoordinates {
     z: number;
 }
+export interface IRangedCoordinates {
+    x: RangeValue;
+    y: RangeValue;
+}
+export interface IRangedCoordinates3d extends IRangedCoordinates {
+    z: RangeValue;
+}

package/browser/Core/Interfaces/IParticleGravity.d.ts

@@ -0,0 +1,5 @@
+export interface IParticleGravity {
+    enable: boolean;
+    acceleration: number;
+    inverse: boolean;
+}

package/browser/Core/Interfaces/IParticleGravity.js

@@ -0,0 +1 @@
+export {};

package/browser/Core/Interfaces/index.d.ts

@@ -18,6 +18,7 @@ export * from "./IMovePathGenerator";
 export * from "./IParticle";
 export * from "./IParticleGradientAnimation";
 export * from "./IParticleGradientColorAnimation";
+export * from "./IParticleGravity";
 export * from "./IParticleHslAnimation";
 export * from "./IParticlesInteractor";
 export * from "./IParticleLife";

package/browser/Core/Interfaces/index.js

@@ -18,6 +18,7 @@ export * from "./IMovePathGenerator";
 export * from "./IParticle";
 export * from "./IParticleGradientAnimation";
 export * from "./IParticleGradientColorAnimation";
+export * from "./IParticleGravity";
 export * from "./IParticleHslAnimation";
 export * from "./IParticlesInteractor";
 export * from "./IParticleLife";

package/browser/Core/Particle.d.ts

@@ -1,5 +1,5 @@
 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 type { IBubbleParticleData, ICoordinates, ICoordinates3d, IDelta, IHsl, IParticle, IParticleGradientAnimation, IParticleGravity, 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 { Engine } from "../engine";
@@ -17,6 +17,7 @@ export declare class Particle implements IParticle {
     readonly container: Container;
     readonly group?: string | undefined;
     destroyed: boolean;
+    ignoresResizeRatio: boolean;
     lastPathTime: number;
     misplaced: boolean;
     spawning: boolean;
@@ -40,6 +41,7 @@ export declare class Particle implements IParticle {
     strokeWidth?: number;
     stroke?: Stroke;
     strokeColor?: IParticleHslAnimation;
+    readonly gravity: IParticleGravity;
     readonly moveDecay: number;
     readonly direction: number;
     readonly position: Vector3d;

package/browser/Core/Particle.js

@@ -46,6 +46,7 @@ export class Particle {
         this.retina = {
             maxDistance: {},
         };
+        this.ignoresResizeRatio = true;
         const pxRatio = container.retina.pixelRatio;
         const mainOptions = container.actualOptions;
         const particlesOptions = new ParticlesOptions();
@@ -90,7 +91,7 @@ export class Particle {
             max: getRangeMax(sizeRange) * pxRatio,
             min: getRangeMin(sizeRange) * pxRatio,
             loops: 0,
-            maxLoops: sizeOptions.animation.count,
+            maxLoops: getRangeValue(sizeOptions.animation.count),
         };
         const sizeAnimation = sizeOptions.animation;
         if (sizeAnimation.enable) {
@@ -125,6 +126,12 @@ export class Particle {
         this.initialVelocity = this.calculateVelocity();
         this.velocity = this.initialVelocity.copy();
         this.moveDecay = 1 - getRangeValue(this.options.move.decay);
+        const gravityOptions = this.options.move.gravity;
+        this.gravity = {
+            enable: gravityOptions.enable,
+            acceleration: getRangeValue(gravityOptions.acceleration),
+            inverse: gravityOptions.inverse,
+        };
         /* position */
         this.position = this.calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
         this.initialPosition = this.position.copy();
@@ -339,12 +346,7 @@ export class Particle {
         return overlaps;
     }
     calculateVelocity() {
-        const baseVelocity = getParticleBaseVelocity(this.direction);
-        const res = baseVelocity.copy();
-        const moveOptions = this.options.move;
-        const rad = (Math.PI / 180) * moveOptions.angle.value;
-        const radOffset = (Math.PI / 180) * moveOptions.angle.offset;
-        const range = {
+        const baseVelocity = getParticleBaseVelocity(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move, rad = (Math.PI / 180) * getRangeValue(moveOptions.angle.value), radOffset = (Math.PI / 180) * getRangeValue(moveOptions.angle.offset), range = {
             left: radOffset - rad / 2,
             right: radOffset + rad / 2,
         };

package/browser/Core/Particles.js

@@ -121,10 +121,11 @@ export class Particles {
             //     p.vy = f * Math.sin(t);
             // }
             const resizeFactor = container.canvas.resizeFactor;
-            if (resizeFactor) {
+            if (resizeFactor && !particle.ignoresResizeRatio) {
                 particle.position.x *= resizeFactor.width;
                 particle.position.y *= resizeFactor.height;
             }
+            particle.ignoresResizeRatio = false;
             particle.bubble.inRange = false;
             for (const [, plugin] of this.container.plugins) {
                 if (particle.destroyed) {