tsParticles

https://particles.js.org/
Admin
tsParticles is a lightweight, customizable TypeScript library for creating interactive particle and...
Tokens:775,566
Snippets:8,471
Trust Score:8.1
Update:1 month ago
Show doc for...
Tokens:
Raw
### Use-case template example

Source: https://particles.js.org/guide/templates-resources

Workflow to create, install, and run a portfolio application template.

```bash
npx tsparticles-create app my-portfolio --template portfolio --framework vanilla
cd my-portfolio
npm install
npm run dev
```

--------------------------------

### CDN Setup for @tsparticles/slim

Source: https://particles.js.org/guide/bundles

Example of loading the engine and slim bundle via CDN, initializing the loader, and loading the particles configuration.

```html
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/engine@4/tsparticles.engine.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/slim@4/tsparticles.slim.bundle.min.js"></script>
<script>
  (async () => {
    await loadSlim(tsParticles);
    await tsParticles.load({ id: "tsparticles", options: { ... } });
  })();
</script>
```

--------------------------------

### Scaffold template example

Source: https://particles.js.org/guide/templates-resources

Workflow to create, install, and run a React scaffold project.

```bash
npx tsparticles-create app my-react-app --template scaffold --framework react
cd my-react-app
npm install
npm run dev
```

--------------------------------

### Install @tsparticles/lit with pnpm

Source: https://particles.js.org/guide/wrappers-lit

Install the Lit wrapper, the core engine, and the slim package using pnpm. This is the first step in the quick setup flow.

```bash
pnpm add @tsparticles/lit @tsparticles/engine @tsparticles/slim
```

--------------------------------

### start()

Source: https://particles.js.org/docs/classes/tsParticles_Sounds_Plugin.SoundsPluginInstance.SoundsPluginInstance.html

Starts the audio playback.

```APIDOC
## Method: start

### Description
Starts the audio playback.

### Signature
start(): Promise<void>

### Returns
Promise<void>
```

--------------------------------

### Install optional preset configs

Source: https://particles.js.org/guides/riot

Optionally install preset configs for quick setup. These packages provide pre-built configurations for common particle effects.

```bash
npm install @tsparticles/configs
```

```bash
npm install @tsparticles/slim
```

--------------------------------

### start

Source: https://particles.js.org/docs/classes/tsParticles_Interactivity_Plugin.InteractivityPluginInstance.InteractivityPluginInstance.html

Starts the plugin.

```APIDOC
## start

### Description
Starts the plugin.

### Signature
start(): Promise<void>

### Parameters
None

### Returns
Promise<void>
```

--------------------------------

### Quick Start: Load tsParticles Engine and Slim Bundle

Source: https://particles.js.org/docs

Sets up tsParticles with the slim bundle and loads an initial particle configuration. Used for starting a new project or integrating into an existing site. The example config sets a dark background and enables particle movement.

```javascript
import { tsParticles } from "@tsparticles/engine";  
import { loadSlim } from "@tsparticles/slim";  
  
await loadSlim(tsParticles);  
  
await tsParticles.load({  
  id: "tsparticles",  
  options: {  
    background: {  
      color: "#0d1117",  
    },  
    particles: {  
      move: {  
        enable: true,  
      },  
      number: {  
        value: 60,  
      },  
    },  
  },  
});
```

--------------------------------

### Initialize and Control Matrix Preset

Source: https://particles.js.org/demos/recipes/matrix

Example showing how to load the matrix preset and implement manual start, stop, and resume functions for the particle container.

```ts
import { tsParticles } from "@tsparticles/engine";
import { loadMatrixPreset } from "@tsparticles/preset-matrix";
import type { Container } from "@tsparticles/engine";

let container: Container | undefined;

await loadMatrixPreset(tsParticles);

export async function start(): Promise<void> {
  container?.destroy();

  container = await tsParticles.load({
    id: "tsparticles",
    options: {
      preset: "matrix",
    },
  });
}

export function stop(): void {
  container?.pause();
}

export function resume(): void {
  container?.play();
}
```

--------------------------------

### Ready-to-use Links Preset with manual start/stop

Source: https://particles.js.org/demos/recipes/links

TypeScript example showing how to load the Links Preset and control the container with start, stop, and resume functions. The container is destroyed before loading a new one.

```ts
import { tsParticles } from "@tsparticles/engine";
import { loadLinksPreset } from "@tsparticles/preset-links";
import type { Container } from "@tsparticles/engine";

let container: Container | undefined;

await loadLinksPreset(tsParticles);

export async function start(): Promise<void> {
  container?.destroy();

  container = await tsParticles.load({
    id: "tsparticles",
    options: {
      preset: "links",
    },
  });
}

export function stop(): void {
  container?.pause();
}

export function resume(): void {
  container?.play();
}
```

--------------------------------

### Manual start/stop with loadPartyPreset

Source: https://particles.js.org/demos/recipes/party

TypeScript example showing how to load the Party preset and manually control the particle container. It defines start, stop, and resume functions. The start function destroys any existing container and loads a new one with the 'party' preset. The stop function pauses the container, and resume plays it.

```ts
import { tsParticles } from "@tsparticles/engine";
import { loadPartyPreset } from "@tsparticles/preset-party";
import type { Container } from "@tsparticles/engine";

let container: Container | undefined;

await loadPartyPreset(tsParticles);

export async function start(): Promise<void> {
  container?.destroy();

  container = await tsParticles.load({
    id: "tsparticles",
    options: {
      preset: "party",
    },
  });
}

export function stop(): void {
  container?.pause();
}

export function resume(): void {
  container?.play();
}
```

--------------------------------

### start

Source: https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html

Starts the container animation.

```APIDOC
## start

### Description
Starts the container animation.

### Method
start
```

--------------------------------

### Install with npm

Source: https://particles.js.org/docs/modules/tsParticles_Opacity_Updater.html

Install the updater-opacity package using npm.

```bash
$ npm install @tsparticles/updater-opacity
```

--------------------------------

### tsParticles setup with loadRedsPalette and palette option

Source: https://particles.js.org/docs/modules/tsParticles_Reds_Palette.html

Example of initializing tsParticles with the reds palette, including loading the basic engine and palette, defining particle options with 200 particles, circle shape, and enabled movement, and setting the palette to "reds". Requires the CDN scripts to be loaded beforehand.

```javascript
(async engine => {  
  await loadBasic(engine);  
  await loadRedsPalette(engine);  
  
  const options = {  
    particles: {  
      number: { value: 200 },  
      shape: { type: "circle" },  
      size: { value: { min: 10, max: 15 } },  
      move: {  
        enable: true,  
        speed: 2,  
      },  
    },  
    palette: "reds",  
  };  
  
  await engine.load({  
    id: "tsparticles",  
    options,  
  });  
})(tsParticles);
```

--------------------------------

### Install with yarn

Source: https://particles.js.org/docs/modules/tsParticles_Background_Mask_Plugin.html

Install the plugin package using yarn.

```bash
$ yarn add @tsparticles/plugin-background-mask
```

--------------------------------

### Install with npm

Source: https://particles.js.org/docs/modules/tsParticles_Background_Mask_Plugin.html

Install the plugin package using npm.

```bash
$ npm install @tsparticles/plugin-background-mask
```

--------------------------------

### Install with yarn

Source: https://particles.js.org/docs/modules/tsParticles_Opacity_Updater.html

Install the updater-opacity package using yarn.

```bash
$ yarn add @tsparticles/updater-opacity
```

--------------------------------

### Install @tsparticles/angular dependencies

Source: https://particles.js.org/guide/wrappers-angular

Install the required packages using pnpm to get started with the Angular wrapper.

```bash
pnpm add @tsparticles/angular @tsparticles/engine @tsparticles/slim
```

--------------------------------

### Install optional presets and full bundle

Source: https://particles.js.org/guides/vue3

Optionally install the full bundle or specific presets and utility configs.

```bash
# Full bundle (all features)
npm install tsparticles

# Specific presets
npm install @tsparticles/preset-confetti
npm install @tsparticles/preset-fireworks
npm install @tsparticles/preset-snow
npm install @tsparticles/preset-stars

# Utility configs
npm install @tsparticles/configs
```

--------------------------------

### Customize fireworks preset options

Source: https://particles.js.org/docs/modules/tsParticles_Fireworks_Preset.html

You can override all options like in any standard tsParticles installation. This example changes the particle shape to square, which requires the square shape script starting from v2.

```javascript
tsParticles.load({  
  id: "tsparticles",  
  options: {  
    particles: {  
      shape: {  
        type: "square", // starting from v2, this require the square shape script  
      },  
    },  
    preset: "fireworks",  
  },  
});
```

--------------------------------

### Install tsParticles packages with pnpm

Source: https://particles.js.org/guide/installation

Commands to install tsParticles packages using pnpm. The table lists scenarios: quick start, minimal setup, full feature set, everything in the repo, confetti only, fireworks only, particle background, and ribbon effect. Note that @tsparticles/engine alone draws nothing; you must add a bundle or plugins.

```bash
pnpm add @tsparticles/engine @tsparticles/slim
```

```bash
pnpm add @tsparticles/engine @tsparticles/basic
```

```bash
pnpm add @tsparticles/engine tsparticles
```

```bash
pnpm add @tsparticles/engine @tsparticles/all
```

```bash
pnpm add @tsparticles/confetti
```

```bash
pnpm add @tsparticles/fireworks
```

```bash
pnpm add @tsparticles/particles
```

```bash
pnpm add @tsparticles/ribbons
```

--------------------------------

### Install @tsparticles/particles with pnpm

Source: https://particles.js.org/guide/bundles-particles

Install the @tsparticles/particles package using pnpm. This is the recommended package manager for this example.

```bash
pnpm add @tsparticles/particles
```

--------------------------------

### Minimal complete configuration example

Source: https://particles.js.org/docs/documents/tsParticles_Engine.Options.html

A basic JSON configuration object demonstrating essential settings like background color, frame rate limit, interactivity, and particle movement.

```json
{
  "background": {
    "color": "#0f172a"
  },
  "fpsLimit": 60,
  "detectRetina": true,
  "interactivity": {
    "events": {
      "onHover": {
        "enable": true,
        "mode": "repulse"
      }
    }
  },
  "particles": {
    "links": {
      "enable": true
    },
    "move": {
      "enable": true
    },
    "number": {
      "value": 80
    }
  }
}
```

--------------------------------

### Manual Start and Stop Control

Source: https://particles.js.org/demos/recipes/fountain

This TypeScript example demonstrates how to initialize the fountain preset and provides functions to start, stop, and resume the particle container.

```ts
import { tsParticles } from "@tsparticles/engine";
import { loadFountainPreset } from "@tsparticles/preset-fountain";
import type { Container } from "@tsparticles/engine";

let container: Container | undefined;

await loadFountainPreset(tsParticles);

export async function start(): Promise<void> {
  container?.destroy();

  container = await tsParticles.load({
    id: "tsparticles",
    options: {
      preset: "fountain",
    },
  });
}

export function stop(): void {
  container?.pause();
}

export function resume(): void {
  container?.play();
}
```

--------------------------------

### init(): void

Source: https://particles.js.org/docs/classes/tsParticles_Connect_External_Interaction.Connector.Connector.html

Initializes the connector.

```APIDOC
## Method

### init(): void

#### Description
Initializes the connector.

#### Returns
- **void** - No return value.
```

--------------------------------

### Manual Start and Stop Control

Source: https://particles.js.org/demos/recipes/confetti-cannon

Example showing how to initialize the confetti cannon preset and manage the particle container with start, stop, and resume functions.

```ts
import { tsParticles } from "@tsparticles/engine";
import { loadConfettiCannonPreset } from "@tsparticles/preset-confetti-cannon";
import type { Container } from "@tsparticles/engine";

let container: Container | undefined;

await loadConfettiCannonPreset(tsParticles);

export async function start(): Promise<void> {
  container?.destroy();

  container = await tsParticles.load({
    id: "tsparticles",
    options: {
      preset: "confettiCannon",
    },
  });
}

export function stop(): void {
  container?.pause();
}

export function resume(): void {
  container?.play();
}
```

--------------------------------

### Quick example: Interactivity configuration

Source: https://particles.js.org/docs/documents/tsParticles_Engine.Options_Interactivity.html

Example configuration for the interactivity option, setting detectsOn to 'canvas', enabling hover repulse and click push modes, and configuring their options.

```json
{
  "interactivity": {
    "detectsOn": "canvas",
    "events": {
      "onHover": {
        "enable": true,
        "mode": "repulse"
      },
      "onClick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "repulse": {
        "distance": 150
      },
      "push": {
        "quantity": 4
      }
    }
  }
}
```

--------------------------------

### Install @tsparticles/vue2 with pnpm

Source: https://particles.js.org/guide/wrappers-vue2

Install the Vue 2 wrapper, engine, and slim loader package using pnpm. This is the first step in the quick setup flow.

```bash
pnpm add @tsparticles/vue2 @tsparticles/engine @tsparticles/slim
```

--------------------------------

### init

Source: https://particles.js.org/docs/interfaces/tsParticles_Basic_Bundle.bundle.Container.html

Initializes the container, setting up all internal resources.

```APIDOC
## init

### Description
Initializes the container, preparing it for particle simulation.

### Returns
- Promise<void>
```

--------------------------------

### Install full bundle and presets

Source: https://particles.js.org/guides/svelte

Install the full tsParticles bundle and specific presets for additional effects.

```bash
npm install tsparticles
npm install @tsparticles/preset-snow
npm install @tsparticles/preset-stars
npm install @tsparticles/preset-confetti
npm install @tsparticles/preset-fireworks
```

--------------------------------

### Quick Color Configuration Examples

Source: https://particles.js.org/docs/documents/tsParticles_Engine.Color.html

Examples showing how to define colors for particles, links, and background elements within the tsParticles configuration object.

```json
{
  "particles": {
    "color": {
      "value": "#ffffff"
    },
    "links": {
      "color": "#4f46e5"
    }
  }
}
```

```json
{
  "background": {
    "color": {
      "value": "rgb(15, 23, 42)"
    }
  }
}
```

--------------------------------

### Getting Started with CDN

Source: https://particles.js.org/guides/vanilla

Add a placeholder div and script tags to your HTML to initialize tsParticles via CDN.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tsParticles – Getting Started</title>
    <style>
      #tsparticles {
        position: fixed;
        inset: 0;
        z-index: 0;
      }
    </style>
  </head>
  <body>
    <div id="tsparticles"></div>

    <script src="https://cdn.jsdelivr.net/npm/@tsparticles/engine@4/tsparticles.engine.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tsparticles/slim@4/tsparticles.slim.bundle.min.js"></script>
    <script>
      (async () => {
        await loadSlim(tsParticles);

        await tsParticles.load({
          id: "tsparticles",
          options: {/* ... */},
        });
      })();
    </script>
  </body>
</html>
```

--------------------------------

### Full HTML Implementation

Source: https://particles.js.org/guides/jquery

A complete example showing CDN imports and initialization of a particle scene within an HTML document.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tsParticles + jQuery</title>
    <style>
      #tsparticles {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #0d47a1;
      }
    </style>
  </head>
  <body>
    <div id="tsparticles"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tsparticles@4/tsparticles.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tsparticles/jquery@4/tsparticles.jquery.min.js"></script>
    <script>
      $(document).ready(async () => {
        await $.particles.init(async (engine) => {
          await tsParticles.loadFull(engine);
        });

        $("#tsparticles")
          .particles()
          .load({
            fpsLimit: 60,
            particles: {
              number: { value: 100 },
              color: { value: "#ffffff" },
              links: {
                enable: true,
                distance: 150,
                color: "#ffffff",
                opacity: 0.4,
              },
              move: {
                enable: true,
                speed: 2,
                outModes: "out",
              },
              size: {
                value: { min: 1, max: 4 },
              },
            },
            interactivity: {
              events: {
                onHover: { enable: true, mode: "grab" },
                onClick: { enable: true, mode: "push" },
              },
              modes: {
                grab: { distance: 200, links: { opacity: 0.5 } },
                push: { quantity: 4 },
              },
            },
            background: { color: "#0d47a1" },
          });
      });
    </script>
  </body>
</html>
```

--------------------------------

### Ready-to-use Snow Preset (manual start/stop)

Source: https://particles.js.org/demos/recipes/snow

TypeScript example that loads the Snow preset and provides start, stop, and resume functions. The start function destroys any existing container before loading a new one with the 'snow' preset.

```ts
import { tsParticles } from "@tsparticles/engine";
import { loadSnowPreset } from "@tsparticles/preset-snow";
import type { Container } from "@tsparticles/engine";

let container: Container | undefined;

await loadSnowPreset(tsParticles);

export async function start(): Promise<void> {
  container?.destroy();

  container = await tsParticles.load({
    id: "tsparticles",
    options: {
      preset: "snow",
    },
  });
}

export function stop(): void {
  container?.pause();
}

export function resume(): void {
  container?.play();
}
```

--------------------------------

### CDN Setup for @tsparticles/confetti

Source: https://particles.js.org/guide/bundles

Example of loading the self-contained confetti bundle via CDN and invoking the confetti function directly.

```html
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@4/tsparticles.confetti.bundle.min.js"></script>
<script>
  confetti({ particleCount: 100 });
</script>
```

--------------------------------

### Multiple Containers Setup

Source: https://particles.js.org/guides/vanilla

Demonstrates how to set up multiple independent particle instances on the same page using distinct container IDs.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Multiple Containers</title>
    <style>
      .particle-box {
        width: 45%;
        height: 300px;
        float: left;
        margin: 1%;
        border-radius: 12px;
        overflow: hidden;
        position: relative;
      }
      body {
        margin: 0;
        background: #1a1a2e;
        display: flex;
        flex-wrap: wrap;
        height: 100vh;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="particle-box" id="box1"></div>
    <div class="particle-box" id="box2"></div>
    <div class="particle-box" id="box3"></div>
    <div class="particle-box" id="box4"></div>

    <script src="https://cdn.jsdelivr.net/npm/@tsparticles/engine@4/tsparticles.engine.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tsparticles/slim@4/tsparticles.slim.bundle.min.js"></script>
    <script>
      (async () => {
        await loadSlim(tsParticles);
```

--------------------------------

### Define themes structure

Source: https://particles.js.org/docs/documents/tsParticles_Engine.Options_Themes.html

Example configuration showing how to define multiple named themes with specific options and default modes.

```json
{
  "themes": [
    {
      "name": "dark",
      "default": {
        "value": true,
        "mode": "dark"
      },
      "options": {
        "background": { "color": "#0d1117" },
        "particles": { "color": { "value": "#ffffff" } }
      }
    },
    {
      "name": "light",
      "default": {
        "value": true,
        "mode": "light"
      },
      "options": {
        "background": { "color": "#ffffff" },
        "particles": { "color": { "value": "#000000" } }
      }
    }
  ]
}
```

--------------------------------

### Manual start/stop with loadStarsPreset

Source: https://particles.js.org/demos/recipes/stars

TypeScript example that loads the Stars preset and provides start, stop, and resume functions. The start function destroys any existing container before loading a new one with the preset. The stop function pauses the animation, and resume plays it again.

```ts
import { tsParticles } from "@tsparticles/engine";
import { loadStarsPreset } from "@tsparticles/preset-stars";
import type { Container } from "@tsparticles/engine";

let container: Container | undefined;

await loadStarsPreset(tsParticles);

export async function start(): Promise<void> {
  container?.destroy();

  container = await tsParticles.load({
    id: "tsparticles",
    options: {
      preset: "stars",
    },
  });
}

export function stop(): void {
  container?.pause();
}

export function resume(): void {
  container?.play();
}
```

--------------------------------

### Installation Command

Source: https://particles.js.org/docs/modules/tsParticles_Particles.js_integration.html

Install the compatibility package and the required engine using pnpm.

```bash
pnpm add @tsparticles/pjs @tsparticles/engine
```

--------------------------------

### init(): void

Source: https://particles.js.org/docs/classes/tsParticles_Attract_Particle_Interaction.Attractor.Attractor.html

Initializes the attractor.

```APIDOC
## Method: init

### init(): void

Initializes the attractor.

#### Returns
- **void**
```

--------------------------------

### Run MCP server locally with npx

Source: https://particles.js.org/guide/mcp-server

Starts the tsParticles MCP server locally using npx. Requires Node.js and npm installed.

```bash
npx @tsparticles/mcp-server
```

--------------------------------

### start(): Promise<void>

Source: https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html

Starts the container, initializing what is needed to create animations and event handling.

```APIDOC
## start(): Promise<void>

### Description
Starts the container, initializes what are needed to create animations and event handling.

### Method
`start(): Promise<void>`

### Returns
- **Promise<void>**
```

--------------------------------

### init()

Source: https://particles.js.org/docs/classes/tsParticles_Sounds_Plugin.SoundsPluginInstance.SoundsPluginInstance.html

Initializes the plugin instance.

```APIDOC
## Method: init

### Description
Initializes the plugin instance.

### Signature
init(): Promise<void>

### Returns
Promise<void>
```

--------------------------------

### Load and control Squares preset (TypeScript)

Source: https://particles.js.org/demos/recipes/squares

TypeScript example showing how to load the Squares preset and manually start, stop, and resume the particle container.

```ts
import { tsParticles } from "@tsparticles/engine";
import { loadSquaresPreset } from "@tsparticles/preset-squares";
import type { Container } from "@tsparticles/engine";

let container: Container | undefined;

await loadSquaresPreset(tsParticles);

export async function start(): Promise<void> {
  container?.destroy();

  container = await tsParticles.load({
    id: "tsparticles",
    options: {
      preset: "squares",
    },
  });
}

export function stop(): void {
  container?.pause();
}

export function resume(): void {
  container?.play();
}
```

--------------------------------

### vue-particles component usage

Source: https://particles.js.org/guides/vue3

Example of using the vue-particles component in a Vue 3 script setup with TypeScript, including particle configuration and the particles-loaded event handler.

```APIDOC
## vue-particles component

### Description
Integrates the @tsparticles engine into a Vue 3 application using the vue-particles component. The component accepts an options object for particle configuration and emits an event when the container is ready.

### Props
- **id** (string) - Optional - Canvas element ID. Default: "tsparticles"
- **options** (ISourceOptions) - Optional - Particle configuration object. Default: {}
- **url** (string) - Optional - URL to load JSON config from.
- **theme** (string) - Optional - Theme name to apply (requires @tsparticles/plugin-themes; safe no-op if missing).

### Events
- **@particles-loaded** (Container) - Fires when the container is fully initialised.

### Example
```vue
<script setup lang="ts">
import { ref } from "vue";
import type { Container, ISourceOptions } from "@tsparticles/engine";

const particlesContainer = ref<Container | null>(null);

const options: ISourceOptions = {
  background: {
    color: "#0d47a1",
  },
  fpsLimit: 60,
  particles: {
    number: {
      value: 50,
    },
    color: {
      value: "#ffd700",
    },
    shape: {
      type: ["circle", "triangle", "polygon"],
    },
    opacity: {
      value: 0.7,
      random: true,
    },
    size: {
      value: { min: 2, max: 8 },
      random: true,
    },
    links: {
      enable: true,
      distance: 200,
      color: "#ffd700",
      opacity: 0.3,
      width: 1,
    },
    move: {
      enable: true,
      speed: 2,
      direction: "none",
      random: true,
      straight: false,
      outModes: "bounce",
      attract: {
        enable: false,
      },
    },
  },
  interactivity: {
    events: {
      onHover: {
        enable: true,
        mode: "bubble",
      },
      onClick: {
        enable: true,
        mode: "repulse",
      },
    },
    modes: {
      bubble: {
        distance: 200,
        size: 12,
        duration: 0.3,
      },
      repulse: {
        distance: 200,
      },
    },
  },
  detectRetina: true,
};

const particlesLoaded = async (container: Container): Promise<void> => {
  particlesContainer.value = container;
  console.log("Container ready", container);
};
</script>

<template>
  <vue-particles id="tsparticles" :options="options" @particles-loaded="particlesLoaded" />
</template>
```

```

--------------------------------

### init

Source: https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html

Initializes the container with options.

```APIDOC
## init

### Description
Initializes the container with options.

### Method
init
```

--------------------------------

### Customize Snow Preset options

Source: https://particles.js.org/docs/modules/tsParticles_Snow_Preset.html

Override any standard tsParticles option. This example changes the particle shape to square, which requires the square shape script starting from v2.

```javascript
tsParticles.load({  
  id: "tsparticles",  
  options: {  
    particles: {  
      shape: {  
        type: "square", // starting from v2, this require the square shape script  
      },  
    },  
    preset: "snow",  
  },  
});
```

--------------------------------

### init

Source: https://particles.js.org/docs/classes/tsParticles_Light_Interaction.ExternalLighter.ExternalLighter.html

Initializes the external light interaction.

```APIDOC
## init

### Description
Initializes the external light interaction.

### Signature
init(): void

### Parameters
None

### Returns
void
```

--------------------------------

### init(): void

Source: https://particles.js.org/docs/classes/tsParticles_Branches_Path.BranchesPathGenerator.BranchesPathGenerator.html

Initializes the path generator options.

```APIDOC
## Method: init

### init(): void

Initializes the path generator options.

#### Parameters
None.

#### Returns
- **void** - No return value.
```

--------------------------------

### Manual start/stop with Sea Anemone preset

Source: https://particles.js.org/demos/recipes/sea-anemone

TypeScript example showing how to load the Sea Anemone preset and control the animation container with start, stop, and resume functions.

```ts
import { tsParticles } from "@tsparticles/engine";
import { loadSeaAnemonePreset } from "@tsparticles/preset-sea-anemone";
import type { Container } from "@tsparticles/engine";

let container: Container | undefined;

await loadSeaAnemonePreset(tsParticles);

export async function start(): Promise<void> {
  container?.destroy();

  container = await tsParticles.load({
    id: "tsparticles",
    options: {
      preset: "seaAnemone",
    },
  });
}

export function stop(): void {
  container?.pause();
}

export function resume(): void {
  container?.play();
}
```

--------------------------------

### Svelte: Load full bundle and initialize particles

Source: https://particles.js.org/docs/modules/tsParticles_Full_Bundle.html

Svelte example. Defines options and an async init function that loads the full bundle.

```javascript
let options = {/* custom options */};  
  
let particlesInit = async engine => {  
  await loadFull(engine);  
};
```

--------------------------------

### init()

Source: https://particles.js.org/docs/classes/tsParticles_Interactivity_Plugin.BaseClasses_ExternalInteractorBase.ExternalInteractorBase.html

Initializes the interactivity manager. Should set up any necessary state.

```APIDOC
## init

### Description
Initializes the interactivity manager. This is called when the manager is set up.

### Method
`init`

### Returns
`void`
```

--------------------------------

### Minimal typed tsParticles options (TypeScript)

Source: https://particles.js.org/options

A minimal `ISourceOptions` configuration with `fpsLimit` and basic particle number and movement settings. Use as a starting point for a typed tsParticles setup.

```typescript
import type { ISourceOptions } from "@tsparticles/engine";

export const particlesOptions: ISourceOptions = {
  fpsLimit: 60,
  particles: {
    number: { value: 70 },
    move: { enable: true, speed: 1.5 },
  },
};
```

--------------------------------

### init()

Source: https://particles.js.org/docs/classes/tsParticles_Repulse_External_Interaction.Repulser.Repulser.html

Initializes the repulser.

```APIDOC
## Method: init()

### Description
Initializes the repulser.

### Parameters
None

### Returns
void
```

--------------------------------

### React Class Component: Load full bundle and render particles

Source: https://particles.js.org/docs/modules/tsParticles_Full_Bundle.html

Class component example for React (also works for Preact and Inferno). It customizes the tsParticles installation by loading the full bundle in the init callback.

```tsx
import React from "react";  
import Particles from "react-particles";  
import type { Engine } from "@tsparticles/engine";  
import { loadFull } from "tsparticles";  
  
export class ParticlesContainer extends PureComponent<unknown> {  
  // this customizes the component tsParticles installation  
  async customInit(engine: Engine): Promise<void> {  
    // this adds the bundle to tsParticles  
    await loadFull(engine);  
  }  
  
  render() {  
    const options = {  
      /* custom options */  
    };  
  
    return <Particles options={options} init={this.customInit} />;  
  }  
}
```

--------------------------------

### Run tsParticles demo locally with pnpm

Source: https://particles.js.org/docs

Clone the repository and run these commands to start the vanilla demo. The demo will be available at http://localhost:3000. Note that demo/wordpress contains documentation only and runs as a plugin inside a WordPress installation.

```bash
$ pnpm i  
$ pnpm run build  
$ cd demo/vanilla  
$ pnpm start
Copy

```

--------------------------------

### Load and Control Meteors Preset in TypeScript

Source: https://particles.js.org/demos/recipes/meteors

TypeScript example for loading the Meteors preset and managing the particle container. The start function destroys any existing container before loading a new one with the meteors preset. The stop and resume functions pause and play the container respectively.

```ts
import { tsParticles } from "@tsparticles/engine";
import { loadMeteorsPreset } from "@tsparticles/preset-meteors";
import type { Container } from "@tsparticles/engine";

let container: Container | undefined;

await loadMeteorsPreset(tsParticles);

export async function start(): Promise<void> {
  container?.destroy();

  container = await tsParticles.load({
    id: "tsparticles",
    options: {
      preset: "meteors",
    },
  });
}

export function stop(): void {
  container?.pause();
}

export function resume(): void {
  container?.play();
}
```

--------------------------------

### Basic Usage Example

Source: https://particles.js.org/guides/webcomponents

A complete example showing initialization, element definition, and configuration of the web-particles element.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tsParticles Web Components</title>
  </head>
  <body>
    <web-particles id="tsparticles"></web-particles>

    <script type="module">
      import { initParticlesEngine, defineParticlesElement } from "@tsparticles/webcomponents";

      const { loadFull } = await import("tsparticles");

      await initParticlesEngine(async (engine) => {
        await loadFull(engine);
      });

      defineParticlesElement();

      const el = document.getElementById("tsparticles");
      el.options = {
        background: { color: "#0d47a1" },
        particles: {
          number: { value: 80 },
          links: { enable: true, color: "#ffffff" },
          move: { enable: true, speed: 2 },
        },
      };
    </script>
  </body>
</html>
```

--------------------------------

### Usage example with loadBokehGoldPalette and palette option

Source: https://particles.js.org/docs/modules/tsParticles_BokehGold_Palette.html

Initializes tsParticles by loading the basic runtime and calling loadBokehGoldPalette before engine.load. Sets a minimal particle configuration and the palette name "bokehGold" for the colored smoke amber effect. All options can be overridden as in any standard tsParticles installation.

```javascript
(async engine => {
  await loadBasic(engine);
  await loadBokehGoldPalette(engine);

  const options = {
    particles: {
      number: { value: 200 },
      shape: { type: "circle" },
      size: { value: { min: 10, max: 15 } },
      move: {
        enable: true,
        speed: 2,
      },
    },
    palette: "bokehGold",
  };

  await engine.load({
    id: "tsparticles",
    options,
  });
})(tsParticles);
```

--------------------------------

### Install slim preset

Source: https://particles.js.org/guides/inferno

Optionally install the slim preset for a smaller bundle.

```bash
npm install @tsparticles/slim
```

--------------------------------

### Custom configuration with multiple shapes, interactivity, and themes for @tsparticles/react

Source: https://particles.js.org/guides/react

A full custom example combining multiple particle shapes (circle, triangle, polygon), hover attract and click repulse interactivity, a light theme option, and a gradient background. Use this as a starting point for complex particle configurations that require interactivity and theme switching.

```jsx
import { useCallback, useMemo } from "react";
import Particles from "@tsparticles/react";

export default function CustomConfig() {
  const particlesLoaded = useCallback(async (container) => {
    console.log("Custom config loaded", container);
  }, []);

  const options = useMemo(
    () => ({
      fullScreen: { enable: true, zIndex: 0 },
      fpsLimit: 60,
      particles: {
        number: { value: 60, density: { enable: true, width: 800, height: 800 } },
        color: {
          value: ["#ff6b6b", "#feca57", "#48dbfb", "#ff9ff3", "#54a0ff"],
        },
        shape: {
          type: ["circle", "triangle", "polygon"],
          options: {
            polygon: { sides: 6 },
          },
        },
        opacity: { value: { min: 0.4, max: 0.8 } },
        size: { value: { min: 3, max: 8 } },
        links: {
          enable: true,
          distance: 200,
          color: "#ffffff",
          opacity: 0.15,
          width: 1,
        },
        move: {
          enable: true,
          speed: 2,
          direction: "none",
          random: true,
          outModes: { default: "out" },
        },
      },
      interactivity: {
        events: {
          onHover: { enable: true, mode: "attract" },
          onClick: { enable: true, mode: "repulse" },
        },
        modes: {
          attract: { distance: 200, duration: 0.4, factor: 1 },
          repulse: { distance: 200, duration: 0.4 },
        },
      },
      background: { color: "#0f0f23" },
      themes: [
        {
          name: "light",
          default: { value: false },
          options: {
            background: { color: "#f0f0f5" },
            particles: {
              color: { value: ["#e74c3c", "#2ecc71", "#3498db", "#f1c40f"] },
              links: { color: "#333333", opacity: 0.2 },
              opacity: { value: { min: 0.5, max: 0.9 } },
            },
          },
        },
      ],
    }),
    [],
  );

  return <Particles id="custom-config" particlesLoaded={particlesLoaded} options={options} />;
}
```

--------------------------------

### Configuration for push mode

Source: https://particles.js.org/docs/modules/tsParticles_Push_External_Interaction.html

Example configuration enabling the push mode on hover and setting the push mode options.

```json
{  
  "interactivity": {  
    "events": {  
      "onHover": {  
        "enable": true,  
        "mode": "push"  
      }  
    },  
    "modes": {  
      "push": {}  
    }  
  }  
}
```

--------------------------------

### Container.start()

Source: https://particles.js.org/docs/documents/tsParticles_Engine.Container.html

(Re)start the container with full initialization.

```APIDOC
## start()

### Description
Starts (or restarts) the container, performing a full initialization.

### Method
start

### Parameters
None

### Returns
void

### Example
```
container.start();
```
```

--------------------------------

### init(): Promise<void>

Source: https://particles.js.org/docs/interfaces/tsParticles_Basic_Bundle.bundle.PluginManager.html

Initializes the plugin manager. This method is used to perform any necessary setup.

```APIDOC
## init(): Promise<void>

### Description
Initializes the plugin manager. This method is used to perform any necessary setup.

### Method
init

### Parameters
None

### Returns
Promise<void>
```

--------------------------------

### Setup HTML Container

Source: https://particles.js.org/docs

The basic HTML structure required to host the particles.

```html
<div id="tsparticles"></div>  
  
<script src="tsparticles.engine.min.js"></script>
```

--------------------------------

### get

Source: https://particles.js.org/docs/classes/tsParticles_Engine.Core_ParticlesManager.ParticlesManager.html

Gets a particle by index.

```APIDOC
## get

### Description
Gets a particle by index.

### Signature
get(index: number): Particle | undefined

### Parameters
- **index** (number) - Required - The index

### Returns
Particle | undefined - the particle at the index
```

--------------------------------

### Load slim bundle and initialize particles (npm/pnpm/yarn)

Source: https://particles.js.org/guide/bundles-slim

Import tsParticles and loadSlim, then load the slim bundle and initialize particles with options for background, particle count, links, movement, and shape types.

```ts
import { tsParticles } from "@tsparticles/engine";
import { loadSlim } from "@tsparticles/slim";

await loadSlim(tsParticles);

await tsParticles.load({
  id: "tsparticles",
  options: {
    background: { color: "#0b1020" },
    particles: {
      number: { value: 80 },
      links: { enable: true, distance: 150 },
      move: { enable: true, speed: 2 },
      shape: { type: ["circle", "star", "square"] },
    },
  },
});
```

--------------------------------

### maxDistance (get)

Source: https://particles.js.org/docs/classes/tsParticles_Attract_External_Interaction.Attractor.Attractor.html

Gets the maximum distance for the attract interaction.

```APIDOC
## maxDistance (get)

### Description
Gets the maximum distance for the attract interaction.

### Signature
get maxDistance(): number

### Returns
number
```

--------------------------------

### Engine initialization patterns

Source: https://particles.js.org/guides/solid

Examples of initializing the engine with different feature sets including slim, full, and specific presets.

```tsx
import { initParticlesEngine } from "@tsparticles/solid";
import { loadFull } from "tsparticles";
import { loadSlim } from "@tsparticles/slim";
import { loadConfettiPreset } from "@tsparticles/preset-confetti";
import type { Engine } from "@tsparticles/engine";

// Minimal — only basic shapes and moves
initParticlesEngine((engine: Engine) => loadSlim(engine)).then(() => {
  console.log("Engine ready (slim)");
});

// Full — every feature included
initParticlesEngine((engine: Engine) => loadFull(engine)).then(() => {
  console.log("Engine ready (full)");
});

// Preset-only — just the features needed for a specific preset
initParticlesEngine((engine: Engine) => loadConfettiPreset(engine)).then(() => {
  console.log("Confetti preset loaded");
});
```

--------------------------------

### Usage example with loadMudAndDirtPalette and options

Source: https://particles.js.org/docs/modules/tsParticles_MudAndDirt_Palette.html

Set up tsParticles with the basic package and the MudAndDirt palette. The example loads the palette, defines particle options, and applies the palette by name.

```javascript
(async engine => {  
  await loadBasic(engine);  
  await loadMudAndDirtPalette(engine);  
  
  const options = {  
    particles: {  
      number: { value: 200 },  
      shape: { type: "circle" },  
      size: { value: { min: 10, max: 15 } },  
      move: {  
        enable: true,  
        speed: 2,  
      },  
    },  
    palette: "mudAndDirt",  
  };  
  
  await engine.load({  
    id: "tsparticles",  
    options,  
  });  
})(tsParticles);
```

--------------------------------

### Install with yarn - @tsparticles/updater-wobble

Source: https://particles.js.org/docs/modules/tsParticles_Wobble_Updater.html

Install the package using yarn.

```bash
$ yarn add @tsparticles/updater-wobble
Copy
```

--------------------------------

### Install with npm - @tsparticles/updater-wobble

Source: https://particles.js.org/docs/modules/tsParticles_Wobble_Updater.html

Install the package using npm.

```bash
$ npm install @tsparticles/updater-wobble
Copy
```

--------------------------------

### init

Source: https://particles.js.org/docs/classes/tsParticles_Themes_Plugin.ThemesPluginInstance.ThemesPluginInstance.html

Initializes the plugin instance.

```APIDOC
## init

### Description
Initializes the plugin instance.

### Method
init

### Signature
init(): Promise<void>

### Returns
Promise<void>
```

--------------------------------

### Install tsParticles with @tsparticles/react and @tsparticles/slim

Source: https://particles.js.org/guides/nextjs

Installs the React wrapper and the slim bundle for smaller build size. Use this alternative if you don't need the full engine.

```bash
npm install @tsparticles/react @tsparticles/slim

```

--------------------------------

### Install with yarn

Source: https://particles.js.org/docs/modules/tsParticles_Trail_Effect.html

Install the `@tsparticles/effect-trail` package using yarn.

```bash
$ yarn add @tsparticles/effect-trail
```

--------------------------------

### Interactivity Modes Configuration Example

Source: https://particles.js.org/docs/documents/tsParticles_Engine.Options_Interactivity_Modes.html

A JSON configuration example demonstrating how to define interactivity events and their corresponding mode parameters.

```json
{
  "interactivity": {
    "events": {
      "onHover": { "enable": true, "mode": "repulse" },
      "onClick": { "enable": true, "mode": ["push", "bubble"] }
    },
    "modes": {
      "repulse": {
        "distance": 150,
        "duration": 0.4,
        "speed": 1
      },
      "push": {
        "quantity": 4
      },
      "bubble": {
        "distance": 200,
        "size": 20,
        "duration": 0.5
      }
    }
  }
}
```

--------------------------------

### Install with npm

Source: https://particles.js.org/docs/modules/tsParticles_Trail_Effect.html

Install the `@tsparticles/effect-trail` package using npm.

```bash
$ npm install @tsparticles/effect-trail
```

--------------------------------

### Install with yarn

Source: https://particles.js.org/docs/modules/tsParticles_Spiral_Shape.html

Install the @tsparticles/shape-spiral package using yarn.

```bash
$ yarn add @tsparticles/shape-spiral
```

--------------------------------

### Install with npm

Source: https://particles.js.org/docs/modules/tsParticles_Spiral_Shape.html

Install the @tsparticles/shape-spiral package using npm.

```bash
$ npm install @tsparticles/shape-spiral
```

--------------------------------

### Install with yarn

Source: https://particles.js.org/docs/modules/tsParticles_Shadow_Effect.html

Installs the @tsparticles/effect-shadow package using yarn.

```bash
$ yarn add @tsparticles/effect-shadow
```

--------------------------------

### Install with npm

Source: https://particles.js.org/docs/modules/tsParticles_Shadow_Effect.html

Installs the @tsparticles/effect-shadow package using npm.

```bash
$ npm install @tsparticles/effect-shadow
```
Tokens:
Raw