@tsparticles/confetti 4.0.0-alpha.8 → 4.0.0-beta.0

package/9611.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_confetti=this.webpackChunk_tsparticles_confetti||[]).push([[9611],{9611(e,t,a){a.d(t,{WobbleUpdater:()=>o});var n=a(1989);class s{angle;move;constructor(){this.angle=50,this.move=10}load(e){(0,n.kZJ)(e)||(void 0!==e.angle&&(this.angle=(0,n.DT4)(e.angle)),void 0!==e.move&&(this.move=(0,n.DT4)(e.move)))}}class i{distance;enable;speed;constructor(){this.distance=5,this.enable=!1,this.speed=new s}load(e){if(!(0,n.kZJ)(e)&&(void 0!==e.distance&&(this.distance=(0,n.DT4)(e.distance)),void 0!==e.enable&&(this.enable=e.enable),void 0!==e.speed))if((0,n.EtT)(e.speed))this.speed.load({angle:e.speed});else{let t=e.speed;"min"in t?this.speed.load({angle:t}):this.speed.load(e.speed)}}}class o{container;constructor(e){this.container=e}init(e){let t=e.options.wobble;t?.enable?e.wobble={angle:(0,n.G0i)()*n.R1e,angleSpeed:(0,n.VGA)(t.speed.angle)/360,moveSpeed:(0,n.VGA)(t.speed.move)/10}:e.wobble={angle:0,angleSpeed:0,moveSpeed:0},e.retina.wobbleDistance=(0,n.VGA)(t?.distance??0)*this.container.retina.pixelRatio}isEnabled(e){return!e.destroyed&&!e.spawning&&!!e.options.wobble?.enable}loadOptions(e,...t){for(let a of(e.wobble??=new i,t))e.wobble.load(a?.wobble)}update(e,t){this.isEnabled(e)&&function(e,t){let{wobble:a}=e.options,{container:s,wobble:i}=e;if(!a?.enable||!i)return;let o=s.retina.reduceFactor,l=i.angleSpeed*t.factor*o,d=i.moveSpeed*t.factor*o*(e.retina.wobbleDistance??0)/(n.XuV/60),b=n.R1e,{position:c}=e;i.angle+=l,i.angle>b&&(i.angle-=b),c.x+=d*Math.cos(i.angle),c.y+=d*Math.abs(Math.sin(i.angle))}(e,t)}}}}]);

package/9929.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_confetti=this.webpackChunk_tsparticles_confetti||[]).push([[9929],{9929(e,t,a){a.d(t,{MotionPluginInstance:()=>r});var n=a(1989);class r{_container;constructor(e){this._container=e}async init(){let e=this._container,t=e.actualOptions.motion;if(!(t&&(t.disable||t.reduce.value))){e.retina.reduceFactor=1;return}let a=(0,n.lVH)("(prefers-reduced-motion: reduce)");if(!a){e.retina.reduceFactor=1;return}this._handleMotionChange(a);let r=()=>{(async()=>{this._handleMotionChange(a);try{await e.refresh()}catch{}})()};a.addEventListener("change",r),await Promise.resolve()}_handleMotionChange=e=>{let t=this._container,a=t.actualOptions.motion;a&&(e.matches?a.disable?t.retina.reduceFactor=0:t.retina.reduceFactor=a.reduce.value?1/a.reduce.factor:1:t.retina.reduceFactor=1)}}}}]);

package/README.md

@@ -9,28 +9,67 @@ beautiful confetti effects with ease.
 
 **Included Packages**
 
+- [@tsparticles/basic (and all its dependencies)](https://github.com/tsparticles/tsparticles/tree/main/bundles/basic)
 - [@tsparticles/engine](https://github.com/tsparticles/tsparticles/tree/main/engine)
-- [@tsparticles/move-base](https://github.com/tsparticles/tsparticles/tree/main/move/base)
 - [@tsparticles/plugin-emitters](https://github.com/tsparticles/tsparticles/tree/main/plugins/emitters)
 - [@tsparticles/plugin-motion](https://github.com/tsparticles/tsparticles/tree/main/plugins/motion)
 - [@tsparticles/shape-cards](https://github.com/tsparticles/tsparticles/tree/main/shapes/cards)
-- [@tsparticles/shape-circle](https://github.com/tsparticles/tsparticles/tree/main/shapes/circle)
 - [@tsparticles/shape-emoji](https://github.com/tsparticles/tsparticles/tree/main/shapes/emoji)
 - [@tsparticles/shape-heart](https://github.com/tsparticles/tsparticles/tree/main/shapes/heart)
 - [@tsparticles/shape-image](https://github.com/tsparticles/tsparticles/tree/main/shapes/image)
 - [@tsparticles/shape-polygon](https://github.com/tsparticles/tsparticles/tree/main/shapes/polygon)
 - [@tsparticles/shape-square](https://github.com/tsparticles/tsparticles/tree/main/shapes/square)
 - [@tsparticles/shape-star](https://github.com/tsparticles/tsparticles/tree/main/shapes/star)
-- [@tsparticles/updater-color](https://github.com/tsparticles/tsparticles/tree/main/updaters/color)
 - [@tsparticles/updater-life](https://github.com/tsparticles/tsparticles/tree/main/updaters/life)
-- [@tsparticles/updater-opacity](https://github.com/tsparticles/tsparticles/tree/main/updaters/opacity)
-- [@tsparticles/updater-out-modes](https://github.com/tsparticles/tsparticles/tree/main/updaters/outModes)
 - [@tsparticles/updater-roll](https://github.com/tsparticles/tsparticles/tree/main/updaters/roll)
 - [@tsparticles/updater-rotate](https://github.com/tsparticles/tsparticles/tree/main/updaters/rotate)
-- [@tsparticles/updater-size](https://github.com/tsparticles/tsparticles/tree/main/updaters/size)
 - [@tsparticles/updater-tilt](https://github.com/tsparticles/tsparticles/tree/main/updaters/tilt)
 - [@tsparticles/updater-wobble](https://github.com/tsparticles/tsparticles/tree/main/updaters/wobble)
 
+## Dependency Graph
+
+```mermaid
+flowchart TD
+
+subgraph b [Bundle]
+  bc[tsparticles/confetti]
+  bb[tsparticles/basic]
+end
+
+subgraph c [Core]
+  ce[tsparticles/engine]
+end
+
+subgraph p [Plugins]
+  pe[tsparticles/plugin-emitters]
+  pm[tsparticles/plugin-motion]
+end
+
+subgraph s [Shapes]
+  sca[tsparticles/shape-cards]
+  se[tsparticles/shape-emoji]
+  sh[tsparticles/shape-heart]
+  si[tsparticles/shape-image]
+  sp[tsparticles/shape-polygon]
+  ss[tsparticles/shape-square]
+  sst[tsparticles/shape-star]
+end
+
+subgraph u [Updaters]
+  ul[tsparticles/updater-life]
+  ur[tsparticles/updater-roll]
+  uro[tsparticles/updater-rotate]
+  ut[tsparticles/updater-tilt]
+  uw[tsparticles/updater-wobble]
+end
+
+bc --> bb
+bc --> ce
+bc --> p
+bc --> s
+bc --> u
+```
+
 ## How to use it
 
 ### CDN / Vanilla JS / jQuery

package/basic_dist_browser_index_js.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
- * v4.0.0-alpha.8
+ * v4.0.0-beta.0
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \**************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadBasic: () => (/* binding */ loadBasic)\n/* harmony export */ });\nasync function loadBasic(engine) {\n  engine.checkVersion(\"4.0.0-alpha.8\");\n  await engine.register(async e => {\n    const {\n        loadHexColorPlugin\n      } = await __webpack_require__.e(/*! import() */ \"plugins_colors_hex_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/plugin-hex-color */ \"../../plugins/colors/hex/dist/browser/index.js\")),\n      {\n        loadHslColorPlugin\n      } = await __webpack_require__.e(/*! import() */ \"plugins_colors_hsl_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/plugin-hsl-color */ \"../../plugins/colors/hsl/dist/browser/index.js\")),\n      {\n        loadRgbColorPlugin\n      } = await __webpack_require__.e(/*! import() */ \"plugins_colors_rgb_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/plugin-rgb-color */ \"../../plugins/colors/rgb/dist/browser/index.js\")),\n      {\n        loadBaseMover\n      } = await __webpack_require__.e(/*! import() */ \"move_base_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/move-base */ \"../../move/base/dist/browser/index.js\")),\n      {\n        loadCircleShape\n      } = await __webpack_require__.e(/*! import() */ \"shapes_circle_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/shape-circle */ \"../../shapes/circle/dist/browser/index.js\")),\n      {\n        loadColorUpdater\n      } = await __webpack_require__.e(/*! import() */ \"updaters_color_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/updater-color */ \"../../updaters/color/dist/browser/index.js\")),\n      {\n        loadOpacityUpdater\n      } = await __webpack_require__.e(/*! import() */ \"updaters_opacity_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/updater-opacity */ \"../../updaters/opacity/dist/browser/index.js\")),\n      {\n        loadOutModesUpdater\n      } = await __webpack_require__.e(/*! import() */ \"updaters_outModes_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/updater-out-modes */ \"../../updaters/outModes/dist/browser/index.js\")),\n      {\n        loadSizeUpdater\n      } = await __webpack_require__.e(/*! import() */ \"updaters_size_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/updater-size */ \"../../updaters/size/dist/browser/index.js\"));\n    await loadHexColorPlugin(e);\n    await loadHslColorPlugin(e);\n    await loadRgbColorPlugin(e);\n    await loadBaseMover(e);\n    await loadCircleShape(e);\n    await loadColorUpdater(e);\n    await loadOpacityUpdater(e);\n    await loadOutModesUpdater(e);\n    await loadSizeUpdater(e);\n  });\n}\n\n//# sourceURL=webpack://@tsparticles/confetti/../basic/dist/browser/index.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadBasic: () => (/* binding */ loadBasic)\n/* harmony export */ });\nasync function loadBasic(engine) {\n    engine.checkVersion(\"4.0.0-beta.0\");\n    await engine.register(async (e)=>{\n        const [{ loadHexColorPlugin }, { loadHslColorPlugin }, { loadRgbColorPlugin }, { loadMovePlugin }, { loadCircleShape }, { loadFillColorUpdater }, { loadOpacityUpdater }, { loadOutModesUpdater }, { loadSizeUpdater }] = await Promise.all([\n            __webpack_require__.e(/*! import() */ \"plugins_colors_hex_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/plugin-hex-color */ \"../../plugins/colors/hex/dist/browser/index.js\")),\n            __webpack_require__.e(/*! import() */ \"plugins_colors_hsl_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/plugin-hsl-color */ \"../../plugins/colors/hsl/dist/browser/index.js\")),\n            __webpack_require__.e(/*! import() */ \"plugins_colors_rgb_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/plugin-rgb-color */ \"../../plugins/colors/rgb/dist/browser/index.js\")),\n            __webpack_require__.e(/*! import() */ \"plugins_move_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/plugin-move */ \"../../plugins/move/dist/browser/index.js\")),\n            __webpack_require__.e(/*! import() */ \"shapes_circle_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/shape-circle */ \"../../shapes/circle/dist/browser/index.js\")),\n            __webpack_require__.e(/*! import() */ \"updaters_fillColor_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/updater-fill-color */ \"../../updaters/fillColor/dist/browser/index.js\")),\n            __webpack_require__.e(/*! import() */ \"updaters_opacity_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/updater-opacity */ \"../../updaters/opacity/dist/browser/index.js\")),\n            __webpack_require__.e(/*! import() */ \"updaters_outModes_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/updater-out-modes */ \"../../updaters/outModes/dist/browser/index.js\")),\n            __webpack_require__.e(/*! import() */ \"updaters_size_dist_browser_index_js\").then(__webpack_require__.bind(__webpack_require__, /*! @tsparticles/updater-size */ \"../../updaters/size/dist/browser/index.js\"))\n        ]);\n        await Promise.all([\n            loadHexColorPlugin(e),\n            loadHslColorPlugin(e),\n            loadRgbColorPlugin(e),\n            loadMovePlugin(e),\n            loadCircleShape(e),\n            loadFillColorUpdater(e),\n            loadOpacityUpdater(e),\n            loadOutModesUpdater(e),\n            loadSizeUpdater(e)\n        ]);\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/confetti/../basic/dist/browser/index.js?\n}");
 
 /***/ }
 

package/browser/ConfettiOptions.js

@@ -1,5 +1,21 @@
 import { deepExtend, isArray, isNull, percentDenominator, } from "@tsparticles/engine";
 export class ConfettiOptions {
+    angle;
+    colors;
+    count;
+    decay;
+    disableForReducedMotion;
+    drift;
+    flat;
+    gravity;
+    position;
+    scalar;
+    shapeOptions;
+    shapes;
+    spread;
+    startVelocity;
+    ticks;
+    zIndex;
     constructor() {
         this.angle = 90;
         this.count = 50;
@@ -72,8 +88,8 @@ export class ConfettiOptions {
         const origin = data.origin;
         if (origin && !data.position) {
             data.position = {
-                x: origin.x !== undefined ? origin.x * percentDenominator : undefined,
-                y: origin.y !== undefined ? origin.y * percentDenominator : undefined,
+                x: origin.x === undefined ? undefined : origin.x * percentDenominator,
+                y: origin.y === undefined ? undefined : origin.y * percentDenominator,
             };
         }
         const position = data.position;

package/browser/confetti.js

@@ -1,9 +1,7 @@
 import { isString, millisecondsToSeconds, tsParticles, } from "@tsparticles/engine";
 import { ConfettiOptions } from "./ConfettiOptions.js";
-const defaultGravity = 9.81, sizeFactor = 5, speedFactor = 3, decayOffset = 1, disableRotate = 0, disableTilt = 0;
-let initialized = false;
-let initializing = false;
-const ids = new Map();
+let initialized = false, initializing = false;
+const ids = new Map(), defaultGravity = 9.81, sizeFactor = 5, speedFactor = 3, decayOffset = 1, disableRotate = 0, disableTilt = 0;
 async function initPlugins(engine) {
     if (initialized) {
         return;
@@ -20,24 +18,42 @@ async function initPlugins(engine) {
         });
     }
     initializing = true;
-    engine.checkVersion("4.0.0-alpha.8");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { loadEmittersPlugin } = await import("@tsparticles/plugin-emitters"), { loadMotionPlugin } = await import("@tsparticles/plugin-motion"), { loadCardsShape } = await import("@tsparticles/shape-cards"), { loadHeartShape } = await import("@tsparticles/shape-heart"), { loadImageShape } = await import("@tsparticles/shape-image"), { loadPolygonShape } = await import("@tsparticles/shape-polygon"), { loadSquareShape } = await import("@tsparticles/shape-square"), { loadStarShape } = await import("@tsparticles/shape-star"), { loadEmojiShape } = await import("@tsparticles/shape-emoji"), { loadRotateUpdater } = await import("@tsparticles/updater-rotate"), { loadLifeUpdater } = await import("@tsparticles/updater-life"), { loadRollUpdater } = await import("@tsparticles/updater-roll"), { loadTiltUpdater } = await import("@tsparticles/updater-tilt"), { loadWobbleUpdater } = await import("@tsparticles/updater-wobble"), { loadBasic } = await import("@tsparticles/basic");
-        await loadEmittersPlugin(e);
-        await loadMotionPlugin(e);
-        await loadCardsShape(e);
-        await loadHeartShape(e);
-        await loadImageShape(e);
-        await loadPolygonShape(e);
-        await loadSquareShape(e);
-        await loadStarShape(e);
-        await loadEmojiShape(e);
-        await loadRotateUpdater(e);
-        await loadLifeUpdater(e);
-        await loadRollUpdater(e);
-        await loadTiltUpdater(e);
-        await loadWobbleUpdater(e);
-        await loadBasic(e);
+        const [{ loadBasic }, { loadEmittersPlugin }, { loadMotionPlugin }, { loadCardSuitsShape }, { loadHeartShape }, { loadImageShape }, { loadPolygonShape }, { loadSquareShape }, { loadStarShape }, { loadEmojiShape }, { loadRotateUpdater }, { loadLifeUpdater }, { loadRollUpdater }, { loadTiltUpdater }, { loadWobbleUpdater },] = await Promise.all([
+            import("@tsparticles/basic"),
+            import("@tsparticles/plugin-emitters"),
+            import("@tsparticles/plugin-motion"),
+            import("@tsparticles/shape-cards"),
+            import("@tsparticles/shape-heart"),
+            import("@tsparticles/shape-image"),
+            import("@tsparticles/shape-polygon"),
+            import("@tsparticles/shape-square"),
+            import("@tsparticles/shape-star"),
+            import("@tsparticles/shape-emoji"),
+            import("@tsparticles/updater-rotate"),
+            import("@tsparticles/updater-life"),
+            import("@tsparticles/updater-roll"),
+            import("@tsparticles/updater-tilt"),
+            import("@tsparticles/updater-wobble"),
+        ]);
+        await Promise.all([
+            loadBasic(e),
+            loadMotionPlugin(e),
+            loadEmittersPlugin(e),
+            loadCardSuitsShape(e),
+            loadHeartShape(e),
+            loadImageShape(e),
+            loadPolygonShape(e),
+            loadSquareShape(e),
+            loadStarShape(e),
+            loadEmojiShape(e),
+            loadRotateUpdater(e),
+            loadLifeUpdater(e),
+            loadRollUpdater(e),
+            loadTiltUpdater(e),
+            loadWobbleUpdater(e),
+        ]);
     });
     initializing = false;
     initialized = true;
@@ -51,7 +67,7 @@ async function setConfetti(params) {
         container = ids.get(params.id);
         if (container && !container.destroyed) {
             const alias = container;
-            if (Object.hasOwn(alias, "addEmitter")) {
+            if ("addEmitter" in alias) {
                 await alias.addEmitter?.({
                     startCount: actualOptions.count,
                     position: actualOptions.position,
@@ -68,8 +84,11 @@ async function setConfetti(params) {
                         count: 1,
                     },
                     particles: {
-                        color: {
-                            value: actualOptions.colors,
+                        fill: {
+                            color: {
+                                value: actualOptions.colors,
+                            },
+                            enable: true,
                         },
                         shape: {
                             type: actualOptions.shapes,
@@ -169,8 +188,11 @@ async function setConfetti(params) {
             number: {
                 value: 0,
             },
-            color: {
-                value: actualOptions.colors,
+            fill: {
+                color: {
+                    value: actualOptions.colors,
+                },
+                enable: true,
             },
             shape: {
                 type: actualOptions.shapes,
@@ -293,8 +315,7 @@ async function setConfetti(params) {
 }
 export async function confetti(idOrOptions, confettiOptions) {
     await initPlugins(tsParticles);
-    let options;
-    let id;
+    let options, id;
     if (isString(idOrOptions)) {
         id = idOrOptions;
         options = confettiOptions ?? {};
@@ -313,8 +334,7 @@ confetti.create = async (canvas, options) => {
     const id = canvas.getAttribute("id") ?? "confetti";
     canvas.setAttribute("id", id);
     return async (idOrOptions, confettiOptions) => {
-        let subOptions;
-        let subId;
+        let subOptions, subId;
         if (isString(idOrOptions)) {
             subId = idOrOptions;
             subOptions = confettiOptions ?? options;
@@ -333,5 +353,5 @@ confetti.create = async (canvas, options) => {
 confetti.init = async () => {
     await initPlugins(tsParticles);
 };
-confetti.version = "4.0.0-alpha.8";
+confetti.version = "4.0.0-beta.0";
 globalThis.confetti = confetti;

package/cjs/ConfettiOptions.js

@@ -1,5 +1,21 @@
 import { deepExtend, isArray, isNull, percentDenominator, } from "@tsparticles/engine";
 export class ConfettiOptions {
+    angle;
+    colors;
+    count;
+    decay;
+    disableForReducedMotion;
+    drift;
+    flat;
+    gravity;
+    position;
+    scalar;
+    shapeOptions;
+    shapes;
+    spread;
+    startVelocity;
+    ticks;
+    zIndex;
     constructor() {
         this.angle = 90;
         this.count = 50;
@@ -72,8 +88,8 @@ export class ConfettiOptions {
         const origin = data.origin;
         if (origin && !data.position) {
             data.position = {
-                x: origin.x !== undefined ? origin.x * percentDenominator : undefined,
-                y: origin.y !== undefined ? origin.y * percentDenominator : undefined,
+                x: origin.x === undefined ? undefined : origin.x * percentDenominator,
+                y: origin.y === undefined ? undefined : origin.y * percentDenominator,
             };
         }
         const position = data.position;

package/cjs/confetti.js

@@ -1,9 +1,7 @@
 import { isString, millisecondsToSeconds, tsParticles, } from "@tsparticles/engine";
 import { ConfettiOptions } from "./ConfettiOptions.js";
-const defaultGravity = 9.81, sizeFactor = 5, speedFactor = 3, decayOffset = 1, disableRotate = 0, disableTilt = 0;
-let initialized = false;
-let initializing = false;
-const ids = new Map();
+let initialized = false, initializing = false;
+const ids = new Map(), defaultGravity = 9.81, sizeFactor = 5, speedFactor = 3, decayOffset = 1, disableRotate = 0, disableTilt = 0;
 async function initPlugins(engine) {
     if (initialized) {
         return;
@@ -20,24 +18,42 @@ async function initPlugins(engine) {
         });
     }
     initializing = true;
-    engine.checkVersion("4.0.0-alpha.8");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { loadEmittersPlugin } = await import("@tsparticles/plugin-emitters"), { loadMotionPlugin } = await import("@tsparticles/plugin-motion"), { loadCardsShape } = await import("@tsparticles/shape-cards"), { loadHeartShape } = await import("@tsparticles/shape-heart"), { loadImageShape } = await import("@tsparticles/shape-image"), { loadPolygonShape } = await import("@tsparticles/shape-polygon"), { loadSquareShape } = await import("@tsparticles/shape-square"), { loadStarShape } = await import("@tsparticles/shape-star"), { loadEmojiShape } = await import("@tsparticles/shape-emoji"), { loadRotateUpdater } = await import("@tsparticles/updater-rotate"), { loadLifeUpdater } = await import("@tsparticles/updater-life"), { loadRollUpdater } = await import("@tsparticles/updater-roll"), { loadTiltUpdater } = await import("@tsparticles/updater-tilt"), { loadWobbleUpdater } = await import("@tsparticles/updater-wobble"), { loadBasic } = await import("@tsparticles/basic");
-        await loadEmittersPlugin(e);
-        await loadMotionPlugin(e);
-        await loadCardsShape(e);
-        await loadHeartShape(e);
-        await loadImageShape(e);
-        await loadPolygonShape(e);
-        await loadSquareShape(e);
-        await loadStarShape(e);
-        await loadEmojiShape(e);
-        await loadRotateUpdater(e);
-        await loadLifeUpdater(e);
-        await loadRollUpdater(e);
-        await loadTiltUpdater(e);
-        await loadWobbleUpdater(e);
-        await loadBasic(e);
+        const [{ loadBasic }, { loadEmittersPlugin }, { loadMotionPlugin }, { loadCardSuitsShape }, { loadHeartShape }, { loadImageShape }, { loadPolygonShape }, { loadSquareShape }, { loadStarShape }, { loadEmojiShape }, { loadRotateUpdater }, { loadLifeUpdater }, { loadRollUpdater }, { loadTiltUpdater }, { loadWobbleUpdater },] = await Promise.all([
+            import("@tsparticles/basic"),
+            import("@tsparticles/plugin-emitters"),
+            import("@tsparticles/plugin-motion"),
+            import("@tsparticles/shape-cards"),
+            import("@tsparticles/shape-heart"),
+            import("@tsparticles/shape-image"),
+            import("@tsparticles/shape-polygon"),
+            import("@tsparticles/shape-square"),
+            import("@tsparticles/shape-star"),
+            import("@tsparticles/shape-emoji"),
+            import("@tsparticles/updater-rotate"),
+            import("@tsparticles/updater-life"),
+            import("@tsparticles/updater-roll"),
+            import("@tsparticles/updater-tilt"),
+            import("@tsparticles/updater-wobble"),
+        ]);
+        await Promise.all([
+            loadBasic(e),
+            loadMotionPlugin(e),
+            loadEmittersPlugin(e),
+            loadCardSuitsShape(e),
+            loadHeartShape(e),
+            loadImageShape(e),
+            loadPolygonShape(e),
+            loadSquareShape(e),
+            loadStarShape(e),
+            loadEmojiShape(e),
+            loadRotateUpdater(e),
+            loadLifeUpdater(e),
+            loadRollUpdater(e),
+            loadTiltUpdater(e),
+            loadWobbleUpdater(e),
+        ]);
     });
     initializing = false;
     initialized = true;
@@ -51,7 +67,7 @@ async function setConfetti(params) {
         container = ids.get(params.id);
         if (container && !container.destroyed) {
             const alias = container;
-            if (Object.hasOwn(alias, "addEmitter")) {
+            if ("addEmitter" in alias) {
                 await alias.addEmitter?.({
                     startCount: actualOptions.count,
                     position: actualOptions.position,
@@ -68,8 +84,11 @@ async function setConfetti(params) {
                         count: 1,
                     },
                     particles: {
-                        color: {
-                            value: actualOptions.colors,
+                        fill: {
+                            color: {
+                                value: actualOptions.colors,
+                            },
+                            enable: true,
                         },
                         shape: {
                             type: actualOptions.shapes,
@@ -169,8 +188,11 @@ async function setConfetti(params) {
             number: {
                 value: 0,
             },
-            color: {
-                value: actualOptions.colors,
+            fill: {
+                color: {
+                    value: actualOptions.colors,
+                },
+                enable: true,
             },
             shape: {
                 type: actualOptions.shapes,
@@ -293,8 +315,7 @@ async function setConfetti(params) {
 }
 export async function confetti(idOrOptions, confettiOptions) {
     await initPlugins(tsParticles);
-    let options;
-    let id;
+    let options, id;
     if (isString(idOrOptions)) {
         id = idOrOptions;
         options = confettiOptions ?? {};
@@ -313,8 +334,7 @@ confetti.create = async (canvas, options) => {
     const id = canvas.getAttribute("id") ?? "confetti";
     canvas.setAttribute("id", id);
     return async (idOrOptions, confettiOptions) => {
-        let subOptions;
-        let subId;
+        let subOptions, subId;
         if (isString(idOrOptions)) {
             subId = idOrOptions;
             subOptions = confettiOptions ?? options;
@@ -333,5 +353,5 @@ confetti.create = async (canvas, options) => {
 confetti.init = async () => {
     await initPlugins(tsParticles);
 };
-confetti.version = "4.0.0-alpha.8";
+confetti.version = "4.0.0-beta.0";
 globalThis.confetti = confetti;