@tsparticles/template-confetti 4.1.3 → 4.2.1

package/template/inferno/src/App.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/inferno/src/App.tsx

@@ -0,0 +1,69 @@
+import Particles, { ParticlesProvider } from "@tsparticles/inferno";
+import { confetti } from "@tsparticles/confetti";
+import type { Engine } from "@tsparticles/engine";
+import { Component } from "inferno";
+import "./App.css";
+
+function randomInRange(min: number, max: number): number {
+  return Math.random() * (max - min) + min;
+}
+
+interface AppState {
+  mode: string;
+}
+
+export default class App extends Component<{}, AppState> {
+  state = { mode: "cannon" };
+
+  private fireConfetti = () => {
+    switch (this.state.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;
+    }
+  };
+
+  private handleModeChange = (e: Event) => {
+    this.setState({ mode: (e.target as HTMLSelectElement).value });
+  };
+
+  render() {
+    return (
+      <ParticlesProvider init={async (engine: Engine): Promise<void> => {}}>
+        <div id="app">
+          <h1>Confetti!</h1>
+          <div class="controls">
+            <button onClick={this.fireConfetti}>Fire Confetti</button>
+            <select value={this.state.mode} onChange={this.handleModeChange}>
+              <option value="cannon">Cannon</option>
+              <option value="waterfall">Waterfall</option>
+              <option value="random">Random</option>
+            </select>
+          </div>
+        </div>
+        <Particles id="tsparticles" options={{}} />
+      </ParticlesProvider>
+    );
+  }
+}

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": {
+    "jquery": "^3.7.1",
+    "@tsparticles/jquery": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0"
+  }
+}

package/template/jquery/src/main.ts

@@ -0,0 +1,49 @@
+import $ from "jquery";
+import "@tsparticles/jquery";
+import { tsParticles } from "@tsparticles/engine";
+import { confetti } from "@tsparticles/confetti";
+import "./style.css";
+
+function randomInRange(min: number, max: number): number {
+  return Math.random() * (max - min) + min;
+}
+
+(async () => {
+  $("#tsparticles").particles().load({});
+
+  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;
+    }
+  });
+})();

package/template/jquery/src/style.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/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": {
+    "lit": "^3.5.0",
+    "@tsparticles/lit": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0"
+  }
+}

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

@@ -0,0 +1,68 @@
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { initParticlesEngine } from "@tsparticles/lit";
+import { confetti } from "@tsparticles/confetti";
+
+function randomInRange(min: number, max: number): number {
+  return Math.random() * (max - min) + min;
+}
+
+@customElement("my-app")
+export class MyApp extends LitElement {
+  @state()
+  private mode = "cannon";
+
+  constructor() {
+    super();
+    void initParticlesEngine(() => Promise.resolve());
+  }
+
+  private 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: randomInRange(55, 125),
+          spread: randomInRange(50, 70),
+          particleCount: randomInRange(50, 100),
+          origin: { y: 0.6 },
+        });
+        break;
+    }
+  }
+
+  private handleModeChange(e: Event): void {
+    this.mode = (e.target as HTMLSelectElement).value;
+  }
+
+  render() {
+    return html`
+      <div id="app">
+        <h1>Confetti!</h1>
+        <div class="controls">
+          <button @click=${this.fireConfetti}>Fire Confetti</button>
+          <select @change=${this.handleModeChange}>
+            <option value="cannon" ?selected=${this.mode === "cannon"}>Cannon</option>
+            <option value="waterfall" ?selected=${this.mode === "waterfall"}>Waterfall</option>
+            <option value="random" ?selected=${this.mode === "random"}>Random</option>
+          </select>
+        </div>
+      </div>
+    `;
+  }
+}

package/template/nextjs/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "preview": "next start"
+  },
+  "dependencies": {
+    "next": "^15.3.2",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "@tsparticles/nextjs": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3",
+    "@types/node": "^22.15.3",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.3"
+  }
+}

package/template/nextjs/src/app/page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useState } from "react";
+import { NextParticles } from "@tsparticles/nextjs";
+import { confetti } from "@tsparticles/confetti";
+
+function randomInRange(min: number, max: number): number {
+  return Math.random() * (max - min) + min;
+}
+
+export default function Home() {
+  const [mode, setMode] = useState("cannon");
+
+  function fireConfetti() {
+    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;
+    }
+  }
+
+  return (
+    <div>
+      <div id="app">
+        <h1>Confetti!</h1>
+        <div className="controls">
+          <button onClick={fireConfetti}>Fire Confetti</button>
+          <select value={mode} onChange={(e) => setMode(e.target.value)}>
+            <option value="cannon">Cannon</option>
+            <option value="waterfall">Waterfall</option>
+            <option value="random">Random</option>
+          </select>
+        </div>
+      </div>
+      <NextParticles id="tsparticles" options={{}} />
+    </div>
+  );
+}

package/template/nuxt2/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "preview": "nuxt start"
+  },
+  "dependencies": {
+    "nuxt": "^2.18.1",
+    "@tsparticles/nuxt2": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  }
+}

package/template/nuxt2/pages/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div id="app">
+    <h1>Confetti!</h1>
+    <div class="controls">
+      <button @click="fireConfetti">Fire Confetti</button>
+      <select v-model="mode">
+        <option value="cannon">Cannon</option>
+        <option value="waterfall">Waterfall</option>
+        <option value="random">Random</option>
+      </select>
+    </div>
+    <Particles id="tsparticles" :options="options" />
+  </div>
+</template>
+
+<script>
+import { confetti } from "@tsparticles/confetti";
+
+function randomInRange(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+export default {
+  name: "HomePage",
+  data() {
+    return {
+      mode: "cannon",
+      options: {},
+    };
+  },
+  methods: {
+    fireConfetti() {
+      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: randomInRange(55, 125),
+            spread: randomInRange(50, 70),
+            particleCount: randomInRange(50, 100),
+            origin: { y: 0.6 },
+          });
+          break;
+      }
+    },
+  },
+};
+</script>
+
+<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/nuxt3/app.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="app">
+    <h1>Confetti!</h1>
+    <div class="controls">
+      <button @click="fireConfetti">Fire Confetti</button>
+      <select v-model="mode">
+        <option value="cannon">Cannon</option>
+        <option value="waterfall">Waterfall</option>
+        <option value="random">Random</option>
+      </select>
+    </div>
+    <Particles id="tsparticles" :options="options" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { confetti } from "@tsparticles/confetti";
+
+function randomInRange(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+const mode = ref("cannon");
+const options = {};
+
+function fireConfetti() {
+  switch (mode.value) {
+    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>
+
+<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/nuxt3/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "preview": "nuxt preview"
+  },
+  "dependencies": {
+    "nuxt": "^3.17.3",
+    "@tsparticles/nuxt3": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  }
+}

package/template/nuxt4/app.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="app">
+    <h1>Confetti!</h1>
+    <div class="controls">
+      <button @click="fireConfetti">Fire Confetti</button>
+      <select v-model="mode">
+        <option value="cannon">Cannon</option>
+        <option value="waterfall">Waterfall</option>
+        <option value="random">Random</option>
+      </select>
+    </div>
+    <Particles id="tsparticles" :options="options" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { confetti } from "@tsparticles/confetti";
+
+function randomInRange(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+const mode = ref("cannon");
+const options = {};
+
+function fireConfetti() {
+  switch (mode.value) {
+    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>
+
+<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/nuxt4/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "preview": "nuxt preview"
+  },
+  "dependencies": {
+    "nuxt": "^4.4.2",
+    "@tsparticles/nuxt4": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  }
+}