@tsparticles/template-confetti 4.1.3 → 4.2.0

package/template/preact/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "preact": "^10.19.3",
+    "@tsparticles/preact": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.8.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0"
+  }
+}

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

@@ -0,0 +1,62 @@
+import { useState, useEffect } from "preact/hooks";
+import Particles, { initParticlesEngine } from "@tsparticles/preact";
+import { confetti } from "@tsparticles/confetti";
+import "./App.css";
+
+function randomInRange(min: number, max: number): number {
+  return Math.random() * (max - min) + min;
+}
+
+export default function App() {
+  const [mode, setMode] = useState("cannon");
+
+  useEffect(() => {
+    void initParticlesEngine(() => Promise.resolve());
+  }, []);
+
+  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 class="controls">
+          <button onClick={fireConfetti}>Fire Confetti</button>
+          <select value={mode} onChange={(e) => setMode((e.target as HTMLSelectElement).value)}>
+            <option value="cannon">Cannon</option>
+            <option value="waterfall">Waterfall</option>
+            <option value="random">Random</option>
+          </select>
+        </div>
+      </div>
+      <Particles id="tsparticles" options={{}} />
+    </div>
+  );
+}

package/template/qwik/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@builder.io/qwik": "^1.12.0",
+    "@tsparticles/qwik": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0"
+  }
+}

package/template/qwik/src/App.tsx

@@ -0,0 +1,61 @@
+import { component$, useVisibleTask$, useSignal } from "@builder.io/qwik";
+import { Particles, initParticlesEngine } from "@tsparticles/qwik";
+import { confetti } from "@tsparticles/confetti";
+
+function randomInRange(min: number, max: number): number {
+  return Math.random() * (max - min) + min;
+}
+
+export default component$(() => {
+  const mode = useSignal("cannon");
+
+  useVisibleTask$(() => {
+    void initParticlesEngine(() => Promise.resolve());
+  });
+
+  const 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;
+    }
+  };
+
+  return (
+    <div>
+      <div id="app">
+        <h1>Confetti!</h1>
+        <div class="controls">
+          <button onClick$={fireConfetti}>Fire Confetti</button>
+          <select value={mode.value} onChange$={(_, el) => (mode.value = el.value)}>
+            <option value="cannon">Cannon</option>
+            <option value="waterfall">Waterfall</option>
+            <option value="random">Random</option>
+          </select>
+        </div>
+      </div>
+      <Particles id="tsparticles" options={{}} />
+    </div>
+  );
+});

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,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/react/src/App.tsx

@@ -0,0 +1,60 @@
+import { useState } from "react";
+import Particles, { ParticlesProvider } from "@tsparticles/react";
+import { confetti } from "@tsparticles/confetti";
+import type { Engine } from "@tsparticles/engine";
+import "./App.css";
+
+function randomInRange(min: number, max: number): number {
+  return Math.random() * (max - min) + min;
+}
+
+async function init(engine: Engine): Promise<void> {}
+
+export default function App() {
+  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 (
+    <ParticlesProvider init={init}>
+      <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>
+    </ParticlesProvider>
+  );
+}

package/template/riot/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "riot": "^10.0.0",
+    "@tsparticles/riot": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "@riotjs/compiler": "^10.0.0",
+    "rollup-plugin-riot": "^10.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0"
+  }
+}

package/template/riot/src/app.riot

@@ -0,0 +1,111 @@
+<app>
+  <div id="app">
+    <h1>Confetti!</h1>
+    <div class="controls">
+      <button onclick={ fireConfetti }>Fire Confetti</button>
+      <select onchange={ handleModeChange }>
+        <option value="cannon" selected={ state.mode === "cannon" }>Cannon</option>
+        <option value="waterfall" selected={ state.mode === "waterfall" }>Waterfall</option>
+        <option value="random" selected={ state.mode === "random" }>Random</option>
+      </select>
+    </div>
+  </div>
+  <riot-particles id="tsparticles" options={ state.options }></riot-particles>
+
+  <script>
+    import { confetti } from "@tsparticles/confetti"
+
+    function randomInRange(min, max) {
+      return Math.random() * (max - min) + min
+    }
+
+    export default {
+      state: {
+        mode: "cannon",
+        options: {}
+      },
+      handleModeChange(e) {
+        this.update({ mode: e.target.value })
+      },
+      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
+        }
+      }
+    }
+  </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>
+</app>

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,66 @@
+import { createSignal } from "solid-js";
+import { confetti } from "@tsparticles/confetti";
+
+function randomInRange(min: number, max: number): number {
+  return Math.random() * (max - min) + min;
+}
+
+export default function App() {
+  const [mode, setMode] = createSignal("cannon");
+
+  function handleFire() {
+    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 id="app">
+      <h1>Confetti!</h1>
+      <div class="controls">
+        <button onClick={handleFire}>Fire Confetti</button>
+        <select value={mode()} onChange={(e) => setMode(e.currentTarget.value)}>
+          <option value="cannon">Cannon</option>
+          <option value="waterfall">Waterfall</option>
+          <option value="random">Random</option>
+        </select>
+      </div>
+    </div>
+  );
+}

package/template/solid/src/index.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/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/stencil/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "stencil build --dev --watch --serve",
+    "build": "stencil build",
+    "preview": "stencil build --serve"
+  },
+  "dependencies": {
+    "@stencil/core": "^4.43.5",
+    "@tsparticles/stencil": "^4.1.3",
+    "@tsparticles/confetti": "^4.1.3",
+    "@tsparticles/engine": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  }
+}