@tsparticles/template-portfolio 4.4.0 → 4.5.0

package/CHANGELOG.md

@@ -3,11 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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-portfolio
+
 # [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 +29,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-portfolio",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -18,12 +18,12 @@
     "prepack": "pnpm run build"
   },
   "dependencies": {
-    "@tsparticles/configs": "4.4.0",
-    "@tsparticles/engine": "4.4.0",
-    "@tsparticles/slim": "4.4.0"
+    "@tsparticles/configs": "4.5.0",
+    "@tsparticles/engine": "4.5.0",
+    "@tsparticles/slim": "4.5.0"
   },
   "devDependencies": {
     "fs-extra": "^11.3.4"
   },
-  "gitHead": "b7e605098d6ea937d5068c06542671d4891070e4"
+  "gitHead": "a637373a03c008ab38edaaecf6524ec4b8e332c0"
 }

package/scripts/prebuild.js

@@ -52,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,25 +11,25 @@
     "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/configs": "^4.0.0",
-    "@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/configs": "^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

@@ -3,8 +3,10 @@ import { NgParticlesService } from "@tsparticles/angular";
 import { loadSlim } from "@tsparticles/slim";
 import configs from "@tsparticles/configs";
 import type { ISourceOptions } from "@tsparticles/engine";
+import type { FormGroup } from "@angular/forms";
 
 @Component({
+  standalone: false,
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],
@@ -40,7 +42,7 @@ export class AppComponent implements OnInit {
     });
   }
 
-  onSubmit(form: HTMLFormElement): void {
+  onSubmit(form: FormGroup): void {
     alert("Message sent! (demo)");
     form.reset();
   }

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/slim": "^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/slim": "^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.ts

@@ -3,8 +3,10 @@ import { NgParticlesService } from "@tsparticles/angular";
 import { loadSlim } from "@tsparticles/slim";
 import configs from "@tsparticles/configs";
 import type { ISourceOptions } from "@tsparticles/engine";
+import type { FormGroup } from "@angular/forms";
 
 @Component({
+  standalone: false,
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],
@@ -40,7 +42,7 @@ export class AppComponent implements OnInit {
     });
   }
 
-  onSubmit(form: HTMLFormElement): void {
+  onSubmit(form: FormGroup): void {
     alert("Message sent! (demo)");
     form.reset();
   }

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/slim": "^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/slim": "^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.ts

@@ -3,8 +3,10 @@ import { NgParticlesService } from "@tsparticles/angular";
 import { loadSlim } from "@tsparticles/slim";
 import configs from "@tsparticles/configs";
 import type { ISourceOptions } from "@tsparticles/engine";
+import type { FormGroup } from "@angular/forms";
 
 @Component({
+  standalone: false,
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],
@@ -40,7 +42,7 @@ export class AppComponent implements OnInit {
     });
   }
 
-  onSubmit(form: HTMLFormElement): void {
+  onSubmit(form: FormGroup): void {
     alert("Message sent! (demo)");
     form.reset();
   }

package/template/astro/package.json

@@ -9,13 +9,13 @@
     "preview": "astro preview"
   },
   "dependencies": {
-    "@tsparticles/astro": "^4.1.3",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/slim": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "astro": "^5.0.0"
+    "@tsparticles/astro": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "astro": "^7.3.2"
   },
   "devDependencies": {
-    "typescript": "~5.8.0"
+    "typescript": "~6.0.3"
   }
 }

package/template/ember/package.json

@@ -2,24 +2,38 @@
   "name": "{{packageName}}",
   "private": true,
   "version": "{{version}}",
-  "type": "module",
   "scripts": {
     "dev": "ember serve",
     "build": "ember build",
-    "preview": "ember serve --proxy http://localhost:4200",
-    "start": "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": {
-    "@tsparticles/ember": "^4.1.3",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/slim": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "ember-source": "^6.0.0"
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/ember": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0"
   },
-  "devDependencies": {
-    "@ember/optional-features": "^2.1.0",
-    "@glimmer/component": "^2.0.0",
-    "@glimmer/tracking": "^2.0.0",
-    "typescript": "~5.8.0"
+  "ember": {
+    "edition": "octane"
   }
 }

package/template/inferno/package.json

@@ -9,15 +9,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tsparticles/inferno": "^4.1.3",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/slim": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "inferno": "^9.0.0"
+    "@tsparticles/inferno": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "inferno": "^9.1.0",
+    "inferno-create-element": "^9.1.0"
   },
   "devDependencies": {
     "typescript": "~5.8.0",
-    "vite": "^7.0.0",
-    "vite-plugin-inferno": "^1.0.0"
+    "vite": "^8.3.1"
   }
 }

package/template/inferno/src/App.tsx

@@ -1,5 +1,5 @@
 import { Component } from "inferno";
-import Particles, { initParticlesEngine } from "@tsparticles/inferno";
+import { Particles, initParticlesEngine } from "@tsparticles/inferno";
 import { loadSlim } from "@tsparticles/slim";
 import configs from "@tsparticles/configs";
 import type { ISourceOptions } from "@tsparticles/engine";

package/template/jquery/index.html

@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <nav id="navbar">
+      <a href="#hero" class="nav-link">Home</a>
+      <a href="#about" class="nav-link">About</a>
+      <a href="#projects" class="nav-link">Projects</a>
+      <a href="#skills" class="nav-link">Skills</a>
+      <a href="#contact" class="nav-link">Contact</a>
+    </nav>
+    <section id="hero" class="section">
+      <div class="hero-content">
+        <h1>Hello, I'm <span class="highlight">Your Name</span></h1>
+        <p class="subtitle">Full-Stack Developer &amp; Designer</p>
+      </div>
+    </section>
+    <section id="about" class="section content-section">
+      <div class="container">
+        <h2>About Me</h2>
+        <p>A passionate developer who loves building beautiful and performant web applications. Experienced in modern JavaScript frameworks, cloud infrastructure, and UI/UX design.</p>
+      </div>
+    </section>
+    <section id="projects" class="section content-section">
+      <div class="container">
+        <h2>Projects</h2>
+        <div class="project-grid">
+          <div class="project-card">
+            <h3>Project One</h3>
+            <p>A web application built with React and TypeScript.</p>
+          </div>
+          <div class="project-card">
+            <h3>Project Two</h3>
+            <p>Real-time dashboard with data visualization.</p>
+          </div>
+          <div class="project-card">
+            <h3>Project Three</h3>
+            <p>Mobile-first e-commerce platform.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section id="skills" class="section content-section">
+      <div class="container">
+        <h2>Skills</h2>
+        <div class="skill-bar"><span class="skill-name">TypeScript</span><div class="bar"><div class="fill" style="width: 90%"></div></div></div>
+        <div class="skill-bar"><span class="skill-name">React</span><div class="bar"><div class="fill" style="width: 85%"></div></div></div>
+        <div class="skill-bar"><span class="skill-name">Node.js</span><div class="bar"><div class="fill" style="width: 80%"></div></div></div>
+        <div class="skill-bar"><span class="skill-name">CSS</span><div class="bar"><div class="fill" style="width: 88%"></div></div></div>
+      </div>
+    </section>
+    <section id="contact" class="section content-section">
+      <div class="container">
+        <h2>Contact</h2>
+        <form id="contactForm">
+          <input type="text" placeholder="Your Name" required />
+          <input type="email" placeholder="Your Email" required />
+          <textarea placeholder="Your Message" rows="5" required></textarea>
+          <button type="submit">Send Message</button>
+        </form>
+      </div>
+    </section>
+    <div id="tsparticles"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/jquery/package.json

@@ -9,15 +9,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tsparticles/jquery": "^4.1.3",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/slim": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/jquery": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
     "jquery": "^3.7.1"
   },
   "devDependencies": {
     "@types/jquery": "^3.5.30",
     "typescript": "~5.8.0",
-    "vite": "^7.0.0"
+    "vite": "^8.3.1"
   }
 }

package/template/jquery/src/main.ts

@@ -1,6 +1,6 @@
 import "./style.css";
 import $ from "jquery";
-import "jquery-particles";
+import "@tsparticles/jquery";
 import { loadSlim } from "@tsparticles/slim";
 import configs from "@tsparticles/configs";
 import { tsParticles } from "@tsparticles/engine";
@@ -11,7 +11,7 @@ import { tsParticles } from "@tsparticles/engine";
   const keys = Object.keys(configs);
   const randomKey = keys[Math.floor(Math.random() * keys.length)] as keyof typeof configs;
 
-  $("#tsparticles").particles().ajax({
+  $("#tsparticles").particles().load({
     ...configs[randomKey],
     fullScreen: { enable: true, zIndex: -1 },
   });

package/template/lit/package.json

@@ -9,14 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tsparticles/lit": "^4.1.3",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/slim": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "lit": "^3.4.0"
+    "@tsparticles/lit": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "lit": "^3.3.0"
   },
   "devDependencies": {
     "typescript": "~5.8.0",
-    "vite": "^7.0.0"
+    "vite": "^8.3.1"
   }
 }

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

@@ -1,10 +1,10 @@
-import { LitElement, html } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
 import { customElement, state } from "lit/decorators.js";
-import { ParticlesBase } from "@tsparticles/lit";
+import { initParticlesEngine } from "@tsparticles/lit";
 import { loadSlim } from "@tsparticles/slim";
 import configs from "@tsparticles/configs";
 import type { ISourceOptions } from "@tsparticles/engine";
-import style from "./style.css" with { type: "css" };
+import style from "./style.css?inline";
 
 const keys = Object.keys(configs);
 const randomKey = keys[Math.floor(Math.random() * keys.length)] as keyof typeof configs;
@@ -15,7 +15,7 @@ const options: ISourceOptions = {
 
 @customElement("my-app")
 export class MyApp extends LitElement {
-  static styles = [style];
+  static styles = [unsafeCSS(style)];
 
   @state()
   private projects = [
@@ -36,7 +36,7 @@ export class MyApp extends LitElement {
 
   connectedCallback(): void {
     super.connectedCallback();
-    void ParticlesBase.init(async (engine) => {
+    void initParticlesEngine(async (engine) => {
       await loadSlim(engine);
     });
   }

package/template/nextjs/package.json

@@ -9,17 +9,18 @@
     "preview": "next start"
   },
   "dependencies": {
-    "@tsparticles/nextjs": "^4.1.3",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/slim": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/nextjs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
     "next": "^15.0.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"
   },
   "devDependencies": {
+    "@types/node": "^24.10.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "typescript": "~5.8.0"
+    "typescript": "^6.0.3"
   }
 }

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

@@ -1,6 +1,6 @@
 "use client";
 
-import Particles from "@tsparticles/nextjs";
+import { NextParticles } from "@tsparticles/nextjs";
 import configs from "@tsparticles/configs";
 import type { ISourceOptions } from "@tsparticles/engine";
 import { ParticlesProvider } from "./providers";
@@ -36,7 +36,7 @@ export default function Home() {
 
   return (
     <ParticlesProvider>
-      <Particles id="tsparticles" options={options} />
+      <NextParticles id="tsparticles" options={options} />
       <nav id="navbar">
         {navItems.map((item) => (
           <a key={item} href={`#${item.toLowerCase()}`} className="nav-link">{item}</a>

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

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

package/template/nuxt2/package.json

@@ -8,14 +8,20 @@
     "preview": "nuxt start"
   },
   "dependencies": {
-    "@tsparticles/nuxt2": "^4.1.3",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/slim": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/nuxt2": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
     "nuxt": "^2.18.0",
     "vue": "^2.7.16"
   },
   "devDependencies": {
-    "typescript": "~5.8.0"
-  }
+    "@babel/preset-env": "^7.29.0"
+  },
+  "browserslist": [
+    "chrome 58",
+    "edge 16",
+    "firefox 57",
+    "safari 11"
+  ]
 }

package/template/nuxt2/pages/index.vue

@@ -50,15 +50,14 @@
   </div>
 </template>
 
-<script lang="ts">
+<script>
 import Vue from "vue";
 import configs from "@tsparticles/configs";
-import type { ISourceOptions } from "@tsparticles/engine";
 
 const keys = Object.keys(configs);
-const randomKey = keys[Math.floor(Math.random() * keys.length)] as keyof typeof configs;
-const options: ISourceOptions = {
-  ...(configs[randomKey] as ISourceOptions),
+const randomKey = keys[Math.floor(Math.random() * keys.length)];
+const options = {
+  ...configs[randomKey],
   fullScreen: { enable: true, zIndex: -1 },
 };
 
@@ -82,10 +81,10 @@ export default Vue.extend({
     };
   },
   methods: {
-    handleSubmit(e: Event) {
+    handleSubmit(e) {
       e.preventDefault();
       alert("Message sent! (demo)");
-      (e.target as HTMLFormElement).reset();
+      e.target.reset();
     },
   },
 });

package/template/nuxt3/package.json

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

package/template/nuxt4/package.json

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

package/template/preact/package.json

@@ -9,14 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tsparticles/preact": "^4.1.3",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/slim": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/preact": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
     "preact": "^10.26.0"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^3.0.0",
+    "@preact/preset-vite": "^2.10.1",
     "typescript": "~5.8.0"
   }
 }

package/template/preact/src/App.tsx

@@ -31,7 +31,7 @@ const skills = [
   { name: "CSS", pct: 88 },
 ];
 
-export function App() {
+export default function App() {
   function handleSubmit(e: h.JSX.TargetedEvent<HTMLFormElement>) {
     e.preventDefault();
     alert("Message sent! (demo)");

package/template/qwik/package.json

@@ -9,13 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tsparticles/qwik": "^4.1.3",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/slim": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/qwik": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
     "@builder.io/qwik": "^1.12.0"
   },
   "devDependencies": {
-    "typescript": "~5.8.0"
+    "typescript": "~5.8.0",
+    "vite": "^7.3.6"
   }
 }

package/template/qwik/src/App.tsx

@@ -1,5 +1,5 @@
 import { component$, useVisibleTask$, useSignal } from "@builder.io/qwik";
-import Particles, { initParticlesEngine } from "@tsparticles/qwik";
+import { Particles, initParticlesEngine } from "@tsparticles/qwik";
 import { loadSlim } from "@tsparticles/slim";
 import configs from "@tsparticles/configs";
 import type { ISourceOptions } from "@tsparticles/engine";

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,15 +9,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tsparticles/riot": "^4.1.3",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/slim": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
-    "riot": "^9.5.0"
+    "@tsparticles/riot": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "riot": "^10.1.6"
   },
   "devDependencies": {
     "rollup-plugin-riot": "^9.0.0",
     "typescript": "~5.8.0",
-    "vite": "^7.0.0"
+    "vite": "^8.3.1",
+    "@riotjs/compiler": "^10.0.4"
   }
 }

package/template/riot/src/app.riot

@@ -55,7 +55,6 @@
 
   <script>
     import configs from "@tsparticles/configs";
-    import type { ISourceOptions } from "@tsparticles/engine";
 
     const keys = Object.keys(configs);
     const randomKey = keys[Math.floor(Math.random() * keys.length)];

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

@@ -9,10 +9,10 @@
     "preview": "stencil build --dev --watch"
   },
   "dependencies": {
-    "@tsparticles/stencil": "^4.1.3",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/slim": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/stencil": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
     "@stencil/core": "^4.20.0"
   },
   "devDependencies": {

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

@@ -1,8 +1,7 @@
 import { Component, State, h } from "@stencil/core";
-import { ParticlesBase } from "@tsparticles/stencil";
 import { loadSlim } from "@tsparticles/slim";
+import { tsParticles, type ISourceOptions } from "@tsparticles/engine";
 import configs from "@tsparticles/configs";
-import type { ISourceOptions } from "@tsparticles/engine";
 
 const keys = Object.keys(configs);
 const randomKey = keys[Math.floor(Math.random() * keys.length)] as keyof typeof configs;
@@ -35,10 +34,8 @@ export class AppHome {
     { name: "CSS", pct: 88 },
   ];
 
-  connectedCallback(): void {
-    void ParticlesBase.init(async (engine) => {
-      await loadSlim(engine);
-    });
+  async componentDidLoad(): Promise<void> {
+    await loadSlim(tsParticles);
   }
 
   private handleSubmit(e: Event): void {
@@ -50,7 +47,7 @@ export class AppHome {
   render() {
     return (
       <div>
-        <ts-particles id="tsparticles" options={options}></ts-particles>
+        <stencil-particles id="tsparticles" options={options}></stencil-particles>
         <nav id="navbar">
           {this.navItems.map((item) => (
             <a href={`#${item.toLowerCase()}`} class="nav-link">{item}</a>

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

@@ -8,15 +8,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tsparticles/vue2": "^4.1.3",
-    "@tsparticles/engine": "^4.0.0",
-    "@tsparticles/slim": "^4.0.0",
-    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/vue2": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
     "vue": "^2.7.16"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue2": "^2.3.0",
+    "@vitejs/plugin-vue2": "^2.3.4",
     "typescript": "~5.8.0",
-    "vite": "^7.0.0"
+    "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/index.html

@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <nav id="navbar">
+      <a href="#hero" class="nav-link">Home</a>
+      <a href="#about" class="nav-link">About</a>
+      <a href="#projects" class="nav-link">Projects</a>
+      <a href="#skills" class="nav-link">Skills</a>
+      <a href="#contact" class="nav-link">Contact</a>
+    </nav>
+    <section id="hero" class="section">
+      <div class="hero-content">
+        <h1>Hello, I'm <span class="highlight">Your Name</span></h1>
+        <p class="subtitle">Full-Stack Developer &amp; Designer</p>
+      </div>
+    </section>
+    <section id="about" class="section content-section">
+      <div class="container">
+        <h2>About Me</h2>
+        <p>A passionate developer who loves building beautiful and performant web applications. Experienced in modern JavaScript frameworks, cloud infrastructure, and UI/UX design.</p>
+      </div>
+    </section>
+    <section id="projects" class="section content-section">
+      <div class="container">
+        <h2>Projects</h2>
+        <div class="project-grid">
+          <div class="project-card">
+            <h3>Project One</h3>
+            <p>A web application built with React and TypeScript.</p>
+          </div>
+          <div class="project-card">
+            <h3>Project Two</h3>
+            <p>Real-time dashboard with data visualization.</p>
+          </div>
+          <div class="project-card">
+            <h3>Project Three</h3>
+            <p>Mobile-first e-commerce platform.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section id="skills" class="section content-section">
+      <div class="container">
+        <h2>Skills</h2>
+        <div class="skill-bar"><span class="skill-name">TypeScript</span><div class="bar"><div class="fill" style="width: 90%"></div></div></div>
+        <div class="skill-bar"><span class="skill-name">React</span><div class="bar"><div class="fill" style="width: 85%"></div></div></div>
+        <div class="skill-bar"><span class="skill-name">Node.js</span><div class="bar"><div class="fill" style="width: 80%"></div></div></div>
+        <div class="skill-bar"><span class="skill-name">CSS</span><div class="bar"><div class="fill" style="width: 88%"></div></div></div>
+      </div>
+    </section>
+    <section id="contact" class="section content-section">
+      <div class="container">
+        <h2>Contact</h2>
+        <form id="contactForm">
+          <input type="text" placeholder="Your Name" required />
+          <input type="email" placeholder="Your Email" required />
+          <textarea placeholder="Your Message" rows="5" required></textarea>
+          <button type="submit">Send Message</button>
+        </form>
+      </div>
+    </section>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/webcomponents/package.json

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

package/template/webcomponents/src/main.ts

@@ -1,14 +1,19 @@
 import "./style.css";
-import { ParticlesBase } from "@tsparticles/webcomponents";
+import { tsParticles } from "@tsparticles/engine";
+import { defineParticlesElement, initParticlesEngine } from "@tsparticles/webcomponents";
 import { loadSlim } from "@tsparticles/slim";
 import configs from "@tsparticles/configs";
 import type { ISourceOptions } from "@tsparticles/engine";
 
+globalThis.tsParticles = tsParticles;
+
 (async () => {
-  await ParticlesBase.init(async (engine) => {
+  await initParticlesEngine(async (engine) => {
     await loadSlim(engine);
   });
 
+  defineParticlesElement();
+
   const keys = Object.keys(configs);
   const randomKey = keys[Math.floor(Math.random() * keys.length)] as keyof typeof configs;
   const options: ISourceOptions = {

package/template.json

@@ -1,13 +1,13 @@
 {
   "package": {
     "dependencies": {
-      "@tsparticles/engine": "^4.4.0",
-      "@tsparticles/slim": "^4.4.0",
-      "@tsparticles/configs": "^4.4.0"
+      "@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"
     }
   }
-}
+}