@tsparticles/template-confetti 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-confetti
+
+tsParticles confetti project template. Use with `create-tsparticles-app` to scaffold a new confetti animation project.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/template-confetti",
-  "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/confetti": "^3.8.1",
+    "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,54 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  background: #1a1a2e;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+#app {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  text-align: center;
+}
+
+h1 {
+  font-size: 3.2em;
+  color: #fff;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}
+
+.controls {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
+  margin-top: 2rem;
+}
+
+button {
+  padding: 0.8em 2em;
+  font-size: 1.1em;
+  border: none;
+  border-radius: 8px;
+  background: #e94560;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: #ff6b81;
+}
+
+select {
+  padding: 0.8em 1em;
+  font-size: 1em;
+  border-radius: 8px;
+  border: 1px solid #444;
+  background: #16213e;
+  color: #fff;
+  cursor: pointer;
+}

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

@@ -0,0 +1,11 @@
+<div id="app">
+  <h1>Confetti!</h1>
+  <div class="controls">
+    <button (click)="fireConfetti()">Fire Confetti</button>
+    <select [(ngModel)]="mode">
+      <option value="cannon">Cannon</option>
+      <option value="waterfall">Waterfall</option>
+      <option value="random">Random</option>
+    </select>
+  </div>
+</div>

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

@@ -0,0 +1,44 @@
+import { Component } from "@angular/core";
+import { confetti } from "@tsparticles/confetti";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent {
+  mode = "cannon";
+
+  randomInRange(min: number, max: number): number {
+    return Math.random() * (max - min) + min;
+  }
+
+  fireConfetti(): void {
+    switch (this.mode) {
+      case "cannon":
+        confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
+        break;
+      case "waterfall": {
+        const duration = 3000;
+        const end = Date.now() + duration;
+        const interval = setInterval(() => {
+          if (Date.now() > end) {
+            clearInterval(interval);
+            return;
+          }
+          confetti({ particleCount: 10, angle: 60, spread: 55, origin: { x: 0, y: 0.6 } });
+          confetti({ particleCount: 10, angle: 120, spread: 55, origin: { x: 1, y: 0.6 } });
+        }, 100);
+        break;
+      }
+      case "random":
+        confetti({
+          angle: this.randomInRange(55, 125),
+          spread: this.randomInRange(50, 70),
+          particleCount: this.randomInRange(50, 100),
+          origin: { y: 0.6 },
+        });
+        break;
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+import { FormsModule } from "@angular/forms";
+import { NgxParticlesModule } from "@tsparticles/angular";
+import { AppComponent } from "./app.component";
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, FormsModule, NgxParticlesModule],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

package/template/angular-confetti/package.json

@@ -0,0 +1,35 @@
+{
+  "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",
+    "angular-confetti": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3",
+    "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,47 @@
+#app {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  text-align: center;
+  color: #fff;
+}
+
+h1 {
+  font-size: 3.2em;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}
+
+.controls {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
+  margin-top: 2rem;
+}
+
+button {
+  padding: 0.8em 2em;
+  font-size: 1.1em;
+  border: none;
+  border-radius: 8px;
+  background: #e94560;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: #ff6b81;
+}
+
+select {
+  padding: 0.8em 1em;
+  font-size: 1em;
+  border-radius: 8px;
+  border: 1px solid #444;
+  background: #16213e;
+  color: #fff;
+  cursor: pointer;
+}

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

@@ -0,0 +1,11 @@
+<div id="app">
+  <h1>Confetti!</h1>
+  <div class="controls">
+    <button (click)="fireConfetti()">Fire Confetti</button>
+    <select [(ngModel)]="mode">
+      <option value="cannon">Cannon</option>
+      <option value="waterfall">Waterfall</option>
+      <option value="random">Random</option>
+    </select>
+  </div>
+</div>

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

@@ -0,0 +1,44 @@
+import { Component } from "@angular/core";
+import { confetti } from "@tsparticles/confetti";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent {
+  mode = "cannon";
+
+  randomInRange(min: number, max: number): number {
+    return Math.random() * (max - min) + min;
+  }
+
+  fireConfetti(): void {
+    switch (this.mode) {
+      case "cannon":
+        confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
+        break;
+      case "waterfall": {
+        const duration = 3000;
+        const end = Date.now() + duration;
+        const interval = setInterval(() => {
+          if (Date.now() > end) {
+            clearInterval(interval);
+            return;
+          }
+          confetti({ particleCount: 10, angle: 60, spread: 55, origin: { x: 0, y: 0.6 } });
+          confetti({ particleCount: 10, angle: 120, spread: 55, origin: { x: 1, y: 0.6 } });
+        }, 100);
+        break;
+      }
+      case "random":
+        confetti({
+          angle: this.randomInRange(55, 125),
+          spread: this.randomInRange(50, 70),
+          particleCount: this.randomInRange(50, 100),
+          origin: { y: 0.6 },
+        });
+        break;
+    }
+  }
+}

package/template/angular-fireworks/package.json

@@ -0,0 +1,35 @@
+{
+  "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",
+    "angular-fireworks": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3",
+    "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,47 @@
+#app {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  text-align: center;
+  color: #fff;
+}
+
+h1 {
+  font-size: 3.2em;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}
+
+.controls {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
+  margin-top: 2rem;
+}
+
+button {
+  padding: 0.8em 2em;
+  font-size: 1.1em;
+  border: none;
+  border-radius: 8px;
+  background: #e94560;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: #ff6b81;
+}
+
+select {
+  padding: 0.8em 1em;
+  font-size: 1em;
+  border-radius: 8px;
+  border: 1px solid #444;
+  background: #16213e;
+  color: #fff;
+  cursor: pointer;
+}

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

@@ -0,0 +1,11 @@
+<div id="app">
+  <h1>Confetti!</h1>
+  <div class="controls">
+    <button (click)="fireConfetti()">Fire Confetti</button>
+    <select [(ngModel)]="mode">
+      <option value="cannon">Cannon</option>
+      <option value="waterfall">Waterfall</option>
+      <option value="random">Random</option>
+    </select>
+  </div>
+</div>

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

@@ -0,0 +1,44 @@
+import { Component } from "@angular/core";
+import { confetti } from "@tsparticles/confetti";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent {
+  mode = "cannon";
+
+  randomInRange(min: number, max: number): number {
+    return Math.random() * (max - min) + min;
+  }
+
+  fireConfetti(): void {
+    switch (this.mode) {
+      case "cannon":
+        confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
+        break;
+      case "waterfall": {
+        const duration = 3000;
+        const end = Date.now() + duration;
+        const interval = setInterval(() => {
+          if (Date.now() > end) {
+            clearInterval(interval);
+            return;
+          }
+          confetti({ particleCount: 10, angle: 60, spread: 55, origin: { x: 0, y: 0.6 } });
+          confetti({ particleCount: 10, angle: 120, spread: 55, origin: { x: 1, y: 0.6 } });
+        }, 100);
+        break;
+      }
+      case "random":
+        confetti({
+          angle: this.randomInRange(55, 125),
+          spread: this.randomInRange(50, 70),
+          particleCount: this.randomInRange(50, 100),
+          origin: { y: 0.6 },
+        });
+        break;
+    }
+  }
+}

package/template/astro/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "astro": "^5.7.10",
+    "@tsparticles/astro": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  }
+}

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

@@ -0,0 +1,77 @@
+---
+import Particles, { initParticlesEngine } from "@tsparticles/astro";
+
+const id = "tsparticles";
+---
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{projectName}}</title>
+    <style>
+      body { margin: 0; overflow: hidden; background: #1a1a2e; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; }
+      #app { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; text-align: center; }
+      h1 { font-size: 3.2em; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
+      .controls { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: 2rem; }
+      button { padding: 0.8em 2em; font-size: 1.1em; border: none; border-radius: 8px; background: #e94560; color: #fff; cursor: pointer; transition: background 0.2s; }
+      button:hover { background: #ff6b81; }
+      select { padding: 0.8em 1em; font-size: 1em; border-radius: 8px; border: 1px solid #444; background: #16213e; color: #fff; cursor: pointer; }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <h1>Confetti!</h1>
+      <div class="controls">
+        <button id="fireBtn">Fire Confetti</button>
+        <select id="modeSelect">
+          <option value="cannon">Cannon</option>
+          <option value="waterfall">Waterfall</option>
+          <option value="random">Random</option>
+        </select>
+      </div>
+    </div>
+    <Particles client:load id={id} options={{}} />
+  </body>
+</html>
+
+<script>
+  import { confetti } from "@tsparticles/confetti";
+
+  function randomInRange(min: number, max: number): number {
+    return Math.random() * (max - min) + min;
+  }
+
+  const fireBtn = document.getElementById("fireBtn") as HTMLButtonElement;
+  const modeSelect = document.getElementById("modeSelect") as HTMLSelectElement;
+
+  fireBtn.addEventListener("click", () => {
+    const mode = modeSelect.value;
+
+    switch (mode) {
+      case "cannon":
+        confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
+        break;
+      case "waterfall": {
+        const duration = 3000;
+        const end = Date.now() + duration;
+        const interval = setInterval(() => {
+          if (Date.now() > end) {
+            clearInterval(interval);
+            return;
+          }
+          confetti({ particleCount: 10, angle: 60, spread: 55, origin: { x: 0, y: 0.6 } });
+          confetti({ particleCount: 10, angle: 120, spread: 55, origin: { x: 1, y: 0.6 } });
+        }, 100);
+        break;
+      }
+      case "random":
+        confetti({
+          angle: randomInRange(55, 125),
+          spread: randomInRange(50, 70),
+          particleCount: randomInRange(50, 100),
+          origin: { y: 0.6 },
+        });
+        break;
+    }
+  });
+</script>

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

@@ -0,0 +1,26 @@
+<div id="particles-container" {{did-insert this.initParticles}} {{particles options=this.options}}>
+</div>
+
+<div id="app">
+  <h1>Confetti!</h1>
+  <div class="controls">
+    <button {{on "click" this.fireConfetti}}>Fire Confetti</button>
+    <select {{on "change" this.setMode}}>
+      <option value="cannon">Cannon</option>
+      <option value="waterfall">Waterfall</option>
+      <option value="random">Random</option>
+    </select>
+  </div>
+</div>
+
+{{outlet}}
+
+<style>
+  body { margin: 0; overflow: hidden; background: #1a1a2e; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; }
+  #app { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; text-align: center; color: #fff; }
+  h1 { font-size: 3.2em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
+  .controls { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: 2rem; }
+  button { padding: 0.8em 2em; font-size: 1.1em; border: none; border-radius: 8px; background: #e94560; color: #fff; cursor: pointer; transition: background 0.2s; }
+  button:hover { background: #ff6b81; }
+  select { padding: 0.8em 1em; font-size: 1em; border-radius: 8px; border: 1px solid #444; background: #16213e; color: #fff; cursor: pointer; }
+</style>

package/template/ember/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "ember serve",
+    "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": {
+    "@tsparticles/ember": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "ember": {
+    "edition": "octane"
+  },
+  "ember-addon": {
+    "configPath": "tests/dummy/config"
+  }
+}

package/template/inferno/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "inferno": "^9.1.0",
+    "@tsparticles/inferno": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3",
+    "vite": "^8.0.14",
+    "babel-plugin-inferno": "^6.8.5",
+    "vite-plugin-inferno": "^2.0.1"
+  }
+}