tsParticles - TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components

---

Table of Contents

• tsParticles - TypeScript Particles
• Table of Contents
• Do you want to use it on your website?
• Start here in 2 minutes
• Library installation
  • Hosting / CDN
  • jsDelivr
  • cdnjs
  • unpkg
  • npm
  • yarn
  • pnpm
  • Import and require
  • Usage
• Official components for some of the most used frameworks
  • Angular
  • @tsparticles/angular
  • Astro
  • @tsparticles/astro
  • Ember.js
  • @tsparticles/ember
  • Inferno
  • @tsparticles/inferno
  • jQuery
  • @tsparticles/jquery
  • Preact
  • @tsparticles/preact
  • Qwik
  • @tsparticles/qwik
  • ReactJS
  • @tsparticles/nextjs
  • @tsparticles/react
  • RiotJS
  • @tsparticles/riot
  • SolidJS
  • @tsparticles/solid
  • Svelte
  • @tsparticles/svelte
  • VueJS 2.x
  • @tsparticles/nuxt2
  • @tsparticles/vue2
  • VueJS 3.x
  • @tsparticles/nuxt3
  • @tsparticles/nuxt4
  • @tsparticles/vue3
  • Web Components
  • @tsparticles/webcomponents
  • WordPress
  • @tsparticles/wordpress
  • Elementor
• Presets
  • Ambient
  • Big Circles
  • Bubbles
  • Confetti
  • Confetti Cannon
  • Confetti Explosions
  • Confetti Falling
  • Confetti Parade
  • Party
  • Fire
  • Firefly
  • Fireworks
  • Fountain
  • Hyperspace
  • Links
  • Sea Anemone
  • Snow
  • Squares
  • Stars
  • Triangles
• Templates and Resources
• Demo / Generator
• Video Tutorials
  • Characters as particles
  • Polygon mask
  • Animated stars
  • Nyan cat flying on scrolling stars
  • Snow particles
  • Background Mask particles
• Options
• Want to see it in action and try it?
• Migrating from Particles.js
• Plugins/Customizations
• Dependency Graph

---

Do you want to use it on your website?

Documentation and Development references here 📖

This library is available on two of the most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier.

You'll find the instructions below, with all the links you need, and don't be scared by TypeScript, it's just the source language.

The output files are just JavaScript. 🤩

CDNs and npm have all the sources you need in Javascript, a bundle browser ready (tsparticles.engine.min.js), and all files splitted for import syntax.

If you are interested there are some simple instructions just below to guide you to migrate from the old particles.js library.

Start here in 2 minutes

If you are new to tsParticles, this path is usually the fastest:

1. Install @tsparticles/engine and @tsparticles/slim
2. Load the slim bundle once
3. Start with a small config and iterate

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,
      },
    },
  },
});

Useful docs for the next step:

• Docs home: https://particles.js.org/docs/
• Options guide: https://github.com/tsparticles/tsparticles/blob/main/markdown/Options.md
• Migration guide: https://github.com/tsparticles/tsparticles/blob/main/markdown/pjsMigration.md
• Presets catalog: https://github.com/tsparticles/presets

Quick checklist

• Install @tsparticles/engine and one bundle (@tsparticles/slim is the common default)
• Load the bundle before calling tsParticles.load(...)
• Start from a small config, then extend incrementally

Choose your quick-start path

• I want fewer dependencies: use @tsparticles/engine + only needed feature packages
• I want the easiest default: use @tsparticles/slim
• I need everything enabled: use @tsparticles/all

Common pitfalls

• Loading options that require plugins before loading those plugin packages
• Starting with very high particle counts before checking FPS
• Mixing legacy snake_case keys with modern camelCase options

Related docs

• Main docs: https://particles.js.org/docs/
• Root options guide: https://github.com/tsparticles/tsparticles/blob/main/markdown/Options.md
• Migration guide: https://github.com/tsparticles/tsparticles/blob/main/markdown/pjsMigration.md

Library installation

Hosting / CDN

Please use these hosts or your own to load tsParticles on your projects

jsDelivr

cdnjs

unpkg

https://unpkg.com/@tsparticles/confetti/ https://unpkg.com/@tsparticles/particles/ https://unpkg.com/@tsparticles/engine/ https://unpkg.com/@tsparticles/fireworks/ https://unpkg.com/@tsparticles/basic/ https://unpkg.com/@tsparticles/slim/ https://unpkg.com/tsparticles/ https://unpkg.com/@tsparticles/all/

---

npm

tsParticles Confetti

tsParticles Particles

tsParticles Engine

tsParticles Fireworks

tsParticles Basic

tsParticles Slim

tsParticles

tsParticles All

npm install @tsparticles/engine

yarn

yarn add @tsparticles/engine

pnpm

pnpm install @tsparticles/engine

Import and require

const tsParticles = require("@tsparticles/engine");

// or

import { tsParticles } from "@tsparticles/engine";

The imported tsParticles is the same instance you have when including the script in the page using the <script> tag.

---

Usage

Load tsParticles and configure the particles:

index.html

<script src="https://github.com/tsparticles/tsparticles/raw/v4.3.1/tsparticles.engine.min.js"></script>

app.js

```javascript /