@tsparticles/all 3.0.0-beta.4 → 3.0.0

package/tsparticles.all.bundle.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.0.0-beta.4
+ * v3.0.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -1227,7 +1227,8 @@ function drawParticle(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   };
   context.beginPath();
   drawShape(drawData);
@@ -1252,7 +1253,8 @@ function drawEffect(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.effect) {
     return;
@@ -1267,7 +1269,10 @@ function drawEffect(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawShape(data) {
@@ -1277,7 +1282,8 @@ function drawShape(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.shape) {
     return;
@@ -1292,7 +1298,10 @@ function drawShape(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawShapeAfterDraw(data) {
@@ -1302,7 +1311,8 @@ function drawShapeAfterDraw(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.shape) {
     return;
@@ -1317,7 +1327,10 @@ function drawShapeAfterDraw(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawPlugin(context, plugin, delta) {
@@ -1554,7 +1567,7 @@ class Canvas {
       } else if (trailFill.image) {
         this._paintImage(trailFill.image, trailFill.opacity);
       }
-    } else {
+    } else if (options.clear) {
       this.draw(ctx => {
         clear(ctx, this.size);
       });
@@ -2401,11 +2414,7 @@ class Events {
       });
     }
     this.onHover.load(data.onHover);
-    if (isBoolean(data.resize)) {
-      this.resize.enable = data.resize;
-    } else {
-      this.resize.load(data.resize);
-    }
+    this.resize.load(data.resize);
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Options/Classes/Interactivity/Modes/Modes.js
@@ -3430,23 +3439,26 @@ class ParticlesOptions {
     if (!data) {
       return;
     }
-    this.bounce.load(data.bounce);
-    this.color.load(AnimatableColor.create(this.color, data.color));
-    this.effect.load(data.effect);
     if (data.groups !== undefined) {
-      for (const group in data.groups) {
+      for (const group of Object.keys(data.groups)) {
+        if (!Object.hasOwn(data.groups, group)) {
+          continue;
+        }
         const item = data.groups[group];
         if (item !== undefined) {
           this.groups[group] = deepExtend(this.groups[group] ?? {}, item);
         }
       }
     }
-    this.move.load(data.move);
-    this.number.load(data.number);
-    this.opacity.load(data.opacity);
     if (data.reduceDuplicates !== undefined) {
       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);
+    this.opacity.load(data.opacity);
     this.shape.load(data.shape);
     this.size.load(data.size);
     this.shadow.load(data.shadow);
@@ -3519,6 +3531,7 @@ class Options {
     this.autoPlay = true;
     this.background = new Background();
     this.backgroundMask = new BackgroundMask();
+    this.clear = true;
     this.defaultThemes = {};
     this.delay = 0;
     this.fullScreen = new FullScreen();
@@ -3546,6 +3559,12 @@ class Options {
     if (data.autoPlay !== undefined) {
       this.autoPlay = data.autoPlay;
     }
+    if (data.clear !== undefined) {
+      this.clear = data.clear;
+    }
+    if (data.name !== undefined) {
+      this.name = data.name;
+    }
     if (data.delay !== undefined) {
       this.delay = setRangeValue(data.delay);
     }
@@ -3871,7 +3890,9 @@ class Particle {
     this.bubble.inRange = false;
     this.slow.inRange = false;
     const container = this.container,
-      pathGenerator = this.pathGenerator;
+      pathGenerator = this.pathGenerator,
+      shapeDrawer = container.shapeDrawers.get(this.shape);
+    shapeDrawer && shapeDrawer.particleDestroy && shapeDrawer.particleDestroy(this);
     for (const [, plugin] of container.plugins) {
       plugin.particleDestroyed && plugin.particleDestroyed(this, override);
     }
@@ -5125,7 +5146,7 @@ class Engine {
     return res;
   }
   get version() {
-    return "3.0.0-beta.4";
+    return "3.0.0";
   }
   addConfig(config) {
     const name = config.name ?? "default";
@@ -5536,6 +5557,377 @@ if (!isSsr()) {
 
 
 
+;// CONCATENATED MODULE: ../pjs/dist/browser/marcbruederlin/Particles.js
+
+class Particles_Particles {
+  static init(options) {
+    const particles = new Particles_Particles(),
+      selector = options.selector;
+    if (!selector) {
+      throw new Error("No selector provided");
+    }
+    const el = document.querySelector(selector);
+    if (!el) {
+      throw new Error("No element found for selector");
+    }
+    tsParticles.load({
+      id: selector.replace(".", "").replace("!", ""),
+      element: el,
+      options: {
+        fullScreen: {
+          enable: false
+        },
+        particles: {
+          color: {
+            value: options.color ?? "!000000"
+          },
+          links: {
+            color: "random",
+            distance: options.minDistance ?? 120,
+            enable: options.connectParticles ?? false
+          },
+          move: {
+            enable: true,
+            speed: options.speed ?? 0.5
+          },
+          number: {
+            value: options.maxParticles ?? 100
+          },
+          size: {
+            value: {
+              min: 1,
+              max: options.sizeVariations ?? 3
+            }
+          }
+        },
+        responsive: options.responsive?.map(responsive => ({
+          maxWidth: responsive.breakpoint,
+          options: {
+            particles: {
+              color: {
+                value: responsive.options?.color
+              },
+              links: {
+                distance: responsive.options?.minDistance,
+                enable: responsive.options?.connectParticles
+              },
+              number: {
+                value: options.maxParticles
+              },
+              move: {
+                enable: true,
+                speed: responsive.options?.speed
+              },
+              size: {
+                value: responsive.options?.sizeVariations
+              }
+            }
+          }
+        }))
+      }
+    }).then(container => {
+      particles._container = container;
+    });
+    return particles;
+  }
+  destroy() {
+    const container = this._container;
+    container && container.destroy();
+  }
+  pauseAnimation() {
+    const container = this._container;
+    container && container.pause();
+  }
+  resumeAnimation() {
+    const container = this._container;
+    container && container.play();
+  }
+}
+;// CONCATENATED MODULE: ../pjs/dist/browser/VincentGarreau/particles.js
+
+const defaultPjsOptions = {
+  particles: {
+    number: {
+      value: 400,
+      density: {
+        enable: true,
+        value_area: 800
+      }
+    },
+    color: {
+      value: "#fff"
+    },
+    shape: {
+      type: "circle",
+      stroke: {
+        width: 0,
+        color: "#ff0000"
+      },
+      polygon: {
+        nb_sides: 5
+      },
+      image: {
+        src: "",
+        width: 100,
+        height: 100
+      }
+    },
+    opacity: {
+      value: 1,
+      random: false,
+      anim: {
+        enable: false,
+        speed: 2,
+        opacity_min: 0,
+        sync: false
+      }
+    },
+    size: {
+      value: 20,
+      random: false,
+      anim: {
+        enable: false,
+        speed: 20,
+        size_min: 0,
+        sync: false
+      }
+    },
+    line_linked: {
+      enable: true,
+      distance: 100,
+      color: "#fff",
+      opacity: 1,
+      width: 1
+    },
+    move: {
+      enable: true,
+      speed: 2,
+      direction: "none",
+      random: false,
+      straight: false,
+      out_mode: "out",
+      bounce: false,
+      attract: {
+        enable: false,
+        rotateX: 3000,
+        rotateY: 3000
+      }
+    }
+  },
+  interactivity: {
+    detect_on: "canvas",
+    events: {
+      onhover: {
+        enable: true,
+        mode: "grab"
+      },
+      onclick: {
+        enable: true,
+        mode: "push"
+      },
+      resize: true
+    },
+    modes: {
+      grab: {
+        distance: 100,
+        line_linked: {
+          opacity: 1
+        }
+      },
+      bubble: {
+        distance: 200,
+        size: 80,
+        duration: 0.4,
+        opacity: 1,
+        speed: 3
+      },
+      repulse: {
+        distance: 200,
+        duration: 0.4
+      },
+      push: {
+        particles_nb: 4
+      },
+      remove: {
+        particles_nb: 2
+      }
+    }
+  },
+  retina_detect: false
+};
+const initParticlesJS = engine => {
+  const particlesJS = (tagId, options) => {
+    const fixedOptions = deepExtend(defaultPjsOptions, options);
+    return engine.load({
+      id: tagId,
+      options: {
+        fullScreen: {
+          enable: false
+        },
+        detectRetina: fixedOptions.retina_detect,
+        smooth: true,
+        interactivity: {
+          detectsOn: fixedOptions.interactivity.detect_on,
+          events: {
+            onHover: {
+              enable: fixedOptions.interactivity.events.onhover.enable,
+              mode: fixedOptions.interactivity.events.onhover.mode
+            },
+            onClick: {
+              enable: fixedOptions.interactivity.events.onclick.enable,
+              mode: fixedOptions.interactivity.events.onclick.mode
+            },
+            resize: {
+              enable: fixedOptions.interactivity.events.resize
+            }
+          },
+          modes: {
+            grab: {
+              distance: fixedOptions.interactivity.modes.grab.distance,
+              links: {
+                opacity: fixedOptions.interactivity.modes.grab.line_linked.opacity
+              }
+            },
+            bubble: {
+              distance: fixedOptions.interactivity.modes.bubble.distance,
+              size: fixedOptions.interactivity.modes.bubble.size,
+              duration: fixedOptions.interactivity.modes.bubble.duration,
+              opacity: fixedOptions.interactivity.modes.bubble.opacity,
+              speed: fixedOptions.interactivity.modes.bubble.speed
+            },
+            repulse: {
+              distance: fixedOptions.interactivity.modes.repulse.distance,
+              duration: fixedOptions.interactivity.modes.repulse.duration
+            },
+            push: {
+              quantity: fixedOptions.interactivity.modes.push.particles_nb
+            },
+            remove: {
+              quantity: fixedOptions.interactivity.modes.remove.particles_nb
+            }
+          }
+        },
+        particles: {
+          collisions: {
+            enable: fixedOptions.particles.move.bounce
+          },
+          number: {
+            value: fixedOptions.particles.number.value,
+            density: {
+              enable: fixedOptions.particles.number.density.enable,
+              width: fixedOptions.particles.number.density.value_area
+            }
+          },
+          color: {
+            value: fixedOptions.particles.color.value
+          },
+          stroke: {
+            width: fixedOptions.particles.shape.stroke.width,
+            color: {
+              value: fixedOptions.particles.shape.stroke.color
+            }
+          },
+          shape: {
+            type: fixedOptions.particles.shape.type,
+            options: {
+              polygon: {
+                sides: fixedOptions.particles.shape.polygon.nb_sides
+              },
+              image: {
+                src: fixedOptions.particles.shape.image.src,
+                width: fixedOptions.particles.shape.image.width,
+                height: fixedOptions.particles.shape.image.height
+              }
+            }
+          },
+          opacity: {
+            value: fixedOptions.particles.opacity.random ? {
+              min: fixedOptions.particles.opacity.anim.enable ? fixedOptions.particles.opacity.anim.opacity_min : 0,
+              max: fixedOptions.particles.opacity.value
+            } : fixedOptions.particles.opacity.value,
+            animation: {
+              enable: fixedOptions.particles.opacity.anim.enable,
+              speed: fixedOptions.particles.opacity.anim.speed,
+              sync: fixedOptions.particles.opacity.anim.sync
+            }
+          },
+          size: {
+            value: fixedOptions.particles.size.random ? {
+              min: fixedOptions.particles.size.anim.enable ? fixedOptions.particles.size.anim.size_min : 0,
+              max: fixedOptions.particles.size.value
+            } : fixedOptions.particles.size.value,
+            animation: {
+              enable: fixedOptions.particles.size.anim.enable,
+              speed: fixedOptions.particles.size.anim.speed,
+              sync: fixedOptions.particles.size.anim.sync
+            }
+          },
+          links: {
+            enable: fixedOptions.particles.line_linked.enable,
+            distance: fixedOptions.particles.line_linked.distance,
+            color: fixedOptions.particles.line_linked.color,
+            opacity: fixedOptions.particles.line_linked.opacity,
+            width: fixedOptions.particles.line_linked.width
+          },
+          move: {
+            enable: fixedOptions.particles.move.enable,
+            speed: fixedOptions.particles.move.speed / 3,
+            direction: fixedOptions.particles.move.direction,
+            random: fixedOptions.particles.move.random,
+            straight: fixedOptions.particles.move.straight,
+            outModes: fixedOptions.particles.move.out_mode,
+            attract: {
+              enable: fixedOptions.particles.move.attract.enable,
+              rotate: {
+                x: fixedOptions.particles.move.attract.rotateX,
+                y: fixedOptions.particles.move.attract.rotateY
+              }
+            }
+          }
+        }
+      }
+    });
+  };
+  particlesJS.load = (tagId, pathConfigJson, callback) => {
+    engine.load({
+      id: tagId,
+      url: pathConfigJson
+    }).then(container => {
+      if (container) {
+        callback(container);
+      }
+    }).catch(() => {
+      callback(undefined);
+    });
+  };
+  particlesJS.setOnClickHandler = callback => {
+    engine.setOnClickHandler(callback);
+  };
+  const pJSDom = engine.dom();
+  return {
+    particlesJS,
+    pJSDom
+  };
+};
+
+;// CONCATENATED MODULE: ../pjs/dist/browser/index.js
+
+
+const initPjs = engine => {
+  const {
+    particlesJS,
+    pJSDom
+  } = initParticlesJS(engine);
+  window.particlesJS = particlesJS;
+  window.pJSDom = pJSDom;
+  window.Particles = Particles_Particles;
+  return {
+    particlesJS,
+    pJSDom,
+    Particles: Particles_Particles
+  };
+};
+
 ;// CONCATENATED MODULE: ../../shapes/arrow/dist/browser/ArrowDrawer.js
 
 class ArrowDrawer {
@@ -9454,164 +9846,30 @@ class RollUpdater {
   init(particle) {
     initParticle(particle);
   }
-  isEnabled(particle) {
-    const roll = particle.options.roll;
-    return !particle.destroyed && !particle.spawning && !!roll?.enable;
-  }
-  loadOptions(options, ...sources) {
-    if (!options.roll) {
-      options.roll = new Roll();
-    }
-    for (const source of sources) {
-      options.roll.load(source?.roll);
-    }
-  }
-  update(particle, delta) {
-    if (!this.isEnabled(particle)) {
-      return;
-    }
-    updateRoll(particle, delta);
-  }
-}
-;// CONCATENATED MODULE: ../../updaters/roll/dist/browser/index.js
-
-async function loadRollUpdater(engine, refresh = true) {
-  await engine.addParticleUpdater("roll", () => new RollUpdater(), refresh);
-}
-;// CONCATENATED MODULE: ../pjs/dist/browser/marcbruederlin/Particles.js
-
-class Particles_Particles {
-  static init(options) {
-    const particles = new Particles_Particles(),
-      selector = options.selector;
-    if (!selector) {
-      throw new Error("No selector provided");
-    }
-    const el = document.querySelector(selector);
-    if (!el) {
-      throw new Error("No element found for selector");
-    }
-    tsParticles.load({
-      id: selector.replace(".", "").replace("!", ""),
-      element: el,
-      options: {
-        fullScreen: {
-          enable: false
-        },
-        particles: {
-          color: {
-            value: options.color ?? "!000000"
-          },
-          links: {
-            color: "random",
-            distance: options.minDistance ?? 120,
-            enable: options.connectParticles ?? false
-          },
-          move: {
-            enable: true,
-            speed: options.speed ?? 0.5
-          },
-          number: {
-            value: options.maxParticles ?? 100
-          },
-          size: {
-            value: {
-              min: 1,
-              max: options.sizeVariations ?? 3
-            }
-          }
-        },
-        responsive: options.responsive?.map(responsive => ({
-          maxWidth: responsive.breakpoint,
-          options: {
-            particles: {
-              color: {
-                value: responsive.options?.color
-              },
-              links: {
-                distance: responsive.options?.minDistance,
-                enable: responsive.options?.connectParticles
-              },
-              number: {
-                value: options.maxParticles
-              },
-              move: {
-                enable: true,
-                speed: responsive.options?.speed
-              },
-              size: {
-                value: responsive.options?.sizeVariations
-              }
-            }
-          }
-        }))
-      }
-    }).then(container => {
-      particles._container = container;
-    });
-    return particles;
-  }
-  destroy() {
-    const container = this._container;
-    container && container.destroy();
+  isEnabled(particle) {
+    const roll = particle.options.roll;
+    return !particle.destroyed && !particle.spawning && !!roll?.enable;
   }
-  pauseAnimation() {
-    const container = this._container;
-    container && container.pause();
+  loadOptions(options, ...sources) {
+    if (!options.roll) {
+      options.roll = new Roll();
+    }
+    for (const source of sources) {
+      options.roll.load(source?.roll);
+    }
   }
-  resumeAnimation() {
-    const container = this._container;
-    container && container.play();
+  update(particle, delta) {
+    if (!this.isEnabled(particle)) {
+      return;
+    }
+    updateRoll(particle, delta);
   }
 }
-;// CONCATENATED MODULE: ../pjs/dist/browser/VincentGarreau/particles.js
-const initParticlesJS = engine => {
-  const particlesJS = (tagId, options) => {
-    return engine.load({
-      id: tagId,
-      options
-    });
-  };
-  particlesJS.load = (tagId, pathConfigJson, callback) => {
-    engine.load({
-      id: tagId,
-      url: pathConfigJson
-    }).then(container => {
-      if (container) {
-        callback(container);
-      }
-    }).catch(() => {
-      callback(undefined);
-    });
-  };
-  particlesJS.setOnClickHandler = callback => {
-    engine.setOnClickHandler(callback);
-  };
-  const pJSDom = engine.dom();
-  return {
-    particlesJS,
-    pJSDom
-  };
-};
-
-;// CONCATENATED MODULE: ../pjs/dist/browser/index.js
-
-
-const initPjs = engine => {
-  const {
-    particlesJS,
-    pJSDom
-  } = initParticlesJS(engine);
-  window.particlesJS = particlesJS;
-  window.pJSDom = pJSDom;
-  window.Particles = Particles_Particles;
-  return {
-    particlesJS,
-    pJSDom,
-    Particles: Particles_Particles
-  };
-};
+;// CONCATENATED MODULE: ../../updaters/roll/dist/browser/index.js
 
+async function loadRollUpdater(engine, refresh = true) {
+  await engine.addParticleUpdater("roll", () => new RollUpdater(), refresh);
+}
 ;// CONCATENATED MODULE: ../../move/base/dist/browser/Utils.js
 
 function applyDistance(particle) {
@@ -10312,7 +10570,7 @@ class OutOutMode {
               }
             case "normal":
               {
-                const wrap = particle.options.move.warp,
+                const warp = particle.options.move.warp,
                   canvasSize = container.canvas.size,
                   newPos = {
                     bottom: canvasSize.height + particle.getRadius() + particle.offset.y,
@@ -10325,27 +10583,27 @@ class OutOutMode {
                 if (direction === "right" && nextBounds.left > canvasSize.width + particle.offset.x) {
                   particle.position.x = newPos.left;
                   particle.initialPosition.x = particle.position.x;
-                  if (!wrap) {
+                  if (!warp) {
                     particle.position.y = getRandom() * canvasSize.height;
                     particle.initialPosition.y = particle.position.y;
                   }
                 } else if (direction === "left" && nextBounds.right < -particle.offset.x) {
                   particle.position.x = newPos.right;
                   particle.initialPosition.x = particle.position.x;
-                  if (!wrap) {
+                  if (!warp) {
                     particle.position.y = getRandom() * canvasSize.height;
                     particle.initialPosition.y = particle.position.y;
                   }
                 }
                 if (direction === "bottom" && nextBounds.top > canvasSize.height + particle.offset.y) {
-                  if (!wrap) {
+                  if (!warp) {
                     particle.position.x = getRandom() * canvasSize.width;
                     particle.initialPosition.x = particle.position.x;
                   }
                   particle.position.y = newPos.top;
                   particle.initialPosition.y = particle.position.y;
                 } else if (direction === "top" && nextBounds.bottom < -particle.offset.y) {
-                  if (!wrap) {
+                  if (!warp) {
                     particle.position.x = getRandom() * canvasSize.width;
                     particle.initialPosition.x = particle.position.x;
                   }
@@ -10513,6 +10771,104 @@ async function loadEasingQuadPlugin() {
   addEasing("ease-out-quad", value => 1 - (1 - value) ** 2);
   addEasing("ease-in-out-quad", value => value < 0.5 ? 2 * value ** 2 : 1 - (-2 * value + 2) ** 2 / 2);
 }
+;// CONCATENATED MODULE: ../../shapes/emoji/dist/browser/EmojiDrawer.js
+
+const validTypes = ["emoji"];
+const defaultFont = '"Twemoji Mozilla", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color"';
+class EmojiDrawer {
+  constructor() {
+    this._emojiShapeDict = new Map();
+  }
+  destroy() {
+    for (const [, emojiData] of this._emojiShapeDict) {
+      emojiData instanceof ImageBitmap && emojiData?.close();
+    }
+  }
+  draw(data) {
+    const {
+        context,
+        particle,
+        radius,
+        opacity
+      } = data,
+      emojiData = particle.emojiData;
+    if (!emojiData) {
+      return;
+    }
+    context.globalAlpha = opacity;
+    context.drawImage(emojiData, -radius, -radius, radius * 2, radius * 2);
+    context.globalAlpha = 1;
+  }
+  async init(container) {
+    const options = container.actualOptions;
+    if (validTypes.find(t => isInArray(t, options.particles.shape.type))) {
+      const promises = [loadFont(defaultFont)],
+        shapeOptions = validTypes.map(t => options.particles.shape.options[t]).find(t => !!t);
+      if (shapeOptions) {
+        executeOnSingleOrMultiple(shapeOptions, shape => {
+          shape.font && promises.push(loadFont(shape.font));
+        });
+      }
+      await Promise.all(promises);
+    }
+  }
+  particleDestroy(particle) {
+    delete particle.emojiData;
+  }
+  particleInit(container, particle) {
+    if (!particle.emojiData) {
+      const shapeData = particle.shapeData;
+      if (!shapeData?.value) {
+        return;
+      }
+      const emoji = itemFromSingleOrMultiple(shapeData.value, particle.randomIndexData),
+        font = shapeData.font ?? defaultFont;
+      if (!emoji) {
+        return;
+      }
+      const key = `${emoji}_${font}`,
+        existingData = this._emojiShapeDict.get(key);
+      if (existingData) {
+        particle.emojiData = existingData;
+        return;
+      }
+      const canvasSize = getRangeMax(particle.size.value) * 2;
+      let emojiData;
+      if (typeof OffscreenCanvas !== "undefined") {
+        const canvas = new OffscreenCanvas(canvasSize, canvasSize),
+          context = canvas.getContext("2d");
+        if (!context) {
+          return;
+        }
+        context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
+        context.textBaseline = "middle";
+        context.textAlign = "center";
+        context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
+        emojiData = canvas.transferToImageBitmap();
+      } else {
+        const canvas = document.createElement("canvas");
+        canvas.width = canvasSize;
+        canvas.height = canvasSize;
+        const context = canvas.getContext("2d");
+        if (!context) {
+          return;
+        }
+        context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
+        context.textBaseline = "middle";
+        context.textAlign = "center";
+        context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
+        emojiData = canvas;
+      }
+      this._emojiShapeDict.set(key, emojiData);
+      particle.emojiData = emojiData;
+    }
+  }
+}
+;// CONCATENATED MODULE: ../../shapes/emoji/dist/browser/index.js
+
+async function loadEmojiShape(engine, refresh = true) {
+  await engine.addShape(validTypes, new EmojiDrawer(), refresh);
+}
 ;// CONCATENATED MODULE: ../../interactions/external/attract/dist/browser/Options/Classes/Attract.js
 class Attract {
   constructor() {
@@ -11413,18 +11769,6 @@ class Grab {
     this.distance = 100;
     this.links = new GrabLinks();
   }
-  get lineLinked() {
-    return this.links;
-  }
-  set lineLinked(value) {
-    this.links = value;
-  }
-  get line_linked() {
-    return this.links;
-  }
-  set line_linked(value) {
-    this.links = value;
-  }
   load(data) {
     if (!data) {
       return;
@@ -11432,7 +11776,7 @@ class Grab {
     if (data.distance !== undefined) {
       this.distance = data.distance;
     }
-    this.links.load(data.links ?? data.lineLinked ?? data.line_linked);
+    this.links.load(data.links);
   }
 }
 ;// CONCATENATED MODULE: ../../interactions/external/grab/dist/browser/Utils.js
@@ -11571,12 +11915,6 @@ class Push {
     this.groups = [];
     this.quantity = 4;
   }
-  get particles_nb() {
-    return this.quantity;
-  }
-  set particles_nb(value) {
-    this.quantity = setRangeValue(value);
-  }
   load(data) {
     if (!data) {
       return;
@@ -11590,7 +11928,7 @@ class Push {
     if (!this.groups.length) {
       this.default = true;
     }
-    const quantity = data.quantity ?? data.particles_nb;
+    const quantity = data.quantity;
     if (quantity !== undefined) {
       this.quantity = setRangeValue(quantity);
     }
@@ -11651,17 +11989,11 @@ class Remove {
   constructor() {
     this.quantity = 2;
   }
-  get particles_nb() {
-    return this.quantity;
-  }
-  set particles_nb(value) {
-    this.quantity = setRangeValue(value);
-  }
   load(data) {
     if (!data) {
       return;
     }
-    const quantity = data.quantity ?? data.particles_nb;
+    const quantity = data.quantity;
     if (quantity !== undefined) {
       this.quantity = setRangeValue(quantity);
     }
@@ -12724,8 +13056,9 @@ class ImageDrawer {
         pos = {
           x: -radius,
           y: -radius
-        };
-      context.drawImage(element, pos.x, pos.y, radius * 2, radius * 2 / ratio);
+        },
+        diameter = radius * 2;
+      context.drawImage(element, pos.x, pos.y, diameter, diameter / ratio);
     }
     context.globalAlpha = 1;
   }
@@ -13562,7 +13895,7 @@ class Linker extends ParticlesInteractorBase {
       options.links = new Links();
     }
     for (const source of sources) {
-      options.links.load(source?.links ?? source?.lineLinked ?? source?.line_linked);
+      options.links.load(source?.links);
     }
   }
   reset() {}
@@ -14315,9 +14648,62 @@ class StrokeColorUpdater {
 async function loadStrokeColorUpdater(engine, refresh = true) {
   await engine.addParticleUpdater("strokeColor", container => new StrokeColorUpdater(container), refresh);
 }
+;// CONCATENATED MODULE: ../slim/dist/browser/index.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+async function loadSlim(engine, refresh = true) {
+  await loadParallaxMover(engine, false);
+  await loadExternalAttractInteraction(engine, false);
+  await loadExternalBounceInteraction(engine, false);
+  await loadExternalBubbleInteraction(engine, false);
+  await loadExternalConnectInteraction(engine, false);
+  await loadExternalGrabInteraction(engine, false);
+  await loadExternalPauseInteraction(engine, false);
+  await loadExternalPushInteraction(engine, false);
+  await loadExternalRemoveInteraction(engine, false);
+  await loadExternalRepulseInteraction(engine, false);
+  await loadExternalSlowInteraction(engine, false);
+  await loadParticlesAttractInteraction(engine, false);
+  await loadParticlesCollisionsInteraction(engine, false);
+  await loadParticlesLinksInteraction(engine, false);
+  await loadEasingQuadPlugin();
+  await loadEmojiShape(engine, false);
+  await loadImageShape(engine, false);
+  await loadLineShape(engine, false);
+  await loadPolygonShape(engine, false);
+  await loadSquareShape(engine, false);
+  await loadStarShape(engine, false);
+  await loadLifeUpdater(engine, false);
+  await loadRotateUpdater(engine, false);
+  await loadStrokeColorUpdater(engine, false);
+  await loadBasic(engine, refresh);
+}
 ;// CONCATENATED MODULE: ../../shapes/text/dist/browser/TextDrawer.js
 
-const validTypes = ["text", "character", "char", "multiline-text"];
+const TextDrawer_validTypes = ["text", "character", "char", "multiline-text"];
 class TextDrawer {
   constructor() {
     this._drawLine = (context, line, radius, opacity, index, fill) => {
@@ -14325,11 +14711,12 @@ class TextDrawer {
         pos = {
           x: -offsetX,
           y: radius / 2
-        };
+        },
+        diameter = radius * 2;
       if (fill) {
-        context.fillText(line, pos.x, pos.y + radius * 2 * index);
+        context.fillText(line, pos.x, pos.y + diameter * index);
       } else {
-        context.strokeText(line, pos.x, pos.y + radius * 2 * index);
+        context.strokeText(line, pos.x, pos.y + diameter * index);
       }
     };
   }
@@ -14370,8 +14757,8 @@ class TextDrawer {
   }
   async init(container) {
     const options = container.actualOptions;
-    if (validTypes.find(t => isInArray(t, options.particles.shape.type))) {
-      const shapeOptions = validTypes.map(t => options.particles.shape.options[t]).find(t => !!t),
+    if (TextDrawer_validTypes.find(t => isInArray(t, options.particles.shape.type))) {
+      const shapeOptions = TextDrawer_validTypes.map(t => options.particles.shape.options[t]).find(t => !!t),
         promises = [];
       executeOnSingleOrMultiple(shapeOptions, shape => {
         promises.push(loadFont(shape.font, shape.weight));
@@ -14380,7 +14767,7 @@ class TextDrawer {
     }
   }
   particleInit(container, particle) {
-    if (!particle.shape || !validTypes.includes(particle.shape)) {
+    if (!particle.shape || !TextDrawer_validTypes.includes(particle.shape)) {
       return;
     }
     const character = particle.shapeData;
@@ -14397,62 +14784,7 @@ class TextDrawer {
 ;// CONCATENATED MODULE: ../../shapes/text/dist/browser/index.js
 
 async function loadTextShape(engine, refresh = true) {
-  await engine.addShape(validTypes, new TextDrawer(), refresh);
-}
-;// CONCATENATED MODULE: ../slim/dist/browser/index.js
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-async function loadSlim(engine, refresh = true) {
-  initPjs(engine);
-  await loadParallaxMover(engine, false);
-  await loadExternalAttractInteraction(engine, false);
-  await loadExternalBounceInteraction(engine, false);
-  await loadExternalBubbleInteraction(engine, false);
-  await loadExternalConnectInteraction(engine, false);
-  await loadExternalGrabInteraction(engine, false);
-  await loadExternalPauseInteraction(engine, false);
-  await loadExternalPushInteraction(engine, false);
-  await loadExternalRemoveInteraction(engine, false);
-  await loadExternalRepulseInteraction(engine, false);
-  await loadExternalSlowInteraction(engine, false);
-  await loadParticlesAttractInteraction(engine, false);
-  await loadParticlesCollisionsInteraction(engine, false);
-  await loadParticlesLinksInteraction(engine, false);
-  await loadEasingQuadPlugin();
-  await loadImageShape(engine, false);
-  await loadLineShape(engine, false);
-  await loadPolygonShape(engine, false);
-  await loadSquareShape(engine, false);
-  await loadStarShape(engine, false);
-  await loadTextShape(engine, false);
-  await loadLifeUpdater(engine, false);
-  await loadRotateUpdater(engine, false);
-  await loadStrokeColorUpdater(engine, false);
-  await loadBasic(engine, refresh);
+  await engine.addShape(TextDrawer_validTypes, new TextDrawer(), refresh);
 }
 ;// CONCATENATED MODULE: ../../updaters/tilt/dist/browser/Options/Classes/TiltAnimation.js
 
@@ -14840,12 +15172,14 @@ async function loadWobbleUpdater(engine, refresh = true) {
 
 
 
+
 async function loadFull(engine, refresh = true) {
   await loadDestroyUpdater(engine, false);
   await loadRollUpdater(engine, false);
   await loadTiltUpdater(engine, false);
   await loadTwinkleUpdater(engine, false);
   await loadWobbleUpdater(engine, false);
+  await loadTextShape(engine, false);
   await loadExternalTrailInteraction(engine, false);
   await loadAbsorbersPlugin(engine, false);
   await loadEmittersPlugin(engine, false);
@@ -15270,20 +15604,23 @@ async function loadGradientUpdater(engine, refresh = true) {
 class HeartDrawer_HeartDrawer {
   draw(data) {
     const {
-      context,
-      radius
-    } = data;
-    const x = -radius,
+        context,
+        radius
+      } = data,
+      diameter = radius * 2,
+      halfRadius = radius * 0.5,
+      radiusAndHalf = radius + halfRadius,
+      x = -radius,
       y = -radius;
     context.moveTo(x, y + radius / 2);
-    context.quadraticCurveTo(x, y, x + radius / 2, y);
-    context.quadraticCurveTo(x + radius, y, x + radius, y + radius / 2);
-    context.quadraticCurveTo(x + radius, y, x + radius * 3 / 2, y);
-    context.quadraticCurveTo(x + radius * 2, y, x + radius * 2, y + radius / 2);
-    context.quadraticCurveTo(x + radius * 2, y + radius, x + radius * 3 / 2, y + radius * 3 / 2);
-    context.lineTo(x + radius, y + radius * 2);
-    context.lineTo(x + radius / 2, y + radius * 3 / 2);
-    context.quadraticCurveTo(x, y + radius, x, y + radius / 2);
+    context.quadraticCurveTo(x, y, x + halfRadius, y);
+    context.quadraticCurveTo(x + radius, y, x + radius, y + halfRadius);
+    context.quadraticCurveTo(x + radius, y, x + radiusAndHalf, y);
+    context.quadraticCurveTo(x + diameter, y, x + diameter, y + halfRadius);
+    context.quadraticCurveTo(x + diameter, y + radius, x + radiusAndHalf, y + radiusAndHalf);
+    context.lineTo(x + radius, y + diameter);
+    context.lineTo(x + halfRadius, y + radiusAndHalf);
+    context.quadraticCurveTo(x, y + radius, x, y + halfRadius);
   }
 }
 ;// CONCATENATED MODULE: ../../shapes/heart/dist/browser/index.js
@@ -19996,6 +20333,7 @@ class TrailDrawer {
         radius,
         particle
       } = data,
+      diameter = radius * 2,
       pxRatio = particle.container.retina.pixelRatio,
       currentPos = particle.getPosition();
     if (!particle.trail || !particle.trailLength) {
@@ -20012,34 +20350,52 @@ class TrailDrawer {
     if (particle.trail.length < 2) {
       return;
     }
-    if (particle.trail.length > pathLength) {
+    while (particle.trail.length > pathLength) {
       particle.trail.shift();
     }
     const trailLength = Math.min(particle.trail.length, pathLength),
       offsetPos = {
         x: currentPos.x,
         y: currentPos.y
+      },
+      canvasSize = {
+        width: particle.container.canvas.size.width + diameter,
+        height: particle.container.canvas.size.height + diameter
       };
     let lastPos = particle.trail[trailLength - 1].position;
+    context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
     for (let i = trailLength; i > 0; i--) {
       const step = particle.trail[i - 1],
         position = step.position;
-      if (getDistance(lastPos, position) > radius * 2) {
-        continue;
-      }
       context.beginPath();
       context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
-      context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
-      const width = Math.max(i / trailLength * radius * 2, pxRatio, particle.trailMinWidth ?? -1);
+      const warp = {
+        x: (lastPos.x + canvasSize.width) % canvasSize.width,
+        y: (lastPos.y + canvasSize.height) % canvasSize.height
+      };
+      if (Math.abs(lastPos.x - position.x) > canvasSize.width / 2 || Math.abs(lastPos.y - position.y) > canvasSize.height / 2) {
+        lastPos = position;
+        continue;
+      }
+      context.lineTo((Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ? warp.x : position.x) - offsetPos.x, (Math.abs(lastPos.y - position.y) > canvasSize.height / 2 ? warp.y : position.y) - offsetPos.y);
+      const width = Math.max(i / trailLength * diameter, pxRatio, particle.trailMinWidth ?? -1);
+      const oldAlpha = context.globalAlpha;
+      context.globalAlpha = particle.trailFade ? i / trailLength : 1;
       context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
       context.strokeStyle = step.color;
       context.stroke();
+      context.globalAlpha = oldAlpha;
       lastPos = position;
     }
+    const {
+      transformData
+    } = data;
+    context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, currentPos.x, currentPos.y);
   }
   particleInit(container, particle) {
     particle.trail = [];
     const effectData = particle.effectData;
+    particle.trailFade = effectData?.fade ?? true;
     particle.trailLength = getRangeValue(effectData?.length ?? 10) * container.retina.pixelRatio;
     particle.trailMaxWidth = effectData?.maxWidth ? getRangeValue(effectData.maxWidth) * container.retina.pixelRatio : undefined;
     particle.trailMinWidth = effectData?.minWidth ? getRangeValue(effectData.minWidth) * container.retina.pixelRatio : undefined;
@@ -20091,9 +20447,11 @@ async function loadTrailEffect(engine, refresh = true) {
 
 
 
+
 
 
 async function loadAll(engine, refresh = true) {
+  initPjs(engine);
   await loadFull(engine, false);
   await loadHsvColorPlugin();
   await loadEasingBackPlugin();