@tsparticles/template-ribbons 4.1.3 → 4.2.1

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# 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.1](https://github.com/tsparticles/tsparticles/compare/v4.2.0...v4.2.1) (2026-06-18)
+
+### Bug Fixes
+
+- fixed some various issues ([8534979](https://github.com/tsparticles/tsparticles/commit/85349791a4978f80f98f141a94a403a7e15785c0))
+- fixed some versions issues ([0948d06](https://github.com/tsparticles/tsparticles/commit/0948d06b0907aeacde33dd5a12b7438ae2b370a1))
+
+# [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-ribbons
+
+tsParticles ribbons template. Use with `create-tsparticles-app` to scaffold a new ribbons animation project.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/template-ribbons",
-  "version": "4.1.3",
+  "version": "4.2.1",
   "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": "e2a7699c1f4212bbda4e6933970c062e6fc000dc"
 }

package/template/angular/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "{{packageName}}",
+  "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": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+
+    "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,40 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  background: #0a0a23;
+  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 {
+  margin-top: 2rem;
+}
+
+button {
+  padding: 0.8em 2em;
+  font-size: 1.1em;
+  border: none;
+  border-radius: 8px;
+  background: #6c5ce7;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: #a29bfe;
+}

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

@@ -0,0 +1,6 @@
+<div id="app">
+  <h1>Ribbons</h1>
+  <div class="controls">
+    <button (click)="fireRibbons()">Fire Ribbons</button>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+import { ribbons } from "@tsparticles/ribbons";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent {
+  fireRibbons(): void {
+    ribbons();
+  }
+}

package/template/angular-confetti/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "{{packageName}}",
+  "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": "workspace:*",
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+
+    "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,40 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  background: #0a0a23;
+  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 {
+  margin-top: 2rem;
+}
+
+button {
+  padding: 0.8em 2em;
+  font-size: 1.1em;
+  border: none;
+  border-radius: 8px;
+  background: #6c5ce7;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: #a29bfe;
+}

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

@@ -0,0 +1,6 @@
+<div id="app">
+  <h1>Ribbons</h1>
+  <div class="controls">
+    <button (click)="fireRibbons()">Fire Ribbons</button>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+import { ribbons } from "@tsparticles/ribbons";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent {
+  fireRibbons(): void {
+    ribbons();
+  }
+}

package/template/angular-fireworks/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "{{packageName}}",
+  "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": "workspace:*",
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+
+    "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,40 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  background: #0a0a23;
+  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 {
+  margin-top: 2rem;
+}
+
+button {
+  padding: 0.8em 2em;
+  font-size: 1.1em;
+  border: none;
+  border-radius: 8px;
+  background: #6c5ce7;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: #a29bfe;
+}

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

@@ -0,0 +1,6 @@
+<div id="app">
+  <h1>Ribbons</h1>
+  <div class="controls">
+    <button (click)="fireRibbons()">Fire Ribbons</button>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+import { ribbons } from "@tsparticles/ribbons";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent {
+  fireRibbons(): void {
+    ribbons();
+  }
+}

package/template/astro/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "@tsparticles/astro": "workspace:*",
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+
+    "astro": "^5.0.0"
+  }
+}

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

@@ -0,0 +1,70 @@
+---
+import { ribbons } from "@tsparticles/ribbons";
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ribbons</title>
+  </head>
+  <body>
+    <div id="app">
+      <h1>Ribbons</h1>
+      <div class="controls">
+        <button id="fireBtn">Fire Ribbons</button>
+      </div>
+    </div>
+
+    <script>
+      import { ribbons } from "@tsparticles/ribbons";
+
+      document.getElementById("fireBtn")!.addEventListener("click", () => {
+        ribbons();
+      });
+    </script>
+
+    <style is:global>
+      body {
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a23;
+        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 {
+        margin-top: 2rem;
+      }
+
+      button {
+        padding: 0.8em 2em;
+        font-size: 1.1em;
+        border: none;
+        border-radius: 8px;
+        background: #6c5ce7;
+        color: #fff;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+
+      button:hover {
+        background: #a29bfe;
+      }
+    </style>
+  </body>
+</html>

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

@@ -0,0 +1,6 @@
+<div id="app">
+  <h1>Ribbons</h1>
+  <div class="controls">
+    <button type="button" {{on "click" this.fireRibbons}}>Fire Ribbons</button>
+  </div>
+</div>

package/template/ember/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "build": "ember build",
+    "start": "ember serve",
+    "preview": "ember serve",
+    "dev": "ember serve"
+  },
+  "dependencies": {
+    "@tsparticles/ember": "workspace:*",
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*"
+ },
+  "devDependencies": {
+    "ember-cli": "~6.4.0",
+    "ember-source": "~6.4.0"
+  }
+}

package/template/inferno/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+    "@tsparticles/inferno": "workspace:*",
+
+    "inferno": "^8.2.0"
+  },
+  "devDependencies": {
+    "babel-plugin-inferno": "^6.5.0",
+    "vite-plugin-inferno": "^1.0.0"
+  }
+}

package/template/inferno/src/App.css

@@ -0,0 +1,40 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  background: #0a0a23;
+  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 {
+  margin-top: 2rem;
+}
+
+button {
+  padding: 0.8em 2em;
+  font-size: 1.1em;
+  border: none;
+  border-radius: 8px;
+  background: #6c5ce7;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: #a29bfe;
+}

package/template/inferno/src/App.tsx

@@ -0,0 +1,13 @@
+import { ribbons } from "@tsparticles/ribbons";
+import "./App.css";
+
+export default function App() {
+  return (
+    <div id="app">
+      <h1>Ribbons</h1>
+      <div class="controls">
+        <button onClick={() => ribbons()}>Fire Ribbons</button>
+      </div>
+    </div>
+  );
+}

package/template/jquery/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+    "@tsparticles/jquery": "workspace:*",
+
+    "jquery": "^3.7.1"
+  },
+  "devDependencies": {
+    "@types/jquery": "^3.5.32"
+  }
+}

package/template/jquery/src/main.ts

@@ -0,0 +1,7 @@
+import "./style.css";
+import $ from "jquery";
+import { ribbons } from "@tsparticles/ribbons";
+
+$(() => {
+  $("#fireBtn").on("click", () => ribbons());
+});

package/template/jquery/src/style.css

@@ -0,0 +1,40 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  background: #0a0a23;
+  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 {
+  margin-top: 2rem;
+}
+
+button {
+  padding: 0.8em 2em;
+  font-size: 1.1em;
+  border: none;
+  border-radius: 8px;
+  background: #6c5ce7;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: #a29bfe;
+}

package/template/lit/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+    "@tsparticles/lit": "workspace:*",
+
+    "lit": "^3.1.0"
+  },
+  "devDependencies": {
+    "typescript": "~5.8.2"
+  }
+}

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

@@ -0,0 +1,23 @@
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { initParticlesEngine } from "@tsparticles/lit";
+import { ribbons } from "@tsparticles/ribbons";
+import { confetti } from "@tsparticles/confetti";
+
+@customElement("my-app")
+export class MyApp extends LitElement {
+  private fireRibbons(): void {
+    ribbons();
+  }
+
+  render() {
+    return html`
+      <div id="app">
+        <h1>Ribbons</h1>
+        <div class="controls">
+          <button @click=${this.fireRibbons}>Fire Ribbons</button>
+        </div>
+      </div>
+    `;
+  }
+}

package/template/nextjs/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "preview": "next start"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+
+    "@tsparticles/react": "workspace:*",
+    "next": "^15.0.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
+  }
+}