tsparticles 1.41.6 → 1.42.2

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

@@ -1,11 +1,11 @@
-import { IMoveGravity } from "../../../Interfaces/Particles/Move/IMoveGravity";
-import { IOptionLoader } from "../../../Interfaces/IOptionLoader";
-import { RecursivePartial } from "../../../../Types";
+import type { RangeValue, RecursivePartial } from "../../../../Types";
+import type { IMoveGravity } from "../../../Interfaces/Particles/Move/IMoveGravity";
+import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
 export declare class MoveGravity implements IMoveGravity, IOptionLoader<IMoveGravity> {
-    acceleration: number;
+    acceleration: RangeValue;
     enable: boolean;
     inverse: boolean;
-    maxSpeed: number;
+    maxSpeed: RangeValue;
     constructor();
     load(data?: RecursivePartial<IMoveGravity>): void;
 }

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

@@ -1,3 +1,4 @@
+import { setRangeValue } from "../../../../Utils";
 export class MoveGravity {
     constructor() {
         this.acceleration = 9.81;
@@ -10,7 +11,7 @@ export class MoveGravity {
             return;
         }
         if (data.acceleration !== undefined) {
-            this.acceleration = data.acceleration;
+            this.acceleration = setRangeValue(data.acceleration);
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;
@@ -19,7 +20,7 @@ export class MoveGravity {
             this.inverse = data.inverse;
         }
         if (data.maxSpeed !== undefined) {
-            this.maxSpeed = data.maxSpeed;
+            this.maxSpeed = setRangeValue(data.maxSpeed);
         }
     }
 }

package/esm/Options/Classes/Particles/Orbit/Orbit.d.ts

@@ -1,17 +1,17 @@
+import type { RangeValue, RecursivePartial } from "../../../../Types";
 import { AnimationOptions } from "../../AnimationOptions";
 import type { IAnimatable } from "../../../Interfaces/IAnimatable";
 import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
 import type { IOrbit } from "../../../Interfaces/Particles/Orbit/IOrbit";
 import { OptionsColor } from "../../OptionsColor";
 import { OrbitRotation } from "./OrbitRotation";
-import type { RecursivePartial } from "../../../../Types";
 export declare class Orbit implements IOrbit, IOptionLoader<IOrbit>, IAnimatable<AnimationOptions> {
     animation: AnimationOptions;
     enable: boolean;
-    opacity: number;
-    width: number;
+    opacity: RangeValue;
+    width: RangeValue;
     color?: OptionsColor;
-    radius?: number;
+    radius?: RangeValue;
     rotation: OrbitRotation;
     constructor();
     load(data?: RecursivePartial<IOrbit>): void;

package/esm/Options/Classes/Particles/Orbit/Orbit.js

@@ -1,6 +1,7 @@
 import { AnimationOptions } from "../../AnimationOptions";
 import { OptionsColor } from "../../OptionsColor";
 import { OrbitRotation } from "./OrbitRotation";
+import { setRangeValue } from "../../../../Utils";
 export class Orbit {
     constructor() {
         this.animation = new AnimationOptions();
@@ -19,13 +20,13 @@ export class Orbit {
             this.enable = data.enable;
         }
         if (data.opacity !== undefined) {
-            this.opacity = data.opacity;
+            this.opacity = setRangeValue(data.opacity);
         }
         if (data.width !== undefined) {
-            this.width = data.width;
+            this.width = setRangeValue(data.width);
         }
         if (data.radius !== undefined) {
-            this.radius = data.radius;
+            this.radius = setRangeValue(data.radius);
         }
         if (data.color !== undefined) {
             this.color = OptionsColor.create(this.color, data.color);

package/esm/Options/Classes/Particles/Repulse/Repulse.d.ts

@@ -1,13 +1,13 @@
+import type { RangeValue, RecursivePartial } from "../../../../Types";
 import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
 import type { IRepulse } from "../../../Interfaces/Particles/Repulse/IRepulse";
-import type { RecursivePartial } from "../../../../Types";
 import { ValueWithRandom } from "../../ValueWithRandom";
 export declare class Repulse extends ValueWithRandom implements IRepulse, IOptionLoader<IRepulse> {
     enabled: boolean;
-    distance: number;
-    duration: number;
-    factor: number;
-    speed: number;
+    distance: RangeValue;
+    duration: RangeValue;
+    factor: RangeValue;
+    speed: RangeValue;
     constructor();
     load(data?: RecursivePartial<IRepulse>): void;
 }

package/esm/Options/Classes/Particles/Repulse/Repulse.js

@@ -1,4 +1,5 @@
 import { ValueWithRandom } from "../../ValueWithRandom";
+import { setRangeValue } from "../../../../Utils";
 export class Repulse extends ValueWithRandom {
     constructor() {
         super();
@@ -17,16 +18,16 @@ export class Repulse extends ValueWithRandom {
             this.enabled = data.enabled;
         }
         if (data.distance !== undefined) {
-            this.distance = data.distance;
+            this.distance = setRangeValue(data.distance);
         }
         if (data.duration !== undefined) {
-            this.duration = data.duration;
+            this.duration = setRangeValue(data.duration);
         }
         if (data.factor !== undefined) {
-            this.factor = data.factor;
+            this.factor = setRangeValue(data.factor);
         }
         if (data.speed !== undefined) {
-            this.speed = data.speed;
+            this.speed = setRangeValue(data.speed);
         }
     }
 }

package/esm/Options/Classes/Particles/Roll/RollLight.d.ts

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

package/esm/Options/Classes/Particles/Roll/RollLight.js

@@ -1,3 +1,4 @@
+import { setRangeValue } from "../../../../Utils";
 export class RollLight {
     constructor() {
         this.enable = false;
@@ -11,7 +12,7 @@ export class RollLight {
             this.enable = data.enable;
         }
         if (data.value !== undefined) {
-            this.value = data.value;
+            this.value = setRangeValue(data.value);
         }
     }
 }

package/esm/Options/Classes/Particles/Rotate/RotateAnimation.d.ts

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

package/esm/Options/Classes/Particles/Rotate/RotateAnimation.js

@@ -1,3 +1,4 @@
+import { setRangeValue } from "../../../../Utils";
 export class RotateAnimation {
     constructor() {
         this.enable = false;
@@ -12,7 +13,7 @@ export class RotateAnimation {
             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/Particles/Tilt/TiltAnimation.d.ts

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

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

@@ -1,3 +1,4 @@
+import { setRangeValue } from "../../../../Utils";
 export class TiltAnimation {
     constructor() {
         this.enable = false;
@@ -12,7 +13,7 @@ export class TiltAnimation {
             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/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/esm/Options/Classes/Particles/Twinkle/TwinkleValues.js

@@ -1,4 +1,5 @@
 import { OptionsColor } from "../../OptionsColor";
+import { setRangeValue } from "../../../../Utils";
 export class TwinkleValues {
     constructor() {
         this.enable = false;
@@ -19,7 +20,7 @@ export class TwinkleValues {
             this.frequency = data.frequency;
         }
         if (data.opacity !== undefined) {
-            this.opacity = data.opacity;
+            this.opacity = setRangeValue(data.opacity);
         }
     }
 }

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/Plugins/Absorbers/AbsorberInstance.js

@@ -102,7 +102,7 @@ export class AbsorberInstance {
         var _a, _b;
         const container = this.container;
         const percentPosition = this.options.position;
-        return 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 Vector.create((getRangeValue((_a = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.x) !== null && _a !== void 0 ? _a : Math.random() * 100) / 100) * container.canvas.size.width, (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/esm/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/esm/Plugins/Absorbers/Options/Classes/Absorber.js

@@ -1,5 +1,6 @@
 import { AbsorberSize } from "./AbsorberSize";
 import { OptionsColor } from "../../../../Options/Classes/OptionsColor";
+import { setRangeValue } from "../../../../Utils";
 export class Absorber {
     constructor() {
         this.color = new OptionsColor();
@@ -25,10 +26,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/esm/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/esm/Plugins/Emitters/EmitterInstance.js

@@ -208,8 +208,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() {
@@ -258,7 +258,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/esm/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/esm/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";
 export class Emitter {
     constructor() {
         this.autoPlay = true;
@@ -42,10 +42,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/esm/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/esm/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/esm/Updaters/Opacity/OpacityUpdater.js

@@ -68,7 +68,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) {
@@ -92,7 +92,8 @@ export class OpacityUpdater {
                     particle.opacity.status = 1;
                     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/esm/Updaters/Roll/RollUpdater.js

@@ -26,19 +26,19 @@ export 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: getRangeValue(alterType === "darken" ? rollOpt.darken.value : rollOpt.enlighten.value),
                 };
             }
             else if (rollOpt.darken.enable) {
                 particle.roll.alter = {
                     type: "darken",
-                    value: rollOpt.darken.value,
+                    value: getRangeValue(rollOpt.darken.value),
                 };
             }
             else if (rollOpt.enlighten.enable) {
                 particle.roll.alter = {
                     type: "enlighten",
-                    value: rollOpt.enlighten.value,
+                    value: getRangeValue(rollOpt.enlighten.value),
                 };
             }
         }

package/esm/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/esm/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";
 function hue2rgb(p, q, t) {
@@ -433,7 +433,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;
         }