@tsparticles/engine 4.0.0-beta.1 → 4.0.0-beta.11

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

@@ -1,27 +1,26 @@
 import { deepExtend, executeOnSingleOrMultiple } from "../../../Utils/Utils.js";
+import { isArray, isNull } from "../../../Utils/TypeUtils.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 { Paint } from "./Paint.js";
 import { ParticlesBounce } from "./Bounce/ParticlesBounce.js";
 import { ParticlesNumber } from "./Number/ParticlesNumber.js";
 import { Shape } from "./Shape/Shape.js";
 import { Size } from "./Size/Size.js";
-import { Stroke } from "./Stroke.js";
 import { ZIndex } from "./ZIndex/ZIndex.js";
-import { isNull } from "../../../Utils/TypeUtils.js";
 export class ParticlesOptions {
     bounce;
     effect;
-    fill;
     groups;
     move;
     number;
     opacity;
+    paint;
+    palette;
     reduceDuplicates;
     shape;
     size;
-    stroke;
     zIndex;
     _container;
     _pluginManager;
@@ -30,21 +29,24 @@ export class ParticlesOptions {
         this._container = container;
         this.bounce = new ParticlesBounce();
         this.effect = new Effect();
-        this.fill = new Fill();
         this.groups = {};
         this.move = new Move();
         this.number = new ParticlesNumber();
         this.opacity = new Opacity();
+        this.paint = new Paint();
         this.reduceDuplicates = false;
         this.shape = new Shape();
         this.size = new Size();
-        this.stroke = new Stroke();
         this.zIndex = new ZIndex();
     }
     load(data) {
         if (isNull(data)) {
             return;
         }
+        if (data.palette) {
+            this.palette = data.palette;
+            this._importPalette(this.palette);
+        }
         if (data.groups !== undefined) {
             for (const group of Object.keys(data.groups)) {
                 if (!(group in data.groups)) {
@@ -64,25 +66,17 @@ export class ParticlesOptions {
         this.move.load(data.move);
         this.number.load(data.number);
         this.opacity.load(data.opacity);
-        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 => {
-                const tmp = new Stroke();
+        const paintToLoad = data.paint;
+        if (paintToLoad) {
+            this.paint = executeOnSingleOrMultiple(paintToLoad, t => {
+                const tmp = new Paint();
                 tmp.load(t);
                 return tmp;
             });
         }
+        this.shape.load(data.shape);
+        this.size.load(data.size);
+        this.zIndex.load(data.zIndex);
         if (this._container) {
             for (const plugin of this._pluginManager.plugins) {
                 if (plugin.loadParticlesOptions) {
@@ -99,4 +93,49 @@ export class ParticlesOptions {
             }
         }
     }
+    _importPalette = (palette) => {
+        const paletteData = this._pluginManager.getPalette(palette);
+        if (!paletteData) {
+            return;
+        }
+        const paletteColors = paletteData.colors, defaultPaintStrokeWidth = 0, defaultPaintVariantsLength = 1, firstPaintVariantIndex = 0, defaultPalettePaintVariant = {}, colorVariants = isArray(paletteColors) ? paletteColors : [paletteColors], palettePaintVariants = colorVariants.flatMap(variant => {
+            const paletteFill = variant.fill, paletteStroke = variant.stroke, fillPart = paletteFill
+                ? {
+                    color: {
+                        value: paletteFill.value,
+                    },
+                    enable: paletteFill.enable,
+                    opacity: paletteFill.opacity,
+                }
+                : undefined;
+            if (!paletteStroke) {
+                return [
+                    {
+                        fill: fillPart,
+                    },
+                ];
+            }
+            return [
+                {
+                    fill: fillPart,
+                    stroke: {
+                        color: {
+                            value: paletteStroke.value,
+                        },
+                        opacity: paletteStroke.opacity,
+                        width: paletteStroke.width || defaultPaintStrokeWidth,
+                    },
+                },
+            ];
+        }), palettePaint = palettePaintVariants.length > defaultPaintVariantsLength
+            ? palettePaintVariants
+            : (palettePaintVariants[firstPaintVariantIndex] ?? defaultPalettePaintVariant);
+        this.load({
+            paint: palettePaint,
+            blend: {
+                enable: true,
+                mode: paletteData.blendMode,
+            },
+        });
+    };
 }

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

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

package/esm/Utils/CanvasUtils.js

@@ -88,12 +88,12 @@ export function drawShape(drawer, data) {
     if (particle.shapeClose) {
         context.closePath();
     }
-    if (stroke) {
-        context.stroke();
-    }
     if (fill) {
         context.fill();
     }
+    if (stroke) {
+        context.stroke();
+    }
 }
 export function drawShapeAfterDraw(drawer, data) {
     if (!drawer?.afterDraw) {

package/esm/Utils/Utils.js

@@ -326,6 +326,19 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
     if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
         return;
     }
+    switch (data.status) {
+        case AnimationStatus.increasing:
+            data.value += velocity;
+            break;
+        case AnimationStatus.decreasing:
+            data.value -= velocity;
+            break;
+        default:
+            break;
+    }
+    if (data.velocity && decay !== identity) {
+        data.velocity *= decay;
+    }
     switch (data.status) {
         case AnimationStatus.increasing:
             if (data.value >= maxValue) {
@@ -338,9 +351,6 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
                 data.loops ??= minLoops;
                 data.loops++;
             }
-            else {
-                data.value += velocity;
-            }
             break;
         case AnimationStatus.decreasing:
             if (data.value <= minValue) {
@@ -353,18 +363,14 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
                 data.loops ??= minLoops;
                 data.loops++;
             }
-            else {
-                data.value -= velocity;
-            }
             break;
         default:
             break;
     }
-    if (data.velocity && decay !== identity) {
-        data.velocity *= decay;
-    }
     checkDestroy(particle, destroyType, data.value, minValue, maxValue);
-    data.value = clamp(data.value, minValue, maxValue);
+    if (!particle.destroyed) {
+        data.value = clamp(data.value, minValue, maxValue);
+    }
 }
 export function cloneStyle(style) {
     const clonedStyle = safeDocument().createElement("div").style;

package/esm/exports.js

@@ -28,6 +28,7 @@ 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/Paint.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-beta.1",
+  "version": "4.0.0-beta.11",
   "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": {
@@ -96,8 +96,7 @@
       "browser": "./browser/index.js",
       "import": "./esm/index.js",
       "require": "./cjs/index.js",
-      "umd": "./umd/index.js",
-      "default": "./cjs/index.js"
+      "default": "./esm/index.js"
     },
     "./package.json": "./package.json"
   },

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 [31 Mar 2026 at 08:44]</title>
+        <title>@tsparticles/engine [8 Apr 2026 at 17:10]</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="