@tsparticles/pjs 3.0.0-alpha.1 → 3.0.0-beta.5

package/tsparticles.pjs.js

@@ -4,22 +4,54 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.0.0-alpha.1
+ * v3.0.0-beta.5
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory();
+		module.exports = factory(require("@tsparticles/engine"));
 	else if(typeof define === 'function' && define.amd)
-		define([], factory);
+		define(["@tsparticles/engine"], factory);
 	else {
-		var a = factory();
+		var a = typeof exports === 'object' ? factory(require("@tsparticles/engine")) : factory(root["window"]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(this, () => {
+})(this, (__WEBPACK_EXTERNAL_MODULE__533__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
-/******/ 	// The require scope
-/******/ 	var __webpack_require__ = {};
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 533:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__533__;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
 /******/ 	
 /************************************************************************/
 /******/ 	/* webpack/runtime/define property getters */
@@ -52,15 +84,347 @@ return /******/ (() => { // webpackBootstrap
 /******/ 	
 /************************************************************************/
 var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+// ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "initPjs": () => (/* binding */ initPjs)
-/* harmony export */ });
-const initPjs = engine => {
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  initPjs: () => (/* binding */ initPjs)
+});
+
+// EXTERNAL MODULE: external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"}
+var engine_root_window_ = __webpack_require__(533);
+;// CONCATENATED MODULE: ./dist/browser/marcbruederlin/Particles.js
+
+class Particles {
+  static init(options) {
+    const particles = new 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");
+    }
+    engine_root_window_.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: ./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 = (0,engine_root_window_.deepExtend)(defaultPjsOptions, options);
     return engine.load({
       id: tagId,
-      options: options
+      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) => {
@@ -85,6 +449,26 @@ const initPjs = engine => {
   };
 };
 
+;// CONCATENATED MODULE: ./dist/browser/index.js
+
+
+const initPjs = engine => {
+  const {
+    particlesJS,
+    pJSDom
+  } = initParticlesJS(engine);
+  window.particlesJS = particlesJS;
+  window.pJSDom = pJSDom;
+  window.Particles = Particles;
+  return {
+    particlesJS,
+    pJSDom,
+    Particles: Particles
+  };
+};
+
+})();
+
 /******/ 	return __webpack_exports__;
 /******/ })()
 ;

package/tsparticles.pjs.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see tsparticles.pjs.min.js.LICENSE.txt */
-!function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o();else if("function"==typeof define&&define.amd)define([],o);else{var t=o();for(var r in t)("object"==typeof exports?exports:e)[r]=t[r]}}(this,(()=>(()=>{"use strict";var e={d:(o,t)=>{for(var r in t)e.o(t,r)&&!e.o(o,r)&&Object.defineProperty(o,r,{enumerable:!0,get:t[r]})},o:(e,o)=>Object.prototype.hasOwnProperty.call(e,o),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},o={};e.r(o),e.d(o,{initPjs:()=>t});const t=e=>{const o=(o,t)=>e.load({id:o,options:t});o.load=(o,t,r)=>{e.load({id:o,url:t}).then((e=>{e&&r(e)})).catch((()=>{r(void 0)}))},o.setOnClickHandler=o=>{e.setOnClickHandler(o)};return{particlesJS:o,pJSDom:e.dom()}};return o})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var i="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var a in i)("object"==typeof exports?exports:e)[a]=i[a]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},i={};function a(e){var n=i[e];if(void 0!==n)return n.exports;var o=i[e]={exports:{}};return t[e](o,o.exports,a),o.exports}a.d=(e,t)=>{for(var i in t)a.o(t,i)&&!a.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{a.r(n),a.d(n,{initPjs:()=>o});var e=a(533);class t{static init(i){const a=new t,n=i.selector;if(!n)throw new Error("No selector provided");const o=document.querySelector(n);if(!o)throw new Error("No element found for selector");return e.tsParticles.load({id:n.replace(".","").replace("!",""),element:o,options:{fullScreen:{enable:!1},particles:{color:{value:i.color??"!000000"},links:{color:"random",distance:i.minDistance??120,enable:i.connectParticles??!1},move:{enable:!0,speed:i.speed??.5},number:{value:i.maxParticles??100},size:{value:{min:1,max:i.sizeVariations??3}}},responsive:i.responsive?.map((e=>({maxWidth:e.breakpoint,options:{particles:{color:{value:e.options?.color},links:{distance:e.options?.minDistance,enable:e.options?.connectParticles},number:{value:i.maxParticles},move:{enable:!0,speed:e.options?.speed},size:{value:e.options?.sizeVariations}}}})))}}).then((e=>{a._container=e})),a}destroy(){const e=this._container;e&&e.destroy()}pauseAnimation(){const e=this._container;e&&e.pause()}resumeAnimation(){const e=this._container;e&&e.play()}}const i={particles:{number:{value:400,density:{enable:!0,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:!1,anim:{enable:!1,speed:2,opacity_min:0,sync:!1}},size:{value:20,random:!1,anim:{enable:!1,speed:20,size_min:0,sync:!1}},line_linked:{enable:!0,distance:100,color:"#fff",opacity:1,width:1},move:{enable:!0,speed:2,direction:"none",random:!1,straight:!1,out_mode:"out",bounce:!1,attract:{enable:!1,rotateX:3e3,rotateY:3e3}}},interactivity:{detect_on:"canvas",events:{onhover:{enable:!0,mode:"grab"},onclick:{enable:!0,mode:"push"},resize:!0},modes:{grab:{distance:100,line_linked:{opacity:1}},bubble:{distance:200,size:80,duration:.4,opacity:1,speed:3},repulse:{distance:200,duration:.4},push:{particles_nb:4},remove:{particles_nb:2}}},retina_detect:!1},o=a=>{const{particlesJS:n,pJSDom:o}=(t=>{const a=(a,n)=>{const o=(0,e.deepExtend)(i,n);return t.load({id:a,options:{fullScreen:{enable:!1},detectRetina:o.retina_detect,smooth:!0,interactivity:{detectsOn:o.interactivity.detect_on,events:{onHover:{enable:o.interactivity.events.onhover.enable,mode:o.interactivity.events.onhover.mode},onClick:{enable:o.interactivity.events.onclick.enable,mode:o.interactivity.events.onclick.mode},resize:{enable:o.interactivity.events.resize}},modes:{grab:{distance:o.interactivity.modes.grab.distance,links:{opacity:o.interactivity.modes.grab.line_linked.opacity}},bubble:{distance:o.interactivity.modes.bubble.distance,size:o.interactivity.modes.bubble.size,duration:o.interactivity.modes.bubble.duration,opacity:o.interactivity.modes.bubble.opacity,speed:o.interactivity.modes.bubble.speed},repulse:{distance:o.interactivity.modes.repulse.distance,duration:o.interactivity.modes.repulse.duration},push:{quantity:o.interactivity.modes.push.particles_nb},remove:{quantity:o.interactivity.modes.remove.particles_nb}}},particles:{collisions:{enable:o.particles.move.bounce},number:{value:o.particles.number.value,density:{enable:o.particles.number.density.enable,width:o.particles.number.density.value_area}},color:{value:o.particles.color.value},stroke:{width:o.particles.shape.stroke.width,color:{value:o.particles.shape.stroke.color}},shape:{type:o.particles.shape.type,options:{polygon:{sides:o.particles.shape.polygon.nb_sides},image:{src:o.particles.shape.image.src,width:o.particles.shape.image.width,height:o.particles.shape.image.height}}},opacity:{value:o.particles.opacity.random?{min:o.particles.opacity.anim.enable?o.particles.opacity.anim.opacity_min:0,max:o.particles.opacity.value}:o.particles.opacity.value,animation:{enable:o.particles.opacity.anim.enable,speed:o.particles.opacity.anim.speed,sync:o.particles.opacity.anim.sync}},size:{value:o.particles.size.random?{min:o.particles.size.anim.enable?o.particles.size.anim.size_min:0,max:o.particles.size.value}:o.particles.size.value,animation:{enable:o.particles.size.anim.enable,speed:o.particles.size.anim.speed,sync:o.particles.size.anim.sync}},links:{enable:o.particles.line_linked.enable,distance:o.particles.line_linked.distance,color:o.particles.line_linked.color,opacity:o.particles.line_linked.opacity,width:o.particles.line_linked.width},move:{enable:o.particles.move.enable,speed:o.particles.move.speed/3,direction:o.particles.move.direction,random:o.particles.move.random,straight:o.particles.move.straight,outModes:o.particles.move.out_mode,attract:{enable:o.particles.move.attract.enable,rotate:{x:o.particles.move.attract.rotateX,y:o.particles.move.attract.rotateY}}}}}})};return a.load=(e,i,a)=>{t.load({id:e,url:i}).then((e=>{e&&a(e)})).catch((()=>{a(void 0)}))},a.setOnClickHandler=e=>{t.setOnClickHandler(e)},{particlesJS:a,pJSDom:t.dom()}})(a);return window.particlesJS=n,window.pJSDom=o,window.Particles=t,{particlesJS:n,pJSDom:o,Particles:t}}})(),n})()));

package/tsparticles.pjs.min.js.LICENSE.txt

@@ -1,8 +1 @@
-/*!
- * Author : Matteo Bruni
- * MIT license: https://opensource.org/licenses/MIT
- * Demo / Generator : https://particles.js.org/
- * GitHub : https://www.github.com/matteobruni/tsparticles
- * How to use? : Check the GitHub README
- * v3.0.0-alpha.1
- */
+/*! tsParticles Particles.js v3.0.0-beta.5 by Matteo Bruni */

package/types/VincentGarreau/IParticlesJS.d.ts

@@ -0,0 +1,117 @@
+import type { Container, IHsl, IRgb, IValueColor, InteractivityDetect, MoveDirection, OutMode } from "@tsparticles/engine";
+export interface IParticlesJSOptions {
+    interactivity: {
+        detect_on: InteractivityDetect | keyof typeof InteractivityDetect;
+        events: {
+            onclick: {
+                enable: boolean;
+                mode: string;
+            };
+            onhover: {
+                enable: boolean;
+                mode: string;
+            };
+            resize: boolean;
+        };
+        modes: {
+            bubble: {
+                distance: number;
+                duration: number;
+                opacity: number;
+                size: number;
+                speed: number;
+            };
+            grab: {
+                distance: number;
+                line_linked: {
+                    opacity: number;
+                };
+            };
+            push: {
+                particles_nb: number;
+            };
+            remove: {
+                particles_nb: number;
+            };
+            repulse: {
+                distance: number;
+                duration: number;
+            };
+        };
+    };
+    particles: {
+        color: {
+            value: string | IRgb | IHsl | IValueColor;
+        };
+        line_linked: {
+            color: string;
+            distance: number;
+            enable: boolean;
+            opacity: number;
+            width: number;
+        };
+        move: {
+            attract: {
+                enable: boolean;
+                rotateX: number;
+                rotateY: number;
+            };
+            bounce: boolean;
+            direction: MoveDirection | keyof typeof MoveDirection;
+            enable: boolean;
+            out_mode: OutMode | keyof typeof OutMode;
+            random: boolean;
+            speed: number;
+            straight: boolean;
+        };
+        number: {
+            density: {
+                enable: boolean;
+                value_area: number;
+            };
+            value: number;
+        };
+        opacity: {
+            anim: {
+                enable: boolean;
+                opacity_min: number;
+                speed: number;
+                sync: boolean;
+            };
+            random: boolean;
+            value: number;
+        };
+        shape: {
+            image: {
+                height: number;
+                replace_color?: boolean;
+                src: string;
+                width: number;
+            };
+            polygon: {
+                nb_sides: number;
+            };
+            stroke: {
+                color: string | IRgb | IHsl | IValueColor;
+                width: number;
+            };
+            type: string;
+        };
+        size: {
+            anim: {
+                enable: boolean;
+                size_min: number;
+                speed: number;
+                sync: boolean;
+            };
+            random: boolean;
+            value: number;
+        };
+    };
+    retina_detect: boolean;
+}
+export interface IParticlesJS {
+    (tagId: string, options: IParticlesJSOptions): Promise<Container | undefined>;
+    load(tagId: string, pathConfigJson: string, callback: (container?: Container) => void): void;
+    setOnClickHandler(callback: EventListenerOrEventListenerObject): void;
+}

package/types/VincentGarreau/particles.d.ts

@@ -0,0 +1,7 @@
+import { type Container, type Engine } from "@tsparticles/engine";
+import type { IParticlesJS } from "./IParticlesJS.js";
+declare const initParticlesJS: (engine: Engine) => {
+    pJSDom: Container[];
+    particlesJS: IParticlesJS;
+};
+export { initParticlesJS };

package/types/bundle.d.ts

@@ -1,3 +1,3 @@
-declare const particlesJS: import("./IParticlesJS").IParticlesJS, pJSDom: import("@tsparticles/engine").Container[];
+declare const particlesJS: import("./VincentGarreau/IParticlesJS").IParticlesJS, pJSDom: import("@tsparticles/engine").Container[], Particles: typeof import("./marcbruederlin/Particles").Particles;
 export * from "@tsparticles/engine";
-export { particlesJS, pJSDom };
+export { particlesJS, pJSDom, Particles };

package/types/index.d.ts

@@ -1,6 +1,15 @@
-import type { Container, Engine } from "@tsparticles/engine";
-import type { IParticlesJS } from "./IParticlesJS";
+import { type Container, type Engine } from "@tsparticles/engine";
+import type { IParticlesJS } from "./VincentGarreau/IParticlesJS.js";
+import { Particles } from "./marcbruederlin/Particles.js";
+declare global {
+    interface Window {
+        Particles: typeof Particles;
+        pJSDom: Container[];
+        particlesJS: IParticlesJS;
+    }
+}
 declare const initPjs: (engine: Engine) => {
+    Particles: typeof Particles;
     pJSDom: Container[];
     particlesJS: IParticlesJS;
 };

package/types/marcbruederlin/Particles.d.ts

@@ -0,0 +1,23 @@
+import { type RecursivePartial, type SingleOrMultiple } from "@tsparticles/engine";
+interface ResponsiveOptions {
+    breakpoint: number;
+    options: ParticlesOptions;
+}
+interface ParticlesOptions {
+    color: SingleOrMultiple<string>;
+    connectParticles: boolean;
+    maxParticles: number;
+    minDistance: number;
+    responsive: ResponsiveOptions[];
+    selector: string;
+    sizeVariations: number;
+    speed: number;
+}
+export declare class Particles {
+    private _container?;
+    static init(options: RecursivePartial<ParticlesOptions>): Particles;
+    destroy(): void;
+    pauseAnimation(): void;
+    resumeAnimation(): void;
+}
+export {};