@tsparticles/updater-gradient - npm Package Compare versions

Comparing version 3.0.0-alpha.1 to 3.0.0-beta.0

browser/GradientUpdater.js

 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;
@@ -116,8 +13,8 @@ if (!gradient) {
             : 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));
         }
@@ -131,8 +28,11 @@ return { fill: fillGradient };
         }
+        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,
             },
@@ -144,4 +44,3 @@ type: gradient.type,
         if (rotateDirection === "random") {
-            const index = Math.floor(getRandom() * 2);
-            rotateDirection = index > 0 ? "counter-clockwise" : "clockwise";
+            rotateDirection = getRandom() > 0.5 ? "counter-clockwise" : "clockwise";
         }
@@ -176,25 +75,28 @@ switch (rotateDirection) {
                         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";
+                        addOpacity.value = addOpacity.min;
+                        addOpacity.status = "increasing";
                         break;
+                    case "max":
+                        addOpacity.value = addOpacity.max;
+                        addOpacity.status = "decreasing";
+                        break;
                     case "random":
-                        addColor.opacity.value = randomInRange(addColor.opacity);
-                        addColor.opacity.status =
+                    default:
+                        addOpacity.value = randomInRange(addOpacity);
+                        addOpacity.status =
                             getRandom() >= 0.5 ? "increasing" : "decreasing";
                         break;
-                    case "max":
-                    default:
-                        addColor.opacity.value = addColor.opacity.max;
-                        addColor.opacity.status = "decreasing";
-                        break;
                 }
@@ -206,11 +108,11 @@ }
     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;
@@ -217,0 +119,0 @@ }

browser/index.js

 import { GradientUpdater } from "./GradientUpdater";
-export function loadGradientUpdater(engine) {
-    engine.addParticleUpdater("gradient", () => new GradientUpdater());
+export async function loadGradientUpdater(engine, refresh = true) {
+    await engine.addParticleUpdater("gradient", () => new GradientUpdater(), refresh);
 }

browser/Options/Classes/AnimatableGradientColor.js

@@ -1,2 +0,2 @@
-import { AnimatableColor } from "@tsparticles/engine";
+import { AnimatableColor, isNumber } from "@tsparticles/engine";
 import { GradientColorOpacity } from "./GradientColorOpacity";
@@ -18,3 +18,3 @@ export class AnimatableGradientColor {
             this.opacity = new GradientColorOpacity();
-            if (typeof data.opacity === "number") {
+            if (isNumber(data.opacity)) {
                 this.opacity.value = data.opacity;
@@ -21,0 +21,0 @@ }

browser/Options/Classes/GradientAngle.js

@@ -0,1 +1,2 @@
+import { setRangeValue, } from "@tsparticles/engine";
 import { GradientAngleAnimation } from "./GradientAngleAnimation";
@@ -14,3 +15,3 @@ export class GradientAngle {
         if (data.value !== undefined) {
-            this.value = data.value;
+            this.value = setRangeValue(data.value);
         }
@@ -17,0 +18,0 @@ if (data.direction !== undefined) {

browser/Options/Classes/GradientAngleAnimation.js

@@ -1,2 +0,2 @@
-import { setRangeValue } from "@tsparticles/engine";
+import { setRangeValue, } from "@tsparticles/engine";
 export class GradientAngleAnimation {
@@ -8,2 +8,3 @@ constructor() {
         this.decay = 0;
+        this.delay = 0;
         this.sync = false;
@@ -27,2 +28,5 @@ }
         }
+        if (data.delay !== undefined) {
+            this.delay = setRangeValue(data.delay);
+        }
         if (data.sync !== undefined) {
@@ -29,0 +33,0 @@ this.sync = data.sync;

browser/Options/Classes/GradientColorOpacity.js

@@ -0,3 +1,3 @@
+import { setRangeValue, } from "@tsparticles/engine";
 import { GradientColorOpacityAnimation } from "./GradientColorOpacityAnimation";
-import { setRangeValue } from "@tsparticles/engine";
 export class GradientColorOpacity {
@@ -4,0 +4,0 @@ constructor() {

browser/Options/Classes/GradientColorOpacityAnimation.js

@@ -1,2 +0,2 @@
-import { setRangeValue } from "@tsparticles/engine";
+import { setRangeValue, } from "@tsparticles/engine";
 export class GradientColorOpacityAnimation {
@@ -8,2 +8,3 @@ constructor() {
         this.decay = 0;
+        this.delay = 0;
         this.sync = false;
@@ -31,3 +32,9 @@ this.startValue = "random";
         }
+        if (data.decay !== undefined) {
+            this.decay = setRangeValue(data.decay);
+        }
+        if (data.delay !== undefined) {
+            this.delay = setRangeValue(data.delay);
+        }
     }
 }

cjs/GradientUpdater.js

@@ -6,108 +6,5 @@ "use strict";
 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;
@@ -120,8 +17,8 @@ if (!gradient) {
             : 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));
         }
@@ -135,8 +32,11 @@ return { fill: fillGradient };
         }
+        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,
             },
@@ -148,4 +48,3 @@ type: gradient.type,
         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";
         }
@@ -180,25 +79,28 @@ switch (rotateDirection) {
                         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";
+                        addOpacity.value = addOpacity.min;
+                        addOpacity.status = "increasing";
                         break;
+                    case "max":
+                        addOpacity.value = addOpacity.max;
+                        addOpacity.status = "decreasing";
+                        break;
                     case "random":
-                        addColor.opacity.value = (0, engine_1.randomInRange)(addColor.opacity);
-                        addColor.opacity.status =
+                    default:
+                        addOpacity.value = (0, engine_1.randomInRange)(addOpacity);
+                        addOpacity.status =
                             (0, engine_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
                         break;
-                    case "max":
-                    default:
-                        addColor.opacity.value = addColor.opacity.max;
-                        addColor.opacity.status = "decreasing";
-                        break;
                 }
@@ -210,11 +112,11 @@ }
     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;
@@ -234,5 +136,5 @@ }
     update(particle, delta) {
-        updateGradient(particle, delta);
+        (0, Utils_1.updateGradient)(particle, delta);
     }
 }
 exports.GradientUpdater = GradientUpdater;

cjs/index.js

@@ -5,5 +5,5 @@ "use strict";
 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;

cjs/Options/Classes/AnimatableGradientColor.js

@@ -21,3 +21,3 @@ "use strict";
             this.opacity = new GradientColorOpacity_1.GradientColorOpacity();
-            if (typeof data.opacity === "number") {
+            if ((0, engine_1.isNumber)(data.opacity)) {
                 this.opacity.value = data.opacity;
@@ -24,0 +24,0 @@ }

cjs/Options/Classes/GradientAngle.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GradientAngle = void 0;
+const engine_1 = require("@tsparticles/engine");
 const GradientAngleAnimation_1 = require("./GradientAngleAnimation");
@@ -17,3 +18,3 @@ class GradientAngle {
         if (data.value !== undefined) {
-            this.value = data.value;
+            this.value = (0, engine_1.setRangeValue)(data.value);
         }
@@ -20,0 +21,0 @@ if (data.direction !== undefined) {

cjs/Options/Classes/GradientAngleAnimation.js

@@ -11,2 +11,3 @@ "use strict";
         this.decay = 0;
+        this.delay = 0;
         this.sync = false;
@@ -30,2 +31,5 @@ }
         }
+        if (data.delay !== undefined) {
+            this.delay = (0, engine_1.setRangeValue)(data.delay);
+        }
         if (data.sync !== undefined) {
@@ -32,0 +36,0 @@ this.sync = data.sync;

cjs/Options/Classes/GradientColorOpacity.js

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

cjs/Options/Classes/GradientColorOpacityAnimation.js

@@ -11,2 +11,3 @@ "use strict";
         this.decay = 0;
+        this.delay = 0;
         this.sync = false;
@@ -34,4 +35,10 @@ this.startValue = "random";
         }
+        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;

esm/GradientUpdater.js

 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;
@@ -116,8 +13,8 @@ if (!gradient) {
             : 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));
         }
@@ -131,8 +28,11 @@ return { fill: fillGradient };
         }
+        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,
             },
@@ -144,4 +44,3 @@ type: gradient.type,
         if (rotateDirection === "random") {
-            const index = Math.floor(getRandom() * 2);
-            rotateDirection = index > 0 ? "counter-clockwise" : "clockwise";
+            rotateDirection = getRandom() > 0.5 ? "counter-clockwise" : "clockwise";
         }
@@ -176,25 +75,28 @@ switch (rotateDirection) {
                         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";
+                        addOpacity.value = addOpacity.min;
+                        addOpacity.status = "increasing";
                         break;
+                    case "max":
+                        addOpacity.value = addOpacity.max;
+                        addOpacity.status = "decreasing";
+                        break;
                     case "random":
-                        addColor.opacity.value = randomInRange(addColor.opacity);
-                        addColor.opacity.status =
+                    default:
+                        addOpacity.value = randomInRange(addOpacity);
+                        addOpacity.status =
                             getRandom() >= 0.5 ? "increasing" : "decreasing";
                         break;
-                    case "max":
-                    default:
-                        addColor.opacity.value = addColor.opacity.max;
-                        addColor.opacity.status = "decreasing";
-                        break;
                 }
@@ -206,11 +108,11 @@ }
     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;
@@ -217,0 +119,0 @@ }

esm/index.js

 import { GradientUpdater } from "./GradientUpdater";
-export function loadGradientUpdater(engine) {
-    engine.addParticleUpdater("gradient", () => new GradientUpdater());
+export async function loadGradientUpdater(engine, refresh = true) {
+    await engine.addParticleUpdater("gradient", () => new GradientUpdater(), refresh);
 }

esm/Options/Classes/AnimatableGradientColor.js

@@ -1,2 +0,2 @@
-import { AnimatableColor } from "@tsparticles/engine";
+import { AnimatableColor, isNumber } from "@tsparticles/engine";
 import { GradientColorOpacity } from "./GradientColorOpacity";
@@ -18,3 +18,3 @@ export class AnimatableGradientColor {
             this.opacity = new GradientColorOpacity();
-            if (typeof data.opacity === "number") {
+            if (isNumber(data.opacity)) {
                 this.opacity.value = data.opacity;
@@ -21,0 +21,0 @@ }

esm/Options/Classes/GradientAngle.js

@@ -0,1 +1,2 @@
+import { setRangeValue, } from "@tsparticles/engine";
 import { GradientAngleAnimation } from "./GradientAngleAnimation";
@@ -14,3 +15,3 @@ export class GradientAngle {
         if (data.value !== undefined) {
-            this.value = data.value;
+            this.value = setRangeValue(data.value);
         }
@@ -17,0 +18,0 @@ if (data.direction !== undefined) {

esm/Options/Classes/GradientAngleAnimation.js

@@ -1,2 +0,2 @@
-import { setRangeValue } from "@tsparticles/engine";
+import { setRangeValue, } from "@tsparticles/engine";
 export class GradientAngleAnimation {
@@ -8,2 +8,3 @@ constructor() {
         this.decay = 0;
+        this.delay = 0;
         this.sync = false;
@@ -27,2 +28,5 @@ }
         }
+        if (data.delay !== undefined) {
+            this.delay = setRangeValue(data.delay);
+        }
         if (data.sync !== undefined) {
@@ -29,0 +33,0 @@ this.sync = data.sync;

esm/Options/Classes/GradientColorOpacity.js

@@ -0,3 +1,3 @@
+import { setRangeValue, } from "@tsparticles/engine";
 import { GradientColorOpacityAnimation } from "./GradientColorOpacityAnimation";
-import { setRangeValue } from "@tsparticles/engine";
 export class GradientColorOpacity {
@@ -4,0 +4,0 @@ constructor() {

esm/Options/Classes/GradientColorOpacityAnimation.js

@@ -1,2 +0,2 @@
-import { setRangeValue } from "@tsparticles/engine";
+import { setRangeValue, } from "@tsparticles/engine";
 export class GradientColorOpacityAnimation {
@@ -8,2 +8,3 @@ constructor() {
         this.decay = 0;
+        this.delay = 0;
         this.sync = false;
@@ -31,3 +32,9 @@ this.startValue = "random";
         }
+        if (data.decay !== undefined) {
+            this.decay = setRangeValue(data.decay);
+        }
+        if (data.delay !== undefined) {
+            this.delay = setRangeValue(data.delay);
+        }
     }
 }

package.json

 {
   "name": "@tsparticles/updater-gradient",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-beta.0",
   "description": "tsParticles particles gradient updater",
@@ -77,2 +77,6 @@ "homepage": "https://particles.js.org",
     {
+      "type": "github",
+      "url": "https://github.com/sponsors/tsparticles"
+    },
+    {
       "type": "buymeacoffee",
@@ -87,8 +91,9 @@ "url": "https://www.buymeacoffee.com/matteobruni"
   "types": "types/index.d.ts",
+  "sideEffects": false,
+  "dependencies": {
+    "@tsparticles/engine": "^3.0.0-beta.0"
+  },
   "publishConfig": {
     "access": "public"
-  },
-  "dependencies": {
-    "@tsparticles/engine": "^3.0.0-alpha.1"
   }
-}
+}

README.md

@@ -5,5 +5,5 @@ [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
 
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-updater-gradient/badge)](https://www.jsdelivr.com/package/npm/tsparticles-updater-gradient)
-[![npmjs](https://badge.fury.io/js/tsparticles-updater-gradient.svg)](https://www.npmjs.com/package/tsparticles-updater-gradient)
-[![npmjs](https://img.shields.io/npm/dt/tsparticles-updater-gradient)](https://www.npmjs.com/package/tsparticles-updater-gradient) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/updater-gradient/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/updater-gradient)
+[![npmjs](https://badge.fury.io/js/@tsparticles/updater-gradient.svg)](https://www.npmjs.com/package/@tsparticles/updater-gradient)
+[![npmjs](https://img.shields.io/npm/dt/@tsparticles/updater-gradient)](https://www.npmjs.com/package/@tsparticles/updater-gradient) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
@@ -30,3 +30,3 @@ [tsParticles](https://github.com/matteobruni/tsparticles) updater plugin for gradient animations.
 (async () => {
-  await loadGradientUpdater();
+  await loadGradientUpdater(tsParticles);
 
@@ -47,3 +47,3 @@ await tsParticles.load({
 ```shell
-$ npm install tsparticles-updater-gradient
+$ npm install @tsparticles/updater-gradient
 ```
@@ -54,3 +54,3 @@
 ```shell
-$ yarn add tsparticles-updater-gradient
+$ yarn add @tsparticles/updater-gradient
 ```
@@ -61,6 +61,8 @@
 ```javascript
-const { tsParticles } = require("tsparticles-engine");
-const { loadGradientUpdater } = require("tsparticles-updater-gradient");
+const { tsParticles } = require("@tsparticles/engine");
+const { loadGradientUpdater } = require("@tsparticles/updater-gradient");
 
-loadGradientUpdater(tsParticles);
+(async () => {
+  await loadGradientUpdater(tsParticles);
+})();
 ```
@@ -71,6 +73,8 @@
 ```javascript
-import { tsParticles } from "tsparticles-engine";
-import { loadGradientUpdater } from "tsparticles-updater-gradient";
+import { tsParticles } from "@tsparticles/engine";
+import { loadGradientUpdater } from "@tsparticles/updater-gradient";
 
-loadGradientUpdater(tsParticles);
+(async () => {
+  await loadGradientUpdater(tsParticles);
+})();
 ```

tsparticles.updater.gradient.js

@@ -7,3 +7,3 @@ /*!
  * How to use? : Check the GitHub README
- * v3.0.0-alpha.1
+ * v3.0.0-beta.0
  */
@@ -95,3 +95,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 __webpack_require__.d(__webpack_exports__, {
-  "loadGradientUpdater": () => (/* binding */ loadGradientUpdater)
+  loadGradientUpdater: () => (/* binding */ loadGradientUpdater)
 });
@@ -109,2 +109,3 @@
     this.decay = 0;
+    this.delay = 0;
     this.sync = false;
@@ -132,2 +133,8 @@ this.startValue = "random";
     }
+    if (data.decay !== undefined) {
+      this.decay = (0,engine_root_window_.setRangeValue)(data.decay);
+    }
+    if (data.delay !== undefined) {
+      this.delay = (0,engine_root_window_.setRangeValue)(data.delay);
+    }
   }
@@ -171,3 +178,3 @@ }
       this.opacity = new GradientColorOpacity();
-      if (typeof data.opacity === "number") {
+      if ((0,engine_root_window_.isNumber)(data.opacity)) {
         this.opacity.value = data.opacity;
@@ -188,2 +195,3 @@ } else {
     this.decay = 0;
+    this.delay = 0;
     this.sync = false;
@@ -207,2 +215,5 @@ }
     }
+    if (data.delay !== undefined) {
+      this.delay = (0,engine_root_window_.setRangeValue)(data.delay);
+    }
     if (data.sync !== undefined) {
@@ -215,2 +226,3 @@ this.sync = data.sync;
 
+
 class GradientAngle {
@@ -228,3 +240,3 @@ constructor() {
     if (data.value !== undefined) {
-      this.value = data.value;
+      this.value = (0,engine_root_window_.setRangeValue)(data.value);
     }
@@ -262,11 +274,8 @@ if (data.direction !== undefined) {
 }
-;// CONCATENATED MODULE: ./dist/browser/GradientUpdater.js
-
-
+;// CONCATENATED MODULE: ./dist/browser/Utils.js
 function updateColorOpacity(delta, value) {
-  var _a, _b, _c;
   if (!value.enable) {
     return;
   }
-  const decay = (_a = value.decay) !== null && _a !== void 0 ? _a : 1;
+  const decay = value.decay ?? 1;
   switch (value.status) {
@@ -277,3 +286,3 @@ case "increasing":
       } else {
-        value.value += ((_b = value.velocity) !== null && _b !== void 0 ? _b : 0) * delta.factor;
+        value.value += (value.velocity ?? 0) * delta.factor;
       }
@@ -285,3 +294,3 @@ break;
       } else {
-        value.value -= ((_c = value.velocity) !== null && _c !== void 0 ? _c : 0) * delta.factor;
+        value.value -= (value.velocity ?? 0) * delta.factor;
       }
@@ -294,10 +303,17 @@ break;
 }
-function updateColorValue(delta, value, max, decrease) {
-  var _a, _b;
-  const colorValue = value;
+function updateColorValue(delta, colorValue, max, decrease) {
   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 (!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") {
@@ -319,11 +335,10 @@ colorValue.value += velocity;
   }
-  if (value.velocity && decay !== 1) {
-    value.velocity *= decay;
+  if (colorValue.velocity && decay !== 1) {
+    colorValue.velocity *= decay;
   }
 }
 function updateAngle(delta, angle) {
-  var _a, _b;
-  const speed = ((_a = angle.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor,
+  const speed = (angle.velocity ?? 0) * delta.factor,
     max = 2 * Math.PI,
-    decay = (_b = angle.decay) !== null && _b !== void 0 ? _b : 1;
+    decay = angle.decay ?? 1;
   if (!angle.enable) {
@@ -352,4 +367,5 @@ return;
 function updateGradient(particle, delta) {
-  var _a, _b, _c;
-  const gradient = particle.gradient;
+  const {
+    gradient
+  } = particle;
   if (!gradient) {
@@ -360,9 +376,9 @@ return;
   for (const color of gradient.colors) {
-    if (((_a = particle.color) === null || _a === void 0 ? void 0 : _a.h) !== undefined) {
+    if (particle.color?.h !== undefined) {
       updateColorValue(delta, color.value.h, 360, false);
     }
-    if (((_b = particle.color) === null || _b === void 0 ? void 0 : _b.s) !== undefined) {
+    if (particle.color?.s !== undefined) {
       updateColorValue(delta, color.value.s, 100, true);
     }
-    if (((_c = particle.color) === null || _c === void 0 ? void 0 : _c.l) !== undefined) {
+    if (particle.color?.l !== undefined) {
       updateColorValue(delta, color.value.l, 100, true);
@@ -375,5 +391,8 @@ }
 }
+;// CONCATENATED MODULE: ./dist/browser/GradientUpdater.js
+
+
+
 class GradientUpdater {
   getColorStyles(particle, context, radius, opacity) {
-    var _a, _b;
     const gradient = particle.gradient;
@@ -385,8 +404,12 @@ if (!gradient) {
       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_root_window_.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_root_window_.getStyleFromHsl)({
+        h: value.h.value,
+        s: value.s.value,
+        l: value.l.value
+      }, cOpacity?.value ?? opacity));
     }
@@ -402,8 +425,13 @@ return {
     }
+    const {
+      angle
+    } = gradient;
     particle.gradient = {
       angle: {
-        value: gradient.angle.value,
-        enable: gradient.angle.animation.enable,
-        velocity: (0,engine_root_window_.getRangeValue)(gradient.angle.animation.speed) / 360 * particle.container.retina.reduceFactor,
-        decay: 1 - (0,engine_root_window_.getRangeValue)(gradient.angle.animation.decay)
+        value: (0,engine_root_window_.getRangeValue)(angle.value),
+        enable: angle.animation.enable,
+        velocity: (0,engine_root_window_.getRangeValue)(angle.animation.speed) / 360 * particle.container.retina.reduceFactor,
+        decay: 1 - (0,engine_root_window_.getRangeValue)(angle.animation.decay),
+        delayTime: (0,engine_root_window_.getRangeValue)(angle.animation.delay) * 1000,
+        time: 0
       },
@@ -415,4 +443,3 @@ type: gradient.type,
     if (rotateDirection === "random") {
-      const index = Math.floor((0,engine_root_window_.getRandom)() * 2);
-      rotateDirection = index > 0 ? "counter-clockwise" : "clockwise";
+      rotateDirection = (0,engine_root_window_.getRandom)() > 0.5 ? "counter-clockwise" : "clockwise";
     }
@@ -445,23 +472,28 @@ switch (rotateDirection) {
             velocity: (0,engine_root_window_.getRangeValue)(grColor.opacity.animation.speed) / 100 * particle.container.retina.reduceFactor,
-            decay: 1 - (0,engine_root_window_.getRangeValue)(grColor.opacity.animation.decay)
+            decay: 1 - (0,engine_root_window_.getRangeValue)(grColor.opacity.animation.decay),
+            delayTime: (0,engine_root_window_.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_root_window_.getRangeMin)(opacityRange);
-        addColor.opacity.max = (0,engine_root_window_.getRangeMax)(opacityRange);
+        addOpacity.min = (0,engine_root_window_.getRangeMin)(opacityRange);
+        addOpacity.max = (0,engine_root_window_.getRangeMax)(opacityRange);
         const opacityAnimation = grColor.opacity.animation;
         switch (opacityAnimation.startValue) {
           case "min":
-            addColor.opacity.value = addColor.opacity.min;
-            addColor.opacity.status = "increasing";
+            addOpacity.value = addOpacity.min;
+            addOpacity.status = "increasing";
             break;
+          case "max":
+            addOpacity.value = addOpacity.max;
+            addOpacity.status = "decreasing";
+            break;
           case "random":
-            addColor.opacity.value = (0,engine_root_window_.randomInRange)(addColor.opacity);
-            addColor.opacity.status = (0,engine_root_window_.getRandom)() >= 0.5 ? "increasing" : "decreasing";
-            break;
-          case "max":
           default:
-            addColor.opacity.value = addColor.opacity.max;
-            addColor.opacity.status = "decreasing";
+            addOpacity.value = (0,engine_root_window_.randomInRange)(addOpacity);
+            addOpacity.status = (0,engine_root_window_.getRandom)() >= 0.5 ? "increasing" : "decreasing";
             break;
@@ -474,8 +506,7 @@ }
   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));
+    return !particle.destroyed && !particle.spawning && (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;
@@ -500,4 +531,4 @@ }
 
-function loadGradientUpdater(engine) {
-  engine.addParticleUpdater("gradient", () => new GradientUpdater());
+async function loadGradientUpdater(engine, refresh = true) {
+  await engine.addParticleUpdater("gradient", () => new GradientUpdater(), refresh);
 }
@@ -504,0 +535,0 @@ })();

tsparticles.updater.gradient.min.js

 /*! For license information please see tsparticles.updater.gradient.min.js.LICENSE.txt */
-!function(e,a){if("object"==typeof exports&&"object"==typeof module)module.exports=a(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],a);else{var t="object"==typeof exports?a(require("@tsparticles/engine")):a(e.window);for(var o in t)("object"==typeof exports?exports:e)[o]=t[o]}}(this,(e=>(()=>{"use strict";var a={533:a=>{a.exports=e}},t={};function o(e){var i=t[e];if(void 0!==i)return i.exports;var n=t[e]={exports:{}};return a[e](n,n.exports,o),n.exports}o.d=(e,a)=>{for(var t in a)o.o(a,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},o.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{o.r(i),o.d(i,{loadGradientUpdater:()=>p});var e=o(533);class a{constructor(){this.count=0,this.enable=!1,this.speed=0,this.decay=0,this.sync=!1,this.startValue="random"}load(a){a&&(void 0!==a.count&&(this.count=(0,e.setRangeValue)(a.count)),void 0!==a.enable&&(this.enable=a.enable),void 0!==a.speed&&(this.speed=(0,e.setRangeValue)(a.speed)),void 0!==a.sync&&(this.sync=a.sync),void 0!==a.startValue&&(this.startValue=a.startValue))}}class t{constructor(){this.value=0,this.animation=new a}load(a){a&&(this.animation.load(a.animation),void 0!==a.value&&(this.value=(0,e.setRangeValue)(a.value)))}}class n{constructor(){this.stop=0,this.value=new e.AnimatableColor}load(a){a&&(void 0!==a.stop&&(this.stop=a.stop),this.value=e.AnimatableColor.create(this.value,a.value),void 0!==a.opacity&&(this.opacity=new t,"number"==typeof a.opacity?this.opacity.value=a.opacity:this.opacity.load(a.opacity)))}}class l{constructor(){this.count=0,this.enable=!1,this.speed=0,this.decay=0,this.sync=!1}load(a){a&&(void 0!==a.count&&(this.count=(0,e.setRangeValue)(a.count)),void 0!==a.enable&&(this.enable=a.enable),void 0!==a.speed&&(this.speed=(0,e.setRangeValue)(a.speed)),void 0!==a.decay&&(this.decay=(0,e.setRangeValue)(a.decay)),void 0!==a.sync&&(this.sync=a.sync))}}class s{constructor(){this.value=0,this.animation=new l,this.direction="clockwise"}load(e){e&&(this.animation.load(e.animation),void 0!==e.value&&(this.value=e.value),void 0!==e.direction&&(this.direction=e.direction))}}class c{constructor(){this.angle=new s,this.colors=[],this.type="random"}load(e){e&&(this.angle.load(e.angle),void 0!==e.colors&&(this.colors=e.colors.map((e=>{const a=new n;return a.load(e),a}))),void 0!==e.type&&(this.type=e.type))}}function r(e,a){var t,o,i;if(!a.enable)return;const n=null!==(t=a.decay)&&void 0!==t?t:1;switch(a.status){case"increasing":a.value>=a.max?a.status="decreasing":a.value+=(null!==(o=a.velocity)&&void 0!==o?o:0)*e.factor;break;case"decreasing":a.value<=a.min?a.status="increasing":a.value-=(null!==(i=a.velocity)&&void 0!==i?i:0)*e.factor}a.velocity&&1!==n&&(a.velocity*=n)}function u(e,a,t,o){var i,n;const l=a;if(!l||!l.enable)return;const s=(null!==(i=a.velocity)&&void 0!==i?i:0)*e.factor,c=null!==(n=a.decay)&&void 0!==n?n:1;o&&"increasing"!==l.status?(l.value-=s,l.value<0&&(l.status="increasing",l.value+=l.value)):(l.value+=s,o&&l.value>t&&(l.status="decreasing",l.value-=l.value%t)),l.value>t&&(l.value%=t),a.velocity&&1!==c&&(a.velocity*=c)}function d(e,a){var t,o,i;const n=e.gradient;if(n){!function(e,a){var t,o;const i=(null!==(t=a.velocity)&&void 0!==t?t:0)*e.factor,n=2*Math.PI,l=null!==(o=a.decay)&&void 0!==o?o:1;a.enable&&("increasing"===a.status?(a.value+=i,a.value>n&&(a.value-=n)):(a.value-=i,a.value<0&&(a.value+=n)),a.velocity&&1!==l&&(a.velocity*=l))}(a,n.angle);for(const l of n.colors)void 0!==(null===(t=e.color)||void 0===t?void 0:t.h)&&u(a,l.value.h,360,!1),void 0!==(null===(o=e.color)||void 0===o?void 0:o.s)&&u(a,l.value.s,100,!0),void 0!==(null===(i=e.color)||void 0===i?void 0:i.l)&&u(a,l.value.l,100,!0),l.opacity&&r(a,l.opacity)}}class v{getColorStyles(a,t,o,i){var n,l;const s=a.gradient;if(!s)return{};const c=s.angle.value,r="radial"===s.type?t.createRadialGradient(0,0,0,0,0,o):t.createLinearGradient(Math.cos(c)*-o,Math.sin(c)*-o,Math.cos(c)*o,Math.sin(c)*o);for(const a of s.colors)r.addColorStop(a.stop,(0,e.getStyleFromHsl)({h:a.value.h.value,s:a.value.s.value,l:a.value.l.value},null!==(l=null===(n=a.opacity)||void 0===n?void 0:n.value)&&void 0!==l?l:i));return{fill:r}}init(a){const t=(0,e.itemFromSingleOrMultiple)(a.options.gradient);if(!t)return;a.gradient={angle:{value:t.angle.value,enable:t.angle.animation.enable,velocity:(0,e.getRangeValue)(t.angle.animation.speed)/360*a.container.retina.reduceFactor,decay:1-(0,e.getRangeValue)(t.angle.animation.decay)},type:t.type,colors:[]};let o=t.angle.direction;if("random"===o){o=Math.floor(2*(0,e.getRandom)())>0?"counter-clockwise":"clockwise"}switch(o){case"counter-clockwise":case"counterClockwise":a.gradient.angle.status="decreasing";break;case"clockwise":a.gradient.angle.status="increasing"}const i=a.options.reduceDuplicates;for(const o of t.colors){const t=(0,e.rangeColorToHsl)(o.value,a.id,i);if(!t)continue;const n=(0,e.getHslAnimationFromHsl)(t,o.value.animation,a.container.retina.reduceFactor),l={stop:o.stop,value:n,opacity:o.opacity?{enable:o.opacity.animation.enable,max:(0,e.getRangeMax)(o.opacity.value),min:(0,e.getRangeMin)(o.opacity.value),status:"increasing",value:(0,e.getRangeValue)(o.opacity.value),velocity:(0,e.getRangeValue)(o.opacity.animation.speed)/100*a.container.retina.reduceFactor,decay:1-(0,e.getRangeValue)(o.opacity.animation.decay)}:void 0};if(o.opacity&&l.opacity){const a=o.opacity.value;l.opacity.min=(0,e.getRangeMin)(a),l.opacity.max=(0,e.getRangeMax)(a);switch(o.opacity.animation.startValue){case"min":l.opacity.value=l.opacity.min,l.opacity.status="increasing";break;case"random":l.opacity.value=(0,e.randomInRange)(l.opacity),l.opacity.status=(0,e.getRandom)()>=.5?"increasing":"decreasing";break;default:l.opacity.value=l.opacity.max,l.opacity.status="decreasing"}}a.gradient.colors.push(l)}}isEnabled(e){var a,t,o;return!e.destroyed&&!e.spawning&&((null===(a=e.gradient)||void 0===a?void 0:a.angle.enable)||null!==(o=null===(t=e.gradient)||void 0===t?void 0:t.colors.some((e=>e.value.h.enable||e.value.s.enable||e.value.l.enable)))&&void 0!==o&&o)}loadOptions(a,...t){for(const o of t){if(!(null==o?void 0:o.gradient))continue;const t=o.gradient;t&&(a.gradient=(0,e.executeOnSingleOrMultiple)(t,(e=>{const a=new c;return a.load(e),a})))}}update(e,a){d(e,a)}}function p(e){e.addParticleUpdater("gradient",(()=>new v))}})(),i})()));
+!function(e,a){if("object"==typeof exports&&"object"==typeof module)module.exports=a(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],a);else{var t="object"==typeof exports?a(require("@tsparticles/engine")):a(e.window);for(var i in t)("object"==typeof exports?exports:e)[i]=t[i]}}(this,(e=>(()=>{"use strict";var a={533:a=>{a.exports=e}},t={};function i(e){var n=t[e];if(void 0!==n)return n.exports;var o=t[e]={exports:{}};return a[e](o,o.exports,i),o.exports}i.d=(e,a)=>{for(var t in a)i.o(a,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},i.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{i.r(n),i.d(n,{loadGradientUpdater:()=>y});var e=i(533);class a{constructor(){this.count=0,this.enable=!1,this.speed=0,this.decay=0,this.delay=0,this.sync=!1,this.startValue="random"}load(a){a&&(void 0!==a.count&&(this.count=(0,e.setRangeValue)(a.count)),void 0!==a.enable&&(this.enable=a.enable),void 0!==a.speed&&(this.speed=(0,e.setRangeValue)(a.speed)),void 0!==a.sync&&(this.sync=a.sync),void 0!==a.startValue&&(this.startValue=a.startValue),void 0!==a.decay&&(this.decay=(0,e.setRangeValue)(a.decay)),void 0!==a.delay&&(this.delay=(0,e.setRangeValue)(a.delay)))}}class t{constructor(){this.value=0,this.animation=new a}load(a){a&&(this.animation.load(a.animation),void 0!==a.value&&(this.value=(0,e.setRangeValue)(a.value)))}}class o{constructor(){this.stop=0,this.value=new e.AnimatableColor}load(a){a&&(void 0!==a.stop&&(this.stop=a.stop),this.value=e.AnimatableColor.create(this.value,a.value),void 0!==a.opacity&&(this.opacity=new t,(0,e.isNumber)(a.opacity)?this.opacity.value=a.opacity:this.opacity.load(a.opacity)))}}class s{constructor(){this.count=0,this.enable=!1,this.speed=0,this.decay=0,this.delay=0,this.sync=!1}load(a){a&&(void 0!==a.count&&(this.count=(0,e.setRangeValue)(a.count)),void 0!==a.enable&&(this.enable=a.enable),void 0!==a.speed&&(this.speed=(0,e.setRangeValue)(a.speed)),void 0!==a.decay&&(this.decay=(0,e.setRangeValue)(a.decay)),void 0!==a.delay&&(this.delay=(0,e.setRangeValue)(a.delay)),void 0!==a.sync&&(this.sync=a.sync))}}class l{constructor(){this.value=0,this.animation=new s,this.direction="clockwise"}load(a){a&&(this.animation.load(a.animation),void 0!==a.value&&(this.value=(0,e.setRangeValue)(a.value)),void 0!==a.direction&&(this.direction=a.direction))}}class c{constructor(){this.angle=new l,this.colors=[],this.type="random"}load(e){e&&(this.angle.load(e.angle),void 0!==e.colors&&(this.colors=e.colors.map((e=>{const a=new o;return a.load(e),a}))),void 0!==e.type&&(this.type=e.type))}}function r(e,a){if(!a.enable)return;const t=a.decay??1;switch(a.status){case"increasing":a.value>=a.max?a.status="decreasing":a.value+=(a.velocity??0)*e.factor;break;case"decreasing":a.value<=a.min?a.status="increasing":a.value-=(a.velocity??0)*e.factor}a.velocity&&1!==t&&(a.velocity*=t)}function u(e,a,t,i){if(!a||!a.enable)return;if(a.time||(a.time=0),(a.delayTime??0)>0&&a.time<(a.delayTime??0)&&(a.time+=e.value),(a.delayTime??0)>0&&a.time<(a.delayTime??0))return;const n=(a.velocity??0)*e.factor,o=a.decay??1;i&&"increasing"!==a.status?(a.value-=n,a.value<0&&(a.status="increasing",a.value+=a.value)):(a.value+=n,i&&a.value>t&&(a.status="decreasing",a.value-=a.value%t)),a.value>t&&(a.value%=t),a.velocity&&1!==o&&(a.velocity*=o)}function d(e,a){const{gradient:t}=e;if(t){!function(e,a){const t=(a.velocity??0)*e.factor,i=2*Math.PI,n=a.decay??1;a.enable&&("increasing"===a.status?(a.value+=t,a.value>i&&(a.value-=i)):(a.value-=t,a.value<0&&(a.value+=i)),a.velocity&&1!==n&&(a.velocity*=n))}(a,t.angle);for(const i of t.colors)void 0!==e.color?.h&&u(a,i.value.h,360,!1),void 0!==e.color?.s&&u(a,i.value.s,100,!0),void 0!==e.color?.l&&u(a,i.value.l,100,!0),i.opacity&&r(a,i.opacity)}}class v{getColorStyles(a,t,i,n){const o=a.gradient;if(!o)return{};const s=o.angle.value,l="radial"===o.type?t.createRadialGradient(0,0,0,0,0,i):t.createLinearGradient(Math.cos(s)*-i,Math.sin(s)*-i,Math.cos(s)*i,Math.sin(s)*i);for(const{stop:a,value:t,opacity:i}of o.colors)l.addColorStop(a,(0,e.getStyleFromHsl)({h:t.h.value,s:t.s.value,l:t.l.value},i?.value??n));return{fill:l}}init(a){const t=(0,e.itemFromSingleOrMultiple)(a.options.gradient);if(!t)return;const{angle:i}=t;a.gradient={angle:{value:(0,e.getRangeValue)(i.value),enable:i.animation.enable,velocity:(0,e.getRangeValue)(i.animation.speed)/360*a.container.retina.reduceFactor,decay:1-(0,e.getRangeValue)(i.animation.decay),delayTime:1e3*(0,e.getRangeValue)(i.animation.delay),time:0},type:t.type,colors:[]};let n=t.angle.direction;switch("random"===n&&(n=(0,e.getRandom)()>.5?"counter-clockwise":"clockwise"),n){case"counter-clockwise":case"counterClockwise":a.gradient.angle.status="decreasing";break;case"clockwise":a.gradient.angle.status="increasing"}const o=a.options.reduceDuplicates;for(const i of t.colors){const t=(0,e.rangeColorToHsl)(i.value,a.id,o);if(!t)continue;const n=(0,e.getHslAnimationFromHsl)(t,i.value.animation,a.container.retina.reduceFactor),s={stop:i.stop,value:n,opacity:i.opacity?{enable:i.opacity.animation.enable,max:(0,e.getRangeMax)(i.opacity.value),min:(0,e.getRangeMin)(i.opacity.value),status:"increasing",value:(0,e.getRangeValue)(i.opacity.value),velocity:(0,e.getRangeValue)(i.opacity.animation.speed)/100*a.container.retina.reduceFactor,decay:1-(0,e.getRangeValue)(i.opacity.animation.decay),delayTime:1e3*(0,e.getRangeValue)(i.opacity.animation.delay),time:0}:void 0},{opacity:l}=s;if(i.opacity&&l){const a=i.opacity.value;l.min=(0,e.getRangeMin)(a),l.max=(0,e.getRangeMax)(a);switch(i.opacity.animation.startValue){case"min":l.value=l.min,l.status="increasing";break;case"max":l.value=l.max,l.status="decreasing";break;default:l.value=(0,e.randomInRange)(l),l.status=(0,e.getRandom)()>=.5?"increasing":"decreasing"}}a.gradient.colors.push(s)}}isEnabled(e){return!e.destroyed&&!e.spawning&&(e.gradient?.angle.enable||(e.gradient?.colors.some((e=>e.value.h.enable||e.value.s.enable||e.value.l.enable))??!1))}loadOptions(a,...t){for(const i of t){if(!i?.gradient)continue;const t=i.gradient;t&&(a.gradient=(0,e.executeOnSingleOrMultiple)(t,(e=>{const a=new c;return a.load(e),a})))}}update(e,a){d(e,a)}}async function y(e,a=!0){await e.addParticleUpdater("gradient",(()=>new v),a)}})(),n})()));

tsparticles.updater.gradient.min.js.LICENSE.txt

@@ -1,8 +0,1 @@
-/*!
- * Author : Matteo Bruni
- * MIT license: https://opensource.org/licenses/MIT
- * Demo / Generator : https://particles.js.org/
- * GitHub : https://www.github.com/matteobruni/tsparticles
- * How to use? : Check the GitHub README
- * v3.0.0-alpha.1
- */
+/*! tsParticles Gradient Updater v3.0.0-beta.0 by Matteo Bruni */

types/GradientUpdater.d.ts

@@ -1,25 +0,3 @@
-import { GradientType } from "@tsparticles/engine";
-import type { IDelta, IParticleColorStyle, IParticleHslAnimation, IParticleNumericValueAnimation, IParticleUpdater, IParticleValueAnimation, IParticlesOptions, Particle, ParticlesOptions, RecursivePartial, SingleOrMultiple } from "@tsparticles/engine";
-import { AnimatableGradient } from "./Options/Classes/AnimatableGradient";
-import type { IAnimatableGradient } from "./Options/Interfaces/IAnimatableGradient";
-interface IParticleGradientColorAnimation {
-    opacity?: IParticleNumericValueAnimation;
-    stop: number;
-    value: IParticleHslAnimation;
-}
-interface IParticleGradientAnimation {
-    angle: IParticleValueAnimation<number>;
-    colors: IParticleGradientColorAnimation[];
-    type: GradientType;
-}
-type GradientParticle = Particle & {
-    gradient?: IParticleGradientAnimation;
-    options: GradientParticlesOptions;
-};
-type IGradientParticlesOptions = IParticlesOptions & {
-    gradient?: SingleOrMultiple<IAnimatableGradient>;
-};
-type GradientParticlesOptions = ParticlesOptions & {
-    gradient?: SingleOrMultiple<AnimatableGradient>;
-};
+import { type IDelta, type IParticleColorStyle, type IParticleUpdater, type RecursivePartial } from "@tsparticles/engine";
+import type { GradientParticle, GradientParticlesOptions, IGradientParticlesOptions } from "./Types";
 export declare class GradientUpdater implements IParticleUpdater {
@@ -32,2 +10,1 @@ getColorStyles(particle: GradientParticle, context: CanvasRenderingContext2D, radius: number, opacity: number): IParticleColorStyle;
 }
-export {};

types/index.d.ts

 import type { Engine } from "@tsparticles/engine";
-export declare function loadGradientUpdater(engine: Engine): void;
+export declare function loadGradientUpdater(engine: Engine, refresh?: boolean): Promise<void>;

types/Options/Classes/AnimatableGradient.d.ts

@@ -1,5 +0,4 @@
-import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
+import { GradientType, type IOptionLoader, type RecursivePartial } from "@tsparticles/engine";
 import { AnimatableGradientColor } from "./AnimatableGradientColor";
 import { GradientAngle } from "./GradientAngle";
-import { GradientType } from "@tsparticles/engine";
 import type { IAnimatableGradient } from "../Interfaces/IAnimatableGradient";
@@ -6,0 +5,0 @@ export declare class AnimatableGradient implements IAnimatableGradient, IOptionLoader<IAnimatableGradient> {

types/Options/Classes/AnimatableGradientColor.d.ts

@@ -1,3 +0,2 @@
-import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
-import { AnimatableColor } from "@tsparticles/engine";
+import { AnimatableColor, type IOptionLoader, type RecursivePartial } from "@tsparticles/engine";
 import { GradientColorOpacity } from "./GradientColorOpacity";
@@ -4,0 +3,0 @@ import type { IAnimatableGradientColor } from "../Interfaces/IOptionsGradient";

types/Options/Classes/GradientAngle.d.ts

@@ -1,11 +0,10 @@
-import type { IAnimatable, IAnimation, IOptionLoader, RecursivePartial, RotateDirectionAlt } from "@tsparticles/engine";
+import { type IAnimatable, type IAnimation, type IOptionLoader, type RangeValue, type RecursivePartial, RotateDirection, type RotateDirectionAlt } from "@tsparticles/engine";
 import { GradientAngleAnimation } from "./GradientAngleAnimation";
 import type { IGradientAngle } from "../Interfaces/Gradients";
-import { RotateDirection } from "@tsparticles/engine";
 export declare class GradientAngle implements IGradientAngle, IAnimatable<IAnimation>, IOptionLoader<IGradientAngle & IAnimatable<IAnimation>> {
     animation: GradientAngleAnimation;
     direction: RotateDirection | keyof typeof RotateDirection | RotateDirectionAlt;
-    value: number;
+    value: RangeValue;
     constructor();
     load(data?: RecursivePartial<IGradientAngle & IAnimatable<IAnimation>>): void;
 }

types/Options/Classes/GradientAngleAnimation.d.ts

@@ -1,5 +0,6 @@
-import type { IAnimation, IOptionLoader, RangeValue, RecursivePartial } from "@tsparticles/engine";
+import { type IAnimation, type IOptionLoader, type RangeValue, type RecursivePartial } from "@tsparticles/engine";
 export declare class GradientAngleAnimation implements IAnimation, IOptionLoader<IAnimation> {
     count: RangeValue;
     decay: RangeValue;
+    delay: RangeValue;
     enable: boolean;
@@ -6,0 +7,0 @@ speed: RangeValue;

types/Options/Classes/GradientColorOpacity.d.ts

@@ -1,2 +0,2 @@
-import type { IAnimatable, IAnimation, IOptionLoader, RangeValue, RecursivePartial } from "@tsparticles/engine";
+import { type IAnimatable, type IAnimation, type IOptionLoader, type RangeValue, type RecursivePartial } from "@tsparticles/engine";
 import { GradientColorOpacityAnimation } from "./GradientColorOpacityAnimation";
@@ -3,0 +3,0 @@ import type { IGradientColorOpacity } from "../Interfaces/Gradients";

types/Options/Classes/GradientColorOpacityAnimation.d.ts

@@ -1,3 +0,2 @@
-import type { IOptionLoader, RangeValue, RecursivePartial } from "@tsparticles/engine";
-import { StartValueType } from "@tsparticles/engine";
+import { type IOptionLoader, type RangeValue, type RecursivePartial, StartValueType } from "@tsparticles/engine";
 import type { IGradientColorOpacityAnimation } from "../Interfaces/IOptionsGradient";
@@ -7,2 +6,3 @@ export declare class GradientColorOpacityAnimation implements IGradientColorOpacityAnimation, IOptionLoader<IGradientColorOpacityAnimation> {
     decay: RangeValue;
+    delay: RangeValue;
     enable: boolean;
@@ -9,0 +9,0 @@ speed: RangeValue;

types/Options/Interfaces/Gradients.d.ts

@@ -12,3 +12,3 @@ import type { GradientType, IOptionsColor, RangeValue, RotateDirection, RotateDirectionAlt } from "@tsparticles/engine";
     direction: RotateDirection | keyof typeof RotateDirection | RotateDirectionAlt;
-    value: number;
+    value: RangeValue;
 }
@@ -15,0 +15,0 @@ export interface IGradient {

umd/GradientUpdater.js

@@ -7,3 +7,3 @@ (function (factory) {
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@tsparticles/engine", "./Options/Classes/AnimatableGradient"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./Options/Classes/AnimatableGradient", "./Utils"], factory);
     }
@@ -16,108 +16,5 @@ })(function (require, exports) {
     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;
@@ -130,8 +27,8 @@ if (!gradient) {
                 : 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));
             }
@@ -145,8 +42,11 @@ return { fill: fillGradient };
             }
+            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,
                 },
@@ -158,4 +58,3 @@ type: gradient.type,
             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";
             }
@@ -190,25 +89,28 @@ switch (rotateDirection) {
                             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";
+                            addOpacity.value = addOpacity.min;
+                            addOpacity.status = "increasing";
                             break;
+                        case "max":
+                            addOpacity.value = addOpacity.max;
+                            addOpacity.status = "decreasing";
+                            break;
                         case "random":
-                            addColor.opacity.value = (0, engine_1.randomInRange)(addColor.opacity);
-                            addColor.opacity.status =
+                        default:
+                            addOpacity.value = (0, engine_1.randomInRange)(addOpacity);
+                            addOpacity.status =
                                 (0, engine_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
                             break;
-                        case "max":
-                        default:
-                            addColor.opacity.value = addColor.opacity.max;
-                            addColor.opacity.status = "decreasing";
-                            break;
                     }
@@ -220,11 +122,11 @@ }
         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;
@@ -244,3 +146,3 @@ }
         update(particle, delta) {
-            updateGradient(particle, delta);
+            (0, Utils_1.updateGradient)(particle, delta);
         }
@@ -247,0 +149,0 @@ }

umd/index.js

@@ -14,6 +14,6 @@ (function (factory) {
     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;
 });

umd/Options/Classes/AnimatableGradientColor.js

@@ -30,3 +30,3 @@ (function (factory) {
                 this.opacity = new GradientColorOpacity_1.GradientColorOpacity();
-                if (typeof data.opacity === "number") {
+                if ((0, engine_1.isNumber)(data.opacity)) {
                     this.opacity.value = data.opacity;
@@ -33,0 +33,0 @@ }

umd/Options/Classes/GradientAngle.js

@@ -7,3 +7,3 @@ (function (factory) {
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./GradientAngleAnimation"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./GradientAngleAnimation"], factory);
     }
@@ -14,2 +14,3 @@ })(function (require, exports) {
     exports.GradientAngle = void 0;
+    const engine_1 = require("@tsparticles/engine");
     const GradientAngleAnimation_1 = require("./GradientAngleAnimation");
@@ -28,3 +29,3 @@ class GradientAngle {
             if (data.value !== undefined) {
-                this.value = data.value;
+                this.value = (0, engine_1.setRangeValue)(data.value);
             }
@@ -31,0 +32,0 @@ if (data.direction !== undefined) {

umd/Options/Classes/GradientAngleAnimation.js

@@ -20,2 +20,3 @@ (function (factory) {
             this.decay = 0;
+            this.delay = 0;
             this.sync = false;
@@ -39,2 +40,5 @@ }
             }
+            if (data.delay !== undefined) {
+                this.delay = (0, engine_1.setRangeValue)(data.delay);
+            }
             if (data.sync !== undefined) {
@@ -41,0 +45,0 @@ this.sync = data.sync;

umd/Options/Classes/GradientColorOpacity.js

@@ -7,3 +7,3 @@ (function (factory) {
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./GradientColorOpacityAnimation", "@tsparticles/engine"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./GradientColorOpacityAnimation"], factory);
     }
@@ -14,4 +14,4 @@ })(function (require, exports) {
     exports.GradientColorOpacity = void 0;
+    const engine_1 = require("@tsparticles/engine");
     const GradientColorOpacityAnimation_1 = require("./GradientColorOpacityAnimation");
-    const engine_1 = require("@tsparticles/engine");
     class GradientColorOpacity {
@@ -18,0 +18,0 @@ constructor() {

umd/Options/Classes/GradientColorOpacityAnimation.js

@@ -20,2 +20,3 @@ (function (factory) {
             this.decay = 0;
+            this.delay = 0;
             this.sync = false;
@@ -43,2 +44,8 @@ this.startValue = "random";
             }
+            if (data.decay !== undefined) {
+                this.decay = (0, engine_1.setRangeValue)(data.decay);
+            }
+            if (data.delay !== undefined) {
+                this.delay = (0, engine_1.setRangeValue)(data.delay);
+            }
         }
@@ -45,0 +52,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

382825

increased by0.82%

Number of package files

72

increased by16.13%

Lines of code

2463

increased by6.35%

Number of lines in readme file

75

increased by5.63%

Dependency changes

• Updated@tsparticles/engine@^3.0.0-beta.0