tsparticles 1.34.1 → 1.35.0

package/esm/Updaters/Opacity/OpacityUpdater.js

@@ -1,5 +1,5 @@
-import { AnimationStatus, DestroyType } from "../../Enums";
-import { clamp } from "../../Utils";
+import { AnimationStatus, DestroyType, StartValueType } from "../../Enums";
+import { clamp, getRangeMax, getRangeMin, getRangeValue, randomInRange } from "../../Utils";
 function checkDestroy(particle, value, minValue, maxValue) {
     switch (particle.options.opacity.animation.destroy) {
         case DestroyType.max:
@@ -16,6 +16,9 @@ function checkDestroy(particle, value, minValue, maxValue) {
 }
 function updateOpacity(particle, delta) {
     var _a, _b, _c, _d, _e;
+    if (!particle.opacity) {
+        return;
+    }
     const minValue = particle.opacity.min;
     const maxValue = particle.opacity.max;
     if (!(!particle.destroyed &&
@@ -55,10 +58,52 @@ function updateOpacity(particle, delta) {
     }
 }
 export class OpacityUpdater {
+    constructor(container) {
+        this.container = container;
+    }
+    init(particle) {
+        const opacityOptions = particle.options.opacity;
+        particle.opacity = {
+            enable: opacityOptions.animation.enable,
+            max: getRangeMax(opacityOptions.value),
+            min: getRangeMin(opacityOptions.value),
+            value: getRangeValue(opacityOptions.value),
+            loops: 0,
+            maxLoops: opacityOptions.animation.count,
+        };
+        const opacityAnimation = opacityOptions.animation;
+        if (opacityAnimation.enable) {
+            particle.opacity.status = AnimationStatus.increasing;
+            const opacityRange = opacityOptions.value;
+            particle.opacity.min = getRangeMin(opacityRange);
+            particle.opacity.max = getRangeMax(opacityRange);
+            switch (opacityAnimation.startValue) {
+                case StartValueType.min:
+                    particle.opacity.value = particle.opacity.min;
+                    particle.opacity.status = AnimationStatus.increasing;
+                    break;
+                case StartValueType.random:
+                    particle.opacity.value = randomInRange(particle.opacity);
+                    particle.opacity.status =
+                        Math.random() >= 0.5 ? AnimationStatus.increasing : AnimationStatus.decreasing;
+                    break;
+                case StartValueType.max:
+                default:
+                    particle.opacity.value = particle.opacity.max;
+                    particle.opacity.status = AnimationStatus.decreasing;
+                    break;
+            }
+            particle.opacity.velocity = (opacityAnimation.speed / 100) * this.container.retina.reduceFactor;
+            if (!opacityAnimation.sync) {
+                particle.opacity.velocity *= Math.random();
+            }
+        }
+    }
     isEnabled(particle) {
         var _a, _b, _c;
         return (!particle.destroyed &&
             !particle.spawning &&
+            !!particle.opacity &&
             particle.opacity.enable &&
             (((_a = particle.opacity.maxLoops) !== null && _a !== void 0 ? _a : 0) <= 0 || ((_b = particle.opacity.loops) !== null && _b !== void 0 ? _b : 0) < ((_c = particle.opacity.maxLoops) !== null && _c !== void 0 ? _c : 0)));
     }

package/esm/Updaters/Opacity/index.js

@@ -1,4 +1,4 @@
 import { OpacityUpdater } from "./OpacityUpdater";
 export function loadOpacityUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("opacity", () => new OpacityUpdater());
+    tsParticles.addParticleUpdater("opacity", (container) => new OpacityUpdater(container));
 }

package/esm/Updaters/OutModes/OutOfCanvasUpdater.d.ts

@@ -4,6 +4,7 @@ import type { Container } from "../../Core/Container";
 export declare class OutOfCanvasUpdater implements IParticleUpdater {
     private readonly container;
     constructor(container: Container);
+    init(): void;
     isEnabled(particle: Particle): boolean;
     update(particle: Particle, delta: IDelta): void;
     private updateOutMode;

package/esm/Updaters/OutModes/OutOfCanvasUpdater.js

@@ -5,6 +5,8 @@ export class OutOfCanvasUpdater {
     constructor(container) {
         this.container = container;
     }
+    init() {
+    }
     isEnabled(particle) {
         return !particle.destroyed && !particle.spawning;
     }

package/esm/Updaters/Roll/RollUpdater.d.ts

@@ -1,6 +1,7 @@
 import type { IDelta, IParticleUpdater } from "../../Core/Interfaces";
 import type { Particle } from "../../Core/Particle";
 export declare class RollUpdater implements IParticleUpdater {
+    init(particle: Particle): void;
     isEnabled(particle: Particle): boolean;
     update(particle: Particle, delta: IDelta): void;
 }

package/esm/Updaters/Roll/RollUpdater.js

@@ -1,16 +1,52 @@
+import { colorToHsl, getRangeValue } from "../../Utils";
+import { AlterType } from "../../Enums";
 function updateRoll(particle, delta) {
     const roll = particle.options.roll;
-    const speed = particle.rollSpeed * delta.factor;
-    const max = 2 * Math.PI;
-    if (!roll.enable) {
+    if (!particle.roll || !roll.enable) {
         return;
     }
-    particle.rollAngle += speed;
-    if (particle.rollAngle > max) {
-        particle.rollAngle -= max;
+    const speed = particle.roll.speed * delta.factor;
+    const max = 2 * Math.PI;
+    particle.roll.angle += speed;
+    if (particle.roll.angle > max) {
+        particle.roll.angle -= max;
     }
 }
 export class RollUpdater {
+    init(particle) {
+        const rollOpt = particle.options.roll;
+        if (rollOpt.enable) {
+            particle.roll = {
+                angle: Math.random() * Math.PI * 2,
+                speed: getRangeValue(rollOpt.speed) / 360,
+            };
+            if (rollOpt.backColor) {
+                particle.backColor = colorToHsl(rollOpt.backColor);
+            }
+            else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
+                const alterType = Math.random() >= 0.5 ? AlterType.darken : AlterType.enlighten;
+                particle.roll.alter = {
+                    type: alterType,
+                    value: alterType === AlterType.darken ? rollOpt.darken.value : rollOpt.enlighten.value,
+                };
+            }
+            else if (rollOpt.darken.enable) {
+                particle.roll.alter = {
+                    type: AlterType.darken,
+                    value: rollOpt.darken.value,
+                };
+            }
+            else if (rollOpt.enlighten.enable) {
+                particle.roll.alter = {
+                    type: AlterType.enlighten,
+                    value: rollOpt.enlighten.value,
+                };
+            }
+        }
+        else {
+            particle.roll = { angle: 0, speed: 0 };
+        }
+    }
     isEnabled(particle) {
         const roll = particle.options.roll;
         return !particle.destroyed && !particle.spawning && roll.enable;

package/esm/Updaters/Size/SizeUpdater.d.ts

@@ -1,6 +1,7 @@
 import type { Particle } from "../../Core/Particle";
 import type { IDelta, IParticleUpdater } from "../../Core/Interfaces";
 export declare class SizeUpdater implements IParticleUpdater {
+    init(): void;
     isEnabled(particle: Particle): boolean;
     update(particle: Particle, delta: IDelta): void;
 }

package/esm/Updaters/Size/SizeUpdater.js

@@ -55,6 +55,8 @@ function updateSize(particle, delta) {
     }
 }
 export class SizeUpdater {
+    init() {
+    }
     isEnabled(particle) {
         var _a, _b, _c;
         return (!particle.destroyed &&

package/esm/Updaters/StrokeColor/StrokeColorUpdater.d.ts

@@ -1,6 +1,10 @@
-import { Particle } from "../../Core/Particle";
+import type { Particle } from "../../Core/Particle";
 import type { IDelta, IParticleUpdater } from "../../Core/Interfaces";
+import type { Container } from "../../Core/Container";
 export declare class StrokeColorUpdater implements IParticleUpdater {
+    private readonly container;
+    constructor(container: Container);
+    init(particle: Particle): void;
     isEnabled(particle: Particle): boolean;
     update(particle: Particle, delta: IDelta): void;
 }

package/esm/Updaters/StrokeColor/StrokeColorUpdater.js

@@ -1,4 +1,4 @@
-import { randomInRange } from "../../Utils";
+import { colorToHsl, getHslAnimationFromHsl, itemFromArray, randomInRange } from "../../Utils";
 import { AnimationStatus } from "../../Enums";
 function updateColorValue(delta, value, valueAnimation, max, decrease) {
     var _a;
@@ -27,34 +27,50 @@ function updateColorValue(delta, value, valueAnimation, max, decrease) {
     }
 }
 function updateStrokeColor(particle, delta) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    if (!particle.stroke.color) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    if (!((_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color)) {
         return;
     }
     const animationOptions = particle.stroke.color.animation;
-    const h = (_b = (_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h) !== null && _b !== void 0 ? _b : (_c = particle.color) === null || _c === void 0 ? void 0 : _c.h;
+    const h = (_c = (_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h) !== null && _c !== void 0 ? _c : (_d = particle.color) === null || _d === void 0 ? void 0 : _d.h;
     if (h) {
         updateColorValue(delta, h, animationOptions.h, 360, false);
     }
-    const s = (_e = (_d = particle.strokeColor) === null || _d === void 0 ? void 0 : _d.s) !== null && _e !== void 0 ? _e : (_f = particle.color) === null || _f === void 0 ? void 0 : _f.s;
+    const s = (_f = (_e = particle.strokeColor) === null || _e === void 0 ? void 0 : _e.s) !== null && _f !== void 0 ? _f : (_g = particle.color) === null || _g === void 0 ? void 0 : _g.s;
     if (s) {
         updateColorValue(delta, s, animationOptions.s, 100, true);
     }
-    const l = (_h = (_g = particle.strokeColor) === null || _g === void 0 ? void 0 : _g.l) !== null && _h !== void 0 ? _h : (_j = particle.color) === null || _j === void 0 ? void 0 : _j.l;
+    const l = (_j = (_h = particle.strokeColor) === null || _h === void 0 ? void 0 : _h.l) !== null && _j !== void 0 ? _j : (_k = particle.color) === null || _k === void 0 ? void 0 : _k.l;
     if (l) {
         updateColorValue(delta, l, animationOptions.l, 100, true);
     }
 }
 export class StrokeColorUpdater {
+    constructor(container) {
+        this.container = container;
+    }
+    init(particle) {
+        var _a, _b;
+        const container = this.container;
+        particle.stroke =
+            particle.options.stroke instanceof Array
+                ? itemFromArray(particle.options.stroke, particle.id, particle.options.reduceDuplicates)
+                : particle.options.stroke;
+        particle.strokeWidth = particle.stroke.width * container.retina.pixelRatio;
+        const strokeHslColor = (_a = colorToHsl(particle.stroke.color)) !== null && _a !== void 0 ? _a : particle.getFillColor();
+        if (strokeHslColor) {
+            particle.strokeColor = getHslAnimationFromHsl(strokeHslColor, (_b = particle.stroke.color) === null || _b === void 0 ? void 0 : _b.animation, container.retina.reduceFactor);
+        }
+    }
     isEnabled(particle) {
-        var _a, _b, _c;
-        const color = particle.stroke.color;
+        var _a, _b, _c, _d;
+        const color = (_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color;
         return (!particle.destroyed &&
             !particle.spawning &&
-            color !== undefined &&
-            ((((_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h.value) !== undefined && color.animation.h.enable) ||
-                (((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.s.value) !== undefined && color.animation.s.enable) ||
-                (((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.l.value) !== undefined && color.animation.l.enable)));
+            !!color &&
+            ((((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h.value) !== undefined && color.animation.h.enable) ||
+                (((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.s.value) !== undefined && color.animation.s.enable) ||
+                (((_d = particle.strokeColor) === null || _d === void 0 ? void 0 : _d.l.value) !== undefined && color.animation.l.enable)));
     }
     update(particle, delta) {
         if (!this.isEnabled(particle)) {

package/esm/Updaters/StrokeColor/index.js

@@ -1,4 +1,4 @@
 import { StrokeColorUpdater } from "./StrokeColorUpdater";
 export function loadStrokeColorUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("strokeColor", () => new StrokeColorUpdater());
+    tsParticles.addParticleUpdater("strokeColor", (container) => new StrokeColorUpdater(container));
 }

package/esm/Updaters/Tilt/TiltUpdater.d.ts

@@ -1,6 +1,10 @@
 import type { IDelta, IParticleUpdater } from "../../Core/Interfaces";
 import type { Particle } from "../../Core/Particle";
+import { Container } from "../../Core/Container";
 export declare class TiltUpdater implements IParticleUpdater {
+    private readonly container;
+    constructor(container: Container);
+    init(particle: Particle): void;
     isEnabled(particle: Particle): boolean;
     update(particle: Particle, delta: IDelta): void;
 }

package/esm/Updaters/Tilt/TiltUpdater.js

@@ -1,6 +1,10 @@
-import { AnimationStatus } from "../../Enums";
+import { AnimationStatus, TiltDirection } from "../../Enums";
+import { getRangeValue } from "../../Utils";
 function updateTilt(particle, delta) {
     var _a;
+    if (!particle.tilt) {
+        return;
+    }
     const tilt = particle.options.tilt;
     const tiltAnimation = tilt.animation;
     const speed = ((_a = particle.tilt.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor;
@@ -25,6 +29,39 @@ function updateTilt(particle, delta) {
     }
 }
 export class TiltUpdater {
+    constructor(container) {
+        this.container = container;
+    }
+    init(particle) {
+        const tiltOptions = particle.options.tilt;
+        particle.tilt = {
+            enable: tiltOptions.enable,
+            value: (getRangeValue(tiltOptions.value) * Math.PI) / 180,
+            sinDirection: Math.random() >= 0.5 ? 1 : -1,
+            cosDirection: Math.random() >= 0.5 ? 1 : -1,
+        };
+        let tiltDirection = tiltOptions.direction;
+        if (tiltDirection === TiltDirection.random) {
+            const index = Math.floor(Math.random() * 2);
+            tiltDirection = index > 0 ? TiltDirection.counterClockwise : TiltDirection.clockwise;
+        }
+        switch (tiltDirection) {
+            case TiltDirection.counterClockwise:
+            case "counterClockwise":
+                particle.tilt.status = AnimationStatus.decreasing;
+                break;
+            case TiltDirection.clockwise:
+                particle.tilt.status = AnimationStatus.increasing;
+                break;
+        }
+        const tiltAnimation = particle.options.tilt.animation;
+        if (tiltAnimation.enable) {
+            particle.tilt.velocity = (tiltAnimation.speed / 360) * this.container.retina.reduceFactor;
+            if (!tiltAnimation.sync) {
+                particle.tilt.velocity *= Math.random();
+            }
+        }
+    }
     isEnabled(particle) {
         const tilt = particle.options.tilt;
         const tiltAnimation = tilt.animation;

package/esm/Updaters/Tilt/index.js

@@ -1,4 +1,4 @@
 import { TiltUpdater } from "./TiltUpdater";
 export function loadTiltUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("tilt", () => new TiltUpdater());
+    tsParticles.addParticleUpdater("tilt", (container) => new TiltUpdater(container));
 }

package/esm/Updaters/Wobble/WobbleUpdater.d.ts

@@ -1,6 +1,16 @@
 import type { IDelta, IParticleUpdater } from "../../Core/Interfaces";
 import type { Particle } from "../../Core/Particle";
+import type { Container } from "../../Core/Container";
+declare type WobbleParticle = Particle & {
+    retina: {
+        wobbleDistance?: number;
+    };
+};
 export declare class WobbleUpdater implements IParticleUpdater {
-    isEnabled(particle: Particle): boolean;
-    update(particle: Particle, delta: IDelta): void;
+    private readonly container;
+    constructor(container: Container);
+    init(particle: WobbleParticle): void;
+    isEnabled(particle: WobbleParticle): boolean;
+    update(particle: WobbleParticle, delta: IDelta): void;
 }
+export {};

package/esm/Updaters/Wobble/WobbleUpdater.js

@@ -1,22 +1,42 @@
+import { getRangeValue } from "../../Utils";
 function updateWobble(particle, delta) {
+    var _a;
     const wobble = particle.options.wobble;
-    const speed = particle.wobbleSpeed * delta.factor;
-    const distance = (particle.wobbleDistance * delta.factor) / (1000 / 60);
-    const max = 2 * Math.PI;
-    if (!wobble.enable) {
+    if (!wobble.enable || !particle.wobble) {
         return;
     }
-    particle.wobbleAngle += speed;
-    if (particle.wobbleAngle > max) {
-        particle.wobbleAngle -= max;
+    const speed = particle.wobble.speed * delta.factor;
+    const distance = (((_a = particle.retina.wobbleDistance) !== null && _a !== void 0 ? _a : 0) * delta.factor) / (1000 / 60);
+    const max = 2 * Math.PI;
+    particle.wobble.angle += speed;
+    if (particle.wobble.angle > max) {
+        particle.wobble.angle -= max;
     }
-    particle.position.x += distance * Math.cos(particle.wobbleAngle);
-    particle.position.y += distance * Math.abs(Math.sin(particle.wobbleAngle));
+    particle.position.x += distance * Math.cos(particle.wobble.angle);
+    particle.position.y += distance * Math.abs(Math.sin(particle.wobble.angle));
 }
 export class WobbleUpdater {
+    constructor(container) {
+        this.container = container;
+    }
+    init(particle) {
+        const wobbleOpt = particle.options.wobble;
+        if (wobbleOpt.enable) {
+            particle.wobble = {
+                angle: Math.random() * Math.PI * 2,
+                speed: getRangeValue(wobbleOpt.speed) / 360,
+            };
+        }
+        else {
+            particle.wobble = {
+                angle: 0,
+                speed: 0,
+            };
+        }
+        particle.retina.wobbleDistance = getRangeValue(wobbleOpt.distance) * this.container.retina.pixelRatio;
+    }
     isEnabled(particle) {
-        const wobble = particle.options.wobble;
-        return !particle.destroyed && !particle.spawning && wobble.enable;
+        return !particle.destroyed && !particle.spawning && particle.options.wobble.enable;
     }
     update(particle, delta) {
         if (!this.isEnabled(particle)) {

package/esm/Updaters/Wobble/index.js

@@ -1,4 +1,4 @@
 import { WobbleUpdater } from "./WobbleUpdater";
 export function loadWobbleUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("wobble", () => new WobbleUpdater());
+    tsParticles.addParticleUpdater("wobble", (container) => new WobbleUpdater(container));
 }

package/esm/Utils/CanvasUtils.d.ts

@@ -3,6 +3,7 @@ import type { IShadow } from "../Options/Interfaces/Particles/IShadow";
 import type { Container } from "../Core/Container";
 import type { IContainerPlugin, ICoordinates, IDelta, IDimension, IHsl, IParticle, IParticleGradientAnimation, IRgb } from "../Core/Interfaces";
 import type { Particle } from "../Core/Particle";
+import { AlterType } from "../Enums";
 export declare function paintBase(context: CanvasRenderingContext2D, dimension: IDimension, baseColor?: string): void;
 export declare function clear(context: CanvasRenderingContext2D, dimension: IDimension): void;
 export declare function drawLinkLine(context: CanvasRenderingContext2D, width: number, begin: ICoordinates, end: ICoordinates, maxDistance: number, canvasSize: IDimension, warp: boolean, backgroundMask: boolean, composite: string, colorLine: IRgb, opacity: number, shadow: ILinksShadow): void;
@@ -16,3 +17,4 @@ export declare function drawShapeAfterEffect(container: Container, context: Canv
 export declare function drawPlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, delta: IDelta): void;
 export declare function drawParticlePlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, particle: Particle, delta: IDelta): void;
 export declare function drawEllipse(context: CanvasRenderingContext2D, particle: IParticle, fillColorValue: IHsl | undefined, radius: number, opacity: number, width: number, rotation: number, start: number, end: number): void;
+export declare function alterHsl(color: IHsl, type: AlterType, value: number): IHsl;

package/esm/Utils/CanvasUtils.js

@@ -1,6 +1,6 @@
 import { getDistance, getDistances } from "./NumberUtils";
 import { colorMix, colorToRgb, getStyleFromHsl, getStyleFromRgb } from "./ColorUtils";
-import { GradientType } from "../Enums";
+import { AlterType, GradientType, RollMode } from "../Enums";
 function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
@@ -132,19 +132,23 @@ export function drawGrabLine(context, width, begin, end, colorLine, opacity) {
     context.restore();
 }
 export function drawParticle(container, context, particle, delta, fillColorValue, strokeColorValue, backgroundMask, composite, radius, opacity, shadow, gradient) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     const pos = particle.getPosition();
     const tiltOptions = particle.options.tilt;
     const rollOptions = particle.options.roll;
     context.save();
     if (tiltOptions.enable || rollOptions.enable) {
-        context.setTransform(rollOptions.enable ? Math.cos(particle.rollAngle) : 1, tiltOptions.enable ? Math.cos(particle.tilt.value) * particle.tilt.cosDirection : 0, tiltOptions.enable ? Math.sin(particle.tilt.value) * particle.tilt.sinDirection : 0, rollOptions.enable ? Math.sin(particle.rollAngle) : 1, pos.x, pos.y);
+        const roll = rollOptions.enable && particle.roll;
+        const tilt = tiltOptions.enable && particle.tilt;
+        const rollHorizontal = roll && (rollOptions.mode === RollMode.horizontal || rollOptions.mode === RollMode.both);
+        const rollVertical = roll && (rollOptions.mode === RollMode.vertical || rollOptions.mode === RollMode.both);
+        context.setTransform(rollHorizontal ? Math.cos(particle.roll.angle) : 1, tilt ? Math.cos(particle.tilt.value) * particle.tilt.cosDirection : 0, tilt ? Math.sin(particle.tilt.value) * particle.tilt.sinDirection : 0, rollVertical ? Math.sin(particle.roll.angle) : 1, pos.x, pos.y);
     }
     else {
         context.translate(pos.x, pos.y);
     }
     context.beginPath();
-    const angle = particle.rotate.value + (particle.options.rotate.path ? particle.velocity.angle : 0);
+    const angle = ((_b = (_a = particle.rotate) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 0) + (particle.options.rotate.path ? particle.velocity.angle : 0);
     if (angle !== 0) {
         context.rotate(angle);
     }
@@ -168,7 +172,7 @@ export function drawParticle(container, context, particle, delta, fillColorValue
                 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));
+            }, (_d = (_c = color.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : opacity));
         }
         context.fillStyle = fillGradient;
     }
@@ -178,12 +182,12 @@ export function drawParticle(container, context, particle, delta, fillColorValue
         }
     }
     const stroke = particle.stroke;
-    context.lineWidth = particle.strokeWidth;
+    context.lineWidth = (_e = particle.strokeWidth) !== null && _e !== void 0 ? _e : 0;
     if (strokeColorValue) {
         context.strokeStyle = strokeColorValue;
     }
     drawShape(container, context, particle, radius, opacity, delta);
-    if (stroke.width > 0) {
+    if (((_f = stroke === null || stroke === void 0 ? void 0 : stroke.width) !== null && _f !== void 0 ? _f : 0) > 0) {
         context.stroke();
     }
     if (particle.close) {
@@ -194,7 +198,7 @@ export function drawParticle(container, context, particle, delta, fillColorValue
     }
     context.restore();
     context.save();
-    if (tiltOptions.enable) {
+    if (tiltOptions.enable && particle.tilt) {
         context.setTransform(1, Math.cos(particle.tilt.value) * particle.tilt.cosDirection, Math.sin(particle.tilt.value) * particle.tilt.sinDirection, 1, pos.x, pos.y);
     }
     else {
@@ -258,3 +262,10 @@ export function drawEllipse(context, particle, fillColorValue, radius, opacity,
     context.ellipse(pos.x, pos.y, radius / 2, radius * 2, rotationRadian, start, end);
     context.stroke();
 }
+export function alterHsl(color, type, value) {
+    return {
+        h: color.h,
+        s: color.s,
+        l: color.l + (type === AlterType.darken ? -1 : 1) * value,
+    };
+}

package/esm/Utils/EventListeners.d.ts

@@ -11,6 +11,7 @@ export declare class EventListeners {
     private readonly mouseDownHandler;
     private readonly mouseUpHandler;
     private readonly visibilityChangeHandler;
+    private readonly themeChangeHandler;
     private readonly resizeHandler;
     private canPush;
     private resizeTimeout?;
@@ -26,5 +27,6 @@ export declare class EventListeners {
     private mouseTouchFinish;
     private mouseTouchClick;
     private doMouseTouchClick;
+    private handleThemeChange;
     private handleClickMode;
 }

package/esm/Utils/EventListeners.js

@@ -31,6 +31,7 @@ export class EventListeners {
         this.mouseUpHandler = (e) => this.mouseTouchClick(e);
         this.mouseDownHandler = () => this.mouseDown();
         this.visibilityChangeHandler = () => this.handleVisibilityChange();
+        this.themeChangeHandler = (e) => this.handleThemeChange(e);
         this.resizeHandler = () => this.handleWindowResize();
     }
     addListeners() {
@@ -56,6 +57,10 @@ export class EventListeners {
         else {
             container.interactivity.element = container.canvas.element;
         }
+        const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
+        if (mediaMatch) {
+            manageListener(mediaMatch, "change", this.themeChangeHandler, add);
+        }
         const interactivityEl = container.interactivity.element;
         if (!interactivityEl) {
             return;
@@ -277,6 +282,16 @@ export class EventListeners {
             setTimeout(() => this.mouseTouchFinish(), 500);
         }
     }
+    handleThemeChange(e) {
+        const mediaEvent = e;
+        const themeName = mediaEvent.matches
+            ? this.container.options.defaultDarkTheme
+            : this.container.options.defaultLightTheme;
+        const theme = this.container.options.themes.find((theme) => theme.name === themeName);
+        if (theme && theme.default.auto) {
+            this.container.loadTheme(themeName);
+        }
+    }
     handleClickMode(mode) {
         const container = this.container;
         const options = container.actualOptions;

package/esm/Utils/NumberUtils.js

@@ -88,13 +88,13 @@ export function collisionVelocity(v1, v2, m1, m2) {
 export function calcEasing(value, type) {
     switch (type) {
         case EasingType.easeOutQuad:
-            return 1 - Math.pow((1 - value), 2);
+            return 1 - (1 - value) ** 2;
         case EasingType.easeOutCubic:
-            return 1 - Math.pow((1 - value), 3);
+            return 1 - (1 - value) ** 3;
         case EasingType.easeOutQuart:
-            return 1 - Math.pow((1 - value), 4);
+            return 1 - (1 - value) ** 4;
         case EasingType.easeOutQuint:
-            return 1 - Math.pow((1 - value), 5);
+            return 1 - (1 - value) ** 5;
         case EasingType.easeOutExpo:
             return value === 1 ? 1 : 1 - Math.pow(2, -10 * value);
         case EasingType.easeOutSine:

package/esm/Utils/Utils.d.ts

@@ -5,38 +5,13 @@ import type { SingleOrMultiple } from "../Types";
 import { DivEvent } from "../Options/Classes/Interactivity/Events/DivEvent";
 import type { IModeDiv } from "../Options/Interfaces/Interactivity/Modes/IModeDiv";
 import { OutModeDirection } from "../Enums";
-declare type CSSOMString = string;
-declare type FontFaceLoadStatus = "unloaded" | "loading" | "loaded" | "error";
-declare type FontFaceSetStatus = "loading" | "loaded";
-interface FontFace {
-    family: CSSOMString;
-    style: CSSOMString;
-    weight: CSSOMString;
-    stretch: CSSOMString;
-    unicodeRange: CSSOMString;
-    variant: CSSOMString;
-    featureSettings: CSSOMString;
-    variationSettings: CSSOMString;
-    display: CSSOMString;
-    readonly status: FontFaceLoadStatus;
-    readonly loaded: Promise<FontFace>;
-    load(): Promise<FontFace>;
-}
-interface FontFaceSet {
-    readonly status: FontFaceSetStatus;
-    readonly ready: Promise<FontFaceSet>;
-    check(font: string, text?: string): boolean;
-    load(font: string, text?: string): Promise<FontFace[]>;
-}
 declare global {
-    interface Document {
-        fonts: FontFaceSet;
-    }
     interface Window {
         customRequestAnimationFrame: (callback: FrameRequestCallback) => number;
         mozRequestAnimationFrame: (callback: FrameRequestCallback) => number;
         oRequestAnimationFrame: (callback: FrameRequestCallback) => number;
         msRequestAnimationFrame: (callback: FrameRequestCallback) => number;
+        webkitRequestAnimationFrame: (callback: FrameRequestCallback) => number;
         customCancelRequestAnimationFrame: (handle: number) => void;
         webkitCancelRequestAnimationFrame: (handle: number) => void;
         mozCancelRequestAnimationFrame: (handle: number) => void;
@@ -62,4 +37,3 @@ export declare function divMode<T extends IModeDiv>(divs?: SingleOrMultiple<T>,
 export declare function circleBounceDataFromParticle(p: IParticle): ICircleBouncer;
 export declare function circleBounce(p1: ICircleBouncer, p2: ICircleBouncer): void;
 export declare function rectBounce(particle: IParticle, divBounds: IBounds): void;
-export {};