@tsparticles/template-particles 4.4.0 → 4.5.1

package/CHANGELOG.md

@@ -3,11 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.5.1](https://github.com/tsparticles/tsparticles/compare/v4.5.0...v4.5.1) (2026-11-02)
+
+**Note:** Version bump only for package @tsparticles/template-particles
+
+# [4.5.0](https://github.com/tsparticles/tsparticles/compare/v4.4.0...v4.5.0) (2026-10-25)
+
+**Note:** Version bump only for package @tsparticles/template-particles
+
 # [4.4.0](https://github.com/tsparticles/tsparticles/compare/v4.3.3...v4.4.0) (2026-08-30)
 
 ### Bug Fixes
 
-* various fixes for 4.4.0 ([475d06d](https://github.com/tsparticles/tsparticles/commit/475d06da27e1497bb097c0822fcfcb72d7142456))
+- various fixes for 4.4.0 ([475d06d](https://github.com/tsparticles/tsparticles/commit/475d06da27e1497bb097c0822fcfcb72d7142456))
 
 ## [4.3.3](https://github.com/tsparticles/tsparticles/compare/v4.3.2...v4.3.3) (2026-07-23)
 
@@ -25,7 +33,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### Bug Fixes
 
-* fixed angular confetti ([6f25a4a](https://github.com/tsparticles/tsparticles/commit/6f25a4a1eaa69c47f2668316e7b396fe55195f84))
+- fixed angular confetti ([6f25a4a](https://github.com/tsparticles/tsparticles/commit/6f25a4a1eaa69c47f2668316e7b396fe55195f84))
 
 ## [4.2.1](https://github.com/tsparticles/tsparticles/compare/v4.2.0...v4.2.1) (2026-06-18)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/template-particles",
-  "version": "4.4.0",
+  "version": "4.5.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -18,11 +18,11 @@
     "prepack": "pnpm run build"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.4.0",
-    "@tsparticles/particles": "4.4.0"
+    "@tsparticles/engine": "4.5.1",
+    "@tsparticles/particles": "4.5.1"
   },
   "devDependencies": {
     "fs-extra": "^11.3.4"
   },
-  "gitHead": "b7e605098d6ea937d5068c06542671d4891070e4"
+  "gitHead": "433c560448e5020cb051e1b025e0f9914f23b147"
 }

package/scripts/prebuild.js

@@ -51,7 +51,7 @@ fs.readFile(libPackage, function (error, data) {
     }
   }
 
-  fs.writeFile(libPackage, JSON.stringify(libObj, undefined, 2), "utf-8", function () {
+  fs.writeFile(libPackage, `${JSON.stringify(libObj, undefined, 2)}\n`, "utf-8", function () {
     console.log("template.json dependencies updated successfully");
   });
 });

package/template/angular/package.json

@@ -11,24 +11,24 @@
     "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "@angular/animations": "~22.0.0",
-    "@angular/common": "~22.0.0",
-    "@angular/compiler": "~22.0.0",
-    "@angular/core": "~22.0.0",
-    "@angular/forms": "~22.0.0",
-    "@angular/platform-browser": "~22.0.0",
-    "@angular/platform-browser-dynamic": "~22.0.0",
-    "@angular/router": "~22.0.0",
-    "@tsparticles/angular": "^4.1.3",
-    "@tsparticles/particles": "^4.0.0",
+    "@angular/animations": "~22.2.2",
+    "@angular/common": "~22.2.2",
+    "@angular/compiler": "~22.2.2",
+    "@angular/core": "~22.2.2",
+    "@angular/forms": "~22.2.2",
+    "@angular/platform-browser": "~22.2.2",
+    "@angular/platform-browser-dynamic": "~22.2.2",
+    "@angular/router": "~22.2.2",
+    "@tsparticles/angular": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
-    "zone.js": "~0.16.2"
+    "zone.js": "~0.16.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~22.0.0",
-    "@angular/cli": "~22.0.0",
-    "@angular/compiler-cli": "~22.0.0",
+    "@angular-devkit/build-angular": "~22.2.2",
+    "@angular/cli": "~22.2.2",
+    "@angular/compiler-cli": "~22.2.2",
     "typescript": "~6.0.3"
   }
 }

package/template/angular/src/app/app.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from "@angular/core";
 import { NgParticlesService } from "@tsparticles/angular";
-import { loadParticles } from "@tsparticles/particles";
+import { particles } from "@tsparticles/particles";
 import type { ISourceOptions } from "@tsparticles/engine";
 
 @Component({
+  standalone: false,
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],
@@ -31,8 +32,8 @@ export class AppComponent implements OnInit {
   };
 
   ngOnInit(): void {
-    void this.ngParticlesService.init(async (engine) => {
-      await loadParticles(engine);
+    void this.ngParticlesService.init(async () => {
+      await particles.init();
     });
   }
 }

package/template/angular-confetti/package.json

@@ -11,26 +11,26 @@
     "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "@angular/animations": "~22.0.0",
-    "@angular/common": "~22.0.0",
-    "@angular/compiler": "~22.0.0",
-    "@angular/core": "~22.0.0",
-    "@angular/forms": "~22.0.0",
-    "@angular/platform-browser": "~22.0.0",
-    "@angular/platform-browser-dynamic": "~22.0.0",
-    "@angular/router": "~22.0.0",
-    "@tsparticles/angular": "^4.1.3",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
+    "@angular/animations": "~22.2.2",
+    "@angular/common": "~22.2.2",
+    "@angular/compiler": "~22.2.2",
+    "@angular/core": "~22.2.2",
+    "@angular/forms": "~22.2.2",
+    "@angular/platform-browser": "~22.2.2",
+    "@angular/platform-browser-dynamic": "~22.2.2",
+    "@angular/router": "~22.2.2",
+    "@tsparticles/angular": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
-    "zone.js": "~0.16.2"
+    "zone.js": "~0.16.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~22.0.0",
-    "@angular/cli": "~22.0.0",
-    "@angular/compiler-cli": "~22.0.0",
+    "@angular-devkit/build-angular": "~22.2.2",
+    "@angular/cli": "~22.2.2",
+    "@angular/compiler-cli": "~22.2.2",
     "typescript": "~6.0.3"
   }
 }

package/template/angular-confetti/src/app/app.component.html

@@ -1,4 +1,4 @@
 <div id="app">
   <h1>tsParticles</h1>
 </div>
-<ng-particles id="tsparticles" [options]="options"></ng-particles>
+<ngx-particles id="tsparticles" [options]="options"></ngx-particles>

package/template/angular-confetti/src/app/app.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from "@angular/core";
 import { NgParticlesService } from "@tsparticles/angular";
-import { loadParticles } from "@tsparticles/particles";
+import { particles } from "@tsparticles/particles";
 import type { ISourceOptions } from "@tsparticles/engine";
 
 @Component({
+  standalone: false,
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],
@@ -31,8 +32,8 @@ export class AppComponent implements OnInit {
   };
 
   ngOnInit(): void {
-    void this.ngParticlesService.init(async (engine) => {
-      await loadParticles(engine);
+    void this.ngParticlesService.init(async () => {
+      await particles.init();
     });
   }
 }

package/template/angular-fireworks/package.json

@@ -11,26 +11,26 @@
     "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "@angular/animations": "~22.0.0",
-    "@angular/common": "~22.0.0",
-    "@angular/compiler": "~22.0.0",
-    "@angular/core": "~22.0.0",
-    "@angular/forms": "~22.0.0",
-    "@angular/platform-browser": "~22.0.0",
-    "@angular/platform-browser-dynamic": "~22.0.0",
-    "@angular/router": "~22.0.0",
-    "@tsparticles/angular": "^4.1.3",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
+    "@angular/animations": "~22.2.2",
+    "@angular/common": "~22.2.2",
+    "@angular/compiler": "~22.2.2",
+    "@angular/core": "~22.2.2",
+    "@angular/forms": "~22.2.2",
+    "@angular/platform-browser": "~22.2.2",
+    "@angular/platform-browser-dynamic": "~22.2.2",
+    "@angular/router": "~22.2.2",
+    "@tsparticles/angular": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
-    "zone.js": "~0.16.2"
+    "zone.js": "~0.16.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~22.0.0",
-    "@angular/cli": "~22.0.0",
-    "@angular/compiler-cli": "~22.0.0",
+    "@angular-devkit/build-angular": "~22.2.2",
+    "@angular/cli": "~22.2.2",
+    "@angular/compiler-cli": "~22.2.2",
     "typescript": "~6.0.3"
   }
 }

package/template/angular-fireworks/src/app/app.component.html

@@ -1,4 +1,4 @@
 <div id="app">
   <h1>tsParticles</h1>
 </div>
-<ng-particles id="tsparticles" [options]="options"></ng-particles>
+<ngx-particles id="tsparticles" [options]="options"></ngx-particles>

package/template/angular-fireworks/src/app/app.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from "@angular/core";
 import { NgParticlesService } from "@tsparticles/angular";
-import { loadParticles } from "@tsparticles/particles";
+import { particles } from "@tsparticles/particles";
 import type { ISourceOptions } from "@tsparticles/engine";
 
 @Component({
+  standalone: false,
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],
@@ -31,8 +32,8 @@ export class AppComponent implements OnInit {
   };
 
   ngOnInit(): void {
-    void this.ngParticlesService.init(async (engine) => {
-      await loadParticles(engine);
+    void this.ngParticlesService.init(async () => {
+      await particles.init();
     });
   }
 }

package/template/astro/package.json

@@ -9,10 +9,10 @@
     "preview": "astro preview"
   },
   "dependencies": {
-    "astro": "^5.7.0",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "@tsparticles/astro": "^4.1.3"
+    "astro": "^7.3.2",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/astro": "^4.4.0"
   }
 }

package/template/astro/src/pages/index.astro

@@ -1,6 +1,5 @@
 ---
-import { loadParticles } from "@tsparticles/particles";
-import { tsParticles } from "@tsparticles/engine";
+import Particles from "@tsparticles/astro";
 import type { ISourceOptions } from "@tsparticles/engine";
 
 const options: ISourceOptions = {
@@ -45,9 +44,12 @@ const options: ISourceOptions = {
     </div>
     <Particles id="tsparticles" options={options} client:load />
     <script>
-      import { loadParticles } from "@tsparticles/particles";
-      import { tsParticles } from "@tsparticles/engine";
-      void loadParticles(tsParticles);
+      import { initParticlesEngine } from "@tsparticles/astro";
+      import { particles } from "@tsparticles/particles";
+
+      void initParticlesEngine(async () => {
+        await particles.init();
+      });
     </script>
   </body>
 </html>

package/template/ember/package.json

@@ -7,14 +7,34 @@
     "build": "ember build",
     "preview": "ember serve"
   },
+  "devDependencies": {
+    "@ember/optional-features": "^3.0.0",
+    "@glimmer/component": "^2.1.1",
+    "@glimmer/tracking": "^1.1.2",
+    "broccoli-asset-rev": "^3.0.0",
+    "ember-auto-import": "^2.13.1",
+    "ember-cli": "~6.12.0",
+    "ember-cli-babel": "^8.3.1",
+    "ember-cli-htmlbars": "^7.0.1",
+    "ember-cli-inject-live-reload": "^2.1.0",
+    "ember-cli-sri": "^2.1.1",
+    "ember-cli-terser": "^4.0.2",
+    "ember-load-initializers": "^3.0.1",
+    "ember-modifier": "^4.3.0",
+    "ember-resolver": "^13.2.0",
+    "ember-source": "~6.12.0",
+    "loader.js": "^4.7.0",
+    "typescript": "^6.0.3",
+    "webpack": "^5.106.1"
+  },
   "dependencies": {
-    "ember-source": "^6.4.0",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "@tsparticles/ember": "^4.1.3"
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/ember": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0"
   },
-  "devDependencies": {
-    "ember-cli": "^6.3.1"
+  "ember": {
+    "edition": "octane"
   }
 }

package/template/inferno/package.json

@@ -9,11 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "inferno": "^9.0.4",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "@tsparticles/inferno": "^4.1.3"
+    "inferno": "^9.1.0",
+    "inferno-create-element": "^9.1.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/inferno": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "~5.8.3"

package/template/inferno/src/App.tsx

@@ -1,10 +1,13 @@
 import { Component } from "inferno";
-import Particles from "@tsparticles/inferno";
-import { loadParticles } from "@tsparticles/particles";
-import { tsParticles } from "@tsparticles/engine";
+import { Particles, ParticlesProvider } from "@tsparticles/inferno";
+import { particles } from "@tsparticles/particles";
 import type { ISourceOptions } from "@tsparticles/engine";
 import "./App.css";
 
+async function init(): Promise<void> {
+  await particles.init();
+}
+
 const options: ISourceOptions = {
   background: { color: { value: "#0d0d2b" } },
   fpsLimit: 120,
@@ -25,18 +28,14 @@ const options: ISourceOptions = {
 };
 
 export default class App extends Component {
-  componentDidMount() {
-    void loadParticles(tsParticles);
-  }
-
   render() {
     return (
-      <>
+      <ParticlesProvider init={init}>
         <div id="app">
           <h1>tsParticles</h1>
         </div>
         <Particles id="tsparticles" options={options} />
-      </>
+      </ParticlesProvider>
     );
   }
 }

package/template/jquery/package.json

@@ -10,12 +10,13 @@
   },
   "dependencies": {
     "jquery": "^3.7.1",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "@tsparticles/jquery": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/jquery": "^4.4.0"
   },
   "devDependencies": {
-    "typescript": "~5.8.3"
+    "typescript": "~5.8.3",
+    "@types/jquery": "^3.5.32"
   }
 }

package/template/jquery/src/main.ts

@@ -1,14 +1,16 @@
 import "./style.css";
 import $ from "jquery";
-import { loadParticles } from "@tsparticles/particles";
+import "@tsparticles/jquery";
 import { tsParticles } from "@tsparticles/engine";
+import { loadSlim } from "@tsparticles/slim";
 
 (async () => {
-  await loadParticles(tsParticles);
+  await loadSlim(tsParticles);
 
   $(() => {
     $("#app").after('<div id="tsparticles"></div>');
-    $("#tsparticles").particles({
+
+    $("#tsparticles").particles().load({
       background: { color: { value: "#0d0d2b" } },
       fpsLimit: 120,
       particles: {

package/template/lit/package.json

@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "lit": "^3.2.1",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "@tsparticles/lit": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/lit": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "~5.8.3"

package/template/lit/src/my-app.ts

@@ -1,7 +1,7 @@
 import { LitElement, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { initParticlesEngine } from "@tsparticles/lit";
-import { loadParticles } from "@tsparticles/particles";
+import { particles } from "@tsparticles/particles";
 import type { ISourceOptions } from "@tsparticles/engine";
 
 const options: ISourceOptions = {
@@ -30,8 +30,8 @@ export class MyApp extends LitElement {
 
   connectedCallback(): void {
     super.connectedCallback();
-    void initParticlesEngine(async (engine) => {
-      await loadParticles(engine);
+    void initParticlesEngine(async () => {
+      await particles.init();
       this.initialized = true;
     });
   }

package/template/nextjs/package.json

@@ -13,12 +13,15 @@
     "next": "^15.3.1",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "@tsparticles/nextjs": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/nextjs": "^4.4.0"
   },
   "devDependencies": {
-    "typescript": "~5.8.3"
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^6.0.3"
   }
 }

package/template/nextjs/src/app/page.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import Particles from "@tsparticles/nextjs";
-import { loadParticles } from "@tsparticles/particles";
-import type { Engine, ISourceOptions } from "@tsparticles/engine";
+import { NextParticles, NextParticlesProvider } from "@tsparticles/nextjs";
+import { particles } from "@tsparticles/particles";
+import type { ISourceOptions } from "@tsparticles/engine";
 
-async function init(engine: Engine): Promise<void> {
-  await loadParticles(engine);
+async function init(): Promise<void> {
+  await particles.init();
 }
 
 const options: ISourceOptions = {
@@ -29,11 +29,11 @@ const options: ISourceOptions = {
 
 export default function Home() {
   return (
-    <>
+    <NextParticlesProvider init={init}>
       <div id="app">
         <h1>tsParticles</h1>
       </div>
-      <Particles id="tsparticles" init={init} options={options} />
-    </>
+      <NextParticles id="tsparticles" options={options} />
+    </NextParticlesProvider>
   );
 }

package/template/nuxt2/package.json

@@ -12,9 +12,19 @@
     "nuxt": "^2.18.1",
     "vue": "^2.7.16",
     "vue-template-compiler": "^2.7.16",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "@tsparticles/vue2": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/vue2": "^4.4.0",
+    "@tsparticles/nuxt2": "^4.4.0"
+  },
+  "browserslist": [
+    "chrome 58",
+    "edge 16",
+    "firefox 57",
+    "safari 11"
+  ],
+  "devDependencies": {
+    "@babel/preset-env": "^7.29.0"
   }
 }

package/template/nuxt2/pages/index.vue

@@ -6,9 +6,6 @@
 </template>
 
 <script>
-import { loadParticles } from "@tsparticles/particles";
-import { tsParticles } from "@tsparticles/engine";
-
 export default {
   name: "HomePage",
   data() {
@@ -52,9 +49,6 @@ export default {
       },
     };
   },
-  mounted() {
-    void loadParticles(tsParticles);
-  },
 };
 </script>
 

package/template/nuxt2/utils/particlesInit.js

@@ -0,0 +1,5 @@
+export async function registerParticles() {
+  const { particles } = await import("@tsparticles/particles");
+
+  await particles.init();
+}

package/template/nuxt3/app.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { onMounted } from "vue";
-import { loadParticles } from "@tsparticles/particles";
-import { tsParticles } from "@tsparticles/engine";
+import { particles } from "@tsparticles/particles";
 import type { ISourceOptions } from "@tsparticles/engine";
 
 const options: ISourceOptions = {
@@ -24,7 +23,7 @@ const options: ISourceOptions = {
 };
 
 onMounted(() => {
-  void loadParticles(tsParticles);
+  void particles.init();
 });
 </script>
 

package/template/nuxt3/package.json

@@ -10,9 +10,10 @@
   "dependencies": {
     "nuxt": "^3.17.1",
     "vue": "^3.5.32",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "@tsparticles/vue3": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/vue3": "^4.4.0",
+    "@tsparticles/nuxt3": "^4.4.0"
   }
 }

package/template/nuxt3/utils/particlesInit.ts

@@ -0,0 +1,5 @@
+import { particles } from "@tsparticles/particles";
+
+export async function registerParticles(): Promise<void> {
+  await particles.init();
+}

package/template/nuxt4/app.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { onMounted } from "vue";
-import { loadParticles } from "@tsparticles/particles";
-import { tsParticles } from "@tsparticles/engine";
+import { particles } from "@tsparticles/particles";
 import type { ISourceOptions } from "@tsparticles/engine";
 
 const options: ISourceOptions = {
@@ -24,7 +23,7 @@ const options: ISourceOptions = {
 };
 
 onMounted(() => {
-  void loadParticles(tsParticles);
+  void particles.init();
 });
 </script>
 

package/template/nuxt4/package.json

@@ -9,10 +9,11 @@
   },
   "dependencies": {
     "nuxt": "^4.0.0",
-    "vue": "^4.0.0",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "@tsparticles/vue3": "^4.1.3"
+    "vue": "^3.5.32",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/vue3": "^4.4.0",
+    "@tsparticles/nuxt4": "^4.4.0"
   }
 }

package/template/nuxt4/utils/particlesInit.ts

@@ -0,0 +1,5 @@
+import { particles } from "@tsparticles/particles";
+
+export async function registerParticles(): Promise<void> {
+  await particles.init();
+}

package/template/preact/package.json

@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "preact": "^10.26.5",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "@tsparticles/preact": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/preact": "^4.4.0"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.1",

package/template/preact/src/App.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from "preact/hooks";
-import Particles from "@tsparticles/preact";
-import { loadParticles } from "@tsparticles/particles";
-import { tsParticles } from "@tsparticles/engine";
+import Particles, { initParticlesEngine } from "@tsparticles/preact";
+import { particles } from "@tsparticles/particles";
 import type { ISourceOptions } from "@tsparticles/engine";
 import "./App.css";
 
@@ -26,7 +25,9 @@ const options: ISourceOptions = {
 
 export default function App() {
   useEffect(() => {
-    void loadParticles(tsParticles);
+    void initParticlesEngine(async () => {
+      await particles.init();
+    });
   }, []);
 
   return (

package/template/qwik/package.json

@@ -10,12 +10,13 @@
   },
   "dependencies": {
     "@builder.io/qwik": "^1.12.1",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "@tsparticles/qwik": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/qwik": "^4.4.0"
   },
   "devDependencies": {
-    "typescript": "~5.8.3"
+    "typescript": "~5.8.3",
+    "vite": "^7.3.6"
   }
 }

package/template/qwik/src/App.tsx

@@ -1,7 +1,6 @@
 import { component$, useVisibleTask$ } from "@builder.io/qwik";
-import { Particles } from "@tsparticles/qwik";
-import { loadParticles } from "@tsparticles/particles";
-import { tsParticles } from "@tsparticles/engine";
+import { Particles, initParticlesEngine } from "@tsparticles/qwik";
+import { particles } from "@tsparticles/particles";
 import type { ISourceOptions } from "@tsparticles/engine";
 
 const options: ISourceOptions = {
@@ -25,7 +24,9 @@ const options: ISourceOptions = {
 
 export default component$(() => {
   useVisibleTask$(() => {
-    void loadParticles(tsParticles);
+    void initParticlesEngine(async () => {
+      await particles.init();
+    });
   });
 
   return (

package/template/react/package.json

@@ -11,9 +11,11 @@
   "dependencies": {
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "@tsparticles/react": "^4.1.3"
+    "@tsparticles/react": "^4.4.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^6.0.1"
+    "@vitejs/plugin-react": "^6.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3"
   }
 }

package/template/react/src/App.tsx

@@ -1,10 +1,10 @@
 import Particles, { ParticlesProvider } from "@tsparticles/react";
-import { loadParticles } from "@tsparticles/particles";
-import type { Engine, ISourceOptions } from "@tsparticles/engine";
+import { particles } from "@tsparticles/particles";
+import type { ISourceOptions } from "@tsparticles/engine";
 import "./App.css";
 
-async function init(engine: Engine): Promise<void> {
-  await loadParticles(engine);
+async function init(): Promise<void> {
+  await particles.init();
 }
 
 const options: ISourceOptions = {

package/template/riot/package.json

@@ -9,13 +9,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "riot": "^9.5.2",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "@tsparticles/riot": "^4.1.3"
+    "riot": "^10.1.6",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/riot": "^4.4.0"
   },
   "devDependencies": {
-    "typescript": "~5.8.3"
+    "typescript": "~5.8.3",
+    "@riotjs/compiler": "^10.0.4",
+    "rollup-plugin-riot": "^10.0.0"
   }
 }

package/template/riot/src/app.riot

@@ -21,11 +21,10 @@
   </style>
 
   <script>
-    import { loadParticles } from "@tsparticles/particles";
-    import { tsParticles } from "@tsparticles/engine";
+    import { particles } from "@tsparticles/particles";
 
     this.on("mount", () => {
-      loadParticles(tsParticles);
+      void particles.init();
     });
   </script>
 </app>

package/template/solid/package.json

@@ -10,9 +10,9 @@
   },
   "dependencies": {
     "solid-js": "^1.8.11",
-    "@tsparticles/solid": "^4.1.3"
+    "@tsparticles/solid": "^4.4.0"
   },
   "devDependencies": {
-    "vite-plugin-solid": "^2.8.2"
+    "vite-plugin-solid": "^2.11.14"
   }
 }

package/template/solid/src/App.tsx

@@ -1,12 +1,12 @@
 import { onMount } from "solid-js";
 import Particles, { initParticlesEngine } from "@tsparticles/solid";
-import { loadParticles } from "@tsparticles/particles";
+import { particles } from "@tsparticles/particles";
 import type { ISourceOptions } from "@tsparticles/engine";
 
 export default function App() {
   onMount(() => {
-    void initParticlesEngine(async (engine) => {
-      await loadParticles(engine);
+    void initParticlesEngine(async () => {
+      await particles.init();
     });
   });
 

package/template/stencil/package.json

@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "@stencil/core": "^4.26.0",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "@tsparticles/stencil": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/stencil": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "~5.8.3"

package/template/stencil/src/components/app-home/app-home.tsx

@@ -1,6 +1,5 @@
 import { Component, h } from "@stencil/core";
-import { loadParticles } from "@tsparticles/particles";
-import { tsParticles } from "@tsparticles/engine";
+import { particles } from "@tsparticles/particles";
 import type { ISourceOptions } from "@tsparticles/engine";
 
 @Component({
@@ -48,7 +47,7 @@ export class AppHome {
   };
 
   componentDidLoad() {
-    void loadParticles(tsParticles);
+    void particles.init();
   }
 
   render() {

package/template/svelte/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tsparticles/svelte": "^4.1.3"
+    "@tsparticles/svelte": "^4.4.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.3",

package/template/svelte/src/main.ts

@@ -1,10 +1,10 @@
 import { mount } from "svelte";
 import { initParticlesEngine } from "@tsparticles/svelte";
-import { loadParticles } from "@tsparticles/particles";
+import { particles } from "@tsparticles/particles";
 import App from "./App.svelte";
 
-void initParticlesEngine(async (engine) => {
-  await loadParticles(engine);
+void initParticlesEngine(async () => {
+  await particles.init();
 });
 
 const app = mount(App, { target: document.getElementById("app")! });

package/template/vanilla/src/main.ts

@@ -1,9 +1,9 @@
 import "./style.css";
 import { tsParticles } from "@tsparticles/engine";
-import { loadParticles } from "@tsparticles/particles";
+import { particles } from "@tsparticles/particles";
 
 (async () => {
-  await loadParticles(tsParticles);
+  await particles.init();
 
   await tsParticles.load({
     id: "tsparticles",

package/template/vue2/package.json

@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "vue": "^2.7.16",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "@tsparticles/vue2": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/vue2": "^4.4.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue2": "^2.3.3",

package/template/vue2/src/App.vue

@@ -6,9 +6,6 @@
 </template>
 
 <script>
-import { loadParticles } from "@tsparticles/particles";
-import { tsParticles } from "@tsparticles/engine";
-
 export default {
   name: "App",
   data() {
@@ -52,9 +49,6 @@ export default {
       },
     };
   },
-  mounted() {
-    void loadParticles(tsParticles);
-  },
 };
 </script>
 

package/template/vue2/src/main.ts

@@ -0,0 +1,14 @@
+import Vue from "vue";
+import VueParticles from "@tsparticles/vue2";
+import { particles } from "@tsparticles/particles";
+import App from "./App.vue";
+
+Vue.use(VueParticles, {
+  init: async () => {
+    await particles.init();
+  },
+});
+
+new Vue({
+  render: (h) => h(App),
+}).$mount("#app");

package/template/vue3/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "vue": "^3.5.32",
-    "@tsparticles/vue3": "^4.1.3"
+    "@tsparticles/vue3": "^4.4.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.5",

package/template/vue3/src/main.ts

@@ -1,13 +1,13 @@
 import { createApp } from "vue";
 import Particles from "@tsparticles/vue3";
-import { loadParticles } from "@tsparticles/particles";
+import { particles } from "@tsparticles/particles";
 import App from "./App.vue";
 
 const app = createApp(App);
 
 app.use(Particles, {
-  init: async (engine) => {
-    await loadParticles(engine);
+  init: async () => {
+    await particles.init();
   },
 });
 

package/template/webcomponents/package.json

@@ -9,10 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/particles": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "@tsparticles/webcomponents": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/particles": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/webcomponents": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "~5.8.3"

package/template/webcomponents/src/main.ts

@@ -1,16 +1,55 @@
 import "./style.css";
-import { loadParticles } from "@tsparticles/particles";
 import { tsParticles } from "@tsparticles/engine";
+import { particles } from "@tsparticles/particles";
+import { defineParticlesElement, initParticlesEngine } from "@tsparticles/webcomponents";
+import type { ISourceOptions } from "@tsparticles/engine";
 
-(async () => {
-  await loadParticles(tsParticles);
+globalThis.tsParticles = tsParticles;
 
-  const app = document.createElement("div");
-  app.id = "app";
-  app.innerHTML = "<h1>tsParticles</h1>";
-  document.body.appendChild(app);
+const options: ISourceOptions = {
+  background: { color: { value: "#0d0d2b" } },
+  fpsLimit: 120,
+  particles: {
+    number: { value: 80, density: { enable: true } },
+    color: { value: "#ffffff" },
+    shape: { type: "circle" },
+    opacity: { value: 0.5 },
+    size: { value: { min: 1, max: 5 } },
+    links: {
+      enable: true,
+      distance: 150,
+      color: "#ffffff",
+      opacity: 0.3,
+      width: 1,
+    },
+    move: {
+      enable: true,
+      speed: 2,
+      direction: "none",
+      random: false,
+      straight: false,
+      outModes: { default: "bounce" },
+    },
+  },
+  interactivity: {
+    events: {
+      onHover: { enable: true, mode: "repulse" },
+      onClick: { enable: true, mode: "push" },
+    },
+    modes: {
+      repulse: { distance: 100, duration: 0.4 },
+      push: { quantity: 4 },
+    },
+  },
+  detectRetina: true,
+};
 
-  const particles = document.createElement("web-particles");
-  particles.id = "tsparticles";
-  document.body.appendChild(particles);
-})();
+void initParticlesEngine(async () => {
+  await particles.init();
+});
+
+defineParticlesElement();
+
+const particlesEl = document.getElementById("tsparticles");
+
+(particlesEl as unknown as { options: ISourceOptions }).options = options;

package/template.json

@@ -1,12 +1,12 @@
 {
   "package": {
     "dependencies": {
-      "@tsparticles/engine": "^4.4.0",
-      "@tsparticles/particles": "^4.4.0"
+      "@tsparticles/engine": "^4.5.1",
+      "@tsparticles/particles": "^4.5.1"
     },
     "devDependencies": {
       "typescript": "^6.0.3",
-      "vite": "^8.1.0"
+      "vite": "^8.3.5"
     }
   }
-}
+}