@tsparticles/template-particles 4.1.3 → 4.2.0

package/template/riot/src/app.riot

@@ -0,0 +1,31 @@
+<app>
+  <div id="app">
+    <h1>tsParticles</h1>
+  </div>
+  <riot-particles id="tsparticles"></riot-particles>
+
+  <style>
+    body { margin: 0; overflow: hidden; }
+    #app {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 10;
+      text-align: center;
+      color: #fff;
+      font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+      pointer-events: none;
+    }
+    h1 { font-size: 3.2em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
+  </style>
+
+  <script>
+    import { loadParticles } from "@tsparticles/particles";
+    import { tsParticles } from "@tsparticles/engine";
+
+    this.on("mount", () => {
+      loadParticles(tsParticles);
+    });
+  </script>
+</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,59 @@
+import { onMount } from "solid-js";
+import Particles, { initParticlesEngine } from "@tsparticles/solid";
+import { loadParticles } from "@tsparticles/particles";
+import type { ISourceOptions } from "@tsparticles/engine";
+
+export default function App() {
+  onMount(() => {
+    void initParticlesEngine(async (engine) => {
+      await loadParticles(engine);
+    });
+  });
+
+  const options: ISourceOptions = {
+    background: { color: { value: "#0d0d2b" } },
+    fpsLimit: 120,
+    particles: {
+      number: { value: 80, density: { enable: true } },
+      color: { value: "#ffffff" },
+      shape: { type: "circle" },
+      opacity: { value: 0.5 },
+      size: { value: { min: 1, max: 5 } },
+      links: {
+        enable: true,
+        distance: 150,
+        color: "#ffffff",
+        opacity: 0.3,
+        width: 1,
+      },
+      move: {
+        enable: true,
+        speed: 2,
+        direction: "none",
+        random: false,
+        straight: false,
+        outModes: { default: "bounce" },
+      },
+    },
+    interactivity: {
+      events: {
+        onHover: { enable: true, mode: "repulse" },
+        onClick: { enable: true, mode: "push" },
+      },
+      modes: {
+        repulse: { distance: 100, duration: 0.4 },
+        push: { quantity: 4 },
+      },
+    },
+    detectRetina: true,
+  };
+
+  return (
+    <>
+      <div id="app-content">
+        <h1>tsParticles</h1>
+      </div>
+      <Particles id="tsparticles" options={options} />
+    </>
+  );
+}

package/template/solid/src/index.css

@@ -0,0 +1,21 @@
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+#app-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  text-align: center;
+  color: #fff;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  pointer-events: none;
+}
+
+h1 {
+  font-size: 3.2em;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}

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,21 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "stencil build --dev --watch",
+    "build": "stencil build",
+    "preview": "stencil build --preview"
+  },
+  "dependencies": {
+    "@stencil/core": "^4.26.0",
+    "@tsparticles/engine": "^4.0.0",
+    "@tsparticles/particles": "^4.0.0",
+    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/stencil": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "~5.8.3"
+  }
+}

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

@@ -0,0 +1,64 @@
+import { Component, h } from "@stencil/core";
+import { loadParticles } from "@tsparticles/particles";
+import { tsParticles } from "@tsparticles/engine";
+import type { ISourceOptions } from "@tsparticles/engine";
+
+@Component({
+  tag: "app-home",
+  styleUrl: "app-home.css",
+  shadow: true,
+})
+export class AppHome {
+  private options: ISourceOptions = {
+    background: { color: { value: "#0d0d2b" } },
+    fpsLimit: 120,
+    particles: {
+      number: { value: 80, density: { enable: true } },
+      color: { value: "#ffffff" },
+      shape: { type: "circle" },
+      opacity: { value: 0.5 },
+      size: { value: { min: 1, max: 5 } },
+      links: {
+        enable: true,
+        distance: 150,
+        color: "#ffffff",
+        opacity: 0.3,
+        width: 1,
+      },
+      move: {
+        enable: true,
+        speed: 2,
+        direction: "none",
+        random: false,
+        straight: false,
+        outModes: { default: "bounce" },
+      },
+    },
+    interactivity: {
+      events: {
+        onHover: { enable: true, mode: "repulse" },
+        onClick: { enable: true, mode: "push" },
+      },
+      modes: {
+        repulse: { distance: 100, duration: 0.4 },
+        push: { quantity: 4 },
+      },
+    },
+    detectRetina: true,
+  };
+
+  componentDidLoad() {
+    void loadParticles(tsParticles);
+  }
+
+  render() {
+    return (
+      <div>
+        <div id="app">
+          <h1>tsParticles</h1>
+        </div>
+        <stencil-particles id="tsparticles" options={this.options}></stencil-particles>
+      </div>
+    );
+  }
+}

package/template/svelte/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{projectName}}",
+  "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,70 @@
+<script lang="ts">
+  import Particles from "@tsparticles/svelte";
+  import type { ISourceOptions } from "@tsparticles/engine";
+
+  const options: ISourceOptions = {
+    background: { color: { value: "#0d0d2b" } },
+    fpsLimit: 120,
+    particles: {
+      number: { value: 80, density: { enable: true } },
+      color: { value: "#ffffff" },
+      shape: { type: "circle" },
+      opacity: { value: 0.5 },
+      size: { value: { min: 1, max: 5 } },
+      links: {
+        enable: true,
+        distance: 150,
+        color: "#ffffff",
+        opacity: 0.3,
+        width: 1,
+      },
+      move: {
+        enable: true,
+        speed: 2,
+        direction: "none",
+        random: false,
+        straight: false,
+        outModes: { default: "bounce" },
+      },
+    },
+    interactivity: {
+      events: {
+        onHover: { enable: true, mode: "repulse" },
+        onClick: { enable: true, mode: "push" },
+      },
+      modes: {
+        repulse: { distance: 100, duration: 0.4 },
+        push: { quantity: 4 },
+      },
+    },
+    detectRetina: true,
+  };
+</script>
+
+<h1>tsParticles</h1>
+
+<Particles id="tsparticles" options={options} />
+
+<style>
+  :global(body) {
+    margin: 0;
+    overflow: hidden;
+  }
+
+  :global(#app) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+    text-align: center;
+    color: #fff;
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    pointer-events: none;
+  }
+
+  h1 {
+    font-size: 3.2em;
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+  }
+</style>

package/template/svelte/src/main.ts

@@ -0,0 +1,12 @@
+import { mount } from "svelte";
+import { initParticlesEngine } from "@tsparticles/svelte";
+import { loadParticles } from "@tsparticles/particles";
+import App from "./App.svelte";
+
+void initParticlesEngine(async (engine) => {
+  await loadParticles(engine);
+});
+
+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/vue2/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^2.7.16",
+    "@tsparticles/engine": "^4.0.0",
+    "@tsparticles/particles": "^4.0.0",
+    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/vue2": "^4.1.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue2": "^2.3.3",
+    "vue-tsc": "^2.2.8",
+    "typescript": "~5.8.3"
+  }
+}

package/template/vue2/src/App.vue

@@ -0,0 +1,83 @@
+<template>
+  <div id="app">
+    <h1>tsParticles</h1>
+  </div>
+  <vue-particles id="tsparticles" :options="options" />
+</template>
+
+<script>
+import { loadParticles } from "@tsparticles/particles";
+import { tsParticles } from "@tsparticles/engine";
+
+export default {
+  name: "App",
+  data() {
+    return {
+      options: {
+        background: { color: { value: "#0d0d2b" } },
+        fpsLimit: 120,
+        particles: {
+          number: { value: 80, density: { enable: true } },
+          color: { value: "#ffffff" },
+          shape: { type: "circle" },
+          opacity: { value: 0.5 },
+          size: { value: { min: 1, max: 5 } },
+          links: {
+            enable: true,
+            distance: 150,
+            color: "#ffffff",
+            opacity: 0.3,
+            width: 1,
+          },
+          move: {
+            enable: true,
+            speed: 2,
+            direction: "none",
+            random: false,
+            straight: false,
+            outModes: { default: "bounce" },
+          },
+        },
+        interactivity: {
+          events: {
+            onHover: { enable: true, mode: "repulse" },
+            onClick: { enable: true, mode: "push" },
+          },
+          modes: {
+            repulse: { distance: 100, duration: 0.4 },
+            push: { quantity: 4 },
+          },
+        },
+        detectRetina: true,
+      },
+    };
+  },
+  mounted() {
+    void loadParticles(tsParticles);
+  },
+};
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+#app {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  text-align: center;
+  color: #fff;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  pointer-events: none;
+}
+
+h1 {
+  font-size: 3.2em;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}
+</style>

package/template/vue3/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "{{projectName}}",
+  "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,53 @@
+<script setup lang="ts">
+import type { ISourceOptions } from "@tsparticles/engine";
+
+const options: ISourceOptions = {
+  background: { color: { value: "#0d0d2b" } },
+  fpsLimit: 120,
+  particles: {
+    number: { value: 80, density: { enable: true } },
+    color: { value: "#ffffff" },
+    shape: { type: "circle" },
+    opacity: { value: 0.5 },
+    size: { value: { min: 1, max: 5 } },
+    links: { enable: true, distance: 150, color: "#ffffff", opacity: 0.3, width: 1 },
+    move: { enable: true, speed: 2, direction: "none", random: false, straight: false, outModes: { default: "bounce" } },
+  },
+  interactivity: {
+    events: { onHover: { enable: true, mode: "repulse" }, onClick: { enable: true, mode: "push" } },
+    modes: { repulse: { distance: 100, duration: 0.4 }, push: { quantity: 4 } },
+  },
+  detectRetina: true,
+};
+</script>
+
+<template>
+  <div id="app">
+    <h1>tsParticles</h1>
+  </div>
+  <vue-particles id="tsparticles" :options="options" />
+</template>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+#app {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  text-align: center;
+  color: #fff;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  pointer-events: none;
+}
+
+h1 {
+  font-size: 3.2em;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}
+</style>

package/template/vue3/src/main.ts

@@ -0,0 +1,14 @@
+import { createApp } from "vue";
+import Particles from "@tsparticles/vue3";
+import { loadParticles } from "@tsparticles/particles";
+import App from "./App.vue";
+
+const app = createApp(App);
+
+app.use(Particles, {
+  init: async (engine) => {
+    await loadParticles(engine);
+  },
+});
+
+app.mount("#app");

package/template/webcomponents/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "^4.0.0",
+    "@tsparticles/particles": "^4.0.0",
+    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/webcomponents": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "~5.8.3"
+  }
+}

package/template/webcomponents/src/main.ts

@@ -0,0 +1,16 @@
+import "./style.css";
+import { loadParticles } from "@tsparticles/particles";
+import { tsParticles } from "@tsparticles/engine";
+
+(async () => {
+  await loadParticles(tsParticles);
+
+  const app = document.createElement("div");
+  app.id = "app";
+  app.innerHTML = "<h1>tsParticles</h1>";
+  document.body.appendChild(app);
+
+  const particles = document.createElement("web-particles");
+  particles.id = "tsparticles";
+  document.body.appendChild(particles);
+})();

package/template/webcomponents/src/style.css

@@ -0,0 +1,21 @@
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+#app {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  text-align: center;
+  color: #fff;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  pointer-events: none;
+}
+
+h1 {
+  font-size: 3.2em;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}