@tsparticles/template-particles 4.1.3 → 4.2.1

package/template/lit/src/my-app.ts

@@ -0,0 +1,64 @@
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { initParticlesEngine } from "@tsparticles/lit";
+import { loadParticles } from "@tsparticles/particles";
+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,
+};
+
+@customElement("my-app")
+export class MyApp extends LitElement {
+  @state()
+  private initialized = false;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    void initParticlesEngine(async (engine) => {
+      await loadParticles(engine);
+      this.initialized = true;
+    });
+  }
+
+  render() {
+    return html`
+      <style>
+        #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>
+      <div id="app">
+        <h1>tsParticles</h1>
+      </div>
+      ${this.initialized ? html`<lit-particles id="tsparticles" .options=${options}></lit-particles>` : ""}
+    `;
+  }
+}

package/template/nextjs/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "preview": "next start"
+  },
+  "dependencies": {
+    "next": "^15.3.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "@tsparticles/engine": "^4.0.0",
+    "@tsparticles/particles": "^4.0.0",
+    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/nextjs": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "~5.8.3"
+  }
+}

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

@@ -0,0 +1,39 @@
+"use client";
+
+import Particles from "@tsparticles/nextjs";
+import { loadParticles } from "@tsparticles/particles";
+import type { Engine, ISourceOptions } from "@tsparticles/engine";
+
+async function init(engine: Engine): Promise<void> {
+  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,
+};
+
+export default function Home() {
+  return (
+    <>
+      <div id="app">
+        <h1>tsParticles</h1>
+      </div>
+      <Particles id="tsparticles" init={init} options={options} />
+    </>
+  );
+}

package/template/nuxt2/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "preview": "nuxt start"
+  },
+  "dependencies": {
+    "nuxt": "^2.18.1",
+    "vue": "^2.7.16",
+    "vue-template-compiler": "^2.7.16",
+    "@tsparticles/engine": "^4.0.0",
+    "@tsparticles/particles": "^4.0.0",
+    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/vue2": "^4.1.3"
+  }
+}

package/template/nuxt2/pages/index.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: "HomePage",
+  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/nuxt3/app.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { loadParticles } from "@tsparticles/particles";
+import { tsParticles } from "@tsparticles/engine";
+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,
+};
+
+onMounted(() => {
+  void loadParticles(tsParticles);
+});
+</script>
+
+<template>
+  <div>
+    <div id="app">
+      <h1>tsParticles</h1>
+    </div>
+    <vue-particles id="tsparticles" :options="options" />
+  </div>
+</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/nuxt3/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "preview": "nuxt preview"
+  },
+  "dependencies": {
+    "nuxt": "^3.17.1",
+    "vue": "^3.5.32",
+    "@tsparticles/engine": "^4.0.0",
+    "@tsparticles/particles": "^4.0.0",
+    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/vue3": "^4.1.3"
+  }
+}

package/template/nuxt4/app.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { loadParticles } from "@tsparticles/particles";
+import { tsParticles } from "@tsparticles/engine";
+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,
+};
+
+onMounted(() => {
+  void loadParticles(tsParticles);
+});
+</script>
+
+<template>
+  <div>
+    <div id="app">
+      <h1>tsParticles</h1>
+    </div>
+    <vue-particles id="tsparticles" :options="options" />
+  </div>
+</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/nuxt4/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "{{packageName}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "preview": "nuxt preview"
+  },
+  "dependencies": {
+    "nuxt": "^4.0.0",
+    "vue": "^4.0.0",
+    "@tsparticles/engine": "^4.0.0",
+    "@tsparticles/particles": "^4.0.0",
+    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/vue3": "^4.1.3"
+  }
+}

package/template/preact/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": {
+    "preact": "^10.26.5",
+    "@tsparticles/engine": "^4.0.0",
+    "@tsparticles/particles": "^4.0.0",
+    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/preact": "^4.1.3"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.1",
+    "typescript": "~5.8.3"
+  }
+}

package/template/preact/src/App.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);
+}

package/template/preact/src/App.tsx

@@ -0,0 +1,40 @@
+import { useEffect } from "preact/hooks";
+import Particles from "@tsparticles/preact";
+import { loadParticles } from "@tsparticles/particles";
+import { tsParticles } from "@tsparticles/engine";
+import type { ISourceOptions } from "@tsparticles/engine";
+import "./App.css";
+
+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,
+};
+
+export default function App() {
+  useEffect(() => {
+    void loadParticles(tsParticles);
+  }, []);
+
+  return (
+    <>
+      <div id="app">
+        <h1>tsParticles</h1>
+      </div>
+      <Particles id="tsparticles" options={options} />
+    </>
+  );
+}

package/template/qwik/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": {
+    "@builder.io/qwik": "^1.12.1",
+    "@tsparticles/engine": "^4.0.0",
+    "@tsparticles/particles": "^4.0.0",
+    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/qwik": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "~5.8.3"
+  }
+}

package/template/qwik/src/App.tsx

@@ -0,0 +1,50 @@
+import { component$, useVisibleTask$ } from "@builder.io/qwik";
+import { Particles } from "@tsparticles/qwik";
+import { loadParticles } from "@tsparticles/particles";
+import { tsParticles } from "@tsparticles/engine";
+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,
+};
+
+export default component$(() => {
+  useVisibleTask$(() => {
+    void loadParticles(tsParticles);
+  });
+
+  return (
+    <>
+      <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>
+      <div id="app">
+        <h1>tsParticles</h1>
+      </div>
+      <Particles id="tsparticles" options={options} />
+    </>
+  );
+});

package/template/react/package.json

@@ -0,0 +1,19 @@
+{
+  "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/react": "^4.1.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.1"
+  }
+}

package/template/react/src/App.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);
+}

package/template/react/src/App.tsx

@@ -0,0 +1,38 @@
+import Particles, { ParticlesProvider } from "@tsparticles/react";
+import { loadParticles } from "@tsparticles/particles";
+import type { Engine, ISourceOptions } from "@tsparticles/engine";
+import "./App.css";
+
+async function init(engine: Engine): Promise<void> {
+  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,
+};
+
+export default function App() {
+  return (
+    <ParticlesProvider init={init}>
+      <div id="app">
+        <h1>tsParticles</h1>
+      </div>
+      <Particles id="tsparticles" options={options} />
+    </ParticlesProvider>
+  );
+}

package/template/riot/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": {
+    "riot": "^9.5.2",
+    "@tsparticles/engine": "^4.0.0",
+    "@tsparticles/particles": "^4.0.0",
+    "@tsparticles/configs": "^4.0.0",
+    "@tsparticles/riot": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "~5.8.3"
+  }
+}