@tsparticles/template-confetti 4.1.3 → 4.2.1

package/template/stencil/src/components/app-home/app-home.tsx

@@ -0,0 +1,73 @@
+import { Component, State, h, type JSX } from "@stencil/core";
+import { confetti } from "@tsparticles/confetti";
+import type { Engine } from "@tsparticles/engine";
+
+function randomInRange(min: number, max: number): number {
+  return Math.random() * (max - min) + min;
+}
+
+@Component({
+  tag: "app-home",
+  styleUrl: "app-home.css",
+  shadow: true,
+})
+export class AppHome {
+  @State()
+  private mode = "cannon";
+
+  private async particlesInit(engine: Engine): Promise<void> {}
+
+  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(): JSX.Element {
+    return (
+      <div id="app">
+        <h1>Confetti!</h1>
+        <div class="controls">
+          <button onClick={this.fireConfetti.bind(this)}>Fire Confetti</button>
+          <select value={this.mode} onChange={this.handleModeChange.bind(this)}>
+            <option value="cannon">Cannon</option>
+            <option value="waterfall">Waterfall</option>
+            <option value="random">Random</option>
+          </select>
+        </div>
+        <stencil-particles
+          container-id="tsparticles"
+          init={this.particlesInit.bind(this)}
+          options={{}}
+        />
+      </div>
+    );
+  }
+}

package/template/svelte/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{packageName}}",
+  "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,119 @@
+<script lang="ts">
+  import { confetti } from "@tsparticles/confetti";
+
+  let mode = $state("cannon");
+
+  function randomInRange(min: number, max: number): number {
+    return Math.random() * (max - min) + min;
+  }
+
+  function fire(): void {
+    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;
+    }
+  }
+</script>
+
+<h1>tsParticles Confetti</h1>
+<div class="controls">
+  <select bind:value={mode}>
+    <option value="cannon">Cannon</option>
+    <option value="waterfall">Waterfall</option>
+    <option value="random">Random</option>
+  </select>
+  <button onclick={fire}>Fire!</button>
+</div>
+
+<style>
+  :global(body) {
+    margin: 0;
+    overflow: hidden;
+    background: #1a1a2e;
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  }
+
+  :global(#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;
+  }
+</style>

package/template/svelte/src/main.ts

@@ -0,0 +1,6 @@
+import { mount } from "svelte";
+import App from "./App.svelte";
+
+const app = mount(App, { target: document.getElementById("app")! });
+
+export default app;

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

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

package/template/vue2/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^2.7.16",
+    "@tsparticles/vue2": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue2": "^2.0.1",
+    "vue-template-compiler": "^2.7.16",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0"
+  }
+}

package/template/vue2/src/App.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <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>
+    </div>
+    <vue-particles id="tsparticles" :options="options" />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { confetti } from "@tsparticles/confetti";
+
+function randomInRange(min: number, max: number): number {
+  return Math.random() * (max - min) + min;
+}
+
+export default Vue.extend({
+  data() {
+    return {
+      mode: "cannon",
+      options: {},
+    };
+  },
+  methods: {
+    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;
+      }
+    },
+  },
+});
+</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;
+}
+
+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;
+}
+</style>

package/template/vue3/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "{{packageName}}",
+  "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,110 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { confetti } from "@tsparticles/confetti";
+
+function randomInRange(min: number, max: number): number {
+  return Math.random() * (max - min) + min;
+}
+
+const mode = ref("cannon");
+
+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>
+
+<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>
+  </div>
+</template>
+
+<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;
+}
+
+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;
+}
+</style>

package/template/vue3/src/main.ts

@@ -0,0 +1,9 @@
+import { createApp } from "vue";
+import Particles from "@tsparticles/vue3";
+import App from "./App.vue";
+
+const app = createApp(App);
+
+app.use(Particles, {});
+
+app.mount("#app");

package/template/webcomponents/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tsparticles/webcomponents": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0"
+  }
+}

package/template/webcomponents/src/main.ts

@@ -0,0 +1,48 @@
+import "./style.css";
+import { defineParticlesElement, initParticlesEngine } from "@tsparticles/webcomponents";
+import { confetti } from "@tsparticles/confetti";
+
+void initParticlesEngine(() => Promise.resolve());
+
+defineParticlesElement();
+
+function randomInRange(min: number, max: number): number {
+  return Math.random() * (max - min) + min;
+}
+
+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/webcomponents/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;
+}