@tsparticles/template-ribbons 4.1.3 → 4.2.1

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

@@ -0,0 +1,14 @@
+"use client";
+
+import { ribbons } from "@tsparticles/ribbons";
+
+export default function Home() {
+  return (
+    <div id="app">
+      <h1>Ribbons</h1>
+      <div className="controls">
+        <button onClick={() => ribbons()}>Fire Ribbons</button>
+      </div>
+    </div>
+  );
+}

package/template/nuxt2/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "preview": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+    "@tsparticles/nuxt2": "workspace:*",
+
+    "nuxt": "^2.18.0"
+  }
+}

package/template/nuxt2/pages/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="app">
+    <h1>Ribbons</h1>
+    <div class="controls">
+      <button @click="fireRibbons">Fire Ribbons</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ribbons } from "@tsparticles/ribbons";
+
+export default {
+  methods: {
+    fireRibbons() {
+      ribbons();
+    },
+  },
+};
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+  background: #0a0a23;
+  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 {
+  margin-top: 2rem;
+}
+
+button {
+  padding: 0.8em 2em;
+  font-size: 1.1em;
+  border: none;
+  border-radius: 8px;
+  background: #6c5ce7;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: #a29bfe;
+}
+</style>

package/template/nuxt3/app.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ribbons } from "@tsparticles/ribbons";
+
+function fireRibbons() {
+  ribbons();
+}
+</script>
+
+<template>
+  <div id="app">
+    <h1>Ribbons</h1>
+    <div class="controls">
+      <button @click="fireRibbons">Fire Ribbons</button>
+    </div>
+  </div>
+</template>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+  background: #0a0a23;
+  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 {
+  margin-top: 2rem;
+}
+
+button {
+  padding: 0.8em 2em;
+  font-size: 1.1em;
+  border: none;
+  border-radius: 8px;
+  background: #6c5ce7;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: #a29bfe;
+}
+</style>

package/template/nuxt3/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "preview": "nuxt start"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+    "@tsparticles/nuxt3": "workspace:*",
+
+    "nuxt": "^3.15.0"
+  }
+}

package/template/nuxt4/app.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ribbons } from "@tsparticles/ribbons";
+
+function fireRibbons() {
+  ribbons();
+}
+</script>
+
+<template>
+  <div id="app">
+    <h1>Ribbons</h1>
+    <div class="controls">
+      <button @click="fireRibbons">Fire Ribbons</button>
+    </div>
+  </div>
+</template>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+  background: #0a0a23;
+  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 {
+  margin-top: 2rem;
+}
+
+button {
+  padding: 0.8em 2em;
+  font-size: 1.1em;
+  border: none;
+  border-radius: 8px;
+  background: #6c5ce7;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: #a29bfe;
+}
+</style>

package/template/nuxt4/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "preview": "nuxt start"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+    "@tsparticles/nuxt4": "workspace:*",
+
+    "nuxt": "^4.0.0"
+  },
+  "devDependencies": {
+    "typescript": "~5.8.2"
+  }
+}

package/template/preact/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": {
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+    "@tsparticles/preact": "workspace:*",
+
+    "preact": "^10.25.0"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.1"
+  }
+}

package/template/preact/src/App.css

@@ -0,0 +1,40 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  background: #0a0a23;
+  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 {
+  margin-top: 2rem;
+}
+
+button {
+  padding: 0.8em 2em;
+  font-size: 1.1em;
+  border: none;
+  border-radius: 8px;
+  background: #6c5ce7;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: #a29bfe;
+}

package/template/preact/src/App.tsx

@@ -0,0 +1,13 @@
+import { ribbons } from "@tsparticles/ribbons";
+import "./App.css";
+
+export default function App() {
+  return (
+    <div id="app">
+      <h1>Ribbons</h1>
+      <div class="controls">
+        <button onClick={() => ribbons()}>Fire Ribbons</button>
+      </div>
+    </div>
+  );
+}

package/template/qwik/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": {
+    "@builder.io/qwik": "^1.12.0",
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+    "@tsparticles/qwik": "workspace:*"
+ },
+  "devDependencies": {
+    "typescript": "~5.8.2"
+  }
+}

package/template/qwik/src/App.tsx

@@ -0,0 +1,13 @@
+import { component$ } from "@builder.io/qwik";
+import { ribbons } from "@tsparticles/ribbons";
+
+export default component$(() => {
+  return (
+    <div id="app">
+      <h1>Ribbons</h1>
+      <div class="controls">
+        <button onClick$={() => ribbons()}>Fire Ribbons</button>
+      </div>
+    </div>
+  );
+});

package/template/react/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": {
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+    "@tsparticles/react": "workspace:*"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.1"
+  }
+}

package/template/react/src/App.css

@@ -0,0 +1,40 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  background: #0a0a23;
+  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 {
+  margin-top: 2rem;
+}
+
+button {
+  padding: 0.8em 2em;
+  font-size: 1.1em;
+  border: none;
+  border-radius: 8px;
+  background: #6c5ce7;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: #a29bfe;
+}

package/template/react/src/App.tsx

@@ -0,0 +1,23 @@
+import Particles, { ParticlesProvider } from "@tsparticles/react";
+import { ribbons } from "@tsparticles/ribbons";
+import type { Engine } from "@tsparticles/engine";
+import "./App.css";
+
+async function init(engine: Engine): Promise<void> {}
+
+export default function App() {
+  function fireRibbons() {
+    ribbons();
+  }
+
+  return (
+    <ParticlesProvider init={init}>
+      <div id="app">
+        <h1>Ribbons</h1>
+        <div className="controls">
+          <button onClick={fireRibbons}>Fire Ribbons</button>
+        </div>
+      </div>
+    </ParticlesProvider>
+  );
+}

package/template/riot/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+
+    "@tsparticles/riot": "workspace:*",
+    "riot": "^9.0.0"
+  },
+  "devDependencies": {
+    "@riotjs/compiler": "^9.0.0",
+    "vite-plugin-riot": "^1.9.0"
+  }
+}

package/template/riot/src/app.riot

@@ -0,0 +1,61 @@
+<app>
+  <div id="app">
+    <h1>Ribbons</h1>
+    <div class="controls">
+      <button onclick={fireRibbons}>Fire Ribbons</button>
+    </div>
+  </div>
+
+  <script>
+    import { ribbons } from "@tsparticles/ribbons";
+
+    export default {
+      fireRibbons() {
+        ribbons();
+      },
+    };
+  </script>
+
+  <style>
+    body {
+      margin: 0;
+      overflow: hidden;
+      background: #0a0a23;
+      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 {
+      margin-top: 2rem;
+    }
+
+    button {
+      padding: 0.8em 2em;
+      font-size: 1.1em;
+      border: none;
+      border-radius: 8px;
+      background: #6c5ce7;
+      color: #fff;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+
+    button:hover {
+      background: #a29bfe;
+    }
+  </style>
+</app>

package/template/solid/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": {
+    "solid-js": "^1.8.11",
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+    "@tsparticles/solid": "workspace:*"
+  },
+  "devDependencies": {
+    "vite-plugin-solid": "^2.8.2"
+  }
+}

package/template/solid/src/App.tsx

@@ -0,0 +1,12 @@
+import { ribbons } from "@tsparticles/ribbons";
+
+export default function App() {
+  return (
+    <div id="app">
+      <h1>Ribbons</h1>
+      <div class="controls">
+        <button onClick={() => ribbons()}>Fire Ribbons</button>
+      </div>
+    </div>
+  );
+}

package/template/solid/src/index.css

@@ -0,0 +1,40 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  background: #0a0a23;
+  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 {
+  margin-top: 2rem;
+}
+
+button {
+  padding: 0.8em 2em;
+  font-size: 1.1em;
+  border: none;
+  border-radius: 8px;
+  background: #6c5ce7;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: #a29bfe;
+}

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,18 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "preview": "stencil build --dev --watch --serve",
+    "dev": "stencil build --dev --watch --serve"
+  },
+  "dependencies": {
+    "@stencil/core": "^4.20.0",
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+
+    "@tsparticles/stencil": "workspace:*"
+  }
+}

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

@@ -0,0 +1,22 @@
+import { Component, h } from "@stencil/core";
+import { ribbons } from "@tsparticles/ribbons";
+
+@Component({
+  tag: "app-home",
+})
+export class AppHome {
+  private fireRibbons(): void {
+    ribbons();
+  }
+
+  render() {
+    return (
+      <div id="app">
+        <h1>Ribbons</h1>
+        <div class="controls">
+          <button onClick={() => this.fireRibbons()}>Fire Ribbons</button>
+        </div>
+      </div>
+    );
+  }
+}