@tsparticles/template-login 4.1.3 → 4.2.0

package/template/angular-confetti/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 { NgxConfettiModule } from "angular-confetti";
+import { AppComponent } from "./app.component";
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, FormsModule, NgxConfettiModule],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

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",
+    "angular-fireworks": "^4.1.3",
+    "@tsparticles/slim": "^4.1.3",
+    "@tsparticles/configs": "^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,151 @@
+:root {
+  --bg: #0f0f1a;
+  --card-bg: rgba(255, 255, 255, 0.05);
+  --text: #fff;
+  --border: rgba(255, 255, 255, 0.1);
+  --input-bg: rgba(255, 255, 255, 0.08);
+  --accent: #6c5ce7;
+  --accent-hover: #a29bfe;
+  --error: #e74c3c;
+}
+
+[data-theme="light"] {
+  --bg: #f0f0f5;
+  --card-bg: rgba(255, 255, 255, 0.8);
+  --text: #1a1a2e;
+  --border: rgba(0, 0, 0, 0.1);
+  --input-bg: rgba(0, 0, 0, 0.05);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  transition: background 0.3s, color 0.3s;
+}
+
+.auth-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  width: 100%;
+  max-width: 400px;
+  padding: 1rem;
+}
+
+.auth-card {
+  background: var(--card-bg);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 2rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.auth-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.auth-header h1 {
+  margin: 0;
+  font-size: 1.8em;
+}
+
+.theme-btn {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.4em 0.6em;
+  font-size: 1.2em;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.theme-btn:hover {
+  background: var(--input-bg);
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.3em;
+  font-size: 0.9em;
+  opacity: 0.8;
+}
+
+input {
+  width: 100%;
+  padding: 0.7em 1em;
+  font-size: 1em;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--input-bg);
+  color: var(--text);
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+input:focus {
+  border-color: var(--accent);
+}
+
+input::placeholder {
+  color: var(--text);
+  opacity: 0.4;
+}
+
+.error {
+  display: block;
+  margin-top: 0.3em;
+  font-size: 0.8em;
+  color: var(--error);
+  min-height: 1em;
+}
+
+button[type="submit"] {
+  width: 100%;
+  padding: 0.8em;
+  font-size: 1em;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  background: var(--accent);
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+  margin-top: 0.5rem;
+}
+
+button[type="submit"]:hover {
+  background: var(--accent-hover);
+}
+
+.toggle-text {
+  text-align: center;
+  margin-top: 1.5rem;
+  font-size: 0.9em;
+  opacity: 0.7;
+}
+
+.toggle-text a {
+  color: var(--accent);
+  text-decoration: none;
+  margin-left: 0.3em;
+}
+
+.toggle-text a:hover {
+  text-decoration: underline;
+}

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

@@ -0,0 +1,32 @@
+<ngx-fireworks id="tsparticles" [options]="options" />
+
+<div class="auth-container">
+  <div class="auth-card">
+    <div class="auth-header">
+      <h1>{{ isLogin ? 'Login' : 'Register' }}</h1>
+      <button class="theme-btn" (click)="toggleTheme()" aria-label="Toggle theme">{{ theme === 'dark' ? '🌙' : '☀️' }}</button>
+    </div>
+    <form (ngSubmit)="onSubmit()" novalidate>
+      <div class="form-group">
+        <label for="email">Email</label>
+        <input id="email" type="email" [(ngModel)]="email" name="email" placeholder="you@example.com" required />
+        <span class="error">{{ emailErr }}</span>
+      </div>
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input id="password" type="password" [(ngModel)]="password" name="password" placeholder="Enter password" required />
+        <span class="error">{{ passErr }}</span>
+      </div>
+      <div class="form-group" *ngIf="!isLogin">
+        <label for="confirmPassword">Confirm Password</label>
+        <input id="confirmPassword" type="password" [(ngModel)]="confirm" name="confirmPassword" placeholder="Confirm password" />
+        <span class="error">{{ confirmErr }}</span>
+      </div>
+      <button type="submit">{{ isLogin ? 'Sign In' : 'Create Account' }}</button>
+    </form>
+    <p class="toggle-text">
+      <span>{{ isLogin ? "Don't have an account?" : 'Already have an account?' }}</span>
+      <a href="#" (click)="toggleMode($event)">{{ isLogin ? 'Register' : 'Login' }}</a>
+    </p>
+  </div>
+</div>

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

@@ -0,0 +1,105 @@
+import { Component, OnInit } from "@angular/core";
+import { NgxFireworksService } from "angular-fireworks";
+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 {
+  isLogin = true;
+  theme = localStorage.getItem("theme") || "dark";
+  email = "";
+  password = "";
+  confirm = "";
+  emailErr = "";
+  passErr = "";
+  confirmErr = "";
+
+  constructor(private readonly fireworksService: NgxFireworksService) {}
+
+  options: ISourceOptions = {
+    background: { color: { value: "transparent" } },
+    fpsLimit: 60,
+    particles: {
+      number: { value: 60, density: { enable: true } },
+      color: { value: ["#6c5ce7", "#a29bfe", "#fd79a8", "#00cec9"] },
+      shape: { type: "circle" },
+      opacity: { value: 0.5, random: true },
+      size: { value: { min: 1, max: 3 }, random: true },
+      move: { enable: true, speed: 1, direction: "none", random: true, straight: false, outModes: { default: "out" } },
+    },
+    interactivity: {
+      events: { onHover: { enable: true, mode: "bubble" } },
+      modes: { bubble: { distance: 200, size: 6, duration: 2, opacity: 0.8 } },
+    },
+    detectRetina: true,
+  };
+
+  ngOnInit(): void {
+    document.documentElement.setAttribute("data-theme", this.theme);
+    void this.fireworksService.init(async (engine) => {
+      await loadSlim(engine);
+    });
+  }
+
+  toggleTheme(): void {
+    this.theme = this.theme === "dark" ? "light" : "dark";
+    document.documentElement.setAttribute("data-theme", this.theme);
+    localStorage.setItem("theme", this.theme);
+  }
+
+  private validateEmail(val: string): boolean {
+    return /^[^\s@]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$/.test(val);
+  }
+
+  onSubmit(): void {
+    let valid = true;
+
+    if (!this.email || !this.validateEmail(this.email)) {
+      this.emailErr = "Please enter a valid email address";
+      valid = false;
+    } else {
+      this.emailErr = "";
+    }
+
+    if (!this.password || this.password.length < 6) {
+      this.passErr = "Password must be at least 6 characters";
+      valid = false;
+    } else {
+      this.passErr = "";
+    }
+
+    if (!this.isLogin) {
+      if (this.password !== this.confirm) {
+        this.confirmErr = "Passwords do not match";
+        valid = false;
+      } else {
+        this.confirmErr = "";
+      }
+    }
+
+    if (!valid) return;
+
+    if (this.isLogin) {
+      alert("Logged in successfully! (demo)");
+    } else {
+      alert("Account created successfully! (demo)");
+      this.isLogin = true;
+    }
+
+    this.email = "";
+    this.password = "";
+    this.confirm = "";
+  }
+
+  toggleMode(event: Event): void {
+    event.preventDefault();
+    this.isLogin = !this.isLogin;
+    this.emailErr = "";
+    this.passErr = "";
+    this.confirmErr = "";
+  }
+}

package/template/angular-fireworks/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 { NgxFireworksModule } from "angular-fireworks";
+import { AppComponent } from "./app.component";
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, FormsModule, NgxFireworksModule],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

package/template/astro/package.json

@@ -0,0 +1,22 @@
+{
+  "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/slim": "^4.1.3",
+    "@tsparticles/configs": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  }
+}

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

@@ -0,0 +1,173 @@
+---
+import { initParticlesEngine } from "@tsparticles/astro";
+import { loadSlim } from "@tsparticles/slim";
+
+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>
+      :root { --bg: #0f0f1a; --card-bg: rgba(255, 255, 255, 0.05); --text: #fff; --border: rgba(255, 255, 255, 0.1); --input-bg: rgba(255, 255, 255, 0.08); --accent: #6c5ce7; --accent-hover: #a29bfe; --error: #e74c3c; }
+      [data-theme="light"] { --bg: #f0f0f5; --card-bg: rgba(255, 255, 255, 0.8); --text: #1a1a2e; --border: rgba(0, 0, 0, 0.1); --input-bg: rgba(0, 0, 0, 0.05); }
+      * { box-sizing: border-box; }
+      body { margin: 0; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; }
+      .auth-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; width: 100%; max-width: 400px; padding: 1rem; }
+      .auth-card { background: var(--card-bg); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
+      .auth-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+      .auth-header h1 { margin: 0; font-size: 1.8em; }
+      .theme-btn { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 0.4em 0.6em; font-size: 1.2em; cursor: pointer; transition: background 0.2s; }
+      .theme-btn:hover { background: var(--input-bg); }
+      .form-group { margin-bottom: 1rem; }
+      label { display: block; margin-bottom: 0.3em; font-size: 0.9em; opacity: 0.8; }
+      input { width: 100%; padding: 0.7em 1em; font-size: 1em; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); outline: none; transition: border-color 0.2s; }
+      input:focus { border-color: var(--accent); }
+      input::placeholder { color: var(--text); opacity: 0.4; }
+      .error { display: block; margin-top: 0.3em; font-size: 0.8em; color: var(--error); min-height: 1em; }
+      button[type="submit"] { width: 100%; padding: 0.8em; font-size: 1em; font-weight: 600; border: none; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; transition: background 0.2s; margin-top: 0.5rem; }
+      button[type="submit"]:hover { background: var(--accent-hover); }
+      .toggle-text { text-align: center; margin-top: 1.5rem; font-size: 0.9em; opacity: 0.7; }
+      .toggle-text a { color: var(--accent); text-decoration: none; margin-left: 0.3em; }
+      .toggle-text a:hover { text-decoration: underline; }
+    </style>
+  </head>
+  <body>
+    <div class="auth-container">
+      <div class="auth-card">
+        <div class="auth-header">
+          <h1 id="authTitle">Login</h1>
+          <button class="theme-btn" id="themeToggle" aria-label="Toggle theme">🌙</button>
+        </div>
+        <form id="authForm" novalidate>
+          <div class="form-group">
+            <label for="email">Email</label>
+            <input id="email" type="email" placeholder="you@example.com" required />
+            <span class="error" id="emailError"></span>
+          </div>
+          <div class="form-group">
+            <label for="password">Password</label>
+            <input id="password" type="password" placeholder="Enter password" required />
+            <span class="error" id="passwordError"></span>
+          </div>
+          <div class="form-group" id="confirmGroup" style="display: none">
+            <label for="confirmPassword">Confirm Password</label>
+            <input id="confirmPassword" type="password" placeholder="Confirm password" />
+            <span class="error" id="confirmError"></span>
+          </div>
+          <button type="submit" id="submitBtn">Sign In</button>
+        </form>
+        <p class="toggle-text">
+          <span id="toggleLabel">Don't have an account?</span>
+          <a href="#" id="toggleAuth">Register</a>
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
+
+<script>
+  import { initParticlesEngine } from "@tsparticles/astro";
+  import { loadSlim } from "@tsparticles/slim";
+
+  await initParticlesEngine(async (engine) => {
+    await loadSlim(engine);
+  });
+
+  let isLogin = true;
+
+  const authTitle = document.getElementById("authTitle");
+  const authForm = document.getElementById("authForm");
+  const submitBtn = document.getElementById("submitBtn");
+  const toggleAuth = document.getElementById("toggleAuth");
+  const toggleLabel = document.getElementById("toggleLabel");
+  const confirmGroup = document.getElementById("confirmGroup");
+  const themeToggle = document.getElementById("themeToggle");
+
+  const emailInput = document.getElementById("email");
+  const passwordInput = document.getElementById("password");
+  const confirmInput = document.getElementById("confirmPassword");
+
+  const emailError = document.getElementById("emailError");
+  const passwordError = document.getElementById("passwordError");
+  const confirmError = document.getElementById("confirmError");
+
+  function setTheme(theme) {
+    document.documentElement.setAttribute("data-theme", theme);
+    themeToggle.textContent = theme === "dark" ? "🌙" : "☀️";
+    localStorage.setItem("theme", theme);
+  }
+
+  const savedTheme = localStorage.getItem("theme") || "dark";
+  setTheme(savedTheme);
+
+  themeToggle.addEventListener("click", () => {
+    const current = document.documentElement.getAttribute("data-theme") || "dark";
+    setTheme(current === "dark" ? "light" : "dark");
+  });
+
+  function validateEmail(val) {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
+  }
+
+  function validate() {
+    let valid = true;
+
+    if (!emailInput.value || !validateEmail(emailInput.value)) {
+      emailError.textContent = "Please enter a valid email address";
+      valid = false;
+    } else {
+      emailError.textContent = "";
+    }
+
+    if (!passwordInput.value || passwordInput.value.length < 6) {
+      passwordError.textContent = "Password must be at least 6 characters";
+      valid = false;
+    } else {
+      passwordError.textContent = "";
+    }
+
+    if (!isLogin) {
+      if (passwordInput.value !== confirmInput.value) {
+        confirmError.textContent = "Passwords do not match";
+        valid = false;
+      } else {
+        confirmError.textContent = "";
+      }
+    }
+
+    return valid;
+  }
+
+  function toggleMode() {
+    isLogin = !isLogin;
+    authTitle.textContent = isLogin ? "Login" : "Register";
+    submitBtn.textContent = isLogin ? "Sign In" : "Create Account";
+    toggleLabel.textContent = isLogin ? "Don't have an account?" : "Already have an account?";
+    toggleAuth.textContent = isLogin ? "Register" : "Login";
+    confirmGroup.style.display = isLogin ? "none" : "block";
+    emailError.textContent = "";
+    passwordError.textContent = "";
+    confirmError.textContent = "";
+  }
+
+  toggleAuth.addEventListener("click", (e) => {
+    e.preventDefault();
+    toggleMode();
+  });
+
+  authForm.addEventListener("submit", (e) => {
+    e.preventDefault();
+    if (!validate()) return;
+
+    if (isLogin) {
+      alert("Logged in successfully! (demo)");
+    } else {
+      alert("Account created successfully! (demo)");
+      toggleMode();
+    }
+
+    authForm.reset();
+  });
+</script>

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

@@ -0,0 +1,61 @@
+<div id="particles-container" {{did-insert this.initParticles}} {{particles options=this.options}}>
+</div>
+
+<div class="auth-container">
+  <div class="auth-card">
+    <div class="auth-header">
+      <h1>{{if this.isLogin "Login" "Register"}}</h1>
+      <button class="theme-btn" type="button" {{on "click" this.toggleTheme}} aria-label="Toggle theme">{{if (eq this.theme "dark") "🌙" "☀️"}}</button>
+    </div>
+    <form {{on "submit" this.handleSubmit}} novalidate>
+      <div class="form-group">
+        <label for="email">Email</label>
+        <Input id="email" @type="email" @value={{this.email}} placeholder="you@example.com" required />
+        <span class="error">{{this.emailErr}}</span>
+      </div>
+      <div class="form-group">
+        <label for="password">Password</label>
+        <Input id="password" @type="password" @value={{this.password}} placeholder="Enter password" required />
+        <span class="error">{{this.passErr}}</span>
+      </div>
+      {{#unless this.isLogin}}
+        <div class="form-group">
+          <label for="confirmPassword">Confirm Password</label>
+          <Input id="confirmPassword" @type="password" @value={{this.confirm}} placeholder="Confirm password" />
+          <span class="error">{{this.confirmErr}}</span>
+        </div>
+      {{/unless}}
+      <button type="submit">{{if this.isLogin "Sign In" "Create Account"}}</button>
+    </form>
+    <p class="toggle-text">
+      <span>{{if this.isLogin "Don't have an account?" "Already have an account?"}}</span>
+      <a href="#" {{on "click" this.toggleMode}}>{{if this.isLogin "Register" "Login"}}</a>
+    </p>
+  </div>
+</div>
+
+{{outlet}}
+
+<style>
+  :root { --bg: #0f0f1a; --card-bg: rgba(255, 255, 255, 0.05); --text: #fff; --border: rgba(255, 255, 255, 0.1); --input-bg: rgba(255, 255, 255, 0.08); --accent: #6c5ce7; --accent-hover: #a29bfe; --error: #e74c3c; }
+  [data-theme="light"] { --bg: #f0f0f5; --card-bg: rgba(255, 255, 255, 0.8); --text: #1a1a2e; --border: rgba(0, 0, 0, 0.1); --input-bg: rgba(0, 0, 0, 0.05); }
+  * { box-sizing: border-box; }
+  body { margin: 0; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; }
+  .auth-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; width: 100%; max-width: 400px; padding: 1rem; }
+  .auth-card { background: var(--card-bg); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
+  .auth-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+  .auth-header h1 { margin: 0; font-size: 1.8em; }
+  .theme-btn { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 0.4em 0.6em; font-size: 1.2em; cursor: pointer; transition: background 0.2s; }
+  .theme-btn:hover { background: var(--input-bg); }
+  .form-group { margin-bottom: 1rem; }
+  label { display: block; margin-bottom: 0.3em; font-size: 0.9em; opacity: 0.8; }
+  input { width: 100%; padding: 0.7em 1em; font-size: 1em; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); outline: none; transition: border-color 0.2s; }
+  input:focus { border-color: var(--accent); }
+  input::placeholder { color: var(--text); opacity: 0.4; }
+  .error { display: block; margin-top: 0.3em; font-size: 0.8em; color: var(--error); min-height: 1em; }
+  button[type="submit"] { width: 100%; padding: 0.8em; font-size: 1em; font-weight: 600; border: none; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; transition: background 0.2s; margin-top: 0.5rem; }
+  button[type="submit"]:hover { background: var(--accent-hover); }
+  .toggle-text { text-align: center; margin-top: 1.5rem; font-size: 0.9em; opacity: 0.7; }
+  .toggle-text a { color: var(--accent); text-decoration: none; margin-left: 0.3em; }
+  .toggle-text a:hover { text-decoration: underline; }
+</style>

package/template/ember/package.json

@@ -0,0 +1,42 @@
+{
+  "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/slim": "^4.1.3",
+    "@tsparticles/configs": "^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,24 @@
+{
+  "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/slim": "^4.1.3",
+    "@tsparticles/configs": "^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"
+  }
+}