@tsparticles/ribbons 4.3.2 → 4.4.0

package/tsparticles.ribbons.bundle.js

@@ -1,5 +1,5 @@
 (function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
-/* tsParticles v4.3.2 */
+/* tsParticles v4.4.0 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -880,7 +880,7 @@
             return this.#domArray;
         }
         get version() {
-            return "4.3.2";
+            return "4.4.0";
         }
         addEventListener(type, listener) {
             this.#eventDispatcher.addEventListener(type, listener);
@@ -961,6 +961,10 @@
     }
 
     function initEngine() {
+        const existing = globalThis.tsParticles;
+        if (existing?.pluginManager) {
+            return existing;
+        }
         return new Engine();
     }
 
@@ -1058,6 +1062,15 @@
         AnimationMode["random"] = "random";
     })(exports.AnimationMode || (exports.AnimationMode = {}));
 
+    exports.HdrMode = void 0;
+    (function (HdrMode) {
+        HdrMode["standard"] = "standard";
+        HdrMode["natural"] = "natural";
+        HdrMode["vivid"] = "vivid";
+        HdrMode["cinematic"] = "cinematic";
+        HdrMode["dynamic"] = "dynamic";
+    })(exports.HdrMode || (exports.HdrMode = {}));
+
     exports.LimitMode = void 0;
     (function (LimitMode) {
         LimitMode["delete"] = "delete";
@@ -1323,6 +1336,29 @@
         }
     }
 
+    const defaultPeakNits = 400, minPeakNits = 0, toStringValue = (value) => String(value);
+    class HDROptions extends OptionLoader {
+        enable = true;
+        mode = exports.HdrMode.standard;
+        peakNits = defaultPeakNits;
+        doLoad(data) {
+            if (data.enable !== undefined && !isBoolean(data.enable)) {
+                throw new Error(`Invalid HDR "enable" value: expected a boolean, got "${String(data.enable)}"`);
+            }
+            if (data.mode !== undefined &&
+                (typeof data.mode !== "string" || !Object.values(exports.HdrMode).includes(data.mode))) {
+                throw new Error(`Invalid HDR "mode" value: expected one of ${Object.values(exports.HdrMode).join(", ")}, got "${toStringValue(data.mode)}"`);
+            }
+            if (data.peakNits !== undefined &&
+                (!isNumber(data.peakNits) || !Number.isFinite(data.peakNits) || data.peakNits <= minPeakNits)) {
+                throw new Error(`Invalid HDR "peakNits" value: expected a positive number, got "${String(data.peakNits)}"`);
+            }
+            loadProperty(this, "enable", data.enable);
+            loadProperty(this, "mode", data.mode);
+            loadProperty(this, "peakNits", data.peakNits);
+        }
+    }
+
     class ResizeEvent extends OptionLoader {
         delay = 0.5;
         enable = true;
@@ -1766,7 +1802,7 @@
         duration = 0;
         fpsLimit = 120;
         fullScreen;
-        hdr = true;
+        hdr;
         key;
         name;
         palette;
@@ -1786,6 +1822,7 @@
             this.#container = container;
             this.background = new Background();
             this.fullScreen = new FullScreen();
+            this.hdr = new HDROptions();
             this.particles = loadParticlesOptions(this.#pluginManager, this.#container);
             this.resize = new ResizeEvent();
         }
@@ -1808,7 +1845,15 @@
             loadProperty(this, "detectRetina", data.detectRetina);
             loadRangeProperty(this, "duration", data.duration);
             loadProperty(this, "fpsLimit", data.fpsLimit);
-            loadProperty(this, "hdr", data.hdr);
+            const hdrData = data.hdr;
+            if (isBoolean(hdrData)) {
+                this.hdr.enable = hdrData;
+                this.hdr.mode = exports.HdrMode.standard;
+                this.hdr.peakNits = 400;
+            }
+            else {
+                this.hdr.load(hdrData);
+            }
             loadProperty(this, "pauseOnBlur", data.pauseOnBlur);
             loadProperty(this, "pauseOnOutsideViewport", data.pauseOnOutsideViewport);
             loadProperty(this, "zLayers", data.zLayers);
@@ -1851,7 +1896,7 @@
         }
     }
 
-    const styleCache = new Map(), maxStyleCacheSize = 2000, rgbFixedPrecision = 2, hslFixedPrecision = 2, hdrRgbFixedPrecision = 4, hdrHslFixedPrecision = 4, sdrReferenceWhiteNits = 203, hdrAnimationScale = sdrReferenceWhiteNits / maxNits;
+    const styleCache = new Map(), maxStyleCacheSize = 2000, rgbFixedPrecision = 2, hslFixedPrecision = 2, hdrRgbFixedPrecision = 4, hdrHslFixedPrecision = 4, sdrReferenceWhiteNits = 203, acesA = 2.51, acesB = 0.03, acesC = 2.43, acesD = 0.59, acesE = 0.14, saturationBoost = 1.15, lightnessBoost = 1.05, temperatureR = 1.05, temperatureB = 0.95, contrastFactor = 1.1, luminanceR = 0.2126, luminanceG = 0.7152, luminanceB = 0.0722, dynamicLuminanceFactor = 2, channelCount = 3, srgbThreshold = 0.04045, srgbDivisor = 12.92, srgbOffset = 0.055, srgbScale = 1.055, srgbExponent = 2.4, linearThreshold = 0.0031308, linearScale = 12.92;
     function getCachedStyle(key, generator) {
         let cached = styleCache.get(key);
         if (!cached) {
@@ -1863,6 +1908,48 @@
         }
         return cached;
     }
+    function acesFilmic(x) {
+        return clamp((x * (acesA * x + acesB)) / (x * (acesC * x + acesD) + acesE), none, one);
+    }
+    function srgbToLinear(c) {
+        return c <= srgbThreshold ? c / srgbDivisor : Math.pow((c + srgbOffset) / srgbScale, srgbExponent);
+    }
+    function linearToSrgb(c) {
+        return c <= linearThreshold ? c * linearScale : srgbScale * Math.pow(c, one / srgbExponent) - srgbOffset;
+    }
+    function applyHdrModeAdjustments(r, g, b, mode, maxChannel) {
+        switch (mode) {
+            case exports.HdrMode.vivid: {
+                const avg = (r + g + b) / channelCount;
+                return {
+                    b: clamp(clamp(avg + (b - avg) * saturationBoost, none, maxChannel) * lightnessBoost, none, maxChannel),
+                    g: clamp(clamp(avg + (g - avg) * saturationBoost, none, maxChannel) * lightnessBoost, none, maxChannel),
+                    r: clamp(clamp(avg + (r - avg) * saturationBoost, none, maxChannel) * lightnessBoost, none, maxChannel),
+                };
+            }
+            case exports.HdrMode.cinematic: {
+                const tempR = r * temperatureR, tempB = b * temperatureB, avg = (tempR + g + tempB) / channelCount;
+                return {
+                    b: clamp(avg + (tempB - avg) * contrastFactor, none, maxChannel),
+                    g: clamp(avg + (g - avg) * contrastFactor, none, maxChannel),
+                    r: clamp(avg + (tempR - avg) * contrastFactor, none, maxChannel),
+                };
+            }
+            case exports.HdrMode.dynamic: {
+                const luminance = luminanceR * r + luminanceG * g + luminanceB * b, vividWeight = Math.min(one, luminance * dynamicLuminanceFactor), naturalWeight = one - vividWeight, avg = (r + g + b) / channelCount, vividR = clamp(avg + (r - avg) * saturationBoost, none, maxChannel) * lightnessBoost, vividG = clamp(avg + (g - avg) * saturationBoost, none, maxChannel) * lightnessBoost, vividB = clamp(avg + (b - avg) * saturationBoost, none, maxChannel) * lightnessBoost;
+                return {
+                    b: clamp(b * naturalWeight + vividB * vividWeight, none, maxChannel),
+                    g: clamp(g * naturalWeight + vividG * vividWeight, none, maxChannel),
+                    r: clamp(r * naturalWeight + vividR * vividWeight, none, maxChannel),
+                };
+            }
+            case exports.HdrMode.standard:
+                return { b, g, r };
+            case exports.HdrMode.natural:
+            default:
+                return { b, g, r };
+        }
+    }
     function stringToRgba(pluginManager, input) {
         if (!input) {
             return;
@@ -2030,30 +2117,65 @@
             r: getRgbInRangeValue(),
         };
     }
-    function getStyleFromRgb(color, hdr, opacity) {
-        const rgbPrecision = hdr ? hdrRgbFixedPrecision : rgbFixedPrecision, op = opacity ?? defaultOpacity$1, key = `rgb-${color.r.toFixed(rgbPrecision)}-${color.g.toFixed(rgbPrecision)}-${color.b.toFixed(rgbPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
-        return getCachedStyle(key, () => (hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity)));
+    function getStyleFromRgb(color, hdr, opacity, peakNits, mode) {
+        const rgbPrecision = hdr ? hdrRgbFixedPrecision : rgbFixedPrecision, op = opacity ?? defaultOpacity$1, key = hdr
+            ? `rgb-${color.r.toFixed(rgbPrecision)}-${color.g.toFixed(rgbPrecision)}-${color.b.toFixed(rgbPrecision)}-hdr-${op.toString()}-${(peakNits ?? maxNits).toString()}-${mode ?? exports.HdrMode.standard}`
+            : `rgb-${color.r.toFixed(rgbPrecision)}-${color.g.toFixed(rgbPrecision)}-${color.b.toFixed(rgbPrecision)}-sdr-${op.toString()}`;
+        return getCachedStyle(key, () => hdr ? getHdrStyleFromRgb(color, opacity, peakNits, mode) : getSdrStyleFromRgb(color, opacity));
+    }
+    function getHdrStyleFromRgb(color, opacity, peakNits = maxNits, mode = exports.HdrMode.standard) {
+        const headroom = peakNits / sdrReferenceWhiteNits, middleGray = 0.18, mapped = hdrToneMapColor(color, headroom, middleGray, mode);
+        return `color(display-p3 ${mapped.r.toString()} ${mapped.g.toString()} ${mapped.b.toString()} / ${(opacity ?? defaultOpacity$1).toString()})`;
+    }
+    function hdrToneMapColor(color, headroom, middleGray, mode) {
+        const rNorm = color.r / rgbMax, gNorm = color.g / rgbMax, bNorm = color.b / rgbMax;
+        if (mode !== exports.HdrMode.natural && mode !== exports.HdrMode.vivid && mode !== exports.HdrMode.cinematic && mode !== exports.HdrMode.dynamic) {
+            return { b: bNorm, g: gNorm, r: rNorm };
+        }
+        const maxChannel = Math.max(one, headroom), luminance = luminanceR * rNorm + luminanceG * gNorm + luminanceB * bNorm, mappedLuminance = hdrToneMap(luminance, headroom, middleGray), scale = luminance > none ? mappedLuminance / luminance : one;
+        return applyHdrModeAdjustments(clamp(rNorm * scale, none, maxChannel), clamp(gNorm * scale, none, maxChannel), clamp(bNorm * scale, none, maxChannel), mode, maxChannel);
     }
-    function getHdrStyleFromRgb(color, opacity, peakNits = maxNits) {
-        const headroom = peakNits / sdrReferenceWhiteNits;
-        return `color(display-p3 ${((color.r / rgbMax) * headroom).toString()} ${((color.g / rgbMax) * headroom).toString()} ${((color.b / rgbMax) * headroom).toString()} / ${(opacity ?? defaultOpacity$1).toString()})`;
+    function hdrToneMap(normalized, headroom, middleGray) {
+        if (normalized <= middleGray) {
+            return acesFilmic(normalized);
+        }
+        const expanded = normalized + (normalized - middleGray) * (headroom - one);
+        return acesFilmic(expanded);
     }
     function getSdrStyleFromRgb(color, opacity) {
         return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? defaultOpacity$1).toString()})`;
     }
-    function getStyleFromHsl(color, hdr, opacity) {
-        const hslPrecision = hdr ? hdrHslFixedPrecision : hslFixedPrecision, op = opacity ?? defaultOpacity$1, key = `hsl-${color.h.toFixed(hslPrecision)}-${color.s.toFixed(hslPrecision)}-${color.l.toFixed(hslPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+    function getStyleFromHsl(color, hdr, opacity, peakNits, mode) {
+        const hslPrecision = hdr ? hdrHslFixedPrecision : hslFixedPrecision, op = opacity ?? defaultOpacity$1, key = hdr
+            ? `hsl-${color.h.toFixed(hslPrecision)}-${color.s.toFixed(hslPrecision)}-${color.l.toFixed(hslPrecision)}-hdr-${op.toString()}-${(peakNits ?? maxNits).toString()}-${mode ?? exports.HdrMode.standard}`
+            : `hsl-${color.h.toFixed(hslPrecision)}-${color.s.toFixed(hslPrecision)}-${color.l.toFixed(hslPrecision)}-sdr-${op.toString()}`;
         return getCachedStyle(key, () => hdr
-            ? getStyleFromRgb(hslToRgbFloat(color), true, opacity)
+            ? getStyleFromRgb(hslToRgbFloat(color), true, opacity, peakNits, mode)
             : `hsla(${color.h.toString()}, ${color.s.toString()}%, ${color.l.toString()}%, ${op.toString()})`);
     }
-    function colorMix(color1, color2, size1, size2) {
+    function colorMix(color1, color2, size1, size2, hdr) {
         let rgb1 = color1, rgb2 = color2;
         if (!("r" in rgb1)) {
-            rgb1 = hslToRgb(color1);
+            rgb1 = hdr ? hslToRgbFloat(color1) : hslToRgb(color1);
         }
         if (!("r" in rgb2)) {
-            rgb2 = hslToRgb(color2);
+            rgb2 = hdr ? hslToRgbFloat(color2) : hslToRgb(color2);
+        }
+        if (hdr) {
+            const lin1 = {
+                b: srgbToLinear(rgb1.b / rgbMax),
+                g: srgbToLinear(rgb1.g / rgbMax),
+                r: srgbToLinear(rgb1.r / rgbMax),
+            }, lin2 = {
+                b: srgbToLinear(rgb2.b / rgbMax),
+                g: srgbToLinear(rgb2.g / rgbMax),
+                r: srgbToLinear(rgb2.r / rgbMax),
+            }, totalWeight = size1 + size2;
+            return {
+                b: linearToSrgb((lin1.b * size1 + lin2.b * size2) / totalWeight) * rgbMax,
+                g: linearToSrgb((lin1.g * size1 + lin2.g * size2) / totalWeight) * rgbMax,
+                r: linearToSrgb((lin1.r * size1 + lin2.r * size2) / totalWeight) * rgbMax,
+            };
         }
         return {
             b: mix(rgb1.b, rgb2.b, size1, size2),
@@ -2061,14 +2183,14 @@
             r: mix(rgb1.r, rgb2.r, size1, size2),
         };
     }
-    function getLinkColor(p1, p2, linkColor) {
+    function getLinkColor(p1, p2, linkColor, hdr) {
         if (linkColor === randomColorValue) {
             return getRandomRgbColor();
         }
         else if (linkColor === midColorValue) {
             const sourceColor = p1.getFillColor() ?? p1.getStrokeColor(), destColor = p2?.getFillColor() ?? p2?.getStrokeColor();
             if (sourceColor && destColor && p2) {
-                return colorMix(sourceColor, destColor, p1.getRadius(), p2.getRadius());
+                return colorMix(sourceColor, destColor, p1.getRadius(), p2.getRadius(), hdr);
             }
             else {
                 const hslColor = sourceColor ?? destColor;
@@ -2164,7 +2286,7 @@
             colorValue.velocity = defaultVelocity;
         }
     }
-    function updateColorValue(data, decrease, delta, hdr) {
+    function updateColorValue(data, decrease, delta, _hdr) {
         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))) {
@@ -2177,7 +2299,7 @@
         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) * (hdr ? hdrAnimationScale : identity), decay = data.decay ?? identity, max = data.max, min = data.min;
+        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 === exports.AnimationStatus.increasing) {
             data.value += velocity;
             if (data.value > max) {
@@ -2209,9 +2331,9 @@
             return;
         }
         const { h, s, l } = color;
-        updateColorValue(h, false, delta, hdr);
-        updateColorValue(s, true, delta, hdr);
-        updateColorValue(l, true, delta, hdr);
+        updateColorValue(h, false, delta);
+        updateColorValue(s, true, delta);
+        updateColorValue(l, true, delta);
     }
     function alterHsl(color, type, value) {
         return {
@@ -2261,7 +2383,7 @@
     }
 
     async function loadBlendPlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BlendPlugin());
         });
@@ -2298,7 +2420,7 @@
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -2346,7 +2468,7 @@
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -2399,7 +2521,7 @@
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsl", new HslColorManager());
         });
@@ -2423,7 +2545,7 @@
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             const moveEngine = e, movePluginManager = moveEngine.pluginManager;
             movePluginManager.initializers.pathGenerators ??= new Map();
@@ -2633,7 +2755,7 @@
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -2978,7 +3100,7 @@
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -3049,7 +3171,7 @@
     }
 
     async function loadPaintUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -3104,7 +3226,7 @@
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("rgb", new RgbColorManager());
         });
@@ -3189,7 +3311,7 @@
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -3198,7 +3320,7 @@
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadBlendPlugin(e),
@@ -3438,7 +3560,7 @@
     })(EmitterClickMode || (EmitterClickMode = {}));
 
     async function loadEmittersPluginSimple(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             await addEmittersShapesManager(e);
@@ -3526,7 +3648,7 @@
     }
 
     async function loadEmittersShapeSquare(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("square", new EmittersSquareShapeGenerator());
@@ -3670,7 +3792,7 @@
     }
 
     async function loadLifeUpdater(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("life", container => {
                 return Promise.resolve(new LifeUpdater(container));
@@ -3724,7 +3846,7 @@
     }
 
     async function loadMotionPlugin(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new MotionPlugin());
         });
@@ -3932,12 +4054,7 @@
             context.fill();
         }
     }
-    function drawRibbon(data, hdr) {
-        const { context, particle, radius } = data, points = particle.ribbonPoints, offsets = particle.ribbonOffsets, bounds = particle.ribbonBounds, hasFill = data.fill, hasStroke = data.stroke;
-        if (!points || !offsets || !bounds || points.length < minPointCount || (!hasFill && !hasStroke)) {
-            return;
-        }
-        const drawOffsets = offsets.mult(radius), center = particle.position, frontFill = typeof context.fillStyle === "string" ? context.fillStyle : "", frontStroke = typeof context.strokeStyle === "string" ? context.strokeStyle : "", shapeData = particle.shapeData;
+    function resolveBackFill(hasStroke, frontFill, frontStroke, shapeData, particle, hdr, peakNits, mode) {
         let backFill = hasStroke ? frontStroke : frontFill;
         if (shapeData?.backColor) {
             backFill = shapeData.backColor;
@@ -3946,16 +4063,68 @@
             const frontHsl = getHslFromAnimation(particle.fillColor);
             if (frontHsl) {
                 const altered = alterHsl(frontHsl, exports.AlterType.darken, getRangeValue(shapeData.darken.value));
-                backFill = getStyleFromHsl(altered, hdr);
+                backFill = getStyleFromHsl(altered, hdr, undefined, peakNits, mode);
             }
         }
         else if (shapeData?.enlighten?.enable) {
             const frontHsl = getHslFromAnimation(particle.fillColor);
             if (frontHsl) {
                 const altered = alterHsl(frontHsl, exports.AlterType.enlighten, getRangeValue(shapeData.enlighten.value));
-                backFill = getStyleFromHsl(altered, hdr);
+                backFill = getStyleFromHsl(altered, hdr, undefined, peakNits, mode);
             }
         }
+        return backFill;
+    }
+    function drawEdgeSegments(context, currentBase, nextBase, currentSide, nextSide, isFirst, isLast, hasFill, hasStroke) {
+        if (isFirst) {
+            drawPolygonSegment(context, {
+                a: currentBase,
+                b: nextBase,
+                c: getMidpoint(nextBase, nextSide),
+                fill: hasFill,
+                stroke: hasStroke,
+            });
+            drawPolygonSegment(context, {
+                a: nextSide,
+                b: currentSide,
+                c: getMidpoint(nextBase, nextSide),
+                fill: hasFill,
+                stroke: hasStroke,
+            });
+        }
+        else if (isLast) {
+            drawPolygonSegment(context, {
+                a: currentBase,
+                b: nextBase,
+                c: getMidpoint(currentBase, currentSide),
+                fill: hasFill,
+                stroke: hasStroke,
+            });
+            drawPolygonSegment(context, {
+                a: nextSide,
+                b: currentSide,
+                c: getMidpoint(currentBase, currentSide),
+                fill: hasFill,
+                stroke: hasStroke,
+            });
+        }
+        else {
+            drawPolygonSegment(context, {
+                a: currentBase,
+                b: nextBase,
+                c: nextSide,
+                d: currentSide,
+                fill: hasFill,
+                stroke: hasStroke,
+            });
+        }
+    }
+    function drawRibbon(data, hdr, peakNits, mode) {
+        const { context, particle, radius } = data, points = particle.ribbonPoints, offsets = particle.ribbonOffsets, bounds = particle.ribbonBounds, hasFill = data.fill, hasStroke = data.stroke;
+        if (!points || !offsets || !bounds || points.length < minPointCount || (!hasFill && !hasStroke)) {
+            return;
+        }
+        const drawOffsets = offsets.mult(radius), center = particle.position, frontFill = typeof context.fillStyle === "string" ? context.fillStyle : "", frontStroke = typeof context.strokeStyle === "string" ? context.strokeStyle : "", shapeData = particle.shapeData, backFill = resolveBackFill(hasStroke, frontFill, frontStroke, shapeData, particle, hdr, peakNits, mode);
         context.lineWidth = lineWidth;
         context.lineJoin = "round";
         context.lineCap = "round";
@@ -3973,46 +4142,13 @@
                 context.strokeStyle = segmentStyle;
             }
             if (i === noPoint) {
-                drawPolygonSegment(context, {
-                    a: currentBase,
-                    b: nextBase,
-                    c: getMidpoint(nextBase, nextSide),
-                    fill: hasFill,
-                    stroke: hasStroke,
-                });
-                drawPolygonSegment(context, {
-                    a: nextSide,
-                    b: currentSide,
-                    c: getMidpoint(nextBase, nextSide),
-                    fill: hasFill,
-                    stroke: hasStroke,
-                });
+                drawEdgeSegments(context, currentBase, nextBase, currentSide, nextSide, true, false, hasFill, hasStroke);
             }
             else if (i === points.length - secondPoint) {
-                drawPolygonSegment(context, {
-                    a: currentBase,
-                    b: nextBase,
-                    c: getMidpoint(currentBase, currentSide),
-                    fill: hasFill,
-                    stroke: hasStroke,
-                });
-                drawPolygonSegment(context, {
-                    a: nextSide,
-                    b: currentSide,
-                    c: getMidpoint(currentBase, currentSide),
-                    fill: hasFill,
-                    stroke: hasStroke,
-                });
+                drawEdgeSegments(context, currentBase, nextBase, currentSide, nextSide, false, true, hasFill, hasStroke);
             }
             else {
-                drawPolygonSegment(context, {
-                    a: currentBase,
-                    b: nextBase,
-                    c: nextSide,
-                    d: currentSide,
-                    fill: hasFill,
-                    stroke: hasStroke,
-                });
+                drawEdgeSegments(context, currentBase, nextBase, currentSide, nextSide, false, false, hasFill, hasStroke);
             }
         }
         context.fillStyle = frontFill;
@@ -4060,7 +4196,7 @@
                 createRibbonState(data.particle);
             }
             updateRibbon(data);
-            drawRibbon(data, this.#container.hdr);
+            drawRibbon(data, this.#container.hdr, this.#container.peakNits, this.#container.hdrMode);
         }
         getSidesCount(particle) {
             const pointsLen = particle.ribbonPoints?.length;
@@ -4122,7 +4258,7 @@
     }
 
     async function loadRibbonShape(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["ribbon"], (container) => Promise.resolve(new RibbonDrawer(container)));
         });
@@ -4442,7 +4578,7 @@
 
     let initPromise = null;
     async function doInitPlugins(engine) {
-        engine.checkVersion("4.3.2");
+        engine.checkVersion("4.4.0");
         await engine.pluginManager.register(async (e) => {
             const emittersRegister = async (engine) => {
                 await loadEmittersPluginSimple(engine);
@@ -4497,7 +4633,7 @@
             }
             else {
                 subId = id;
-                subOptions = idOrOptions ?? {};
+                subOptions = idOrOptions ?? options;
             }
             return setRibbons(tsParticles, {
                 id: subId,
@@ -4509,7 +4645,7 @@
     ribbons.init = async () => {
         await initPlugins(tsParticles);
     };
-    ribbons.version = "4.3.2";
+    ribbons.version = "4.4.0";
     globalThis.ribbons = ribbons;
 
     const globalObject = globalThis;
@@ -4634,7 +4770,11 @@
             if (!fColor && !sColor) {
                 return;
             }
-            const container = this.#container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this.#reusableTransform, colorStyles = this.#reusableColorStyles, fill = fColor ? getStyleFromHsl(fColor, container.hdr, fillOpacity * opacity) : undefined, stroke = sColor ? getStyleFromHsl(sColor, container.hdr, strokeOpacity * opacity) : fill;
+            const container = this.#container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this.#reusableTransform, colorStyles = this.#reusableColorStyles, fill = fColor
+                ? getStyleFromHsl(fColor, container.hdr, fillOpacity * opacity, container.peakNits, container.hdrMode)
+                : undefined, stroke = sColor
+                ? getStyleFromHsl(sColor, container.hdr, strokeOpacity * opacity, container.peakNits, container.hdrMode)
+                : fill;
             transform.a = transform.b = transform.c = transform.d = undefined;
             colorStyles.fill = fill;
             colorStyles.stroke = stroke;
@@ -4968,7 +5108,9 @@
             if (typeof background.element === "string") {
                 if (typeof document !== "undefined") {
                     const node = document.querySelector(background.element);
-                    if (node instanceof HTMLCanvasElement || node instanceof HTMLVideoElement || node instanceof HTMLImageElement) {
+                    if ((typeof HTMLCanvasElement !== "undefined" && node instanceof HTMLCanvasElement) ||
+                        (typeof HTMLVideoElement !== "undefined" && node instanceof HTMLVideoElement) ||
+                        (typeof HTMLImageElement !== "undefined" && node instanceof HTMLImageElement)) {
                         this.#backgroundElement = node;
                     }
                     else if (node) {
@@ -4979,10 +5121,10 @@
                     }
                 }
             }
-            else if (background.element instanceof HTMLCanvasElement ||
-                background.element instanceof OffscreenCanvas ||
-                background.element instanceof HTMLVideoElement ||
-                background.element instanceof HTMLImageElement) {
+            else if ((typeof HTMLCanvasElement !== "undefined" && background.element instanceof HTMLCanvasElement) ||
+                (typeof OffscreenCanvas !== "undefined" && background.element instanceof OffscreenCanvas) ||
+                (typeof HTMLVideoElement !== "undefined" && background.element instanceof HTMLVideoElement) ||
+                (typeof HTMLImageElement !== "undefined" && background.element instanceof HTMLImageElement)) {
                 this.#backgroundElement = background.element;
             }
         }
@@ -5050,6 +5192,7 @@
         zoom = defaultZoom;
         #container;
         #generated;
+        #hdrMediaListeners;
         #mutationObserver;
         #originalStyle;
         #pluginManager;
@@ -5114,7 +5257,6 @@
             });
             this.resize();
             this.#initStyle();
-            this.initBackground();
             this.#safeMutationObserver(obs => {
                 const element = this.domElement;
                 if (!element || !(element instanceof Node)) {
@@ -5124,6 +5266,8 @@
             });
             this.initPlugins();
             this.#initContext();
+            this.initBackground();
+            this.#initHdrListeners();
             this.render.init();
         }
         initBackground() {
@@ -5133,7 +5277,8 @@
             }
             const elementStyle = element.style, color = rangeColorToRgb(this.#pluginManager, background.color);
             if (color) {
-                elementStyle.backgroundColor = getStyleFromRgb(color, container.actualOptions.hdr, background.opacity);
+                const hdrOptions = container.actualOptions.hdr;
+                elementStyle.backgroundColor = getStyleFromRgb(color, container.hdr, background.opacity, hdrOptions.peakNits, hdrOptions.mode);
             }
             else {
                 elementStyle.backgroundColor = "";
@@ -5230,6 +5375,7 @@
                 obs.disconnect();
             });
             this.#mutationObserver = undefined;
+            this.#removeHdrListeners();
             this.render.stop();
         }
         async windowResize() {
@@ -5249,9 +5395,16 @@
             }
         }
         #initContext() {
-            const container = this.#container, canSupportHdr = container.actualOptions.hdr &&
+            const container = this.#container, canSupportHdr = container.actualOptions.hdr.enable &&
                 safeMatchMedia("(color-gamut: p3)")?.matches &&
                 safeMatchMedia("(dynamic-range: high)")?.matches;
+            container.hdr = canSupportHdr ?? false;
+            container.hdrMode = container.actualOptions.hdr.mode;
+            container.peakNits = container.actualOptions.hdr.peakNits;
+            const renderCanvas = this.renderCanvas;
+            if (!renderCanvas) {
+                return;
+            }
             this.render.setContextSettings({
                 alpha: true,
                 desynchronized: true,
@@ -5260,11 +5413,47 @@
                     ? { colorSpace: "display-p3", colorType: "float16" }
                     : { colorSpace: "srgb" }),
             });
-            const renderCanvas = this.renderCanvas;
-            if (!renderCanvas) {
-                return;
+            let context;
+            try {
+                context = renderCanvas.getContext("2d", this.render.settings);
+            }
+            catch {
+                context = null;
+            }
+            if (canSupportHdr && !context) {
+                container.hdr = false;
+                const sdrSettings = {
+                    alpha: true,
+                    desynchronized: true,
+                    willReadFrequently: false,
+                    colorSpace: "srgb",
+                };
+                this.render.setContextSettings(sdrSettings);
+                try {
+                    context = renderCanvas.getContext("2d", sdrSettings);
+                }
+                catch {
+                    context = null;
+                }
+            }
+            this.render.setContext(context);
+        }
+        #initHdrListeners() {
+            this.#removeHdrListeners();
+            const p3Query = safeMatchMedia("(color-gamut: p3)"), hdrQuery = safeMatchMedia("(dynamic-range: high)"), handleChange = () => {
+                this.#recreateRenderCanvas();
+                this.#initContext();
+                this.initBackground();
+            }, listeners = [];
+            if (p3Query) {
+                p3Query.addEventListener("change", handleChange);
+                listeners.push({ handler: handleChange, mql: p3Query });
+            }
+            if (hdrQuery) {
+                hdrQuery.addEventListener("change", handleChange);
+                listeners.push({ handler: handleChange, mql: hdrQuery });
             }
-            this.render.setContext(renderCanvas.getContext("2d", this.render.settings));
+            this.#hdrMediaListeners = listeners;
         }
         #initStyle() {
             const element = this.domElement, options = this.#container.actualOptions;
@@ -5288,6 +5477,25 @@
                 element.style.setProperty(key, value, "important");
             }
         }
+        #recreateRenderCanvas() {
+            const renderCanvas = this.renderCanvas;
+            if (!renderCanvas) {
+                return;
+            }
+            if (this.domElement) {
+                return;
+            }
+            this.renderCanvas = new OffscreenCanvas(renderCanvas.width, renderCanvas.height);
+        }
+        #removeHdrListeners() {
+            if (!this.#hdrMediaListeners) {
+                return;
+            }
+            for (const { handler, mql } of this.#hdrMediaListeners) {
+                mql.removeEventListener("change", handler);
+            }
+            this.#hdrMediaListeners = undefined;
+        }
         #repairStyle() {
             const element = this.domElement;
             if (!element) {
@@ -5672,9 +5880,9 @@
         }
         getOpacity() {
             const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, baseOpacity = getRangeValue(this.opacity?.value ?? defaultOpacity$1), modifierOpacity = this.#applyModifiers(undefined, m => m.opacity), opacity = modifierOpacity ?? baseOpacity, fillOpacity = this.fillOpacity ?? defaultOpacity$1, strokeOpacity = this.strokeOpacity ?? defaultOpacity$1;
-            this.#cachedOpacityData.fillOpacity = opacity * fillOpacity * zOpacityFactor;
+            this.#cachedOpacityData.fillOpacity = fillOpacity;
             this.#cachedOpacityData.opacity = opacity * zOpacityFactor;
-            this.#cachedOpacityData.strokeOpacity = opacity * strokeOpacity * zOpacityFactor;
+            this.#cachedOpacityData.strokeOpacity = strokeOpacity;
             return this.#cachedOpacityData;
         }
         getPosition() {
@@ -6529,6 +6737,7 @@
         effectDrawers;
         fpsLimit;
         hdr;
+        hdrMode;
         id;
         pageHidden;
         particleCreatedPlugins;
@@ -6536,6 +6745,7 @@
         particlePositionPlugins;
         particleUpdaters;
         particles;
+        peakNits;
         plugins;
         retina;
         shapeDrawers;
@@ -6566,6 +6776,8 @@
             this.id = Symbol(id);
             this.fpsLimit = 120;
             this.hdr = false;
+            this.hdrMode = exports.HdrMode.standard;
+            this.peakNits = 400;
             this.#smooth = false;
             this.#delay = 0;
             this.#duration = 0;
@@ -6705,8 +6917,9 @@
             this.updateActualOptions();
             this.canvas.initBackground();
             this.canvas.resize();
-            const { delay, duration, fpsLimit, hdr, smooth, zLayers } = this.actualOptions;
-            this.hdr = hdr;
+            const { delay, duration, fpsLimit, smooth, zLayers } = this.actualOptions, hdrOptions = this.actualOptions.hdr;
+            this.hdrMode = hdrOptions.mode;
+            this.peakNits = hdrOptions.peakNits;
             this.zLayers = zLayers;
             this.#duration = getRangeValue(duration) * millisecondsToSeconds$1;
             this.#delay = getRangeValue(delay) * millisecondsToSeconds$1;
@@ -7703,6 +7916,7 @@
     exports.ColorAnimation = ColorAnimation;
     exports.Fill = Fill;
     exports.FullScreen = FullScreen;
+    exports.HDROptions = HDROptions;
     exports.HslAnimation = HslAnimation;
     exports.Move = Move;
     exports.MoveAngle = MoveAngle;