Tsparticles NPM

tsParticles Full Bundle

tsParticles full bundle loads all the v1 features to a @tsparticles/engine instance.

Included Packages

How to use it

CDN / Vanilla JS / jQuery

The CDN/Vanilla version JS has two different files:

One is a bundle file with all the scripts included in a single file
One is a file including just the loadFull function to load the tsParticles full preset, all dependencies must be included manually

Bundle

Including the tsparticles.bundle.min.js file will work exactly like v1, you can start using the tsParticles instance in the same way.

This is the easiest usage, since it's a single file with the same v1 features.

All new features will be added as external packages, this bundle is recommended for migrating from v1 easily.

Not Bundle

This installation requires more work since all dependencies must be included in the page. Some lines above are all specified in the Included Packages section.

A note about @tsparticles/slim can be made: it's not mandatory to include all of its dependencies, the slim bundle file is enough, and if this is done the @tsparticles/engine is not needed, since it's already bundled in the slim bundle.

Usage

Once the scripts are loaded you can set up tsParticles like this:

(async () => {
  await loadFull(tsParticles);

  await tsParticles.load({
    id: "tsparticles",
    options: {
      /* options */
    },
  });
})();

React.js / Preact / Inferno

The syntax for React.js, Preact and Inferno is the same.

This sample uses the class component syntax, but you can use hooks as well (if the library supports it).

Class Components

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} />;
  }
}

Hooks / Functional Components

import React, { useCallback } from "react";
import Particles from "react-particles";
import type { Engine } from "@tsparticles/engine";
import { loadFull } from "tsparticles";

export function ParticlesContainer(props: unknown) {
  // this customizes the component tsParticles installation
  const customInit = useCallback(async (engine: Engine) => {
    // this adds the bundle to tsParticles
    await loadFull(engine);
  });

  const options = {
    /* custom options */
  };

  return <Particles options={options} init={this.customInit} />;
}

Vue (2.x and 3.x)

The syntax for Vue.js 2.x and 3.x is the same

<Particles id="tsparticles" :particlesInit="particlesInit" :options="options" />

const options = {
  /* custom options */
};

async function particlesInit(engine: Engine): Promise<void> {
  await loadFull(engine);
}

Angular

<ng-particles [id]="id" [options]="options" [particlesInit]="particlesInit"></ng-particles>

const options = {
  /* custom options */
};

async function particlesInit(engine: Engine): Promise<void> {
  await loadFull(engine);
}

Svelte

<Particles
    id="tsparticles"
    options={options}
    particlesInit={particlesInit}
/>

let options = {
  /* custom options */
};

let particlesInit = async (engine) => {
  await loadFull(engine);
};

@tsparticles/engine @tsparticles/interaction-external-trail @tsparticles/plugin-absorbers @tsparticles/plugin-emitters @tsparticles/plugin-emitters-shape-circle @tsparticles/plugin-emitters-shape-square @tsparticles/shape-text @tsparticles/slim @tsparticles/updater-destroy @tsparticles/updater-roll @tsparticles/updater-tilt @tsparticles/updater-twinkle @tsparticles/updater-wobble

vuepress-theme-knzn @tsparticles/options-updater inferno-particles-demo imports-ts-latest imports-ts34 imports-ts38 imports-ts40 react-native-tsparticles tsparticles-preset-bouncing tsparticles-preset-font-awesome tsparticles-preset-60fps tsparticles-preset-background-mask tsparticles-preset-basic typedoc-particles-template typedoc-particles-theme tsparticles-shape-confetti @everything-registry/sub-chunk-2982 wpm-ui wordpress-particles screen-sdk storefront-sdk sendtime_client mf-landing-page jsparticles hourglass-sdk homeassistant-frontend-raceland niftylaunch-frontend react-fire-particles-kkduniya nuxt-particles tsparticles-preset-halloween-bats tsparticles-preset-blossom-ver1 tsparticles-all tsparticles-gatsby-landing-page-starter tttreact-animates @celesta/vuepress-theme-celesta 5c-2023 5c-angle 5c-test-off 5c-yoh 5c-zsj 5c-bresson 5c-cobb 5c-cody 5c-corn 5c-dvon 5c-flowers 5c-helms 5c-kidd 5c-mac 5c-mark 5c-mick 5c-mox 5c-naito 5c-njc23 5c-obi 5c-okada 5c-pen 5c-ramon 5c-rhodes 5c-rise 5c-snow xparticles.js vuepress-theme-celesta vuepress-plugin-background vuepress-plugin-bg website-edit @infinitebrahmanuniverse/nolb-tsp @monogatari/core @pivoto/ui-base @serverless-cd/goat-ui @rugenerous/interface code-battles-components @tsparticles/wordpress @tsparticles/all @wcd/daisaru11.plainjs-lbtgp6r7 adx-screen-component adx-screen-sdk animation-sdk animations-sdk code-battles astrosafe-parent-portal-components astro-parent-components astro-parent-portal-test design-admin-pros cra-template-particles-typescript cra-template-particles crp-las-vegas-progress-tracker evoluinfo-logical-cart

3 months ago

2 months ago

6 months ago

7 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago