@tsparticles/template-landing 4.3.2 → 4.5.0

package/CHANGELOG.md

@@ -3,32 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [4.3.2](https://github.com/tsparticles/tsparticles/compare/v4.3.1...v4.3.2) (2026-07-10)
+# [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-landing
 
+# [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))
 
-
-## [4.3.1](https://github.com/tsparticles/tsparticles/compare/v4.3.0...v4.3.1) (2026-07-01)
+## [4.3.3](https://github.com/tsparticles/tsparticles/compare/v4.3.2...v4.3.3) (2026-07-23)
 
 **Note:** Version bump only for package @tsparticles/template-landing
 
+## [4.3.2](https://github.com/tsparticles/tsparticles/compare/v4.3.1...v4.3.2) (2026-07-10)
 
+**Note:** Version bump only for package @tsparticles/template-landing
 
+## [4.3.1](https://github.com/tsparticles/tsparticles/compare/v4.3.0...v4.3.1) (2026-07-01)
 
+**Note:** Version bump only for package @tsparticles/template-landing
 
 # [4.3.0](https://github.com/tsparticles/tsparticles/compare/v4.2.1...v4.3.0) (2026-06-27)
 
-
 ### 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-landing",
-  "version": "4.3.2",
+  "version": "4.5.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -14,7 +14,16 @@
     "prebuild": "node scripts/prebuild.js",
     "build": "pnpm run prebuild",
     "build:ci": "pnpm run prebuild",
-    "version": "pnpm run build && git add template.json"
+    "version": "pnpm run build && git add template.json",
+    "prepack": "pnpm run build"
   },
-  "gitHead": "527bc42f2324fbb9b93262efa3d90a5517532b8b"
+  "dependencies": {
+    "@tsparticles/configs": "4.5.0",
+    "@tsparticles/engine": "4.5.0",
+    "@tsparticles/slim": "4.5.0"
+  },
+  "devDependencies": {
+    "fs-extra": "^11.3.4"
+  },
+  "gitHead": "a637373a03c008ab38edaaecf6524ec4b8e332c0"
 }

package/scripts/prebuild.js

@@ -1,5 +1,6 @@
 const fs = require("fs-extra");
 
+const mainPackage = require("../package.json");
 const libPackage = "./template.json";
 
 const workspaceVersions = {
@@ -9,14 +10,7 @@ const workspaceVersions = {
 };
 
 function resolveWorkspaceDependency(name) {
-  const libObj = JSON.parse(fs.readFileSync(libPackage, "utf-8"));
-
-  const allDeps = {
-    ...libObj.package.dependencies,
-    ...libObj.package.devDependencies,
-  };
-
-  const spec = allDeps[name];
+  const spec = mainPackage.dependencies[name];
 
   if (!spec?.startsWith("workspace:")) {
     return spec;
@@ -42,8 +36,7 @@ fs.readFile(libPackage, function (error, data) {
     throw error;
   }
 
-  const text = data.toString();
-  const libObj = JSON.parse(text);
+  const libObj = JSON.parse(data.toString());
 
   for (const dep of Object.keys(libObj.package.dependencies)) {
     const resolved = resolveWorkspaceDependency(dep);
@@ -59,7 +52,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/slim": "^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/slim": "^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

@@ -4,6 +4,7 @@ import { loadSlim } from "@tsparticles/slim";
 import type { ISourceOptions } from "@tsparticles/engine";
 
 @Component({
+  standalone: false,
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],

package/template/angular-confetti/package.json

@@ -11,26 +11,26 @@
     "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "@angular/animations": "~22.0.1",
-    "@angular/common": "~22.0.1",
-    "@angular/compiler": "~22.0.1",
-    "@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/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "angular-confetti": "^4.1.3",
+    "@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/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^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 @@
-<ngx-confetti id="tsparticles" [options]="options"></ngx-confetti>
+<ngx-particles id="tsparticles" [options]="options" />
 <section id="hero" class="section">
   <div class="hero-content">
     <h1>Build Faster.<br /><span class="gradient-text">Go Further.</span></h1>

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

@@ -1,12 +1,17 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
+import { NgParticlesService } from "@tsparticles/angular";
+import { loadSlim } from "@tsparticles/slim";
 import type { ISourceOptions } from "@tsparticles/engine";
 
 @Component({
+  standalone: false,
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+  constructor(private readonly ngParticlesService: NgParticlesService) {}
+
   title = "{{projectName}}";
 
   options: ISourceOptions = {
@@ -46,4 +51,10 @@ export class AppComponent {
     { text: "This platform transformed how our team ships features. Absolutely love it.", author: "Sarah K., CTO" },
     { text: "The best investment we made this year. The performance gains are incredible.", author: "Michael R., Developer" },
   ];
+
+  ngOnInit(): void {
+    void this.ngParticlesService.init(async (engine) => {
+      await loadSlim(engine);
+    });
+  }
 }

package/template/angular-fireworks/package.json

@@ -11,26 +11,26 @@
     "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "@angular/animations": "~22.0.1",
-    "@angular/common": "~22.0.1",
-    "@angular/compiler": "~22.0.1",
-    "@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/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "angular-fireworks": "^4.1.3",
+    "@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/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^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 @@
-<ngx-fireworks id="tsparticles" [options]="options"></ngx-fireworks>
+<ngx-particles id="tsparticles" [options]="options" />
 <section id="hero" class="section">
   <div class="hero-content">
     <h1>Build Faster.<br /><span class="gradient-text">Go Further.</span></h1>

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

@@ -1,12 +1,17 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
+import { NgParticlesService } from "@tsparticles/angular";
+import { loadSlim } from "@tsparticles/slim";
 import type { ISourceOptions } from "@tsparticles/engine";
 
 @Component({
+  standalone: false,
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+  constructor(private readonly ngParticlesService: NgParticlesService) {}
+
   title = "{{projectName}}";
 
   options: ISourceOptions = {
@@ -46,4 +51,10 @@ export class AppComponent {
     { text: "This platform transformed how our team ships features. Absolutely love it.", author: "Sarah K., CTO" },
     { text: "The best investment we made this year. The performance gains are incredible.", author: "Michael R., Developer" },
   ];
+
+  ngOnInit(): void {
+    void this.ngParticlesService.init(async (engine) => {
+      await loadSlim(engine);
+    });
+  }
 }

package/template/astro/package.json

@@ -9,13 +9,13 @@
     "preview": "astro preview"
   },
   "dependencies": {
-    "astro": "^5.0.0",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/astro": "^4.1.3"
+    "astro": "^7.3.2",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/astro": "^4.4.0"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.0"
+    "@astrojs/check": "^0.9.10"
   }
 }

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

@@ -134,10 +134,12 @@ const options: ISourceOptions = {
       </div>
     </footer>
     <script>
+      import { initParticlesEngine } from "@tsparticles/astro";
       import { loadSlim } from "@tsparticles/slim";
-      import { tsParticles } from "@tsparticles/engine";
 
-      await loadSlim(tsParticles);
+      await initParticlesEngine(async (engine) => {
+        await loadSlim(engine);
+      });
     </script>
   </body>
 </html>

package/template/ember/package.json

@@ -3,17 +3,37 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
+    "dev": "ember serve",
     "build": "ember build",
-    "serve": "ember serve"
+    "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": "^5.12.0",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/ember": "^4.1.3"
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/ember": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0"
   },
-  "devDependencies": {
-    "ember-cli": "^6.0.0"
+  "ember": {
+    "edition": "octane"
   }
 }

package/template/inferno/package.json

@@ -9,15 +9,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "inferno": "^8.2.5",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/inferno": "^4.1.3"
+    "inferno": "^9.1.0",
+    "inferno-create-element": "^9.1.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/inferno": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "^5.7.0",
-    "vite": "^6.0.0",
-    "vite-plugin-inferno": "^0.8.4"
+    "vite": "^8.3.1"
   }
 }

package/template/inferno/src/App.tsx

@@ -1,14 +1,15 @@
-import Particles, { initParticlesEngine } from "@tsparticles/inferno";
+import { Particles, initParticlesEngine } from "@tsparticles/inferno";
 import { loadSlim } from "@tsparticles/slim";
 import type { ISourceOptions } from "@tsparticles/engine";
 import { Component } from "inferno";
 import "./App.css";
 
-export default class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { init: false };
-  }
+interface AppState {
+  init: boolean;
+}
+
+export default class App extends Component<{}, AppState> {
+  state = { init: false };
 
   componentDidMount() {
     initParticlesEngine(async (engine) => {

package/template/jquery/package.json

@@ -10,14 +10,14 @@
   },
   "dependencies": {
     "jquery": "^3.7.1",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/jquery": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/jquery": "^4.4.0"
   },
   "devDependencies": {
     "@types/jquery": "^3.5.32",
     "typescript": "^5.7.0",
-    "vite": "^6.0.0"
+    "vite": "^8.3.1"
   }
 }

package/template/jquery/src/main.ts

@@ -8,9 +8,7 @@ $(() => {
     await loadSlim(engine);
   });
 
-  $.particles().load({
-    id: "tsparticles",
-    options: {
+  $("#tsparticles").particles().load({
       fullScreen: { enable: true, zIndex: -1 },
       background: { color: { value: "#080818" } },
       fpsLimit: 60,
@@ -45,7 +43,6 @@ $(() => {
         },
       },
       detectRetina: true,
-    },
   });
 });
 

package/template/lit/package.json

@@ -10,13 +10,13 @@
   },
   "dependencies": {
     "lit": "^3.2.0",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/lit": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/lit": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "^5.7.0",
-    "vite": "^6.0.0"
+    "vite": "^8.3.1"
   }
 }

package/template/nextjs/package.json

@@ -11,9 +11,15 @@
     "next": "^15.0.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/nextjs": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/nextjs": "^4.4.0"
+  },
+  "devDependencies": {
+    "@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,6 +1,6 @@
 "use client";
 
-import NextParticles from "@tsparticles/nextjs";
+import { NextParticles } from "@tsparticles/nextjs";
 import type { ISourceOptions } from "@tsparticles/engine";
 import { ParticlesProvider } from "./providers";
 

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

@@ -1,15 +1,15 @@
 "use client";
 
-import { initParticlesEngine } from "@tsparticles/nextjs";
+import { NextParticlesProvider } from "@tsparticles/nextjs";
 import { loadSlim } from "@tsparticles/slim";
-import { useEffect, type ReactNode } from "react";
+import type { Engine } from "@tsparticles/engine";
 
-export function ParticlesProvider({ children }: { children: ReactNode }) {
-  useEffect(() => {
-    initParticlesEngine(async (engine) => {
-      await loadSlim(engine);
-    });
-  }, []);
-
-  return <>{children}</>;
+export function ParticlesProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <NextParticlesProvider init={async (engine: Engine): Promise<void> => { await loadSlim(engine); }}>
+      {children}
+    </NextParticlesProvider>
+  );
 }
+
+export default ParticlesProvider;

package/template/nuxt2/package.json

@@ -8,10 +8,19 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
-    "nuxt": "^2.19.0",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/nuxt2": "^4.1.3"
+    "nuxt": "^2.18.1",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^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/nuxt3/package.json

@@ -10,9 +10,9 @@
   },
   "dependencies": {
     "nuxt": "^3.16.0",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/nuxt3": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/nuxt3": "^4.4.0"
   }
 }

package/template/nuxt4/package.json

@@ -10,9 +10,9 @@
   },
   "dependencies": {
     "nuxt": "^4.0.0",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/nuxt4": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/nuxt4": "^4.4.0"
   }
 }

package/template/preact/package.json

@@ -10,14 +10,14 @@
   },
   "dependencies": {
     "preact": "^10.26.0",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/preact": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/preact": "^4.4.0"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.0",
     "typescript": "^5.7.0",
-    "vite": "^6.0.0"
+    "vite": "^8.3.1"
   }
 }

package/template/preact/src/App.tsx

@@ -1,19 +1,14 @@
-import Particles from "@tsparticles/preact";
+import Particles, { initParticlesEngine } from "@tsparticles/preact";
 import { loadSlim } from "@tsparticles/slim";
-import type { Engine, ISourceOptions } from "@tsparticles/engine";
-import { useEffect, useState } from "preact/hooks";
+import type { ISourceOptions } from "@tsparticles/engine";
+import { useEffect } from "preact/hooks";
 import "./App.css";
 
 export default function App() {
-  const [init, setInit] = useState(false);
-
   useEffect(() => {
-    async function initEngine() {
-      const engine = {} as Engine;
+    void initParticlesEngine(async (engine) => {
       await loadSlim(engine);
-      setInit(true);
-    }
-    initEngine();
+    });
   }, []);
 
   const options: ISourceOptions = {

package/template/qwik/package.json

@@ -10,13 +10,13 @@
   },
   "dependencies": {
     "@builder.io/qwik": "^1.12.0",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/qwik": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/qwik": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "^5.7.0",
-    "vite": "^6.0.0"
+    "vite": "^7.3.6"
   }
 }

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/riot/package.json

@@ -9,14 +9,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "riot": "^9.7.0",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/riot": "^4.1.3"
+    "riot": "^10.1.6",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/riot": "^4.4.0"
   },
   "devDependencies": {
     "rollup-plugin-riot": "^9.0.0",
-    "vite": "^6.0.0"
+    "vite": "^8.3.1",
+    "@riotjs/compiler": "^10.0.4"
   }
 }

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/stencil/package.json

@@ -8,9 +8,9 @@
   },
   "dependencies": {
     "@stencil/core": "^4.25.0",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/stencil": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/stencil": "^4.4.0"
   }
 }

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/vue2/package.json

@@ -9,13 +9,13 @@
   },
   "dependencies": {
     "vue": "^2.7.16",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/vue2": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/vue2": "^4.4.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue2": "^2.3.3",
-    "vite": "^6.0.0"
+    "@vitejs/plugin-vue2": "^2.3.4",
+    "vite": "^7.3.6"
   }
 }

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/webcomponents/package.json

@@ -9,13 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/webcomponents": "^4.1.3"
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/webcomponents": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "^5.7.0",
-    "vite": "^6.0.0"
+    "vite": "^8.3.1"
   }
 }

package/template/webcomponents/src/main.ts

@@ -1,51 +1,53 @@
 import "./style.css";
 import { tsParticles } from "@tsparticles/engine";
 import { loadSlim } from "@tsparticles/slim";
-import "@tsparticles/webcomponents";
+import { defineParticlesElement, initParticlesEngine } from "@tsparticles/webcomponents";
+import type { ISourceOptions } from "@tsparticles/engine";
 
-(async () => {
-  await loadSlim(tsParticles);
+globalThis.tsParticles = tsParticles;
 
-  await tsParticles.load({
-    id: "tsparticles",
-    options: {
-      fullScreen: { enable: true, zIndex: -1 },
-      background: { color: { value: "#080818" } },
-      fpsLimit: 60,
-      particles: {
-        number: { value: 100, density: { enable: true } },
-        color: { value: ["#6c5ce7", "#00cec9", "#fd79a8", "#ffeaa7"] },
-        shape: { type: "circle" },
-        opacity: { value: 0.4, random: true },
-        size: { value: { min: 1, max: 4 }, random: true },
-        links: {
-          enable: true,
-          distance: 150,
-          color: "#6c5ce7",
-          opacity: 0.15,
-          width: 1,
-        },
-        move: {
-          enable: true,
-          speed: 1.5,
-          direction: "none",
-          random: true,
-          straight: false,
-          outModes: { default: "out" },
-        },
-      },
-      interactivity: {
-        events: {
-          onHover: { enable: true, mode: "grab" },
-        },
-        modes: {
-          grab: { distance: 200, links: { opacity: 0.5 } },
-        },
-      },
-      detectRetina: true,
+void initParticlesEngine(async (engine) => {
+  await loadSlim(engine);
+});
+
+defineParticlesElement();
+
+const options: ISourceOptions = {
+  fullScreen: { enable: true, zIndex: -1 },
+  background: { color: { value: "#080818" } },
+  fpsLimit: 60,
+  particles: {
+    number: { value: 100, density: { enable: true } },
+    color: { value: ["#6c5ce7", "#00cec9", "#fd79a8", "#ffeaa7"] },
+    shape: { type: "circle" },
+    opacity: { value: 0.4, random: true },
+    size: { value: { min: 1, max: 4 }, random: true },
+    links: {
+      enable: true,
+      distance: 150,
+      color: "#6c5ce7",
+      opacity: 0.15,
+      width: 1,
+    },
+    move: {
+      enable: true,
+      speed: 1.5,
+      direction: "none",
+      random: true,
+      straight: false,
+      outModes: { default: "out" },
+    },
+  },
+  interactivity: {
+    events: {
+      onHover: { enable: true, mode: "grab" },
     },
-  });
-})();
+    modes: {
+      grab: { distance: 200, links: { opacity: 0.5 } },
+    },
+  },
+  detectRetina: true,
+};
 
 document.body.innerHTML = `
   <web-particles id="tsparticles"></web-particles>
@@ -158,3 +160,7 @@ document.body.innerHTML = `
     </div>
   </footer>
 `;
+
+const particlesEl = document.getElementById("tsparticles");
+
+(particlesEl as unknown as { options: ISourceOptions }).options = options;

package/template.json

@@ -1,13 +1,13 @@
 {
   "package": {
     "dependencies": {
-      "@tsparticles/engine": "^4.1.3",
-      "@tsparticles/slim": "^4.1.3",
-      "@tsparticles/configs": "^4.1.3"
+      "@tsparticles/engine": "^4.5.0",
+      "@tsparticles/slim": "^4.5.0",
+      "@tsparticles/configs": "^4.5.0"
     },
     "devDependencies": {
       "typescript": "^6.0.3",
-      "vite": "^8.1.0"
+      "vite": "^8.3.1"
     }
   }
-}
+}