@tsparticles/updater-gradient 3.0.0-alpha.1 → 3.0.0-beta.0

package/cjs/GradientUpdater.js

@@ -3,112 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GradientUpdater = void 0;
 const engine_1 = require("@tsparticles/engine");
 const AnimatableGradient_1 = require("./Options/Classes/AnimatableGradient");
-function updateColorOpacity(delta, value) {
-    var _a, _b, _c;
-    if (!value.enable) {
-        return;
-    }
-    const decay = (_a = value.decay) !== null && _a !== void 0 ? _a : 1;
-    switch (value.status) {
-        case "increasing":
-            if (value.value >= value.max) {
-                value.status = "decreasing";
-            }
-            else {
-                value.value += ((_b = value.velocity) !== null && _b !== void 0 ? _b : 0) * delta.factor;
-            }
-            break;
-        case "decreasing":
-            if (value.value <= value.min) {
-                value.status = "increasing";
-            }
-            else {
-                value.value -= ((_c = value.velocity) !== null && _c !== void 0 ? _c : 0) * delta.factor;
-            }
-            break;
-    }
-    if (value.velocity && decay !== 1) {
-        value.velocity *= decay;
-    }
-}
-function updateColorValue(delta, value, max, decrease) {
-    var _a, _b;
-    const colorValue = value;
-    if (!colorValue || !colorValue.enable) {
-        return;
-    }
-    const velocity = ((_a = value.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor, decay = (_b = value.decay) !== null && _b !== void 0 ? _b : 1;
-    if (!decrease || colorValue.status === "increasing") {
-        colorValue.value += velocity;
-        if (decrease && colorValue.value > max) {
-            colorValue.status = "decreasing";
-            colorValue.value -= colorValue.value % max;
-        }
-    }
-    else {
-        colorValue.value -= velocity;
-        if (colorValue.value < 0) {
-            colorValue.status = "increasing";
-            colorValue.value += colorValue.value;
-        }
-    }
-    if (colorValue.value > max) {
-        colorValue.value %= max;
-    }
-    if (value.velocity && decay !== 1) {
-        value.velocity *= decay;
-    }
-}
-function updateAngle(delta, angle) {
-    var _a, _b;
-    const speed = ((_a = angle.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor, max = 2 * Math.PI, decay = (_b = angle.decay) !== null && _b !== void 0 ? _b : 1;
-    if (!angle.enable) {
-        return;
-    }
-    switch (angle.status) {
-        case "increasing":
-            angle.value += speed;
-            if (angle.value > max) {
-                angle.value -= max;
-            }
-            break;
-        case "decreasing":
-        default:
-            angle.value -= speed;
-            if (angle.value < 0) {
-                angle.value += max;
-            }
-            break;
-    }
-    if (angle.velocity && decay !== 1) {
-        angle.velocity *= decay;
-    }
-}
-function updateGradient(particle, delta) {
-    var _a, _b, _c;
-    const gradient = particle.gradient;
-    if (!gradient) {
-        return;
-    }
-    updateAngle(delta, gradient.angle);
-    for (const color of gradient.colors) {
-        if (((_a = particle.color) === null || _a === void 0 ? void 0 : _a.h) !== undefined) {
-            updateColorValue(delta, color.value.h, 360, false);
-        }
-        if (((_b = particle.color) === null || _b === void 0 ? void 0 : _b.s) !== undefined) {
-            updateColorValue(delta, color.value.s, 100, true);
-        }
-        if (((_c = particle.color) === null || _c === void 0 ? void 0 : _c.l) !== undefined) {
-            updateColorValue(delta, color.value.l, 100, true);
-        }
-        if (color.opacity) {
-            updateColorOpacity(delta, color.opacity);
-        }
-    }
-}
+const Utils_1 = require("./Utils");
 class GradientUpdater {
     getColorStyles(particle, context, radius, opacity) {
-        var _a, _b;
         const gradient = particle.gradient;
         if (!gradient) {
             return {};
@@ -116,12 +13,12 @@ class GradientUpdater {
         const gradientAngle = gradient.angle.value, fillGradient = gradient.type === "radial"
             ? context.createRadialGradient(0, 0, 0, 0, 0, radius)
             : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
-        for (const color of gradient.colors) {
-            fillGradient.addColorStop(color.stop, (0, engine_1.getStyleFromHsl)({
-                h: color.value.h.value,
-                s: color.value.s.value,
-                l: color.value.l.value,
-            }, (_b = (_a = color.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : opacity));
+        for (const { stop, value, opacity: cOpacity } of gradient.colors) {
+            fillGradient.addColorStop(stop, (0, engine_1.getStyleFromHsl)({
+                h: value.h.value,
+                s: value.s.value,
+                l: value.l.value,
+            }, cOpacity?.value ?? opacity));
         }
         return { fill: fillGradient };
     }
@@ -130,20 +27,22 @@ class GradientUpdater {
         if (!gradient) {
             return;
         }
+        const { angle } = gradient;
         particle.gradient = {
             angle: {
-                value: gradient.angle.value,
-                enable: gradient.angle.animation.enable,
-                velocity: ((0, engine_1.getRangeValue)(gradient.angle.animation.speed) / 360) * particle.container.retina.reduceFactor,
-                decay: 1 - (0, engine_1.getRangeValue)(gradient.angle.animation.decay),
+                value: (0, engine_1.getRangeValue)(angle.value),
+                enable: angle.animation.enable,
+                velocity: ((0, engine_1.getRangeValue)(angle.animation.speed) / 360) * particle.container.retina.reduceFactor,
+                decay: 1 - (0, engine_1.getRangeValue)(angle.animation.decay),
+                delayTime: (0, engine_1.getRangeValue)(angle.animation.delay) * 1000,
+                time: 0,
             },
             type: gradient.type,
             colors: [],
         };
         let rotateDirection = gradient.angle.direction;
         if (rotateDirection === "random") {
-            const index = Math.floor((0, engine_1.getRandom)() * 2);
-            rotateDirection = index > 0 ? "counter-clockwise" : "clockwise";
+            rotateDirection = (0, engine_1.getRandom)() > 0.5 ? "counter-clockwise" : "clockwise";
         }
         switch (rotateDirection) {
             case "counter-clockwise":
@@ -173,28 +72,31 @@ class GradientUpdater {
                         velocity: ((0, engine_1.getRangeValue)(grColor.opacity.animation.speed) / 100) *
                             particle.container.retina.reduceFactor,
                         decay: 1 - (0, engine_1.getRangeValue)(grColor.opacity.animation.decay),
+                        delayTime: (0, engine_1.getRangeValue)(grColor.opacity.animation.delay) * 1000,
+                        time: 0,
                     }
                     : undefined,
             };
-            if (grColor.opacity && addColor.opacity) {
+            const { opacity: addOpacity } = addColor;
+            if (grColor.opacity && addOpacity) {
                 const opacityRange = grColor.opacity.value;
-                addColor.opacity.min = (0, engine_1.getRangeMin)(opacityRange);
-                addColor.opacity.max = (0, engine_1.getRangeMax)(opacityRange);
+                addOpacity.min = (0, engine_1.getRangeMin)(opacityRange);
+                addOpacity.max = (0, engine_1.getRangeMax)(opacityRange);
                 const opacityAnimation = grColor.opacity.animation;
                 switch (opacityAnimation.startValue) {
                     case "min":
-                        addColor.opacity.value = addColor.opacity.min;
-                        addColor.opacity.status = "increasing";
-                        break;
-                    case "random":
-                        addColor.opacity.value = (0, engine_1.randomInRange)(addColor.opacity);
-                        addColor.opacity.status =
-                            (0, engine_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
+                        addOpacity.value = addOpacity.min;
+                        addOpacity.status = "increasing";
                         break;
                     case "max":
+                        addOpacity.value = addOpacity.max;
+                        addOpacity.status = "decreasing";
+                        break;
+                    case "random":
                     default:
-                        addColor.opacity.value = addColor.opacity.max;
-                        addColor.opacity.status = "decreasing";
+                        addOpacity.value = (0, engine_1.randomInRange)(addOpacity);
+                        addOpacity.status =
+                            (0, engine_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
                         break;
                 }
             }
@@ -202,15 +104,15 @@ class GradientUpdater {
         }
     }
     isEnabled(particle) {
-        var _a, _b, _c;
         return (!particle.destroyed &&
             !particle.spawning &&
-            (((_a = particle.gradient) === null || _a === void 0 ? void 0 : _a.angle.enable) ||
-                ((_c = (_b = particle.gradient) === null || _b === void 0 ? void 0 : _b.colors.some((c) => c.value.h.enable || c.value.s.enable || c.value.l.enable)) !== null && _c !== void 0 ? _c : false)));
+            (particle.gradient?.angle.enable ||
+                (particle.gradient?.colors.some((c) => c.value.h.enable || c.value.s.enable || c.value.l.enable) ??
+                    false)));
     }
     loadOptions(options, ...sources) {
         for (const source of sources) {
-            if (!(source === null || source === void 0 ? void 0 : source.gradient)) {
+            if (!source?.gradient) {
                 continue;
             }
             const gradientToLoad = source.gradient;
@@ -225,7 +127,7 @@ class GradientUpdater {
         }
     }
     update(particle, delta) {
-        updateGradient(particle, delta);
+        (0, Utils_1.updateGradient)(particle, delta);
     }
 }
 exports.GradientUpdater = GradientUpdater;

package/cjs/Options/Classes/AnimatableGradientColor.js

@@ -18,7 +18,7 @@ class AnimatableGradientColor {
         this.value = engine_1.AnimatableColor.create(this.value, data.value);
         if (data.opacity !== undefined) {
             this.opacity = new GradientColorOpacity_1.GradientColorOpacity();
-            if (typeof data.opacity === "number") {
+            if ((0, engine_1.isNumber)(data.opacity)) {
                 this.opacity.value = data.opacity;
             }
             else {

package/cjs/Options/Classes/GradientAngle.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GradientAngle = void 0;
+const engine_1 = require("@tsparticles/engine");
 const GradientAngleAnimation_1 = require("./GradientAngleAnimation");
 class GradientAngle {
     constructor() {
@@ -14,7 +15,7 @@ class GradientAngle {
         }
         this.animation.load(data.animation);
         if (data.value !== undefined) {
-            this.value = data.value;
+            this.value = (0, engine_1.setRangeValue)(data.value);
         }
         if (data.direction !== undefined) {
             this.direction = data.direction;

package/cjs/Options/Classes/GradientAngleAnimation.js

@@ -8,6 +8,7 @@ class GradientAngleAnimation {
         this.enable = false;
         this.speed = 0;
         this.decay = 0;
+        this.delay = 0;
         this.sync = false;
     }
     load(data) {
@@ -26,6 +27,9 @@ class GradientAngleAnimation {
         if (data.decay !== undefined) {
             this.decay = (0, engine_1.setRangeValue)(data.decay);
         }
+        if (data.delay !== undefined) {
+            this.delay = (0, engine_1.setRangeValue)(data.delay);
+        }
         if (data.sync !== undefined) {
             this.sync = data.sync;
         }

package/cjs/Options/Classes/GradientColorOpacity.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GradientColorOpacity = void 0;
-const GradientColorOpacityAnimation_1 = require("./GradientColorOpacityAnimation");
 const engine_1 = require("@tsparticles/engine");
+const GradientColorOpacityAnimation_1 = require("./GradientColorOpacityAnimation");
 class GradientColorOpacity {
     constructor() {
         this.value = 0;

package/cjs/Options/Classes/GradientColorOpacityAnimation.js

@@ -8,6 +8,7 @@ class GradientColorOpacityAnimation {
         this.enable = false;
         this.speed = 0;
         this.decay = 0;
+        this.delay = 0;
         this.sync = false;
         this.startValue = "random";
     }
@@ -30,6 +31,12 @@ class GradientColorOpacityAnimation {
         if (data.startValue !== undefined) {
             this.startValue = data.startValue;
         }
+        if (data.decay !== undefined) {
+            this.decay = (0, engine_1.setRangeValue)(data.decay);
+        }
+        if (data.delay !== undefined) {
+            this.delay = (0, engine_1.setRangeValue)(data.delay);
+        }
     }
 }
 exports.GradientColorOpacityAnimation = GradientColorOpacityAnimation;

package/cjs/Types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Utils.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateGradient = void 0;
+function updateColorOpacity(delta, value) {
+    if (!value.enable) {
+        return;
+    }
+    const decay = value.decay ?? 1;
+    switch (value.status) {
+        case "increasing":
+            if (value.value >= value.max) {
+                value.status = "decreasing";
+            }
+            else {
+                value.value += (value.velocity ?? 0) * delta.factor;
+            }
+            break;
+        case "decreasing":
+            if (value.value <= value.min) {
+                value.status = "increasing";
+            }
+            else {
+                value.value -= (value.velocity ?? 0) * delta.factor;
+            }
+            break;
+    }
+    if (value.velocity && decay !== 1) {
+        value.velocity *= decay;
+    }
+}
+function updateColorValue(delta, colorValue, max, decrease) {
+    if (!colorValue || !colorValue.enable) {
+        return;
+    }
+    if (!colorValue.time) {
+        colorValue.time = 0;
+    }
+    if ((colorValue.delayTime ?? 0) > 0 && colorValue.time < (colorValue.delayTime ?? 0)) {
+        colorValue.time += delta.value;
+    }
+    if ((colorValue.delayTime ?? 0) > 0 && colorValue.time < (colorValue.delayTime ?? 0)) {
+        return;
+    }
+    const velocity = (colorValue.velocity ?? 0) * delta.factor, decay = colorValue.decay ?? 1;
+    if (!decrease || colorValue.status === "increasing") {
+        colorValue.value += velocity;
+        if (decrease && colorValue.value > max) {
+            colorValue.status = "decreasing";
+            colorValue.value -= colorValue.value % max;
+        }
+    }
+    else {
+        colorValue.value -= velocity;
+        if (colorValue.value < 0) {
+            colorValue.status = "increasing";
+            colorValue.value += colorValue.value;
+        }
+    }
+    if (colorValue.value > max) {
+        colorValue.value %= max;
+    }
+    if (colorValue.velocity && decay !== 1) {
+        colorValue.velocity *= decay;
+    }
+}
+function updateAngle(delta, angle) {
+    const speed = (angle.velocity ?? 0) * delta.factor, max = 2 * Math.PI, decay = angle.decay ?? 1;
+    if (!angle.enable) {
+        return;
+    }
+    switch (angle.status) {
+        case "increasing":
+            angle.value += speed;
+            if (angle.value > max) {
+                angle.value -= max;
+            }
+            break;
+        case "decreasing":
+        default:
+            angle.value -= speed;
+            if (angle.value < 0) {
+                angle.value += max;
+            }
+            break;
+    }
+    if (angle.velocity && decay !== 1) {
+        angle.velocity *= decay;
+    }
+}
+function updateGradient(particle, delta) {
+    const { gradient } = particle;
+    if (!gradient) {
+        return;
+    }
+    updateAngle(delta, gradient.angle);
+    for (const color of gradient.colors) {
+        if (particle.color?.h !== undefined) {
+            updateColorValue(delta, color.value.h, 360, false);
+        }
+        if (particle.color?.s !== undefined) {
+            updateColorValue(delta, color.value.s, 100, true);
+        }
+        if (particle.color?.l !== undefined) {
+            updateColorValue(delta, color.value.l, 100, true);
+        }
+        if (color.opacity) {
+            updateColorOpacity(delta, color.opacity);
+        }
+    }
+}
+exports.updateGradient = updateGradient;

package/cjs/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadGradientUpdater = void 0;
 const GradientUpdater_1 = require("./GradientUpdater");
-function loadGradientUpdater(engine) {
-    engine.addParticleUpdater("gradient", () => new GradientUpdater_1.GradientUpdater());
+async function loadGradientUpdater(engine, refresh = true) {
+    await engine.addParticleUpdater("gradient", () => new GradientUpdater_1.GradientUpdater(), refresh);
 }
 exports.loadGradientUpdater = loadGradientUpdater;

package/esm/GradientUpdater.js

@@ -1,111 +1,8 @@
 import { executeOnSingleOrMultiple, getHslAnimationFromHsl, getRandom, getRangeMax, getRangeMin, getRangeValue, getStyleFromHsl, itemFromSingleOrMultiple, randomInRange, rangeColorToHsl, } from "@tsparticles/engine";
 import { AnimatableGradient } from "./Options/Classes/AnimatableGradient";
-function updateColorOpacity(delta, value) {
-    var _a, _b, _c;
-    if (!value.enable) {
-        return;
-    }
-    const decay = (_a = value.decay) !== null && _a !== void 0 ? _a : 1;
-    switch (value.status) {
-        case "increasing":
-            if (value.value >= value.max) {
-                value.status = "decreasing";
-            }
-            else {
-                value.value += ((_b = value.velocity) !== null && _b !== void 0 ? _b : 0) * delta.factor;
-            }
-            break;
-        case "decreasing":
-            if (value.value <= value.min) {
-                value.status = "increasing";
-            }
-            else {
-                value.value -= ((_c = value.velocity) !== null && _c !== void 0 ? _c : 0) * delta.factor;
-            }
-            break;
-    }
-    if (value.velocity && decay !== 1) {
-        value.velocity *= decay;
-    }
-}
-function updateColorValue(delta, value, max, decrease) {
-    var _a, _b;
-    const colorValue = value;
-    if (!colorValue || !colorValue.enable) {
-        return;
-    }
-    const velocity = ((_a = value.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor, decay = (_b = value.decay) !== null && _b !== void 0 ? _b : 1;
-    if (!decrease || colorValue.status === "increasing") {
-        colorValue.value += velocity;
-        if (decrease && colorValue.value > max) {
-            colorValue.status = "decreasing";
-            colorValue.value -= colorValue.value % max;
-        }
-    }
-    else {
-        colorValue.value -= velocity;
-        if (colorValue.value < 0) {
-            colorValue.status = "increasing";
-            colorValue.value += colorValue.value;
-        }
-    }
-    if (colorValue.value > max) {
-        colorValue.value %= max;
-    }
-    if (value.velocity && decay !== 1) {
-        value.velocity *= decay;
-    }
-}
-function updateAngle(delta, angle) {
-    var _a, _b;
-    const speed = ((_a = angle.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor, max = 2 * Math.PI, decay = (_b = angle.decay) !== null && _b !== void 0 ? _b : 1;
-    if (!angle.enable) {
-        return;
-    }
-    switch (angle.status) {
-        case "increasing":
-            angle.value += speed;
-            if (angle.value > max) {
-                angle.value -= max;
-            }
-            break;
-        case "decreasing":
-        default:
-            angle.value -= speed;
-            if (angle.value < 0) {
-                angle.value += max;
-            }
-            break;
-    }
-    if (angle.velocity && decay !== 1) {
-        angle.velocity *= decay;
-    }
-}
-function updateGradient(particle, delta) {
-    var _a, _b, _c;
-    const gradient = particle.gradient;
-    if (!gradient) {
-        return;
-    }
-    updateAngle(delta, gradient.angle);
-    for (const color of gradient.colors) {
-        if (((_a = particle.color) === null || _a === void 0 ? void 0 : _a.h) !== undefined) {
-            updateColorValue(delta, color.value.h, 360, false);
-        }
-        if (((_b = particle.color) === null || _b === void 0 ? void 0 : _b.s) !== undefined) {
-            updateColorValue(delta, color.value.s, 100, true);
-        }
-        if (((_c = particle.color) === null || _c === void 0 ? void 0 : _c.l) !== undefined) {
-            updateColorValue(delta, color.value.l, 100, true);
-        }
-        if (color.opacity) {
-            updateColorOpacity(delta, color.opacity);
-        }
-    }
-}
+import { updateGradient } from "./Utils";
 export class GradientUpdater {
     getColorStyles(particle, context, radius, opacity) {
-        var _a, _b;
         const gradient = particle.gradient;
         if (!gradient) {
             return {};
@@ -113,12 +10,12 @@ export class GradientUpdater {
         const gradientAngle = gradient.angle.value, fillGradient = gradient.type === "radial"
             ? context.createRadialGradient(0, 0, 0, 0, 0, radius)
             : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
-        for (const color of gradient.colors) {
-            fillGradient.addColorStop(color.stop, getStyleFromHsl({
-                h: color.value.h.value,
-                s: color.value.s.value,
-                l: color.value.l.value,
-            }, (_b = (_a = color.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : opacity));
+        for (const { stop, value, opacity: cOpacity } of gradient.colors) {
+            fillGradient.addColorStop(stop, getStyleFromHsl({
+                h: value.h.value,
+                s: value.s.value,
+                l: value.l.value,
+            }, cOpacity?.value ?? opacity));
         }
         return { fill: fillGradient };
     }
@@ -127,20 +24,22 @@ export class GradientUpdater {
         if (!gradient) {
             return;
         }
+        const { angle } = gradient;
         particle.gradient = {
             angle: {
-                value: gradient.angle.value,
-                enable: gradient.angle.animation.enable,
-                velocity: (getRangeValue(gradient.angle.animation.speed) / 360) * particle.container.retina.reduceFactor,
-                decay: 1 - getRangeValue(gradient.angle.animation.decay),
+                value: getRangeValue(angle.value),
+                enable: angle.animation.enable,
+                velocity: (getRangeValue(angle.animation.speed) / 360) * particle.container.retina.reduceFactor,
+                decay: 1 - getRangeValue(angle.animation.decay),
+                delayTime: getRangeValue(angle.animation.delay) * 1000,
+                time: 0,
             },
             type: gradient.type,
             colors: [],
         };
         let rotateDirection = gradient.angle.direction;
         if (rotateDirection === "random") {
-            const index = Math.floor(getRandom() * 2);
-            rotateDirection = index > 0 ? "counter-clockwise" : "clockwise";
+            rotateDirection = getRandom() > 0.5 ? "counter-clockwise" : "clockwise";
         }
         switch (rotateDirection) {
             case "counter-clockwise":
@@ -170,28 +69,31 @@ export class GradientUpdater {
                         velocity: (getRangeValue(grColor.opacity.animation.speed) / 100) *
                             particle.container.retina.reduceFactor,
                         decay: 1 - getRangeValue(grColor.opacity.animation.decay),
+                        delayTime: getRangeValue(grColor.opacity.animation.delay) * 1000,
+                        time: 0,
                     }
                     : undefined,
             };
-            if (grColor.opacity && addColor.opacity) {
+            const { opacity: addOpacity } = addColor;
+            if (grColor.opacity && addOpacity) {
                 const opacityRange = grColor.opacity.value;
-                addColor.opacity.min = getRangeMin(opacityRange);
-                addColor.opacity.max = getRangeMax(opacityRange);
+                addOpacity.min = getRangeMin(opacityRange);
+                addOpacity.max = getRangeMax(opacityRange);
                 const opacityAnimation = grColor.opacity.animation;
                 switch (opacityAnimation.startValue) {
                     case "min":
-                        addColor.opacity.value = addColor.opacity.min;
-                        addColor.opacity.status = "increasing";
-                        break;
-                    case "random":
-                        addColor.opacity.value = randomInRange(addColor.opacity);
-                        addColor.opacity.status =
-                            getRandom() >= 0.5 ? "increasing" : "decreasing";
+                        addOpacity.value = addOpacity.min;
+                        addOpacity.status = "increasing";
                         break;
                     case "max":
+                        addOpacity.value = addOpacity.max;
+                        addOpacity.status = "decreasing";
+                        break;
+                    case "random":
                     default:
-                        addColor.opacity.value = addColor.opacity.max;
-                        addColor.opacity.status = "decreasing";
+                        addOpacity.value = randomInRange(addOpacity);
+                        addOpacity.status =
+                            getRandom() >= 0.5 ? "increasing" : "decreasing";
                         break;
                 }
             }
@@ -199,15 +101,15 @@ export class GradientUpdater {
         }
     }
     isEnabled(particle) {
-        var _a, _b, _c;
         return (!particle.destroyed &&
             !particle.spawning &&
-            (((_a = particle.gradient) === null || _a === void 0 ? void 0 : _a.angle.enable) ||
-                ((_c = (_b = particle.gradient) === null || _b === void 0 ? void 0 : _b.colors.some((c) => c.value.h.enable || c.value.s.enable || c.value.l.enable)) !== null && _c !== void 0 ? _c : false)));
+            (particle.gradient?.angle.enable ||
+                (particle.gradient?.colors.some((c) => c.value.h.enable || c.value.s.enable || c.value.l.enable) ??
+                    false)));
     }
     loadOptions(options, ...sources) {
         for (const source of sources) {
-            if (!(source === null || source === void 0 ? void 0 : source.gradient)) {
+            if (!source?.gradient) {
                 continue;
             }
             const gradientToLoad = source.gradient;

package/esm/Options/Classes/AnimatableGradientColor.js

@@ -1,4 +1,4 @@
-import { AnimatableColor } from "@tsparticles/engine";
+import { AnimatableColor, isNumber } from "@tsparticles/engine";
 import { GradientColorOpacity } from "./GradientColorOpacity";
 export class AnimatableGradientColor {
     constructor() {
@@ -15,7 +15,7 @@ export class AnimatableGradientColor {
         this.value = AnimatableColor.create(this.value, data.value);
         if (data.opacity !== undefined) {
             this.opacity = new GradientColorOpacity();
-            if (typeof data.opacity === "number") {
+            if (isNumber(data.opacity)) {
                 this.opacity.value = data.opacity;
             }
             else {