+
+
+ );
+}
+
+render(, document.getElementById("app"));
+```
+
+---
+
+You now have everything needed to integrate tsParticles into an Inferno application. Each example is self-contained and ready to be copied into your project.
diff --git a/websites/website/docs/guides/jquery.md b/websites/website/docs/guides/jquery.md
new file mode 100644
index 00000000000..01f457caf36
--- /dev/null
+++ b/websites/website/docs/guides/jquery.md
@@ -0,0 +1,273 @@
+# jQuery Integration
+
+Integrate tsParticles into your jQuery-based projects with the official jQuery plugin wrapper.
+
+## Installation
+
+### Via CDN
+
+Include jQuery, tsParticles, and the jQuery plugin via script tags:
+
+```html
+
+
+
+```
+
+### Via npm + Build
+
+Install the required packages:
+
+```bash
+npm install jquery @tsparticles/jquery tsparticles
+```
+
+Import into your project:
+
+```javascript
+import $ from "jquery";
+import "@tsparticles/jquery";
+```
+
+## Engine Initialization
+
+Before particles can be rendered, the tsParticles engine must be initialized with the features you need. This is done via `$.particles.init`:
+
+```javascript
+(async () => {
+ await $.particles.init(async (engine) => {
+ const { loadFull } = await import("tsparticles");
+ await loadFull(engine);
+ });
+})();
+```
+
+> **Why is this needed?** tsParticles uses a modular architecture. `loadFull` registers all built-in shapes, interactions, and updaters. You can import smaller bundles (e.g., `tsparticles-slim`) to reduce bundle size.
+
+## Basic Usage
+
+Once the engine is initialized and the DOM is ready, select a container element and call `.particles().load()`:
+
+```javascript
+$(document).ready(async () => {
+ await $.particles.init(async (engine) => {
+ const { loadFull } = await import("tsparticles");
+ await loadFull(engine);
+ });
+
+ $("#tsparticles")
+ .particles()
+ .load({
+ background: {
+ color: "#0d47a1",
+ },
+ particles: {
+ number: { value: 80 },
+ links: { enable: true, color: "#ffffff" },
+ move: { enable: true },
+ },
+ });
+});
+```
+
+The container element must exist in the DOM:
+
+```html
+
+```
+
+## Custom Configuration
+
+The `.load()` method accepts the full `ISourceOptions` object. Here is a comprehensive example:
+
+```javascript
+$("#tsparticles")
+ .particles()
+ .load({
+ background: {
+ color: "#000000",
+ },
+ fpsLimit: 120,
+ particles: {
+ color: {
+ value: ["#ff0000", "#00ff00", "#0000ff"],
+ },
+ move: {
+ direction: "none",
+ enable: true,
+ outModes: "bounce",
+ speed: 4,
+ },
+ number: {
+ density: {
+ enable: true,
+ },
+ value: 60,
+ },
+ opacity: {
+ value: 0.6,
+ },
+ shape: {
+ type: ["circle", "square", "triangle"],
+ },
+ size: {
+ value: { min: 2, max: 8 },
+ },
+ links: {
+ enable: true,
+ distance: 150,
+ color: "#ffffff",
+ opacity: 0.4,
+ width: 1,
+ },
+ },
+ interactivity: {
+ events: {
+ onClick: {
+ enable: true,
+ mode: "push",
+ },
+ onHover: {
+ enable: true,
+ mode: "repulse",
+ },
+ },
+ modes: {
+ push: {
+ quantity: 4,
+ },
+ repulse: {
+ distance: 200,
+ },
+ },
+ },
+ });
+```
+
+## Preset Loading
+
+If you have installed a preset package (e.g. `tsparticles-preset-stars`), load it during engine initialization and reference it in the configuration:
+
+```bash
+npm install tsparticles-preset-stars
+```
+
+```javascript
+(async () => {
+ await $.particles.init(async (engine) => {
+ const { loadStarsPreset } = await import("tsparticles-preset-stars");
+ await loadStarsPreset(engine);
+ });
+
+ $("#tsparticles")
+ .particles()
+ .load({
+ preset: "stars",
+ background: { color: "#0d47a1" },
+ });
+})();
+```
+
+## Event Handling and Container Control
+
+`.particles()` returns a jQuery plugin instance. To access the underlying tsParticles `Container` and call methods like `play()`, `pause()`, or `destroy()`:
+
+```javascript
+const $container = $("#tsparticles");
+
+// Load particles
+$container.particles().load({
+ /* options */
+});
+
+// Play/pause after a few seconds
+setTimeout(() => {
+ const container = $container.particles().getContainer();
+ container?.pause();
+}, 5000);
+```
+
+## Full Example
+
+Below is a complete, self-contained HTML page that loads tsParticles via CDN and renders a particle scene with interactive effects:
+
+```html
+
+
+
+
+
+ tsParticles + jQuery
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## API Reference
+
+| Method | Description |
+| ---------------------------------- | -------------------------------------------------------- |
+| `$.particles.init(fn)` | Initialize the engine with a loader callback |
+| `$(el).particles()` | Create a particles plugin instance on the element |
+| `$(el).particles().load(opts)` | Load and start the particle configuration |
+| `$(el).particles().destroy()` | Destroy the particle instance and clean up |
+| `$(el).particles().getContainer()` | Return the underlying `Container` for imperative control |
diff --git a/websites/website/docs/guides/lit.md b/websites/website/docs/guides/lit.md
new file mode 100644
index 00000000000..7ee88894630
--- /dev/null
+++ b/websites/website/docs/guides/lit.md
@@ -0,0 +1,301 @@
+---
+title: Lit
+description: Integrate tsParticles with Lit using the official @tsparticles/lit web component wrapper.
+---
+
+# Lit Integration
+
+The `@tsparticles/lit` package provides a `` custom element built with Lit, allowing you to use tsParticles declaratively in any Lit project or plain HTML page.
+
+## Installation
+
+```bash
+npm install @tsparticles/lit tsparticles
+```
+
+The package is fully typed and includes Lit's reactive controller patterns for reactively updating particle options.
+
+## Engine Initialization
+
+Call `initParticlesEngine` before registering the `` component or importing it in your application. This must happen exactly once.
+
+```typescript
+import { initParticlesEngine } from "@tsparticles/lit";
+import { loadFull } from "tsparticles";
+
+void initParticlesEngine(async (engine) => {
+ await loadFull(engine);
+});
+```
+
+For optimized bundle sizes, import only the features your project needs:
+
+```typescript
+import { initParticlesEngine } from "@tsparticles/lit";
+import { loadBasic } from "@tsparticles/basic";
+import { loadConfettiPreset } from "@tsparticles/preset-confetti";
+
+void initParticlesEngine(async (engine) => {
+ await loadBasic(engine);
+ await loadConfettiPreset(engine);
+});
+```
+
+## Basic Usage
+
+After the engine is initialized, use the `` element in any Lit template or HTML file:
+
+```typescript
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import "@tsparticles/lit";
+
+@customElement("my-app")
+class MyApp extends LitElement {
+ private options = {
+ background: {
+ color: "#0d1117",
+ },
+ particles: {
+ number: { value: 60 },
+ color: { value: "#58a6ff" },
+ links: {
+ enable: true,
+ color: "#58a6ff",
+ },
+ move: { enable: true, speed: 2 },
+ },
+ };
+
+ render() {
+ return html` `;
+ }
+}
+```
+
+The `.options` syntax (with leading dot) is Lit's property binding, ensuring the object is passed by reference rather than serialized as an attribute.
+
+## Plain HTML Usage
+
+Once `@tsparticles/lit` is bundled or loaded, the element works in plain HTML too:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+You can pass a minimal options object as a JSON attribute:
+
+```html
+
+```
+
+## Custom Configuration
+
+Pass a full tsParticles configuration as a Lit property:
+
+```typescript
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import type { ISourceOptions } from "@tsparticles/engine";
+import "@tsparticles/lit";
+
+@customElement("my-particles")
+class MyParticles extends LitElement {
+ @property({ type: Object })
+ options: ISourceOptions = {
+ background: {
+ color: "#0d1117",
+ },
+ fpsLimit: 120,
+ fullScreen: {
+ enable: true,
+ zIndex: -1,
+ },
+ particles: {
+ color: {
+ value: ["#ff5733", "#33ff57", "#3357ff"],
+ },
+ links: {
+ color: "#ffffff",
+ enable: true,
+ opacity: 0.3,
+ distance: 150,
+ },
+ move: {
+ enable: true,
+ speed: 1.5,
+ direction: "none",
+ random: true,
+ },
+ number: {
+ value: 100,
+ density: {
+ enable: true,
+ },
+ },
+ opacity: {
+ value: 0.6,
+ animation: {
+ enable: true,
+ speed: 0.5,
+ minimumValue: 0.1,
+ },
+ },
+ size: {
+ value: { min: 1, max: 5 },
+ animation: {
+ enable: true,
+ speed: 2,
+ minimumValue: 1,
+ },
+ },
+ },
+ interactivity: {
+ events: {
+ onHover: {
+ enable: true,
+ mode: "grab",
+ },
+ onClick: {
+ enable: true,
+ mode: "push",
+ },
+ },
+ modes: {
+ grab: {
+ distance: 180,
+ links: {
+ opacity: 0.5,
+ },
+ },
+ push: {
+ quantity: 4,
+ },
+ },
+ },
+ };
+
+ render() {
+ return html` `;
+ }
+}
+```
+
+## Event Handling
+
+Listen for the `particles-loaded` custom event dispatched by the `` element:
+
+```typescript
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import type { Container } from "@tsparticles/engine";
+import "@tsparticles/lit";
+
+@customElement("my-app")
+class MyApp extends LitElement {
+ private handleParticlesLoaded(e: CustomEvent) {
+ const container = e.detail;
+ console.log("Particles loaded:", container);
+ container?.refresh();
+ }
+
+ render() {
+ return html` `;
+ }
+}
+```
+
+## TypeScript Example
+
+A fully typed Lit element with `initParticlesEngine`, reactive options, and event handling:
+
+```typescript
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { initParticlesEngine } from "@tsparticles/lit";
+import type { Container, ISourceOptions } from "@tsparticles/engine";
+import { loadFull } from "tsparticles";
+import "@tsparticles/lit";
+
+void initParticlesEngine(async (engine) => {
+ await loadFull(engine);
+});
+
+@customElement("particles-background")
+class ParticlesBackground extends LitElement {
+ @property({ type: Object })
+ options: ISourceOptions = {};
+
+ @property({ type: Boolean, attribute: "fullscreen" })
+ fullscreen = true;
+
+ protected onParticlesLoaded(e: CustomEvent) {
+ console.log("Container ready:", e.detail.id);
+ }
+
+ render() {
+ return html`
+
+
+ `;
+ }
+}
+```
+
+## Dynamic Updates
+
+Because `` uses Lit's reactive properties, changing the `options` property automatically updates the particles:
+
+```typescript
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import type { ISourceOptions } from "@tsparticles/engine";
+import "@tsparticles/lit";
+
+@customElement("dynamic-particles")
+class DynamicParticles extends LitElement {
+ @state()
+ private theme: "light" | "dark" = "dark";
+
+ private get options(): ISourceOptions {
+ return this.theme === "dark"
+ ? {
+ background: { color: "#0d1117" },
+ particles: { color: { value: "#58a6ff" } },
+ }
+ : {
+ background: { color: "#ffffff" },
+ particles: { color: { value: "#0969da" } },
+ };
+ }
+
+ private toggleTheme() {
+ this.theme = this.theme === "dark" ? "light" : "dark";
+ }
+
+ render() {
+ return html`
+
+
+ `;
+ }
+}
+```
+
+The component watches the `options` property and calls `refresh()` internally whenever it changes, seamlessly updating the particle configuration at runtime.
diff --git a/websites/website/docs/guides/nextjs.md b/websites/website/docs/guides/nextjs.md
new file mode 100644
index 00000000000..01a06709943
--- /dev/null
+++ b/websites/website/docs/guides/nextjs.md
@@ -0,0 +1,492 @@
+---
+title: Next.js Integration
+description: Step-by-step guide to integrating tsParticles into a Next.js application using the App Router.
+---
+
+# Next.js Integration
+
+This guide covers integrating tsParticles into a Next.js project using the **App Router** (Next.js 13+). For the legacy Pages Router, see the [Legacy Pages Router](#legacy-pages-router) section at the bottom.
+
+## Installation
+
+Install the `@tsparticles/react` wrapper and the full `tsparticles` engine (or a slim bundle for smaller builds):
+
+```bash
+npm install @tsparticles/react tsparticles
+```
+
+If you prefer the smaller `@tsparticles/slim` bundle:
+
+```bash
+npm install @tsparticles/react @tsparticles/slim
+```
+
+## Basic Usage (App Router)
+
+Next.js App Router components are server-side by default. Since tsParticles requires the browser `canvas` API, you must mark the component with the `"use client"` directive.
+
+```tsx
+"use client";
+
+import Particles from "@tsparticles/react";
+import { useCallback, useMemo } from "react";
+import type { Container, ISourceOptions } from "@tsparticles/engine";
+
+export default function ParticlesBackground() {
+ const particlesLoaded = useCallback((container?: Container) => {
+ console.log("Particles loaded", container);
+ }, []);
+
+ const options: ISourceOptions = useMemo(
+ () => ({
+ fullScreen: { zIndex: -1 },
+ background: { color: "#0d47a1" },
+ particles: {
+ number: { value: 80 },
+ links: { enable: true, color: "#ffffff" },
+ move: { enable: true },
+ size: { value: 3 },
+ },
+ }),
+ [],
+ );
+
+ return ;
+}
+```
+
+Create this as `components/particles-background.tsx` and import it into any page or layout. Because the file starts with `"use client"`, it will be rendered on the client — exactly where tsParticles needs to be.
+
+## Theme Switching
+
+Combine tsParticles with Next.js theme toggles by deriving the options from the current theme state:
+
+```tsx
+"use client";
+
+import Particles from "@tsparticles/react";
+import { useMemo, useState, useCallback } from "react";
+import type { Container, ISourceOptions } from "@tsparticles/engine";
+
+export default function ThemeAwareParticles() {
+ const [theme, setTheme] = useState<"light" | "dark">("dark");
+
+ const toggleTheme = useCallback(() => {
+ setTheme((t) => (t === "dark" ? "light" : "dark"));
+ }, []);
+
+ const particlesLoaded = useCallback((_container?: Container) => {}, []);
+
+ const options: ISourceOptions = useMemo(
+ () => ({
+ fullScreen: { zIndex: -1 },
+ background: {
+ color: theme === "dark" ? "#000000" : "#ffffff",
+ },
+ particles: {
+ color: { value: theme === "dark" ? "#ffffff" : "#000000" },
+ number: { value: 100 },
+ links: {
+ enable: true,
+ color: theme === "dark" ? "#ffffff" : "#000000",
+ },
+ move: { enable: true },
+ },
+ }),
+ [theme],
+ );
+
+ return (
+ <>
+
+
+
+ );
+}
+```
+
+The `options` object is recreated via `useMemo` whenever `theme` changes, so the canvas updates automatically.
+
+## Confetti Effect
+
+Use the `@tsparticles/preset-confetti` to trigger celebratory confetti on events like button clicks:
+
+```bash
+npm install @tsparticles/preset-confetti
+```
+
+```tsx
+"use client";
+
+import Particles from "@tsparticles/react";
+import { useCallback, useMemo, useState } from "react";
+import { loadConfettiPreset } from "@tsparticles/preset-confetti";
+import type { Container, ISourceOptions, Engine } from "@tsparticles/engine";
+
+export default function ConfettiButton() {
+ const [active, setActive] = useState(false);
+
+ const particlesInit = useCallback(async (engine: Engine) => {
+ await loadConfettiPreset(engine);
+ }, []);
+
+ const particlesLoaded = useCallback(
+ async (container?: Container) => {
+ if (active && container) {
+ await container.play();
+ }
+ },
+ [active],
+ );
+
+ const options: ISourceOptions = useMemo(
+ () => ({
+ preset: "confetti",
+ fullScreen: { zIndex: 1000 },
+ }),
+ [],
+ );
+
+ const handleCelebrate = useCallback(() => {
+ setActive(true);
+ setTimeout(() => setActive(false), 5000);
+ }, []);
+
+ return (
+ <>
+ {active && }
+
+
+ );
+}
+```
+
+The `init` callback loads the confetti preset into the engine before the particles are created.
+
+## Fireworks Effect
+
+Similarly, the fireworks preset creates a spectacular firework display:
+
+```bash
+npm install @tsparticles/preset-fireworks
+```
+
+```tsx
+"use client";
+
+import Particles from "@tsparticles/react";
+import { useCallback, useMemo, useRef } from "react";
+import { loadFireworksPreset } from "@tsparticles/preset-fireworks";
+import type { Container, Engine } from "@tsparticles/engine";
+
+export default function FireworksBackground() {
+ const containerRef = useRef(undefined);
+
+ const particlesInit = useCallback(async (engine: Engine) => {
+ await loadFireworksPreset(engine);
+ }, []);
+
+ const particlesLoaded = useCallback((container?: Container) => {
+ containerRef.current = container;
+ }, []);
+
+ const options = useMemo(
+ () => ({
+ preset: "fireworks" as const,
+ fullScreen: { zIndex: -1 },
+ background: {
+ color: "#000",
+ },
+ }),
+ [],
+ );
+
+ return ;
+}
+```
+
+## Full TypeScript Example with Container Ref
+
+Access the `Container` instance to control the animation programmatically (play, pause, destroy, export image):
+
+```tsx
+"use client";
+
+import Particles from "@tsparticles/react";
+import { useCallback, useMemo, useRef } from "react";
+import { loadFull } from "tsparticles";
+import type { Container, Engine, ISourceOptions } from "@tsparticles/engine";
+
+export default function ControllableParticles() {
+ const containerRef = useRef(undefined);
+
+ const particlesInit = useCallback(async (engine: Engine) => {
+ await loadFull(engine);
+ }, []);
+
+ const particlesLoaded = useCallback((container?: Container) => {
+ containerRef.current = container;
+ }, []);
+
+ const options: ISourceOptions = useMemo(
+ () => ({
+ fullScreen: { zIndex: -1 },
+ fpsLimit: 120,
+ interactivity: {
+ events: {
+ onClick: { enable: true, mode: "push" },
+ onHover: { enable: true, mode: "repulse" },
+ },
+ modes: {
+ push: { quantity: 4 },
+ repulse: { distance: 100 },
+ },
+ },
+ particles: {
+ color: { value: "#ff0000" },
+ links: {
+ enable: true,
+ color: "#ff0000",
+ distance: 150,
+ },
+ move: { enable: true, speed: 2 },
+ number: { value: 60 },
+ size: { value: { min: 1, max: 5 } },
+ },
+ }),
+ [],
+ );
+
+ const handlePause = useCallback(() => {
+ containerRef.current?.pause();
+ }, []);
+
+ const handlePlay = useCallback(() => {
+ containerRef.current?.play();
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+ );
+}
+```
+
+Key points:
+
+- `particlesInit` loads the engine features (only runs once per component mount).
+- `particlesLoaded` fires every time the container is fully initialized.
+- `containerRef` holds the `Container` instance so you can call its methods later.
+
+## Performance: useMemo and useCallback
+
+Always wrap static or rarely-changing options in `useMemo` and event handlers in `useCallback` to prevent unnecessary re-renders of the canvas:
+
+```tsx
+"use client";
+
+import Particles from "@tsparticles/react";
+import { useCallback, useMemo, useState } from "react";
+import type { Container, ISourceOptions } from "@tsparticles/engine";
+
+export default function PerformanceExample() {
+ const [particlesCount, setParticlesCount] = useState(80);
+
+ // Stable callback — never recreates unless deps change
+ const particlesLoaded = useCallback((container?: Container) => {
+ console.log("Container ready", container?.id);
+ }, []);
+
+ // Stable options object — prevents canvas re-initialization
+ const options: ISourceOptions = useMemo(
+ () => ({
+ fullScreen: { zIndex: -1 },
+ particles: {
+ number: { value: particlesCount },
+ links: { enable: true },
+ move: { enable: true },
+ },
+ }),
+ [particlesCount],
+ );
+
+ return (
+
+
+
+
+ );
+}
+```
+
+Without these optimizations, every parent re-render would create a new `options` object, causing the canvas to be recreated.
+
+## Page Integration
+
+Add a particle background to a page layout without affecting the page content:
+
+```tsx
+// app/layout.tsx (server component)
+import dynamic from "next/dynamic";
+
+const ParticlesBackground = dynamic(() => import("@/components/particles-background"), { ssr: false });
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+ {children}
+
+
+ );
+}
+```
+
+Use `dynamic()` with `ssr: false` to ensure the component never runs during server-side rendering. The particle canvas sits behind the main content via CSS `z-index`.
+
+## Multiple Instances
+
+You can render several independent `Particles` components on the same page, each with its own configuration:
+
+```tsx
+"use client";
+
+import Particles from "@tsparticles/react";
+import { useCallback, useMemo } from "react";
+import type { Container, ISourceOptions } from "@tsparticles/engine";
+
+function ParticlesGallery() {
+ const loaded = useCallback((c?: Container) => {}, []);
+
+ const redOptions: ISourceOptions = useMemo(
+ () => ({
+ fullScreen: false,
+ height: 200,
+ background: { color: "#1a0000" },
+ particles: {
+ color: { value: "#ff0000" },
+ number: { value: 30 },
+ move: { enable: true },
+ },
+ }),
+ [],
+ );
+
+ const blueOptions: ISourceOptions = useMemo(
+ () => ({
+ fullScreen: false,
+ height: 200,
+ background: { color: "#00001a" },
+ particles: {
+ color: { value: "#0000ff" },
+ number: { value: 30 },
+ move: { enable: true },
+ },
+ }),
+ [],
+ );
+
+ return (
+
+
+
+
+ );
+}
+```
+
+Each `Particles` component creates an independent canvas with its own animation loop. Set `fullScreen: false` and give each a fixed height so they coexist in the document flow.
+
+## Legacy Pages Router
+
+If you are using the Next.js **Pages Router** (`pages/` directory), the approach is similar but without the `"use client"` directive. Instead, you can use a dynamic import in the page component:
+
+```tsx
+// pages/index.tsx
+import dynamic from "next/dynamic";
+import type { NextPage } from "next";
+
+const ParticlesComponent = dynamic(() => import("../components/particles-component"), { ssr: false });
+
+const Home: NextPage = () => {
+ return (
+
+
+
Welcome
+
+ );
+};
+
+export default Home;
+```
+
+The component itself (`components/particles-component.tsx`) is a plain React component:
+
+```tsx
+import Particles from "@tsparticles/react";
+import { useCallback, useMemo } from "react";
+import type { Container, ISourceOptions } from "@tsparticles/engine";
+
+export default function ParticlesComponent() {
+ const particlesLoaded = useCallback((container?: Container) => {}, []);
+
+ const options: ISourceOptions = useMemo(
+ () => ({
+ fullScreen: { zIndex: -1 },
+ particles: {
+ number: { value: 80 },
+ links: { enable: true },
+ move: { enable: true },
+ },
+ }),
+ [],
+ );
+
+ return ;
+}
+```
+
+Note that the Pages Router does **not** require `"use client"` because page components are already client-rendered by default.
+
+## Troubleshooting
+
+| Symptom | Cause | Fix |
+| ---------------------------- | --------------------------------------- | ---------------------------------------------------------------- |
+| Blank white page | SSR rendering a canvas-dependent module | Use `dynamic(..., { ssr: false })` or wrap in a client component |
+| Canvas not showing | Container has zero height | Set `fullScreen: { zIndex: -1 }` or give it explicit dimensions |
+| Options change not reflected | New object reference not created | Use `useMemo` with proper dependency array |
+| Preset not working | Preset not loaded before container init | Call `loadXPreset(engine)` inside the `init` callback |
+
+## Next Steps
+
+- Browse the [Interactive Demos](/demos/) for ready-made configurations.
+- Read the full [Options Reference](/options/) for every available parameter.
+- Check the [Presets](/demos/presets) page for more pre-built presets like snow, stars, and firefly.
diff --git a/websites/website/docs/guides/nuxt.md b/websites/website/docs/guides/nuxt.md
new file mode 100644
index 00000000000..d573f8d3555
--- /dev/null
+++ b/websites/website/docs/guides/nuxt.md
@@ -0,0 +1,463 @@
+---
+title: Nuxt Integration
+description: Step-by-step guide to integrating tsParticles into a Nuxt 3 / Nuxt 4 application.
+---
+
+# Nuxt Integration
+
+This guide covers integrating tsParticles into a **Nuxt 3** (and Nuxt 4) project using the official `@tsparticles/vue3` wrapper. Nuxt runs both server-side and client-side, so you must guard particle components against SSR.
+
+## Installation
+
+Install the Vue 3 wrapper and the engine bundle of your choice:
+
+```bash
+npm install @tsparticles/vue3 tsparticles
+```
+
+For a smaller bundle, install `@tsparticles/slim` instead of `tsparticles`:
+
+```bash
+npm install @tsparticles/vue3 @tsparticles/slim
+```
+
+## Basic Usage
+
+Nuxt renders components on the server by default. Since tsParticles needs the browser `canvas` API, you must wrap the `` component in a `` tag:
+
+```vue
+
+
+
+
+
+
My Nuxt App
+
+
+
+
+
+
+```
+
+The `` wrapper ensures the `` component is only mounted in the browser, preventing hydration mismatches.
+
+## Configuration
+
+Use the full `ISourceOptions` type for type-safe configuration. You can define your options inline or import them from a separate config file:
+
+```vue
+
+```
+
+## Snow Effect
+
+Create a wintery snowfall effect using the snow preset:
+
+```bash
+npm install @tsparticles/preset-snow
+```
+
+```vue
+
+
+
+
+
+
+
+```
+
+Because the preset is loaded with top-level `await` in the `
+```
+
+Available interaction modes include: `grab`, `bubble`, `connect`, `repulse`, `push`, `remove`, `attract`, and `slow`.
+
+## Event Handling
+
+The `` component emits several lifecycle events:
+
+```vue
+
+
+
+
+
+
+
+```
+
+| Event | Payload | Description |
+| -------------------- | ----------- | ------------------------------------------------------------ |
+| `@particles-init` | `Engine` | Fires once when the tsParticles engine initializes |
+| `@particles-loaded` | `Container` | Fires every time the container finishes loading or reloading |
+| `@particles-destroy` | none | Fires when the container is destroyed |
+
+## Full TypeScript Example
+
+A complete, typed component with explicit imports and lifecycle awareness:
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Page Integration
+
+Add a particle background to a specific Nuxt page by placing the component in the page's template:
+
+```vue
+
+
+
+
+
+
+
+
About Page
+
This content sits above the particle canvas.
+
+
+
+
+
+
+
+```
+
+If you want particles on **every** page, add the component to `layouts/default.vue` instead of individual pages.
+
+## Nuxt 4 Notes
+
+Nuxt 4 maintains backward compatibility with Nuxt 3's `` and `
+```
+
+## Troubleshooting
+
+| Symptom | Cause | Fix |
+| --------------------------------- | ---------------------------------------- | ------------------------------------------------------------- |
+| Blank screen / hydration error | `` rendered on the server | Wrap in `` |
+| Preset has no effect | Preset not loaded before component mount | Call `loadXPreset()` with top-level await in `
+
+```
+
+The engine initializes once and is shared across all `` instances in your app.
+
+---
+
+## Basic Usage
+
+After initializing the engine, use the `` component in your template. Pass the configuration as a JSON-stringified options object or a reference to a property on your component.
+
+```riot
+
+
+
+
+
+```
+
+---
+
+## Conditional Rendering
+
+Use Riot's `if={}` directive with a state property to delay rendering the particles component until the engine has finished initializing. This avoids layout shifts and ensures the component receives a ready engine.
+
+```riot
+
+
+
+
+
+```
+
+Calling `this.update()` triggers a re-render so the `` tag appears once the promise resolves.
+
+---
+
+## Preset Usage
+
+The `@tsparticles/configs` package provides pre-built configurations for common effects like confetti, fireworks, snow, and stars. Use them directly as your options object.
+
+```riot
+
+
+
+
+
+```
+
+Available presets include `basic`, `confetti`, `fireworks`, `snow`, `stars`, and more. Each preset requires its corresponding preset package to be loaded in the engine callback. For example, `configs.fireworks` requires `loadFireworksPreset`.
+
+---
+
+## Custom Configuration
+
+Build a custom configuration with interactivity, multiple shapes, and advanced animation options.
+
+```riot
+
+
+
+
+
+```
+
+---
+
+## Full Component
+
+Below is a complete `.riot` file that ties everything together: engine initialization in `onBeforeMount`, conditional rendering with state, a rich configuration with interactivity, and a `particlesLoaded` callback via the component's built-in support for loaded events.
+
+```riot
+
+
+ );
+ }
+}
+```
+
+The `particlesLoaded` event fires once the first frame is rendered, giving you access to the `Container` instance for programmatic control (play, pause, stop, switch themes).
+
+---
+
+You now have everything needed to integrate tsParticles into a Stencil application. Each example is self-contained and ready to be copied into your project.
diff --git a/websites/website/docs/guides/svelte.md b/websites/website/docs/guides/svelte.md
new file mode 100644
index 00000000000..c7833ff1c2c
--- /dev/null
+++ b/websites/website/docs/guides/svelte.md
@@ -0,0 +1,580 @@
+---
+title: Svelte Integration
+description: Step-by-step guide for integrating tsParticles into Svelte and SvelteKit applications using @tsparticles/svelte.
+---
+
+# Svelte Integration
+
+The `@tsparticles/svelte` package provides a native Svelte component for tsParticles. This guide covers Svelte (with Vite) and SvelteKit, including reactive options, event handling, and multiple instances.
+
+---
+
+## Installation
+
+```bash
+npm install @tsparticles/svelte @tsparticles/engine
+```
+
+For the full bundle or presets:
+
+```bash
+npm install tsparticles
+npm install @tsparticles/preset-snow
+npm install @tsparticles/preset-stars
+npm install @tsparticles/preset-confetti
+npm install @tsparticles/preset-fireworks
+```
+
+---
+
+## Basic Usage
+
+```svelte
+
+
+
+```
+
+---
+
+## Engine Initialisation
+
+Pass an `on:init` event handler to load the plugins and presets your app needs:
+
+```svelte
+
+
+
+```
+
+Alternatively, use the `initParticlesEngine` utility before mounting:
+
+```svelte
+
+
+{#if ready}
+
+{/if}
+```
+
+---
+
+## Snow Effect
+
+```bash
+npm install @tsparticles/preset-snow
+```
+
+```svelte
+
+
+
+```
+
+Customise the preset behaviour by merging additional options:
+
+```svelte
+
+```
+
+---
+
+## Stars Effect
+
+```bash
+npm install @tsparticles/preset-stars
+```
+
+```svelte
+
+
+
+```
+
+---
+
+## Interactive Particles
+
+Add mouse hover and click interactivity:
+
+```svelte
+
+
+
+```
+
+---
+
+## Event Handling
+
+```svelte
+
+
+
+
+
+
+
+
+
+```
+
+| Event | Detail | Fires |
+| -------------------- | ----------- | ---------------------------------- |
+| `on:init` | `Engine` | After the engine is initialised |
+| `on:particlesLoaded` | `Container` | After the container is fully ready |
+
+---
+
+## TypeScript Example
+
+Full typed component:
+
+```svelte
+
+
+
+```
+
+---
+
+## Dynamic Options
+
+Reactive options update the particles without recreating the instance:
+
+```svelte
+
+
+
+
+
+
+
+```
+
+The `$:` reactive declaration recomputes `options` whenever `color` changes, and the `Particles` component picks up the new configuration automatically.
+
+---
+
+## Multiple Instances
+
+Render several independent particle systems on the same page:
+
+```svelte
+
+
+
+
+
+
+
+
+
+
+```
+
+Each `` component gets its own `id`, canvas, and engine context.
+
+---
+
+## SvelteKit Usage
+
+In SvelteKit, the canvas requires the browser environment. Disable SSR for the component:
+
+```svelte
+
+
+{#if Component}
+
+{/if}
+```
+
+Or wrap the import in a client-only component. For SvelteKit 2+, you can also use the `vite-plugin-svelte` SSR excludes.
+
+---
+
+## API Reference
+
+| Prop | Type | Default | Description |
+| --------- | ---------------- | --------------- | ----------------------------- |
+| `id` | `string` | `"tsparticles"` | Canvas element ID |
+| `options` | `ISourceOptions` | `{}` | Particle configuration object |
+| `url` | `string` | — | URL to a remote JSON config |
+
+| Event | Detail | Description |
+| -------------------- | ----------- | ---------------------------------------------------------- |
+| `on:init` | `Engine` | Fires when the engine is initialised (use to load plugins) |
+| `on:particlesLoaded` | `Container` | Fires when the container is fully ready |
+
+---
+
+## Troubleshooting
+
+- **Canvas not visible** — Ensure the parent container has explicit dimensions (`height: 100%`, `height: 100vh`, or a fixed pixel value).
+- **`loadFull is not a function`** — Verify `tsparticles` is installed and that you're importing `loadFull` from `tsparticles` (not `@tsparticles/engine`).
+- **Reactivity not working** — Make sure `options` is a reactive variable (`$:` or `let` bound to a reactive source). Plain `const` values will not update.
+- **SvelteKit blank screen** — Import `@tsparticles/svelte` dynamically or use `browser` guard as shown in the SvelteKit section above.
+- **TypeScript errors for `event.detail`** — Use `CustomEvent` and `CustomEvent` types for the event handlers.
diff --git a/websites/website/docs/guides/vanilla.md b/websites/website/docs/guides/vanilla.md
new file mode 100644
index 00000000000..5fe47c0c069
--- /dev/null
+++ b/websites/website/docs/guides/vanilla.md
@@ -0,0 +1,736 @@
+---
+title: Vanilla JS Guide
+description: Complete guide for integrating tsParticles with plain JavaScript.
+---
+
+# Vanilla JS Guide
+
+## Table of Contents
+
+1. [Getting Started](#getting-started)
+2. [Basic Particles](#basic-particles)
+3. [Confetti Effect](#confetti-effect)
+4. [Fireworks Effect](#fireworks-effect)
+5. [Snow Effect](#snow-effect)
+6. [Network / Links Effect](#network-links-effect)
+7. [Stars Effect](#stars-effect)
+8. [Custom Configuration](#custom-configuration)
+9. [Multiple Containers](#multiple-containers)
+10. [Dynamic Controls](#dynamic-controls)
+
+---
+
+## Getting Started
+
+### CDN (quick start)
+
+Add a `