tsparticles 1.41.6 → 1.42.2

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

@@ -1,5 +1,6 @@
 import { AbsorberSize } from "./AbsorberSize";
 import { OptionsColor } from "../../../../Options/Classes/OptionsColor";
+import { setRangeValue } from "../../../../Utils";
 /**
  * [[include:Options/Plugins/Absorbers.md]]
  * @category Absorbers Plugin
@@ -29,10 +30,13 @@ export 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 = setRangeValue(data.position.x);
+            }
+            if (data.position.y !== undefined) {
+                this.position.y = setRangeValue(data.position.y);
+            }
         }
         if (data.size !== undefined) {
             this.size.load(data.size);

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

@@ -1,4 +1,4 @@
-import type { IColor, ICoordinates } from "../../../../Core";
+import type { IColor, IRangedCoordinates } from "../../../../Core";
 import type { IAbsorberSize } from "./IAbsorberSize";
 import { RecursivePartial } from "../../../../Types";
 /**
@@ -22,7 +22,7 @@ export interface IAbsorber {
     /**
      * Absorber position, percent values calculated on canvas size
      */
-    position?: RecursivePartial<ICoordinates>;
+    position?: RecursivePartial<IRangedCoordinates>;
     /**
      * Absorber size, these values will be used as pixels
      */

package/browser/Plugins/Emitters/EmitterInstance.js

@@ -211,8 +211,8 @@ export 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: (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: (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() {
@@ -261,7 +261,7 @@ export class EmitterInstance {
         const colorOffset = randomInRange(animation.offset);
         const delay = 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 = getRangeValue((_a = animation.speed) !== null && _a !== void 0 ? _a : 0);
         return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * 3.6) % maxValue;
     }
 }

package/browser/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";
 /**
  * [[include:Options/Plugins/Emitters.md]]
@@ -22,7 +22,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/browser/Plugins/Emitters/Options/Classes/Emitter.js

@@ -1,8 +1,8 @@
+import { deepExtend, setRangeValue } from "../../../../Utils";
 import { AnimatableColor } from "../../../../Options/Classes/AnimatableColor";
 import { EmitterLife } from "./EmitterLife";
 import { EmitterRate } from "./EmitterRate";
 import { EmitterSize } from "./EmitterSize";
-import { deepExtend } from "../../../../Utils";
 /**
  * [[include:Options/Plugins/Emitters.md]]
  * @category Emitters Plugin
@@ -46,10 +46,13 @@ export 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 !== undefined) {
+                this.position.x = setRangeValue(data.position.x);
+            }
+            if (data.position.y !== undefined) {
+                this.position.y = setRangeValue(data.position.y);
+            }
         }
         if (data.spawnColor !== undefined) {
             if (this.spawnColor === undefined) {

package/browser/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";
 /**
  * Particles emitter object options
@@ -51,7 +51,7 @@ export interface IEmitter {
      * The relative position (in percent) of the emitter, where particles spawns.
      * If size is specified the position will be the center of the size options
      */
-    position?: RecursivePartial<ICoordinates>;
+    position?: RecursivePartial<IRangedCoordinates>;
     /**
      * The particles emitting rate options
      */

package/browser/Updaters/Angle/AngleUpdater.js

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

package/browser/Updaters/Opacity/OpacityUpdater.js

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

package/browser/Updaters/Roll/RollUpdater.js

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

package/browser/Updaters/Tilt/TiltUpdater.js

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

package/browser/Utils/ColorUtils.js

@@ -1,4 +1,4 @@
-import { mix, randomInRange, setRangeValue } from "./NumberUtils";
+import { getRangeValue, mix, randomInRange, setRangeValue } from "./NumberUtils";
 import { Constants } from "../Core";
 import { itemFromArray } from "./Utils";
 /**
@@ -465,7 +465,7 @@ export function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
 function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
     colorValue.enable = colorAnimation.enable;
     if (colorValue.enable) {
-        colorValue.velocity = (colorAnimation.speed / 100) * reduceFactor;
+        colorValue.velocity = (getRangeValue(colorAnimation.speed) / 100) * reduceFactor;
         if (colorAnimation.sync) {
             return;
         }

package/esm/Core/Canvas.d.ts

@@ -8,7 +8,7 @@ export declare class Canvas {
     resizeFactor?: IDimension;
     private context;
     private generatedCanvas;
-    private coverColor?;
+    private coverColorStyle?;
     private trailFillColor?;
     private originalStyle?;
     constructor(container: Container);

package/esm/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";
 export class Canvas {
     constructor(container) {
@@ -47,9 +47,9 @@ export class Canvas {
     paint() {
         const options = this.container.actualOptions;
         this.draw((ctx) => {
-            if (options.backgroundMask.enable && options.backgroundMask.cover && this.coverColor) {
+            if (options.backgroundMask.enable && options.backgroundMask.cover) {
                 clear(ctx, this.size);
-                this.paintBase(getStyleFromRgb(this.coverColor, this.coverColor.a));
+                this.paintBase(this.coverColorStyle);
             }
             else {
                 this.paintBase();
@@ -154,7 +154,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;
@@ -224,12 +226,14 @@ export class Canvas {
         const color = cover.color;
         const coverRgb = colorToRgb(color);
         if (coverRgb) {
-            this.coverColor = {
+            const coverColor = {
                 r: coverRgb.r,
                 g: coverRgb.g,
                 b: coverRgb.b,
                 a: cover.opacity,
             };
+            this.coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
+            console.log(this.coverColorStyle);
         }
     }
     initTrail() {

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

@@ -1,3 +1,4 @@
+import type { RangeValue } from "../../Types";
 export interface ICoordinates {
     x: number;
     y: number;
@@ -5,3 +6,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/esm/Core/Interfaces/IParticleGravity.d.ts

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

package/esm/Core/Interfaces/IParticleGravity.js

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

package/esm/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/esm/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/esm/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";
@@ -37,6 +37,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/esm/Core/Particle.js

@@ -86,7 +86,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) {
@@ -120,6 +120,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,
+        };
         this.position = this.calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
         this.initialPosition = this.position.copy();
         this.offset = Vector.origin;
@@ -327,12 +333,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/esm/Core/Retina.js

@@ -40,13 +40,13 @@ export class Retina {
             container.canvas.size.height = element.offsetHeight * ratio;
         }
         const particles = options.particles;
-        this.attractDistance = particles.move.attract.distance * ratio;
+        this.attractDistance = getRangeValue(particles.move.attract.distance) * ratio;
         this.linksDistance = particles.links.distance * ratio;
         this.linksWidth = particles.links.width * ratio;
-        this.sizeAnimationSpeed = particles.size.animation.speed * ratio;
-        this.maxSpeed = particles.move.gravity.maxSpeed * ratio;
+        this.sizeAnimationSpeed = getRangeValue(particles.size.animation.speed) * ratio;
+        this.maxSpeed = getRangeValue(particles.move.gravity.maxSpeed) * ratio;
         if (particles.orbit.radius !== undefined) {
-            this.orbitRadius = particles.orbit.radius * this.container.retina.pixelRatio;
+            this.orbitRadius = getRangeValue(particles.orbit.radius) * this.container.retina.pixelRatio;
         }
         const modes = options.interactivity.modes;
         this.connectModeDistance = modes.connect.distance * ratio;
@@ -66,19 +66,19 @@ export class Retina {
         const ratio = this.pixelRatio;
         const moveDistance = options.move.distance;
         const props = particle.retina;
-        props.attractDistance = options.move.attract.distance * ratio;
+        props.attractDistance = getRangeValue(options.move.attract.distance) * ratio;
         props.linksDistance = options.links.distance * ratio;
         props.linksWidth = options.links.width * ratio;
         props.moveDrift = getRangeValue(options.move.drift) * ratio;
         props.moveSpeed = getRangeValue(options.move.speed) * ratio;
-        props.sizeAnimationSpeed = options.size.animation.speed * ratio;
+        props.sizeAnimationSpeed = getRangeValue(options.size.animation.speed) * ratio;
         if (particle.spin) {
             props.spinAcceleration = getRangeValue(options.move.spin.acceleration) * ratio;
         }
         const maxDistance = props.maxDistance;
         maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;
         maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;
-        props.maxSpeed = options.move.gravity.maxSpeed * ratio;
+        props.maxSpeed = getRangeValue(options.move.gravity.maxSpeed) * ratio;
     }
     handleMotionChange(mediaQuery) {
         const options = this.container.actualOptions;

package/esm/Core/Utils/ParticlesMover.js

@@ -52,7 +52,7 @@ export class ParticlesMover {
         const container = this.container, slowFactor = this.getProximitySpeedFactor(particle), baseSpeed = ((_a = (_d = particle.retina).moveSpeed) !== null && _a !== void 0 ? _a : (_d.moveSpeed = getRangeValue(moveOptions.speed) * container.retina.pixelRatio)) *
             container.retina.reduceFactor, moveDrift = ((_b = (_e = particle.retina).moveDrift) !== null && _b !== void 0 ? _b : (_e.moveDrift = getRangeValue(particle.options.move.drift) * container.retina.pixelRatio)), maxSize = getRangeMax(particleOptions.size.value) * container.retina.pixelRatio, sizeFactor = moveOptions.size ? particle.getRadius() / maxSize : 1, diffFactor = 2, speedFactor = (sizeFactor * slowFactor * (delta.factor || 1)) / diffFactor, moveSpeed = baseSpeed * speedFactor;
         this.applyPath(particle, delta);
-        const gravityOptions = moveOptions.gravity;
+        const gravityOptions = particle.gravity;
         const gravityFactor = gravityOptions.enable && gravityOptions.inverse ? -1 : 1;
         if (gravityOptions.enable && moveSpeed) {
             particle.velocity.y += (gravityFactor * (gravityOptions.acceleration * delta.factor)) / (60 * moveSpeed);
@@ -67,7 +67,7 @@ export class ParticlesMover {
         const velocity = particle.velocity.mult(moveSpeed);
         const maxSpeed = (_c = particle.retina.maxSpeed) !== null && _c !== void 0 ? _c : container.retina.maxSpeed;
         if (gravityOptions.enable &&
-            gravityOptions.maxSpeed > 0 &&
+            maxSpeed > 0 &&
             ((!gravityOptions.inverse && velocity.y >= 0 && velocity.y >= maxSpeed) ||
                 (gravityOptions.inverse && velocity.y <= 0 && velocity.y <= -maxSpeed))) {
             velocity.y = gravityFactor * maxSpeed;

package/esm/Interactions/Particles/Links/LinkInstance.js

@@ -1,4 +1,4 @@
-import { colorToRgb, drawLinkLine, drawLinkTriangle, getDistance, getLinkColor } from "../../../Utils";
+import { colorToRgb, drawLinkLine, drawLinkTriangle, getDistance, getLinkColor, getRangeValue } from "../../../Utils";
 export class LinkInstance {
     constructor(container) {
         this.container = container;
@@ -99,7 +99,7 @@ export class LinkInstance {
                 const twinkling = Math.random() < twinkleFreq;
                 if (twinkling && twinkleRgb !== undefined) {
                     colorLine = twinkleRgb;
-                    opacity = twinkle.opacity;
+                    opacity = getRangeValue(twinkle.opacity);
                 }
             }
             if (!colorLine) {

package/esm/Options/Classes/AnimatableGradient.d.ts

@@ -35,17 +35,17 @@ export declare class AnimatableGradientColor implements IAnimatableGradientColor
     load(data?: RecursivePartial<IAnimatableGradientColor>): void;
 }
 export declare class GradientAngleAnimation implements IAnimation, IOptionLoader<IAnimation> {
-    count: number;
+    count: RangeValue;
     enable: boolean;
-    speed: number;
+    speed: RangeValue;
     sync: boolean;
     constructor();
     load(data?: RecursivePartial<IAnimation>): void;
 }
 export declare class GradientColorOpacityAnimation implements IGradientColorOpacityAnimation, IOptionLoader<IGradientColorOpacityAnimation> {
-    count: number;
+    count: RangeValue;
     enable: boolean;
-    speed: number;
+    speed: RangeValue;
     sync: boolean;
     startValue: StartValueType | keyof typeof StartValueType;
     constructor();

package/esm/Options/Classes/AnimatableGradient.js

@@ -93,13 +93,13 @@ export class GradientAngleAnimation {
             return;
         }
         if (data.count !== undefined) {
-            this.count = data.count;
+            this.count = setRangeValue(data.count);
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;
         }
         if (data.speed !== undefined) {
-            this.speed = data.speed;
+            this.speed = setRangeValue(data.speed);
         }
         if (data.sync !== undefined) {
             this.sync = data.sync;
@@ -119,13 +119,13 @@ export class GradientColorOpacityAnimation {
             return;
         }
         if (data.count !== undefined) {
-            this.count = data.count;
+            this.count = setRangeValue(data.count);
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;
         }
         if (data.speed !== undefined) {
-            this.speed = data.speed;
+            this.speed = setRangeValue(data.speed);
         }
         if (data.sync !== undefined) {
             this.sync = data.sync;

package/esm/Options/Classes/AnimationOptions.d.ts

@@ -1,10 +1,10 @@
-import { IAnimation } from "../Interfaces/IAnimation";
-import { IOptionLoader } from "../Interfaces/IOptionLoader";
-import { RecursivePartial } from "../../Types";
+import type { RangeValue, RecursivePartial } from "../../Types";
+import type { IAnimation } from "../Interfaces/IAnimation";
+import type { IOptionLoader } from "../Interfaces/IOptionLoader";
 export declare class AnimationOptions implements IAnimation, IOptionLoader<IAnimation> {
-    count: number;
+    count: RangeValue;
     enable: boolean;
-    speed: number;
+    speed: RangeValue;
     sync: boolean;
     constructor();
     load(data?: RecursivePartial<IAnimation>): void;

package/esm/Options/Classes/AnimationOptions.js

@@ -1,3 +1,4 @@
+import { setRangeValue } from "../../Utils";
 export class AnimationOptions {
     constructor() {
         this.count = 0;
@@ -10,13 +11,13 @@ export class AnimationOptions {
             return;
         }
         if (data.count !== undefined) {
-            this.count = data.count;
+            this.count = setRangeValue(data.count);
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;
         }
         if (data.speed !== undefined) {
-            this.speed = data.speed;
+            this.speed = setRangeValue(data.speed);
         }
         if (data.sync !== undefined) {
             this.sync = data.sync;

package/esm/Options/Classes/ColorAnimation.d.ts

@@ -2,10 +2,10 @@ import type { RangeValue, RecursivePartial } from "../../Types";
 import type { IColorAnimation } from "../Interfaces/IColorAnimation";
 import type { IOptionLoader } from "../Interfaces/IOptionLoader";
 export declare class ColorAnimation implements IColorAnimation, IOptionLoader<IColorAnimation> {
-    count: number;
+    count: RangeValue;
     enable: boolean;
     offset: RangeValue;
-    speed: number;
+    speed: RangeValue;
     sync: boolean;
     constructor();
     load(data?: RecursivePartial<IColorAnimation>): void;

package/esm/Options/Classes/ColorAnimation.js

@@ -12,7 +12,7 @@ export class ColorAnimation {
             return;
         }
         if (data.count !== undefined) {
-            this.count = data.count;
+            this.count = setRangeValue(data.count);
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;
@@ -21,7 +21,7 @@ export class ColorAnimation {
             this.offset = setRangeValue(data.offset);
         }
         if (data.speed !== undefined) {
-            this.speed = data.speed;
+            this.speed = setRangeValue(data.speed);
         }
         if (data.sync !== undefined) {
             this.sync = data.sync;

package/esm/Options/Classes/Particles/Move/Attract.d.ts

@@ -1,13 +1,13 @@
+import type { RangeValue, RecursivePartial } from "../../../../Types";
 import type { IAttract } from "../../../Interfaces/Particles/Move/IAttract";
 import type { ICoordinates } from "../../../../Core";
 import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
-import type { RecursivePartial } from "../../../../Types";
 export declare class Attract implements IAttract, IOptionLoader<IAttract> {
     get rotateX(): number;
     set rotateX(value: number);
     get rotateY(): number;
     set rotateY(value: number);
-    distance: number;
+    distance: RangeValue;
     enable: boolean;
     rotate: ICoordinates;
     constructor();

package/esm/Options/Classes/Particles/Move/Attract.js

@@ -1,3 +1,4 @@
+import { setRangeValue } from "../../../../Utils";
 export class Attract {
     constructor() {
         this.distance = 200;
@@ -25,7 +26,7 @@ export class Attract {
             return;
         }
         if (data.distance !== undefined) {
-            this.distance = data.distance;
+            this.distance = setRangeValue(data.distance);
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;

package/esm/Options/Classes/Particles/Move/MoveAngle.d.ts

@@ -1,9 +1,9 @@
+import type { RangeValue, RecursivePartial } from "../../../../Types";
 import type { IMoveAngle } from "../../../Interfaces/Particles/Move/IMoveAngle";
 import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
-import type { RecursivePartial } from "../../../../Types";
 export declare class MoveAngle implements IMoveAngle, IOptionLoader<IMoveAngle> {
-    offset: number;
-    value: number;
+    offset: RangeValue;
+    value: RangeValue;
     constructor();
     load(data?: RecursivePartial<IMoveAngle>): void;
 }

package/esm/Options/Classes/Particles/Move/MoveAngle.js

@@ -1,3 +1,4 @@
+import { setRangeValue } from "../../../../Utils";
 export class MoveAngle {
     constructor() {
         this.offset = 0;
@@ -8,10 +9,10 @@ export class MoveAngle {
             return;
         }
         if (data.offset !== undefined) {
-            this.offset = data.offset;
+            this.offset = setRangeValue(data.offset);
         }
         if (data.value !== undefined) {
-            this.value = data.value;
+            this.value = setRangeValue(data.value);
         }
     }
 }