@tsparticles/engine 4.0.0-alpha.26 → 4.0.0-alpha.27

package/esm/Core/Particle.js

@@ -12,14 +12,12 @@ function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
     const effectData = effectOptions.options[effect];
     return deepExtend({
         close: effectOptions.close,
-        fill: effectOptions.fill,
     }, itemFromSingleOrMultiple(effectData, id, reduceDuplicates));
 }
 function loadShapeData(shape, shapeOptions, id, reduceDuplicates) {
     const shapeData = shapeOptions.options[shape];
     return deepExtend({
         close: shapeOptions.close,
-        fill: shapeOptions.fill,
     }, itemFromSingleOrMultiple(shapeData, id, reduceDuplicates));
 }
 function fixOutMode(data) {
@@ -38,13 +36,14 @@ export class Particle {
     container;
     backColor;
     bubble;
-    color;
     destroyed;
     direction;
     effect;
     effectClose;
     effectData;
-    effectFill;
+    fillColor;
+    fillEnabled;
+    fillOpacity;
     group;
     id;
     ignoresResizeRatio;
@@ -67,7 +66,6 @@ export class Particle {
     shape;
     shapeClose;
     shapeData;
-    shapeFill;
     sides;
     size;
     slow;
@@ -79,6 +77,7 @@ export class Particle {
     velocity;
     zIndexFactor;
     _cachedOpacityData = {
+        fillOpacity: defaultOpacity,
         opacity: defaultOpacity,
         strokeOpacity: defaultOpacity,
     };
@@ -126,15 +125,16 @@ export class Particle {
         return this.rotation + (this.pathRotation ? this.velocity.angle : defaultAngle);
     }
     getFillColor() {
-        return this._getRollColor(this.bubble.color ?? getHslFromAnimation(this.color));
+        return this._getRollColor(this.bubble.color ?? getHslFromAnimation(this.fillColor));
     }
     getMass() {
         return this.getRadius() ** squareExp * Math.PI * half;
     }
     getOpacity() {
-        const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? getRangeValue(this.opacity?.value ?? defaultOpacity), strokeOpacity = this.strokeOpacity ?? opacity;
+        const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? getRangeValue(this.opacity?.value ?? defaultOpacity), fillOpacity = this.fillOpacity ?? defaultOpacity, strokeOpacity = this.strokeOpacity ?? defaultOpacity;
+        this._cachedOpacityData.fillOpacity = opacity * fillOpacity * zOpacityFactor;
         this._cachedOpacityData.opacity = opacity * zOpacityFactor;
-        this._cachedOpacityData.strokeOpacity = strokeOpacity * zOpacityFactor;
+        this._cachedOpacityData.strokeOpacity = opacity * strokeOpacity * zOpacityFactor;
         return this._cachedOpacityData;
     }
     getPosition() {
@@ -172,9 +172,7 @@ export class Particle {
         this.id = id;
         this.group = group;
         this.effectClose = true;
-        this.effectFill = true;
         this.shapeClose = true;
-        this.shapeFill = true;
         this.pathRotation = false;
         this.lastPathTime = 0;
         this.destroyed = false;
@@ -226,9 +224,7 @@ export class Particle {
         if (shapeData) {
             particlesOptions.load(shapeData.particles);
         }
-        this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;
         this.effectClose = effectData?.close ?? particlesOptions.effect.close;
-        this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;
         this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;
         this.options = particlesOptions;
         container.retina.initParticle(this);

package/esm/Core/Utils/Constants.js

@@ -1,4 +1,4 @@
-export const generatedAttribute = "generated", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint = {
+export const generatedAttribute = "generated", defaultCompositeValue = "source-over", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint = {
     x: 0,
     y: 0,
     z: 0,

package/esm/Options/Classes/ColorAnimation.js

@@ -2,9 +2,13 @@ import { AnimationOptions } from "./AnimationOptions.js";
 import { isNull } from "../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../Utils/MathUtils.js";
 export class ColorAnimation extends AnimationOptions {
+    max;
+    min;
     offset;
-    constructor() {
+    constructor(min, max) {
         super();
+        this.min = min;
+        this.max = max;
         this.offset = 0;
         this.sync = true;
     }
@@ -13,6 +17,12 @@ export class ColorAnimation extends AnimationOptions {
         if (isNull(data)) {
             return;
         }
+        if (data.max !== undefined) {
+            this.max = data.max;
+        }
+        if (data.min !== undefined) {
+            this.min = data.min;
+        }
         if (data.offset !== undefined) {
             this.offset = setRangeValue(data.offset);
         }

package/esm/Options/Classes/HslAnimation.js

@@ -1,9 +1,10 @@
+import { hMax, hMin, lMax, lMin, sMax, sMin } from "../../Core/Utils/Constants.js";
 import { ColorAnimation } from "./ColorAnimation.js";
 import { isNull } from "../../Utils/TypeUtils.js";
 export class HslAnimation {
-    h = new ColorAnimation();
-    l = new ColorAnimation();
-    s = new ColorAnimation();
+    h = new ColorAnimation(hMin, hMax);
+    l = new ColorAnimation(lMin, lMax);
+    s = new ColorAnimation(sMin, sMax);
     load(data) {
         if (isNull(data)) {
             return;

package/esm/Options/Classes/Options.js

@@ -18,6 +18,7 @@ export class Options {
     hdr;
     key;
     name;
+    palette;
     particles;
     pauseOnBlur;
     pauseOnOutsideViewport;
@@ -54,10 +55,15 @@ export class Options {
             return;
         }
         if (data.preset !== undefined) {
-            executeOnSingleOrMultiple(data.preset, preset => {
+            this.preset = data.preset;
+            executeOnSingleOrMultiple(this.preset, preset => {
                 this._importPreset(preset);
             });
         }
+        if (data.palette !== undefined) {
+            this.palette = data.palette;
+            this._importPalette(this.palette);
+        }
         if (data.autoPlay !== undefined) {
             this.autoPlay = data.autoPlay;
         }
@@ -114,6 +120,37 @@ export class Options {
             plugin.loadOptions(this._container, this, data);
         });
     }
+    _importPalette = palette => {
+        const paletteData = this._engine.getPalette(palette);
+        if (!paletteData) {
+            return;
+        }
+        this.load({
+            background: {
+                color: paletteData.background,
+            },
+            blend: {
+                enable: true,
+                mode: paletteData.blendMode,
+            },
+            particles: {
+                fill: {
+                    color: paletteData.fill
+                        ? {
+                            value: paletteData.colors,
+                        }
+                        : undefined,
+                    enable: paletteData.fill,
+                },
+                stroke: !paletteData.fill
+                    ? paletteData.colors.map(color => ({
+                        color: { value: color },
+                        width: 1,
+                    }))
+                    : undefined,
+            },
+        });
+    };
     _importPreset = preset => {
         this.load(this._engine.getPreset(preset));
     };

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

@@ -2,12 +2,10 @@ import { deepExtend } from "../../../../Utils/Utils.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Effect {
     close;
-    fill;
     options;
     type;
     constructor() {
         this.close = true;
-        this.fill = true;
         this.options = {};
         this.type = [];
     }
@@ -27,9 +25,6 @@ export class Effect {
         if (data.close !== undefined) {
             this.close = data.close;
         }
-        if (data.fill !== undefined) {
-            this.fill = data.fill;
-        }
         if (data.type !== undefined) {
             this.type = data.type;
         }

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

@@ -0,0 +1,28 @@
+import { AnimatableColor } from "../AnimatableColor.js";
+import { isNull } from "../../../Utils/TypeUtils.js";
+import { setRangeValue } from "../../../Utils/MathUtils.js";
+export class Fill {
+    color;
+    enable;
+    opacity;
+    constructor() {
+        this.enable = true;
+        this.color = new AnimatableColor();
+        this.color.value = "#fff";
+        this.opacity = 1;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.color !== undefined) {
+            this.color = AnimatableColor.create(this.color, data.color);
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.opacity !== undefined) {
+            this.opacity = setRangeValue(data.opacity);
+        }
+    }
+}

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

@@ -1,6 +1,6 @@
 import { deepExtend, executeOnSingleOrMultiple } from "../../../Utils/Utils.js";
-import { AnimatableColor } from "../AnimatableColor.js";
 import { Effect } from "./Effect/Effect.js";
+import { Fill } from "./Fill.js";
 import { Move } from "./Move/Move.js";
 import { Opacity } from "./Opacity/Opacity.js";
 import { ParticlesBounce } from "./Bounce/ParticlesBounce.js";
@@ -12,8 +12,8 @@ import { ZIndex } from "./ZIndex/ZIndex.js";
 import { isNull } from "../../../Utils/TypeUtils.js";
 export class ParticlesOptions {
     bounce;
-    color;
     effect;
+    fill;
     groups;
     move;
     number;
@@ -29,9 +29,8 @@ export class ParticlesOptions {
         this._engine = engine;
         this._container = container;
         this.bounce = new ParticlesBounce();
-        this.color = new AnimatableColor();
-        this.color.value = "#fff";
         this.effect = new Effect();
+        this.fill = new Fill();
         this.groups = {};
         this.move = new Move();
         this.number = new ParticlesNumber();
@@ -48,7 +47,7 @@ export class ParticlesOptions {
         }
         if (data.groups !== undefined) {
             for (const group of Object.keys(data.groups)) {
-                if (!Object.hasOwn(data.groups, group)) {
+                if (!(group in data.groups)) {
                     continue;
                 }
                 const item = data.groups[group];
@@ -61,7 +60,6 @@ export class ParticlesOptions {
             this.reduceDuplicates = data.reduceDuplicates;
         }
         this.bounce.load(data.bounce);
-        this.color.load(AnimatableColor.create(this.color, data.color));
         this.effect.load(data.effect);
         this.move.load(data.move);
         this.number.load(data.number);
@@ -69,6 +67,14 @@ export class ParticlesOptions {
         this.shape.load(data.shape);
         this.size.load(data.size);
         this.zIndex.load(data.zIndex);
+        const fillToLoad = data.fill;
+        if (fillToLoad) {
+            this.fill = executeOnSingleOrMultiple(fillToLoad, t => {
+                const tmp = new Fill();
+                tmp.load(t);
+                return tmp;
+            });
+        }
         const strokeToLoad = data.stroke;
         if (strokeToLoad) {
             this.stroke = executeOnSingleOrMultiple(strokeToLoad, t => {

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

@@ -2,12 +2,10 @@ import { deepExtend } from "../../../../Utils/Utils.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Shape {
     close;
-    fill;
     options;
     type;
     constructor() {
         this.close = true;
-        this.fill = true;
         this.options = {};
         this.type = "circle";
     }
@@ -27,9 +25,6 @@ export class Shape {
         if (data.close !== undefined) {
             this.close = data.close;
         }
-        if (data.fill !== undefined) {
-            this.fill = data.fill;
-        }
         if (data.type !== undefined) {
             this.type = data.type;
         }

package/esm/Options/Interfaces/Particles/IFill.js

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

package/esm/Utils/CanvasUtils.js

@@ -24,7 +24,7 @@ export function drawParticle(data) {
     if (colorStyles.fill) {
         context.fillStyle = colorStyles.fill;
     }
-    const strokeWidth = particle.strokeWidth ?? minStrokeWidth;
+    const fillEnabled = !!particle.fillEnabled, strokeWidth = particle.strokeWidth ?? minStrokeWidth;
     context.lineWidth = strokeWidth;
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
@@ -37,8 +37,8 @@ export function drawParticle(data) {
         opacity,
         delta,
         pixelRatio: container.retina.pixelRatio,
-        fill: particle.shapeFill,
-        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
+        fill: fillEnabled,
+        stroke: strokeWidth > minStrokeWidth,
         transformData,
         position: { ...pos },
         drawPosition,
@@ -79,7 +79,7 @@ export function drawShape(drawer, data) {
     if (!drawer) {
         return;
     }
-    const { context, particle, stroke } = data;
+    const { context, fill, particle, stroke } = data;
     if (!particle.shape) {
         return;
     }
@@ -91,7 +91,7 @@ export function drawShape(drawer, data) {
     if (stroke) {
         context.stroke();
     }
-    if (particle.shapeFill) {
+    if (fill) {
         context.fill();
     }
 }

package/esm/Utils/ColorUtils.js

@@ -1,4 +1,4 @@
-import { clamp, getRandom, getRandomInRange, getRangeMax, getRangeMin, getRangeValue, mix, randomInRangeValue, setRangeValue, } from "./MathUtils.js";
+import { clamp, getRandom, getRandomInRange, getRangeValue, mix, randomInRangeValue, setRangeValue, } from "./MathUtils.js";
 import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime, defaultVelocity, double, hMax, hMin, hPhase, half, identity, lFactor, lMax, lMin, midColorValue, millisecondsToSeconds, percentDenominator, phaseNumerator, randomColorValue, rgbMax, sMax, sMin, sNormalizedOffset, sextuple, triple, } from "../Core/Utils/Constants.js";
 import { isArray, isString } from "./TypeUtils.js";
 import { AlterType } from "../Enums/Types/AlterType.js";
@@ -190,10 +190,10 @@ function getSdrStyleFromHsl(color, opacity) {
 }
 export function colorMix(color1, color2, size1, size2) {
     let rgb1 = color1, rgb2 = color2;
-    if (!Object.hasOwn(rgb1, "r")) {
+    if (!("r" in rgb1)) {
         rgb1 = hslToRgb(color1);
     }
-    if (!Object.hasOwn(rgb2, "r")) {
+    if (!("r" in rgb2)) {
         rgb2 = hslToRgb(color2);
     }
     return {
@@ -246,27 +246,33 @@ export function getLinkRandomColor(engine, optColor, blink, consent) {
     }
 }
 export function getHslFromAnimation(animation) {
-    return animation !== undefined
-        ? {
+    return animation === undefined
+        ? undefined
+        : {
             h: animation.h.value,
             s: animation.s.value,
             l: animation.l.value,
-        }
-        : undefined;
+        };
 }
 export function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
     const resColor = {
         h: {
             enable: false,
             value: hsl.h,
+            min: hMin,
+            max: hMax,
         },
         s: {
             enable: false,
             value: hsl.s,
+            min: sMin,
+            max: sMax,
         },
         l: {
             enable: false,
             value: hsl.l,
+            min: lMin,
+            max: lMax,
         },
     };
     if (animationOptions) {
@@ -278,6 +284,8 @@ export function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
 }
 function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
     colorValue.enable = colorAnimation.enable;
+    colorValue.min = colorAnimation.min;
+    colorValue.max = colorAnimation.max;
     if (colorValue.enable) {
         colorValue.velocity = (getRangeValue(colorAnimation.speed) / percentDenominator) * reduceFactor;
         colorValue.decay = decayOffset - getRangeValue(colorAnimation.decay);
@@ -297,7 +305,7 @@ function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
         colorValue.velocity = defaultVelocity;
     }
 }
-export function updateColorValue(data, range, decrease, delta) {
+export function updateColorValue(data, decrease, delta) {
     const minLoops = 0, minDelay = 0, identity = 1, minVelocity = 0, minOffset = 0, velocityFactor = 3.6;
     if (!data.enable ||
         ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
@@ -310,7 +318,7 @@ export function updateColorValue(data, range, decrease, delta) {
     if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
         return;
     }
-    const offset = data.offset ? randomInRangeValue(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = getRangeMax(range), min = getRangeMin(range);
+    const offset = data.offset ? randomInRangeValue(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = data.max, min = data.min;
     if (!decrease || data.status === AnimationStatus.increasing) {
         data.value += velocity;
         if (data.value > max) {
@@ -326,8 +334,7 @@ export function updateColorValue(data, range, decrease, delta) {
     }
     else {
         data.value -= velocity;
-        const minValue = 0;
-        if (data.value < minValue) {
+        if (data.value < min) {
             data.loops ??= 0;
             data.loops++;
             data.status = AnimationStatus.increasing;
@@ -342,14 +349,10 @@ export function updateColor(color, delta) {
     if (!color) {
         return;
     }
-    const { h, s, l } = color, ranges = {
-        h: { min: hMin, max: hMax },
-        s: { min: sMin, max: sMax },
-        l: { min: lMin, max: lMax },
-    };
-    updateColorValue(h, ranges.h, false, delta);
-    updateColorValue(s, ranges.s, true, delta);
-    updateColorValue(l, ranges.l, true, delta);
+    const { h, s, l } = color;
+    updateColorValue(h, false, delta);
+    updateColorValue(s, true, delta);
+    updateColorValue(l, true, delta);
 }
 export function alterHsl(color, type, value) {
     return {

package/esm/Utils/Utils.js

@@ -8,16 +8,70 @@ import { OutModeDirection } from "../Enums/Directions/OutModeDirection.js";
 import { PixelMode } from "../Enums/Modes/PixelMode.js";
 import { StartValueType } from "../Enums/Types/StartValueType.js";
 import { Vector } from "../Core/Utils/Vectors.js";
-const minRadius = 0;
-function memoize(fn) {
-    const cache = new Map();
+const minRadius = 0, minMemoizeSize = 0;
+export function memoize(fn, options) {
+    const cache = new Map(), maxSize = options?.maxSize, ttlMs = options?.ttlMs, keyFn = options?.keyFn, stableStringify = (obj, seen = new WeakSet()) => {
+        if (obj === null) {
+            return "null";
+        }
+        const t = typeof obj;
+        if (t === "undefined") {
+            return "undefined";
+        }
+        if (t === "number" || t === "boolean" || t === "string") {
+            return JSON.stringify(obj);
+        }
+        if (t === "function") {
+            try {
+                const fn = obj;
+                return fn.toString();
+            }
+            catch {
+                return '"[Function]"';
+            }
+        }
+        if (t === "symbol") {
+            try {
+                return obj.toString();
+            }
+            catch {
+                return '"[Symbol]"';
+            }
+        }
+        if (Array.isArray(obj)) {
+            return `[${obj.map(i => stableStringify(i, seen)).join(",")}]`;
+        }
+        if (seen.has(obj)) {
+            return '"[Circular]"';
+        }
+        seen.add(obj);
+        const keys = Object.keys(obj).sort();
+        return `{${keys.map(k => `${JSON.stringify(k)}:${stableStringify(obj[k], seen)}`).join(",")}}`;
+    }, defaultKeyer = (args) => stableStringify(args), makeKey = (args) => (keyFn ? keyFn(args) : defaultKeyer(args)), ensureBounds = () => {
+        if (typeof maxSize === "number" && maxSize >= minMemoizeSize) {
+            while (cache.size > maxSize) {
+                const firstKey = cache.keys().next().value;
+                if (firstKey === undefined)
+                    break;
+                cache.delete(firstKey);
+            }
+        }
+    };
     return (...args) => {
-        const key = JSON.stringify(args);
-        if (cache.has(key)) {
-            return cache.get(key);
+        const key = makeKey(args), now = Date.now(), entry = cache.get(key);
+        if (entry !== undefined) {
+            if (ttlMs && now - entry.ts > ttlMs) {
+                cache.delete(key);
+            }
+            else {
+                cache.delete(key);
+                cache.set(key, { value: entry.value, ts: entry.ts });
+                return entry.value;
+            }
         }
         const result = fn(...args);
-        cache.set(key, result);
+        cache.set(key, { value: result, ts: now });
+        ensureBounds();
         return result;
     };
 }
@@ -98,8 +152,27 @@ export function deepExtend(destination, ...sources) {
         else if (!isObject(destination) || Array.isArray(destination)) {
             destination = {};
         }
-        for (const key of Object.keys(source)) {
-            if (key === "__proto__" || key === "constructor" || key === "prototype") {
+        const sourceKeys = Object.keys(source), dangerousKeys = new Set(["__proto__", "constructor", "prototype"]), hasNested = sourceKeys.some(k => {
+            const v = source[k];
+            return isObject(v) || Array.isArray(v);
+        });
+        if (!hasNested) {
+            const sourceDict = source, destDict = destination;
+            for (const key of sourceKeys) {
+                if (dangerousKeys.has(key)) {
+                    continue;
+                }
+                if (key in sourceDict) {
+                    const v = sourceDict[key];
+                    if (v !== undefined) {
+                        destDict[key] = v;
+                    }
+                }
+            }
+            continue;
+        }
+        for (const key of sourceKeys) {
+            if (dangerousKeys.has(key)) {
                 continue;
             }
             const sourceDict = source, destDict = destination, value = sourceDict[key];
@@ -297,7 +370,7 @@ export function cloneStyle(style) {
     const clonedStyle = safeDocument().createElement("div").style;
     for (const key in style) {
         const styleKey = style[key];
-        if (!Object.hasOwn(style, key) || isNull(styleKey)) {
+        if (!(key in style) || isNull(styleKey)) {
             continue;
         }
         const styleValue = style.getPropertyValue?.(styleKey);
@@ -305,11 +378,11 @@ export function cloneStyle(style) {
             continue;
         }
         const stylePriority = style.getPropertyPriority?.(styleKey);
-        if (!stylePriority) {
-            clonedStyle.setProperty(styleKey, styleValue);
+        if (stylePriority) {
+            clonedStyle.setProperty(styleKey, styleValue, stylePriority);
         }
         else {
-            clonedStyle.setProperty(styleKey, styleValue, stylePriority);
+            clonedStyle.setProperty(styleKey, styleValue);
         }
     }
     return clonedStyle;

package/esm/exports.js

@@ -27,6 +27,7 @@ export * from "./Options/Classes/OptionsColor.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounce.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounceFactor.js";
 export * from "./Options/Classes/Particles/ParticlesOptions.js";
+export * from "./Options/Classes/Particles/Fill.js";
 export * from "./Options/Classes/Particles/Stroke.js";
 export * from "./Options/Classes/Particles/Move/Move.js";
 export * from "./Options/Classes/Particles/Move/MoveAngle.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "4.0.0-alpha.26",
+  "version": "4.0.0-alpha.27",
   "description": "Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "scripts": {

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/engine [26 Feb 2026 at 17:54]</title>
+    <title>@tsparticles/engine [9 Mar 2026 at 17:21]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>