@tsparticles/template-scaffold 4.1.3

package/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/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@tsparticles/template-scaffold",
+  "version": "4.1.3",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prebuild": "node scripts/prebuild.js",
+    "build": "pnpm run prebuild",
+    "build:ci": "pnpm run prebuild"
+  },
+  "gitHead": "0551736c55ae8eec3855a693af8a99b1b4420350"
+}

package/scripts/prebuild.js

@@ -0,0 +1,65 @@
+const fs = require("fs-extra");
+
+const libPackage = "./template.json";
+
+const workspaceVersions = {
+  "@tsparticles/engine": require("../../../engine/package.json").version,
+  "@tsparticles/slim": require("../../../bundles/slim/package.json").version,
+  "@tsparticles/configs": require("../../../utils/configs/package.json").version,
+};
+
+function resolveWorkspaceDependency(name) {
+  const libObj = JSON.parse(fs.readFileSync(libPackage, "utf-8"));
+
+  const allDeps = {
+    ...libObj.package.dependencies,
+    ...libObj.package.devDependencies,
+  };
+
+  const spec = allDeps[name];
+
+  if (!spec?.startsWith("workspace:")) {
+    return spec;
+  }
+
+  const workspaceRange = spec.replace("workspace:", "");
+
+  if (workspaceRange.length > 0 && workspaceRange !== "*" && workspaceRange !== "^" && workspaceRange !== "~") {
+    return workspaceRange;
+  }
+
+  const version = workspaceVersions[name];
+
+  if (!version) {
+    throw new Error(`Cannot resolve workspace dependency version for ${name}`);
+  }
+
+  return workspaceRange === "^" || workspaceRange === "~" ? `${workspaceRange}${version}` : `^${version}`;
+}
+
+fs.readFile(libPackage, function (error, data) {
+  if (error) {
+    throw error;
+  }
+
+  const text = data.toString();
+  const libObj = JSON.parse(text);
+
+  for (const dep of Object.keys(libObj.package.dependencies)) {
+    const resolved = resolveWorkspaceDependency(dep);
+    if (resolved) {
+      libObj.package.dependencies[dep] = resolved;
+    }
+  }
+
+  for (const dep of Object.keys(libObj.package.devDependencies)) {
+    const resolved = resolveWorkspaceDependency(dep);
+    if (resolved) {
+      libObj.package.devDependencies[dep] = resolved;
+    }
+  }
+
+  fs.writeFile(libPackage, JSON.stringify(libObj, undefined, 2), "utf-8", function () {
+    console.log("template.json dependencies updated successfully");
+  });
+});

package/template/angular/.browserslistrc

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

package/template/angular/.editorconfig

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

package/template/angular/README.md

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

package/template/angular/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/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/package.json

@@ -0,0 +1,33 @@
+{
+  "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",
+    "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,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/src/app/app.component.html

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

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

@@ -0,0 +1,41 @@
+import { Component, OnInit } from "@angular/core";
+import { NgParticlesService } from "@tsparticles/angular";
+import { loadSlim } from "@tsparticles/slim";
+import type { ISourceOptions } from "@tsparticles/engine";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent implements OnInit {
+  options: ISourceOptions = {
+    fullScreen: { enable: true, zIndex: -1 },
+    background: { color: { value: "#1a1a2e" } },
+    fpsLimit: 60,
+    particles: {
+      number: { value: 80, density: { enable: true } },
+      color: { value: ["#6c5ce7", "#a29bfe", "#fd79a8"] },
+      shape: { type: "circle" },
+      opacity: { value: 0.5, random: true },
+      size: { value: { min: 1, max: 4 }, random: true },
+      move: {
+        enable: true,
+        speed: 2,
+        direction: "none",
+        random: false,
+        straight: false,
+        outModes: { default: "out" },
+      },
+    },
+    detectRetina: true,
+  };
+
+  constructor(private readonly ngParticlesService: NgParticlesService) {}
+
+  ngOnInit(): void {
+    void this.ngParticlesService.init(async (engine) => {
+      await loadSlim(engine);
+    });
+  }
+}

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

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

package/template/angular/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/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/src/polyfills.ts

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

package/template/angular/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/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/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/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/react/README.md

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

package/template/react/gitignore

@@ -0,0 +1,14 @@
+# dependencies
+/node_modules
+
+# production
+/dist
+
+# misc
+.DS_Store
+*.local
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package/template/react/index.html

@@ -0,0 +1,12 @@
+<!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>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/react/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "@tsparticles/react": "^4.1.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.1"
+  }
+}

package/template/react/src/App.css

@@ -0,0 +1,21 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  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;
+  pointer-events: none;
+}
+
+h1 {
+  font-size: 3.2em;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}

package/template/react/src/App.tsx

@@ -0,0 +1,41 @@
+import Particles, { ParticlesProvider } from "@tsparticles/react";
+import { loadSlim } from "@tsparticles/slim";
+import type { Engine } from "@tsparticles/engine";
+
+async function init(engine: Engine): Promise<void> {
+  await loadSlim(engine);
+}
+
+export default function App() {
+  return (
+    <ParticlesProvider init={init}>
+      <div id="app">
+        <h1>Hello, tsParticles!</h1>
+      </div>
+      <Particles
+        id="tsparticles"
+        options={{
+          fullScreen: { enable: true, zIndex: -1 },
+          background: { color: { value: "#1a1a2e" } },
+          fpsLimit: 60,
+          particles: {
+            number: { value: 80, density: { enable: true } },
+            color: { value: ["#6c5ce7", "#a29bfe", "#fd79a8"] },
+            shape: { type: "circle" },
+            opacity: { value: 0.5, random: true },
+            size: { value: { min: 1, max: 4 }, random: true },
+            move: {
+              enable: true,
+              speed: 2,
+              direction: "none",
+              random: false,
+              straight: false,
+              outModes: { default: "out" },
+            },
+          },
+          detectRetina: true,
+        }}
+      />
+    </ParticlesProvider>
+  );
+}

package/template/react/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./App.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/template/react/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/react/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/template/react/vite.config.ts

@@ -0,0 +1,7 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+  base: "./",
+});

package/template/solid/README.md

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

package/template/solid/gitignore

@@ -0,0 +1,14 @@
+# dependencies
+/node_modules
+
+# production
+/dist
+
+# misc
+.DS_Store
+*.local
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package/template/solid/index.html

@@ -0,0 +1,12 @@
+<!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>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/solid/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "solid-js": "^1.8.11",
+    "@tsparticles/solid": "^4.1.3"
+  },
+  "devDependencies": {
+    "vite-plugin-solid": "^2.8.2"
+  }
+}

package/template/solid/src/App.tsx

@@ -0,0 +1,43 @@
+import { onMount } from "solid-js";
+import Particles, { initParticlesEngine } from "@tsparticles/solid";
+import { loadSlim } from "@tsparticles/slim";
+import type { ISourceOptions } from "@tsparticles/engine";
+
+export default function App() {
+  onMount(() => {
+    void initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    });
+  });
+
+  const options: ISourceOptions = {
+    fullScreen: { enable: true, zIndex: -1 },
+    background: { color: { value: "#1a1a2e" } },
+    fpsLimit: 60,
+    particles: {
+      number: { value: 80, density: { enable: true } },
+      color: { value: ["#6c5ce7", "#a29bfe", "#fd79a8"] },
+      shape: { type: "circle" },
+      opacity: { value: 0.5, random: true },
+      size: { value: { min: 1, max: 4 }, random: true },
+      move: {
+        enable: true,
+        speed: 2,
+        direction: "none",
+        random: false,
+        straight: false,
+        outModes: { default: "out" },
+      },
+    },
+    detectRetina: true,
+  };
+
+  return (
+    <>
+      <div id="app-content">
+        <h1>Hello, tsParticles!</h1>
+      </div>
+      <Particles id="tsparticles" options={options} />
+    </>
+  );
+}

package/template/solid/src/index.css

@@ -0,0 +1,21 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+#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/solid/src/main.tsx

@@ -0,0 +1,9 @@
+import "./index.css";
+import { render } from "solid-js/web";
+import App from "./App";
+
+const root = document.getElementById("root");
+
+if (root) {
+  render(() => <App />, root);
+}

package/template/solid/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/template/solid/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import solid from "vite-plugin-solid";
+
+export default defineConfig({
+  plugins: [solid()],
+  base: "./",
+});

package/template/svelte/README.md

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

package/template/svelte/gitignore

@@ -0,0 +1,14 @@
+# dependencies
+/node_modules
+
+# production
+/dist
+
+# misc
+.DS_Store
+*.local
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package/template/svelte/index.html

@@ -0,0 +1,12 @@
+<!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>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/svelte/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tsparticles/svelte": "^4.1.3"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "svelte": "^5.55.7",
+    "svelte-check": "^3.7.1",
+    "tslib": "^2.8.1"
+  }
+}

package/template/svelte/src/App.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import Particles from "@tsparticles/svelte";
+  import type { ISourceOptions } from "@tsparticles/engine";
+
+  const options: ISourceOptions = {
+    fullScreen: { enable: true, zIndex: -1 },
+    background: { color: { value: "#1a1a2e" } },
+    fpsLimit: 60,
+    particles: {
+      number: { value: 80, density: { enable: true } },
+      color: { value: ["#6c5ce7", "#a29bfe", "#fd79a8"] },
+      shape: { type: "circle" },
+      opacity: { value: 0.5, random: true },
+      size: { value: { min: 1, max: 4 }, random: true },
+      move: {
+        enable: true,
+        speed: 2,
+        direction: "none",
+        random: false,
+        straight: false,
+        outModes: { default: "out" },
+      },
+    },
+    detectRetina: true,
+  };
+</script>
+
+<div id="app-content">
+  <h1>Hello, tsParticles!</h1>
+</div>
+<Particles id="tsparticles" options={options} />
+
+<style>
+  :global(body) {
+    margin: 0;
+    overflow: hidden;
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  }
+
+  #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);
+  }
+</style>

package/template/svelte/src/main.ts

@@ -0,0 +1,12 @@
+import { mount } from "svelte";
+import { initParticlesEngine } from "@tsparticles/svelte";
+import { loadSlim } from "@tsparticles/slim";
+import App from "./App.svelte";
+
+void initParticlesEngine(async (engine) => {
+  await loadSlim(engine);
+});
+
+const app = mount(App, { target: document.getElementById("app")! });
+
+export default app;

package/template/svelte/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte"]
+}

package/template/svelte/vite.config.ts

@@ -0,0 +1,7 @@
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [svelte()],
+  base: "./",
+});

package/template/vanilla/README.md

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

package/template/vanilla/gitignore

@@ -0,0 +1,14 @@
+# dependencies
+/node_modules
+
+# production
+/dist
+
+# misc
+.DS_Store
+*.local
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package/template/vanilla/index.html

@@ -0,0 +1,14 @@
+<!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>
+    <div id="app">
+      <h1>Hello, tsParticles!</h1>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/vanilla/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  }
+}

package/template/vanilla/src/main.ts

@@ -0,0 +1,14 @@
+import "./style.css";
+import { tsParticles } from "@tsparticles/engine";
+import { loadSlim } from "@tsparticles/slim";
+import configs from "@tsparticles/configs";
+
+(async () => {
+  await loadSlim(tsParticles);
+
+  const keys = Object.keys(configs);
+  const randomKey = keys[Math.floor(Math.random() * keys.length)] as keyof typeof configs;
+  const options = configs[randomKey];
+
+  await tsParticles.load({ id: "tsparticles", options });
+})();

package/template/vanilla/src/style.css

@@ -0,0 +1,22 @@
+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;
+  line-height: 1.1;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}

package/template/vanilla/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/template/vanilla/vite.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  base: "./",
+});

package/template/vue3/README.md

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

package/template/vue3/gitignore

@@ -0,0 +1,14 @@
+# dependencies
+/node_modules
+
+# production
+/dist
+
+# misc
+.DS_Store
+*.local
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package/template/vue3/index.html

@@ -0,0 +1,12 @@
+<!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>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/vue3/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.32",
+    "@tsparticles/vue3": "^4.1.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.5",
+    "vue-tsc": "^3.2.6"
+  }
+}

package/template/vue3/src/App.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { ISourceOptions } from "@tsparticles/engine";
+
+const options: ISourceOptions = {
+  fullScreen: { enable: true, zIndex: -1 },
+  background: { color: { value: "#1a1a2e" } },
+  fpsLimit: 60,
+  particles: {
+    number: { value: 80, density: { enable: true } },
+    color: { value: ["#6c5ce7", "#a29bfe", "#fd79a8"] },
+    shape: { type: "circle" },
+    opacity: { value: 0.5, random: true },
+    size: { value: { min: 1, max: 4 }, random: true },
+    move: {
+      enable: true,
+      speed: 2,
+      direction: "none",
+      random: false,
+      straight: false,
+      outModes: { default: "out" },
+    },
+  },
+  detectRetina: true,
+};
+</script>
+
+<template>
+  <div id="app-content">
+    <h1>Hello, tsParticles!</h1>
+  </div>
+  <vue-particles id="tsparticles" :options="options" />
+</template>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+#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);
+}
+</style>

package/template/vue3/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}

package/template/vue3/src/main.ts

@@ -0,0 +1,14 @@
+import { createApp } from "vue";
+import Particles from "@tsparticles/vue3";
+import { loadSlim } from "@tsparticles/slim";
+import App from "./App.vue";
+
+const app = createApp(App);
+
+app.use(Particles, {
+  init: async (engine) => {
+    await loadSlim(engine);
+  },
+});
+
+app.mount("#app");

package/template/vue3/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}

package/template/vue3/vite.config.ts

@@ -0,0 +1,7 @@
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [vue()],
+  base: "./",
+});

package/template.json

@@ -0,0 +1,13 @@
+{
+  "package": {
+    "dependencies": {
+      "@tsparticles/engine": "^4.1.3",
+      "@tsparticles/slim": "^4.1.3",
+      "@tsparticles/configs": "^4.1.3"
+    },
+    "devDependencies": {
+      "typescript": "^6.0.3",
+      "vite": "^8.0.14"
+    }
+  }
+}