@tsparticles/template-scaffold 4.1.3 → 4.2.1

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# 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))
+
+# [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-scaffold
+
+tsParticles scaffold template. Use with `create-tsparticles-app` to scaffold a new tsParticles project.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/template-scaffold",
-  "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/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Matteo Bruni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/template/angular/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "{{projectName}}",
+  "name": "{{packageName}}",
   "private": true,
   "version": "1.0.0",
   "scripts": {

package/template/angular-confetti/.browserslistrc

@@ -0,0 +1,6 @@
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/template/angular-confetti/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

package/template/angular-confetti/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Matteo Bruni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/template/angular-confetti/README.md

@@ -0,0 +1,10 @@
+# {{projectName}}
+
+A tsParticles Angular Confetti project scaffolded with [tsparticles-create](https://github.com/tsparticles/tsparticles).
+
+## Getting started
+
+```bash
+npm install
+npm run dev
+```

package/template/angular-confetti/angular.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "{{projectName}}": {
+      "projectType": "application",
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.app.json",
+            "assets": ["src/favicon.ico"],
+            "styles": ["src/styles.css"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": { "buildTarget": "{{projectName}}:build:production" },
+            "development": { "buildTarget": "{{projectName}}:build:development" }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  }
+}

package/template/angular-confetti/gitignore

@@ -0,0 +1,17 @@
+# dependencies
+/node_modules
+
+# production
+/dist
+
+# Angular CLI cache
+.angular/cache
+
+# misc
+.DS_Store
+*.local
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package/template/angular-confetti/package.json

@@ -0,0 +1,34 @@
+{
+  "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",
+    "angular-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,15 @@
+#app-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  text-align: center;
+  color: #fff;
+  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-content">
+  <h1>Hello, tsParticles!</h1>
+</div>
+<ngx-confetti id="tsparticles" [options]="options" [fire]="true" />

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

@@ -0,0 +1,27 @@
+import { Component } from "@angular/core";
+import type { ConfettiOptions } from "@tsparticles/confetti";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent {
+  options: ConfettiOptions = {
+    angle: 90,
+    count: 50,
+    spread: 45,
+    startVelocity: 45,
+    decay: 0.9,
+    gravity: 1,
+    drift: 0,
+    ticks: 200,
+    position: { x: 50, y: 50 },
+    colors: ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42", "#ffa62d", "#ff36ff"],
+    shapes: ["square", "circle"],
+    scalar: 1,
+    zIndex: 100,
+    disableForReducedMotion: true,
+    flat: false,
+  };
+}

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

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

package/template/angular-confetti/src/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>{{projectName}}</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

package/template/angular-confetti/src/main.ts

@@ -0,0 +1,6 @@
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app/app.module";
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));

package/template/angular-confetti/src/polyfills.ts

@@ -0,0 +1 @@
+import "zone.js";

package/template/angular-confetti/src/styles.css

@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}

package/template/angular-confetti/tsconfig.app.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
+}

package/template/angular-confetti/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "ignoreDeprecations": "6.0",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022", "dom"]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/template/angular-confetti/tsconfig.spec.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": ["jasmine"]
+  },
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}

package/template/angular-fireworks/.browserslistrc

@@ -0,0 +1,6 @@
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/template/angular-fireworks/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

package/template/angular-fireworks/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Matteo Bruni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/template/angular-fireworks/README.md

@@ -0,0 +1,10 @@
+# {{projectName}}
+
+A tsParticles Angular Fireworks project scaffolded with [tsparticles-create](https://github.com/tsparticles/tsparticles).
+
+## Getting started
+
+```bash
+npm install
+npm run dev
+```

package/template/angular-fireworks/angular.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "{{projectName}}": {
+      "projectType": "application",
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.app.json",
+            "assets": ["src/favicon.ico"],
+            "styles": ["src/styles.css"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": { "buildTarget": "{{projectName}}:build:production" },
+            "development": { "buildTarget": "{{projectName}}:build:development" }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  }
+}

package/template/angular-fireworks/gitignore

@@ -0,0 +1,17 @@
+# dependencies
+/node_modules
+
+# production
+/dist
+
+# Angular CLI cache
+.angular/cache
+
+# misc
+.DS_Store
+*.local
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package/template/angular-fireworks/package.json

@@ -0,0 +1,34 @@
+{
+  "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",
+    "angular-fireworks": "^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,15 @@
+#app-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  text-align: center;
+  color: #fff;
+  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-content">
+  <h1>Hello, tsParticles!</h1>
+</div>
+<ngx-fireworks id="tsparticles" [options]="options" />

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

@@ -0,0 +1,29 @@
+import { Component } from "@angular/core";
+import type { FireworkOptions } from "@tsparticles/fireworks";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent {
+  options: FireworkOptions = {
+    background: "none",
+    brightness: { min: -30, max: 30 },
+    colors: [
+      "#FF0000", "#FF2A00", "#FF5500", "#FF8000", "#FFAA00", "#FFD400",
+      "#FFFF00", "#D4FF00", "#AAFF00", "#80FF00", "#55FF00", "#2AFF00",
+      "#00FF00", "#00FF2A", "#00FF55", "#00FF80", "#00FFAA", "#00FFD4",
+      "#00FFFF", "#00D4FF", "#00AAFF", "#0080FF", "#0055FF", "#002AFF",
+      "#0000FF", "#2A00FF", "#5500FF", "#8000FF", "#AA00FF", "#D400FF",
+      "#FF00FF", "#FF00D4", "#FF00AA", "#FF0080", "#FF0055", "#FF002A",
+    ],
+    gravity: 30,
+    minHeight: { min: 10, max: 30 },
+    rate: 10,
+    saturation: { min: -30, max: 30 },
+    sounds: true,
+    speed: { min: 20, max: 40 },
+    splitCount: 100,
+  };
+}

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

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

package/template/angular-fireworks/src/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>{{projectName}}</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

package/template/angular-fireworks/src/main.ts

@@ -0,0 +1,6 @@
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app/app.module";
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));

package/template/angular-fireworks/src/polyfills.ts

@@ -0,0 +1 @@
+import "zone.js";

package/template/angular-fireworks/src/styles.css

@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}

package/template/angular-fireworks/tsconfig.app.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
+}