@tsparticles/template-ribbons 4.1.3 → 4.2.1

package/template/svelte/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+    "@tsparticles/svelte": "workspace:*"
+  },
+  "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,55 @@
+<script lang="ts">
+  import { ribbons } from "@tsparticles/ribbons";
+
+  function fire(): void {
+    ribbons();
+  }
+</script>
+
+<h1>tsParticles Ribbons</h1>
+<div class="controls">
+  <button onclick={fire}>Fire!</button>
+</div>
+
+<style>
+  :global(body) {
+    margin: 0;
+    overflow: hidden;
+    background: #0a0a23;
+    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 {
+    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/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",
@@ -7,5 +7,9 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*"
   }
 }

package/template/vue2/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/vue2": "workspace:*",
+    "vue": "^2.7.16"
+  },
+  "devDependencies": {
+    "vite-plugin-vue2": "^2.0.3"
+  }
+}

package/template/vue2/src/App.vue

@@ -0,0 +1,64 @@
+<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 {
+  name: "App",
+  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/vue3/package.json

@@ -0,0 +1,21 @@
+{
+  "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/engine": "workspace:*",
+    "@tsparticles/ribbons": "workspace:*",
+    "@tsparticles/vue3": "workspace:*"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.5",
+    "vue-tsc": "^3.2.6"
+  }
+}

package/template/vue3/src/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/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,15 @@
+{
+  "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:*"
+ }
+}

package/template/webcomponents/src/main.ts

@@ -0,0 +1,18 @@
+import "./style.css";
+import { ribbons } from "@tsparticles/ribbons";
+
+const app = document.getElementById("app")!;
+
+const btn = document.createElement("button");
+btn.textContent = "Fire Ribbons";
+btn.addEventListener("click", () => ribbons());
+
+const controls = document.createElement("div");
+controls.className = "controls";
+controls.appendChild(btn);
+
+const title = document.createElement("h1");
+title.textContent = "Ribbons";
+
+app.appendChild(title);
+app.appendChild(controls);

package/template/webcomponents/src/style.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;
+}