@tsparticles/template-particles 4.1.3 → 4.2.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [4.2.0](https://github.com/tsparticles/tsparticles/compare/v4.1.3...v4.2.0) (2026-06-17)
+
+### Features
+
+- adding templates to cli create ([bc118ef](https://github.com/tsparticles/tsparticles/commit/bc118efa3f40497f9fa84186ac6102411a19fda7))

package/README.md

@@ -0,0 +1,3 @@
+# @tsparticles/template-particles
+
+tsParticles base particles template. Use with `create-tsparticles-app` to scaffold a new project with a full-screen particle animation.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/template-particles",
-  "version": "4.1.3",
+  "version": "4.2.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -8,7 +8,8 @@
   "scripts": {
     "prebuild": "node scripts/prebuild.js",
     "build": "pnpm run prebuild",
-    "build:ci": "pnpm run prebuild"
+    "build:ci": "pnpm run prebuild",
+    "version": "pnpm run build && git add template.json"
   },
-  "gitHead": "0551736c55ae8eec3855a693af8a99b1b4420350"
+  "gitHead": "0a0fbf89c6cb3e1c2395763f55dabecfa85618f9"
 }

package/template/angular/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "dev": "ng serve",
+    "build": "ng build",
+    "preview": "ng serve",
+    "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",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
+    "zone.js": "~0.16.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~22.0.0",
+    "@angular/cli": "~22.0.0",
+    "@angular/compiler-cli": "~22.0.0",
+    "typescript": "~6.0.3"
+  }
+}

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

@@ -0,0 +1,16 @@
+#app {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  text-align: center;
+  color: #fff;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  pointer-events: none;
+}
+
+h1 {
+  font-size: 3.2em;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}

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

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

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

@@ -0,0 +1,38 @@
+import { Component, OnInit } from "@angular/core";
+import { NgParticlesService } from "@tsparticles/angular";
+import { loadParticles } from "@tsparticles/particles";
+import type { ISourceOptions } from "@tsparticles/engine";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent implements OnInit {
+  constructor(private readonly ngParticlesService: NgParticlesService) {}
+
+  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,
+  };
+
+  ngOnInit(): void {
+    void this.ngParticlesService.init(async (engine) => {
+      await loadParticles(engine);
+    });
+  }
+}

package/template/angular-confetti/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "dev": "ng serve",
+    "build": "ng build",
+    "preview": "ng serve",
+    "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",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
+    "zone.js": "~0.16.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~22.0.0",
+    "@angular/cli": "~22.0.0",
+    "@angular/compiler-cli": "~22.0.0",
+    "typescript": "~6.0.3"
+  }
+}

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

@@ -0,0 +1,16 @@
+#app {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  text-align: center;
+  color: #fff;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  pointer-events: none;
+}
+
+h1 {
+  font-size: 3.2em;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}

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

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

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

@@ -0,0 +1,38 @@
+import { Component, OnInit } from "@angular/core";
+import { NgParticlesService } from "@tsparticles/angular";
+import { loadParticles } from "@tsparticles/particles";
+import type { ISourceOptions } from "@tsparticles/engine";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent implements OnInit {
+  constructor(private readonly ngParticlesService: NgParticlesService) {}
+
+  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,
+  };
+
+  ngOnInit(): void {
+    void this.ngParticlesService.init(async (engine) => {
+      await loadParticles(engine);
+    });
+  }
+}

package/template/angular-fireworks/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "dev": "ng serve",
+    "build": "ng build",
+    "preview": "ng serve",
+    "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",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
+    "zone.js": "~0.16.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~22.0.0",
+    "@angular/cli": "~22.0.0",
+    "@angular/compiler-cli": "~22.0.0",
+    "typescript": "~6.0.3"
+  }
+}

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

@@ -0,0 +1,16 @@
+#app {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  text-align: center;
+  color: #fff;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  pointer-events: none;
+}
+
+h1 {
+  font-size: 3.2em;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}

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

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

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

@@ -0,0 +1,38 @@
+import { Component, OnInit } from "@angular/core";
+import { NgParticlesService } from "@tsparticles/angular";
+import { loadParticles } from "@tsparticles/particles";
+import type { ISourceOptions } from "@tsparticles/engine";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent implements OnInit {
+  constructor(private readonly ngParticlesService: NgParticlesService) {}
+
+  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,
+  };
+
+  ngOnInit(): void {
+    void this.ngParticlesService.init(async (engine) => {
+      await loadParticles(engine);
+    });
+  }
+}

package/template/astro/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "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"
+  }
+}

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

@@ -0,0 +1,53 @@
+---
+import { loadParticles } from "@tsparticles/particles";
+import { tsParticles } from "@tsparticles/engine";
+import type { ISourceOptions } from "@tsparticles/engine";
+
+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,
+};
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>tsParticles</title>
+    <style>
+      body { margin: 0; overflow: hidden; }
+      #app {
+        position: absolute; top: 50%; left: 50%;
+        transform: translate(-50%, -50%); z-index: 10;
+        text-align: center; color: #fff;
+        font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+        pointer-events: none;
+      }
+      h1 { font-size: 3.2em; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <h1>tsParticles</h1>
+    </div>
+    <Particles id="tsparticles" options={options} client:load />
+    <script>
+      import { loadParticles } from "@tsparticles/particles";
+      import { tsParticles } from "@tsparticles/engine";
+      void loadParticles(tsParticles);
+    </script>
+  </body>
+</html>

package/template/ember/app/templates/application.hbs

@@ -0,0 +1,4 @@
+<div id="app">
+  <h1>tsParticles</h1>
+</div>
+<EmberParticles @id="tsparticles" @options={{this.options}} />

package/template/ember/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "ember serve",
+    "build": "ember build",
+    "preview": "ember serve"
+  },
+  "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"
+  },
+  "devDependencies": {
+    "ember-cli": "^6.3.1"
+  }
+}

package/template/inferno/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "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"
+  },
+  "devDependencies": {
+    "typescript": "~5.8.3"
+  }
+}

package/template/inferno/src/App.css

@@ -0,0 +1,21 @@
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+#app {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  text-align: center;
+  color: #fff;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  pointer-events: none;
+}
+
+h1 {
+  font-size: 3.2em;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}

package/template/inferno/src/App.tsx

@@ -0,0 +1,42 @@
+import { Component } from "inferno";
+import Particles from "@tsparticles/inferno";
+import { loadParticles } from "@tsparticles/particles";
+import { tsParticles } from "@tsparticles/engine";
+import type { ISourceOptions } from "@tsparticles/engine";
+import "./App.css";
+
+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,
+};
+
+export default class App extends Component {
+  componentDidMount() {
+    void loadParticles(tsParticles);
+  }
+
+  render() {
+    return (
+      <>
+        <div id="app">
+          <h1>tsParticles</h1>
+        </div>
+        <Particles id="tsparticles" options={options} />
+      </>
+    );
+  }
+}

package/template/jquery/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "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"
+  },
+  "devDependencies": {
+    "typescript": "~5.8.3"
+  }
+}

package/template/jquery/src/main.ts

@@ -0,0 +1,49 @@
+import "./style.css";
+import $ from "jquery";
+import { loadParticles } from "@tsparticles/particles";
+import { tsParticles } from "@tsparticles/engine";
+
+(async () => {
+  await loadParticles(tsParticles);
+
+  $(() => {
+    $("#app").after('<div id="tsparticles"></div>');
+    $("#tsparticles").particles({
+      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,
+    });
+  });
+})();

package/template/jquery/src/style.css

@@ -0,0 +1,21 @@
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+#app {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  text-align: center;
+  color: #fff;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  pointer-events: none;
+}
+
+h1 {
+  font-size: 3.2em;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}

package/template/lit/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "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"
+  },
+  "devDependencies": {
+    "typescript": "~5.8.3"
+  }
+}