---
name: tsparticles
summary: "tsParticles is a dependency-free TypeScript library for rendering animated particle effects (confetti, snow, fireworks, interactive link networks, and more) on a canvas. It ships a modular engine with optional feature bundles and official wrapper components for nearly every major frontend framework."
language: TypeScript
license: MIT
repo: https://github.com/tsparticles/tsparticles
source: https://opensources.dev/resource/tsparticles
health: 100
---
# tsparticles
tsParticles is a dependency-free TypeScript library for rendering animated particle effects (confetti, snow, fireworks, interactive link networks, and more) on a canvas. It ships a modular engine with optional feature bundles and official wrapper components for nearly every major frontend framework.
[](https://particles.js.org)
# 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**
[](https://github.com/sponsors/matteobruni)
[](https://www.jsdelivr.com/package/npm/tsparticles)
[](https://cdnjs.com/libraries/tsparticles)
[](https://www.npmjs.com/package/tsparticles)
[](https://www.npmjs.com/package/tsparticles)
[](https://www.codefactor.io/repository/github/tsparticles/tsparticles)
[](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=tsparticles/tsparticles&utm_campaign=Badge_Grade)
[](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rating-badge&utm_term=js/tsparticles)
[](https://gitpod.io/#https://github.com/tsparticles/tsparticles)
[](https://repl.it/github/tsparticles/tsparticles)
[](https://discord.gg/hACwv45Hme)
[](https://t.me/tsparticles)
[](https://www.reddit.com/r/tsParticles/)
[](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_source=badge-tsparticles)
[](https://www.buymeacoffee.com/matteobruni)
---
## Table of Contents
- [tsParticles - TypeScript Particles](#tsparticles---typescript-particles)
- [Table of Contents](#table-of-contents)
- [Do you want to use it on your website?](#do-you-want-to-use-it-on-your-website)
- [Start here in 2 minutes](#start-here-in-2-minutes)
- [***Library installation***](#library-installation)
- [***Hosting / CDN***](#hosting--cdn)
- [jsDelivr](#jsdelivr)
- [cdnjs](#cdnjs)
- [unpkg](#unpkg)
- [***npm***](#npm)
- [***yarn***](#yarn)
- [***pnpm***](#pnpm)
- [Import and require](#import-and-require)
- [***Usage***](#usage)
- [Official components for some of the most used frameworks](#official-components-for-some-of-the-most-used-frameworks)
- [Angular](#angular)
- [`@tsparticles/angular`](#tsparticlesangular)
- [Astro](#astro)
- [`@tsparticles/astro`](#tsparticlesastro)
- [Ember.js](#emberjs)
- [`@tsparticles/ember`](#tsparticlesember)
- [Inferno](#inferno)
- [`@tsparticles/inferno`](#tsparticlesinferno)
- [jQuery](#jquery)
- [`@tsparticles/jquery`](#tsparticlesjquery)
- [Preact](#preact)
- [`@tsparticles/preact`](#tsparticlespreact)
- [Qwik](#qwik)
- [`@tsparticles/qwik`](#tsparticlesqwik)
- [ReactJS](#reactjs)
- [`@tsparticles/nextjs`](#tsparticlesnextjs)
- [`@tsparticles/react`](#tsparticlesreact)
- [RiotJS](#riotjs)
- [`@tsparticles/riot`](#tsparticlesriot)
- [SolidJS](#solidjs)
- [`@tsparticles/solid`](#tsparticlessolid)
- [Svelte](#svelte)
- [`@tsparticles/svelte`](#tsparticlessvelte)
- [VueJS 2.x](#vuejs-2x)
- [`@tsparticles/nuxt2`](#tsparticlesnuxt2)
- [`@tsparticles/vue2`](#tsparticlesvue2)
- [VueJS 3.x](#vuejs-3x)
- [`@tsparticles/nuxt3`](#tsparticlesnuxt3)
- [`@tsparticles/nuxt4`](#tsparticlesnuxt4)
- [`@tsparticles/vue3`](#tsparticlesvue3)
- [Web Components](#web-components)
- [`@tsparticles/webcomponents`](#tsparticleswebcomponents)
- [WordPress](#wordpress)
- [`@tsparticles/wordpress`](#tsparticleswordpress)
- [Elementor](#elementor)
- [Presets](#presets)
- [Ambient](#ambient)
- [Big Circles](#big-circles)
- [Bubbles](#bubbles)
- [Confetti](#confetti)
- [Confetti Cannon](#confetti-cannon)
- [Confetti Explosions](#confetti-explosions)
- [Confetti Falling](#confetti-falling)
- [Confetti Parade](#confetti-parade)
- [Party](#party)
- [Fire](#fire)
- [Firefly](#firefly)
- [Fireworks](#fireworks)
- [Fountain](#fountain)
- [Hyperspace](#hyperspace)
- [Links](#links)
- [Sea Anemone](#sea-anemone)
- [Snow](#snow)
- [Squares](#squares)
- [Stars](#stars)
- [Triangles](#triangles)
- [Templates and Resources](#templates-and-resources)
- [***Demo / Generator***](#demo--generator)
- [***Video Tutorials***](#video-tutorials)
- [Characters as particles](#characters-as-particles)
- [Polygon mask](#polygon-mask)
- [Animated stars](#animated-stars)
- [Nyan cat flying on scrolling stars](#nyan-cat-flying-on-scrolling-stars)
- [Snow particles](#snow-particles)
- [Background Mask particles](#background-mask-particles)
- [***Options***](#options)
- [Want to see it in action and try it?](#want-to-see-it-in-action-and-try-it)
- [Migrating from Particles.js](#migrating-from-particlesjs)
- [Plugins/Customizations](#pluginscustomizations)
- [Dependency Graph](#dependency-graph)
---
## Do you want to use it on your website?
*Documentation and Development references *[*here*](https://particles.js.org/docs/)* 📖*
**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](https://github.com/tsparticles/tsparticles/blob/main/README.md#library-installation), 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](https://github.com/tsparticles/tsparticles/blob/main/README.md#library-installation) 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
```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,
},
},
},
});
```
Useful docs for the next step:
- Docs home: [https://particles.js.org/docs/](https://particles.js.org/docs/)
- Options guide: [https://github.com/tsparticles/tsparticles/blob/main/markdown/Options.md](https://github.com/tsparticles/tsparticles/blob/main/markdown/Options.md)
- Migration guide: [https://github.com/tsparticles/tsparticles/blob/main/markdown/pjsMigration.md](https://github.com/tsparticles/tsparticles/blob/main/markdown/pjsMigration.md)
- Presets catalog: [https://github.com/tsparticles/presets](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/](https://particles.js.org/docs/)
- Root options guide: [https://github.com/tsparticles/tsparticles/blob/main/markdown/Options.md](https://github.com/tsparticles/tsparticles/blob/main/markdown/Options.md)
- Migration guide: [https://github.com/tsparticles/tsparticles/blob/main/markdown/pjsMigration.md](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
[](https://www.jsdelivr.com/package/npm/@tsparticles/confetti)
[](https://www.jsdelivr.com/package/npm/@tsparticles/particles)
[](https://www.jsdelivr.com/package/npm/@tsparticles/engine)
[](https://www.jsdelivr.com/package/npm/@tsparticles/fireworks)
[](https://www.jsdelivr.com/package/npm/@tsparticles/basic)
[](https://www.jsdelivr.com/package/npm/@tsparticles/slim)
[](https://www.jsdelivr.com/package/npm/tsparticles)
[](https://www.jsdelivr.com/package/npm/@tsparticles/all)
### cdnjs
[](https://cdnjs.com/libraries/tsparticles)
### unpkg
[https://unpkg.com/@tsparticles/confetti/](https://unpkg.com/@tsparticles/confetti/) [https://unpkg.com/@tsparticles/particles/](https://unpkg.com/@tsparticles/particles/) [https://unpkg.com/@tsparticles/engine/](https://unpkg.com/@tsparticles/engine/) [https://unpkg.com/@tsparticles/fireworks/](https://unpkg.com/@tsparticles/fireworks/) [https://unpkg.com/@tsparticles/basic/](https://unpkg.com/@tsparticles/basic/) [https://unpkg.com/@tsparticles/slim/](https://unpkg.com/@tsparticles/slim/) [https://unpkg.com/tsparticles/](https://unpkg.com/tsparticles/) [https://unpkg.com/@tsparticles/all/](https://unpkg.com/@tsparticles/all/)
---
### ***npm***
*tsParticles Confetti*
[](https://www.npmjs.com/package/@tsparticles/confetti) [](https://www.npmjs.com/package/@tsparticles/confetti)
*tsParticles Particles*
[](https://www.npmjs.com/package/@tsparticles/particles) [](https://www.npmjs.com/package/@tsparticles/particles)
*tsParticles Engine*
[](https://www.npmjs.com/package/@tsparticles/engine) [](https://www.npmjs.com/package/@tsparticles/engine)
*tsParticles Fireworks*
[](https://www.npmjs.com/package/@tsparticles/fireworks) [](https://www.npmjs.com/package/@tsparticles/fireworks)
*tsParticles Basic*
[](https://www.npmjs.com/package/@tsparticles/basic) [](https://www.npmjs.com/package/@tsparticles/basic)
*tsParticles Slim*
[](https://www.npmjs.com/package/@tsparticles/slim) [](https://www.npmjs.com/package/@tsparticles/slim)
*tsParticles*
[](https://www.npmjs.com/package/tsparticles) [](https://www.npmjs.com/package/tsparticles)
*tsParticles All*
[](https://www.npmjs.com/package/@tsparticles/all) [](https://www.npmjs.com/package/@tsparticles/all)
```shell
npm install @tsparticles/engine
```
### ***yarn***
```shell
yarn add @tsparticles/engine
```
### ***pnpm***
```shell
pnpm install @tsparticles/engine
```
### Import and require
```javascript
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 `
```
**app.js**
```javascript
// @path-json can be an object or an array, the first will be loaded directly, and the object from the array will be randomly selected
/* tsParticles.load(@params); */
tsParticles
.load({
id: "tsparticles",
url: "presets/default.json",
})
.then((container) => {
console.log("callback - tsparticles config loaded");
})
.catch((error) => {
console.error(error);
});
//or
tsParticles.load({
id: "tsparticles",
options: {
/* options here */
},
});
//or
tsParticles.load({
id: "tsparticles",
options: [
{
/* options here */
},
{
/* other options here */
},
],
});
//random object
tsParticles.load({
id: "tsparticles",
options: [
{
/* options here */
},
{
/* other options here */
},
],
index: 1,
}); //the second one
// Important! If the index is not in range 0... {
/* custom on click handler */
});
// now you can control the animations too, it's possible to pause and resume the animations
// these methods don't change the config so you're safe with all your configurations
// domItem(0) returns the first tsParticles instance loaded in the dom
const particles = tsParticles.item(0);
// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame
particles.play();
// pause will stop the animations
particles.pause();
```
---
## Official components for some of the most used frameworks
### Angular
### `@tsparticles/angular`
[](https://www.npmjs.com/package/@tsparticles/angular) [](https://www.npmjs.com/package/@tsparticles/angular)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/angular#readme)
### Astro
### `@tsparticles/astro`
[](https://www.npmjs.com/package/@tsparticles/astro) [](https://www.npmjs.com/package/@tsparticles/astro)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/astro#readme)
### Ember.js
### `@tsparticles/ember`
[](https://www.npmjs.com/package/@tsparticles/ember) [](https://www.npmjs.com/package/@tsparticles/ember)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/ember#readme)
### Inferno
### `@tsparticles/inferno`
[](https://www.npmjs.com/package/@tsparticles/inferno) [](https://www.npmjs.com/package/@tsparticles/inferno)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/inferno#readme)
### jQuery
### `@tsparticles/jquery`
[](https://www.npmjs.com/package/@tsparticles/jquery) [](https://www.npmjs.com/package/@tsparticles/jquery)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/jquery#readme)
### Preact
### `@tsparticles/preact`
[](https://www.npmjs.com/package/@tsparticles/preact) [](https://www.npmjs.com/package/@tsparticles/preact)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/preact#readme)
### Qwik
### `@tsparticles/qwik`
[](https://www.npmjs.com/package/@tsparticles/qwik) [](https://www.npmjs.com/package/@tsparticles/qwik)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/qwik#readme)
### ReactJS
### `@tsparticles/nextjs`
[](https://www.npmjs.com/package/@tsparticles/nextjs) [](https://www.npmjs.com/package/@tsparticles/nextjs)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/nextjs#readme)
### `@tsparticles/react`
[](https://www.npmjs.com/package/@tsparticles/react) [](https://www.npmjs.com/package/@tsparticles/react)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/react#readme)
### RiotJS
### `@tsparticles/riot`
[](https://www.npmjs.com/package/@tsparticles/riot) [](https://www.npmjs.com/package/@tsparticles/riot)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/riot#readme)
### SolidJS
### `@tsparticles/solid`
[](https://www.npmjs.com/package/@tsparticles/solid) [](https://www.npmjs.com/package/@tsparticles/solid)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/solid#readme)
### Svelte
### `@tsparticles/svelte`
[](https://www.npmjs.com/package/@tsparticles/svelte) [](https://www.npmjs.com/package/@tsparticles/svelte)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/svelte#readme)
### VueJS 2.x
### `@tsparticles/nuxt2`
[](https://www.npmjs.com/package/@tsparticles/nuxt2) [](https://www.npmjs.com/package/@tsparticles/nuxt2)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/nuxt2#readme)
### `@tsparticles/vue2`
[](https://www.npmjs.com/package/@tsparticles/vue2) [](https://www.npmjs.com/package/@tsparticles/vue2)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/vue2#readme)
### VueJS 3.x
### `@tsparticles/nuxt3`
[](https://www.npmjs.com/package/@tsparticles/nuxt3) [](https://www.npmjs.com/package/@tsparticles/nuxt3)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/nuxt3#readme)
### `@tsparticles/nuxt4`
[](https://www.npmjs.com/package/@tsparticles/nuxt4) [](https://www.npmjs.com/package/@tsparticles/nuxt4)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/nuxt4#readme)
### `@tsparticles/vue3`
[](https://www.npmjs.com/package/@tsparticles/vue3) [](https://www.npmjs.com/package/@tsparticles/vue3)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/vue3#readme)
### Web Components
### `@tsparticles/webcomponents`
[](https://www.npmjs.com/package/@tsparticles/webcomponents) [](https://www.npmjs.com/package/@tsparticles/webcomponents)
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main/wrappers/webcomponents#readme)
### WordPress
### `@tsparticles/wordpress`
[](https://www.npmjs.com/package/@tsparticles/wordpress) [](https://www.npmjs.com/package/@tsparticles/wordpress) [](https://wordpress.org/plugins/tsparticles-block/) [](https://wordpress.org/plugins/tsparticles-block/)
The plugin page hosted on WordPress.org can be
found [here](https://wordpress.org/plugins/tsparticles-block/#description)
### Elementor
Actually, an official tsParticles plugin isn't existing, but I have a collaboration with
the `Premium Addons for Elementor` plugin collection.
---
## Presets
There are some presets ready to be used in [this repository](https://github.com/tsparticles/presets), and they also have a bundle file that contains everything
needed to run.
### Ambient
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-ambient) [](https://www.npmjs.com/package/@tsparticles/preset-ambient) [](https://www.npmjs.com/package/@tsparticles/preset-ambient)
This preset loads ambient circles on a dark background.
[](https://particles.js.org/samples/presets/ambient)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/ambient#readme)
### Big Circles
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-big-circles) [](https://www.npmjs.com/package/@tsparticles/preset-big-circles) [](https://www.npmjs.com/package/@tsparticles/preset-big-circles)
This preset loads big colored circles moving upwards on a white background.
[](https://particles.js.org/samples/presets/bigCircles)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/bigCircles#readme)
### Bubbles
[](https://www.jsdelivr.com/package/npm/tsparticles) [](https://www.npmjs.com/package/@tsparticles/preset-bubbles) [](https://www.npmjs.com/package/@tsparticles/preset-bubbles)
This preset loads colored bubbles coming from the bottom of the screen on a white background.
[](https://particles.js.org/samples/presets/bubbles)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/bubbles#readme)
### Confetti
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-confetti) [](https://www.npmjs.com/package/@tsparticles/preset-confetti) [](https://www.npmjs.com/package/@tsparticles/preset-confetti)
This preset loads white and red confetti launched from the screen center on a transparent background.
[](https://particles.js.org/samples/presets/confetti)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/confetti#readme)
### Confetti Cannon
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-confetti-cannon) [](https://www.npmjs.com/package/@tsparticles/preset-confetti-cannon) [](https://www.npmjs.com/package/@tsparticles/preset-confetti-cannon)
This preset loads confetti launched from a draggable cannon.
[](https://particles.js.org/samples/presets/confettiCannon)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/confettiCannon#readme)
### Confetti Explosions
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-confetti-explosions) [](https://www.npmjs.com/package/@tsparticles/preset-confetti-explosions) [](https://www.npmjs.com/package/@tsparticles/preset-confetti-explosions)
This preset loads confetti bursts at multiple points on the screen.
[](https://particles.js.org/samples/presets/confettiExplosions)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/confettiExplosions#readme)
### Confetti Falling
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-confetti-falling) [](https://www.npmjs.com/package/@tsparticles/preset-confetti-falling) [](https://www.npmjs.com/package/@tsparticles/preset-confetti-falling)
This preset loads slowly falling confetti particles.
[](https://particles.js.org/samples/presets/confettiFalling)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/confettiFalling#readme)
### Confetti Parade
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-confetti-parade) [](https://www.npmjs.com/package/@tsparticles/preset-confetti-parade) [](https://www.npmjs.com/package/@tsparticles/preset-confetti-parade)
This preset loads confetti moving horizontally across the screen like a parade.
[](https://particles.js.org/samples/presets/confettiParade)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/confettiParade#readme)
### Party
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-party) [](https://www.npmjs.com/package/@tsparticles/preset-party) [](https://www.npmjs.com/package/@tsparticles/preset-party)
This preset creates an animated confetti-like celebration effect.
[](https://particles.js.org/samples/presets/party)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/party#readme)
### Fire
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-fire) [](https://www.npmjs.com/package/@tsparticles/preset-fire) [](https://www.npmjs.com/package/@tsparticles/preset-fire)
This preset loads a faded red to a black background with particles colored like fire and ash sparks.
[](https://particles.js.org/samples/presets/fire)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/fire#readme)
### Firefly
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-firefly) [](https://www.npmjs.com/package/@tsparticles/preset-firefly) [](https://www.npmjs.com/package/@tsparticles/preset-firefly)
This preset loads a mouse trail made with small fading particles like little fireflies.
[](https://particles.js.org/samples/presets/firefly)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/firefly#readme)
### Fireworks
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-fireworks) [](https://www.npmjs.com/package/@tsparticles/preset-fireworks) [](https://www.npmjs.com/package/@tsparticles/preset-fireworks)
This preset loads a beautiful fireworks effect.
[](https://particles.js.org/samples/presets/fireworks)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/fireworks#readme)
### Hyperspace
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-hyperspace) [](https://www.npmjs.com/package/@tsparticles/preset-hyperspace) [](https://www.npmjs.com/package/@tsparticles/preset-hyperspace)
This preset loads a hyperspace tunnel effect with fast-moving particles.
[](https://particles.js.org/samples/presets/hyperspace)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/hyperspace#readme)
### Fountain
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-fountain) [](https://www.npmjs.com/package/@tsparticles/preset-fountain) [](https://www.npmjs.com/package/@tsparticles/preset-fountain)
[](https://particles.js.org/samples/presets/fountain)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/fountain#readme)
### Links
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-links) [](https://www.npmjs.com/package/@tsparticles/preset-links) [](https://www.npmjs.com/package/@tsparticles/preset-links)
[](https://particles.js.org/samples/presets/links)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/links#readme)
### Sea Anemone
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-sea-anemone) [](https://www.npmjs.com/package/@tsparticles/preset-sea-anemone) [](https://www.npmjs.com/package/@tsparticles/preset-sea-anemone)
[](https://particles.js.org/samples/presets/seaAnemone)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/seaAnemone#readme)
### Snow
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-snow) [](https://www.npmjs.com/package/@tsparticles/preset-snow) [](https://www.npmjs.com/package/@tsparticles/preset-snow)
[](https://particles.js.org/samples/presets/snow)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/snow#readme)
### Squares
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-squares) [](https://www.npmjs.com/package/@tsparticles/preset-squares) [](https://www.npmjs.com/package/@tsparticles/preset-squares)
[](https://particles.js.org/samples/presets/squares)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/squares#readme)
### Stars
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-stars) [](https://www.npmjs.com/package/@tsparticles/preset-stars) [](https://www.npmjs.com/package/@tsparticles/preset-stars)
[](https://particles.js.org/samples/presets/stars)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/stars#readme)
### Triangles
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-triangles) [](https://www.npmjs.com/package/@tsparticles/preset-triangles) [](https://www.npmjs.com/package/@tsparticles/preset-triangles)
[](https://particles.js.org/samples/presets/triangles)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/triangles#readme)
---
## Templates and Resources
You can find some tsParticles related templates [here](https://github.com/tsparticles/templates). The templates are
created for *Vanilla Javascript*, *ReactJS*, *VueJS*, *Angular*, *SvelteJS*, and other frameworks.
The templates will vary, new ones can be created or older ones updated with the latest features or changed to a better
style. Check them out once in a while.
If you created some good design with *tsParticles* feel free to submit a pull request with your cool template, you'll be
credited as the template author!
[https://github.com/tsparticles/templates](https://github.com/tsparticles/templates)
---
## ***Demo / Generator***
[https://particles.js.org/samples](https://particles.js.org/samples)
[](https://particles.js.org/samples)
---
## ***Video Tutorials***
You can find all video tutorials on the website here: [https://particles.js.org/video.html](https://particles.js.org/video.html)
*More videos are coming soon! Check every day if there are some new contents.*
---
### Characters as particles
[](https://particles.js.org/samples/#chars)
---
### Polygon mask
[](https://particles.js.org/samples/#polygonMask)
---
### Animated stars
[](https://particles.js.org/samples/#nasa)
---
### Nyan cat flying on scrolling stars
[](https://particles.js.org/samples/#nyancat2)
---
### Snow particles
[](https://particles.js.org/samples/#snow)
---
### Background Mask particles
[](https://particles.js.org/samples/#background)
---
**particles.json**
You can find some config samples [here](https://particles.js.org/demos/presets/) 📖
---
## ***Options***
You can find all options
available [here](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
📖
If you want a practical map with examples, check these markdown docs too:
- Root options: [https://github.com/tsparticles/tsparticles/blob/main/markdown/Options.md](https://github.com/tsparticles/tsparticles/blob/main/markdown/Options.md)
- Colors: [https://github.com/tsparticles/tsparticles/blob/main/markdown/Color.md](https://github.com/tsparticles/tsparticles/blob/main/markdown/Color.md)
- Container API: [https://github.com/tsparticles/tsparticles/blob/main/markdown/Container.md](https://github.com/tsparticles/tsparticles/blob/main/markdown/Container.md)
## Want to see it in action and try it?
I've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage) 😮 or you can check out
my [profile](https://codepen.io/matteobruni)
Otherwise, there's the demo page link below.
[](https://particles.js.org/samples/)
Want to see even more demos? Clone the repository on your computer and follow these instructions
```shell
$ pnpm i
$ pnpm run build
$ cd demo/vanilla
$ pnpm start
```
**Boom! 💥** [http://localhost:3000](http://localhost:3000) and you can check out other demos.
Note: `demo/wordpress` contains documentation only. The WordPress wrapper runs as a plugin inside a WordPress installation, not as a standalone demo app.
*If you are brave enough* you can switch to the `dev` branch for trying the features under development.
---
## Migrating from Particles.js
**tsParticles** has a package that makes this library 100% compatible with the *particles.js* configuration.
[](https://www.jsdelivr.com/package/npm/@tsparticles/pjs) [](https://www.npmjs.com/package/@tsparticles/pjs) [](https://www.npmjs.com/package/@tsparticles/pjs)
Seriously, you just need to change the script from particles.js to the bundled compatibility package, et-voilà, **you're
ready** 🧙!
You can read more [**here**](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)
Want to know 5 reasons to do the
switch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)
*Below you can find all the information you need to install tsParticles and its new syntax.*
Migration quick guide in this repository:
- [https://github.com/tsparticles/tsparticles/blob/main/markdown/pjsMigration.md](https://github.com/tsparticles/tsparticles/blob/main/markdown/pjsMigration.md)
---
## Plugins/Customizations
tsParticles now supports some customizations 🥳.
**You can create your own plugins**
*Read more *[*here*](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.html)*...*
Practical customization guide (shape + preset examples):
- [https://github.com/tsparticles/tsparticles/blob/main/markdown/Plugins.md](https://github.com/tsparticles/tsparticles/blob/main/markdown/Plugins.md)
---
## Dependency Graph
```mermaid
flowchart TD
subgraph core [Core]
engine[tsParticles Engine]
perlin-noise[Perlin Noise Lib]
simplex-noise[Simplex Noise Lib]
configs[tsParticles Configs]
end
subgraph bundle-basic [tsParticles Basic]
subgraph basic-plugins [Plugins]
plugin-move[Move]
subgraph basic-plugins-colors [Colors]
plugin-hex-color[Hex Color]
plugin-hsl-color[HSL Color]
plugin-rgb-color[RGB Color]
end
end
subgraph basic-shapes [Shapes]
shape-circle[Circle]
end
subgraph basic-updates [Updaters]
updater-fill-color[Color]
updater-opacity[Opacity]
updater-out-modes[Out Modes]
updater-size[Size]
end
end
engine --> bundle-basic
subgraph bundle-confetti [tsParticles Confetti]
subgraph confetti-plugins [Plugins]
plugin-emitters
plugin-motion
end
subgraph confetti-shapes [Shapes]
shape-cards
shape-emoji
shape-heart
shape-image
shape-polygon
shape-square
shape-star
end
subgraph confetti-updaters [Updaters]
updater-life
updater-roll
updater-rotate
updater-tilt
updater-wobble
end
end
bundle-basic --> bundle-confetti
subgraph bundle-slim [tsParticles Slim]
subgraph slim-interactions [Interactions]
subgraph slim-interactions-external [Externals]
interaction-external-attract[Attract]
interaction-external-bounce[Bounce]
interaction-external-bubble[Bubble]
interaction-external-connect[Connect]
interaction-external-grab[Grab]
interaction-external-parallax[Parallax]
interaction-external-pause[Pause]
interaction-external-push[Push]
interaction-external-remove[Remove]
interaction-external-repulse[Repulse]
interaction-external-slow[Slow]
end
subgraph slim-interactions-particles [Particles]
interaction-particles-attract[Attract]
interaction-particles-collisions[Collisions]
interaction-particles-links[Links]
end
end
subgraph slim-plugins [Plugins]
plugin-interactivity[Interactivity]
subgraph slim-plugins-easings [Easings]
plugin-easing-quad[Quad]
end
end
subgraph slim-shapes [Shapes]
shape-emoji[Emoji]
shape-image[Image]
shape-line[Line]
shape-polygon[Polygon]
shape-square[Square]
shape-star[Star]
end
subgraph slim-updaters [Updaters]
updater-life[Life]
updater-rotate[Rotate]
updater-stroke-color[Stroke Color]
end
end
bundle-basic --> bundle-slim
subgraph bundle-fireworks [tsParticles Fireworks]
subgraph fireworks-effects [Effects]
effect-trail
end
subgraph fireworks-plugins [Plugins]
plugin-emitters
subgraph fireworks-plugin-emitters-shapes [Emitters Shapes]
plugin-emitters-shape-square
end
plugin-sounds
end
subgraph fireworks-updaters [Updaters]
updater-destroy
updater-life
updater-rotate
end
end
bundle-basic --> bundle-fireworks
subgraph bundle-full [tsParticles]
subgraph full-interactions [Interactions]
subgraph full-interactions-external [Externals]
interaction-external-trail[Trail]
end
end
subgraph full-plugins [Plugins]
plugin-absorbers[Absorbers]
plugin-emitters[Emitters]
subgraph full-plugin-emitters-shapes [Emitters Shapes]
plugin-emitters-shape-circle[Circle]
plugin-emitters-shape-square[Square]
end
end
subgraph full-shapes [Shapes]
shape-text[Text]
end
subgraph full-updaters [Updaters]
updater-destroy[Destroy]
updater-roll[Roll]
updater-tilt[Tilt]
updater-twinkle[Twinkle]
updater-wobble[Wobble]
end
end
bundle-slim --> bundle-full
subgraph bundle-all [tsParticles All]
subgraph all-effects [Effects]
effect-bubble[Bubble]
effect-particles[Particles]
effect-shadow[Shadow]
effect-trail[Trail]
end
subgraph all-interactions [Interactions]
subgraph all-interactions-external [External]
interaction-external-particle[Particle]
interaction-external-pop[Pop]
end
interaction-light[Light]
subgraph all-interactions-particles [Particles]
interaction-particles-repulse[Repulse]
end
end
subgraph all-paths [Paths]
path-branches[Branches]
path-brownian[Brownian]
path-curl-noise[Curl Noise]
path-curves[Curves]
path-fractal-noise[Fractal Noise]
path-grid[Grid]
path-levy[Levy]
path-perlin-noise[Perlin Noise]
path-polygon[Polygon]
path-random[Random]
path-simplex-noise[Simplex Noise]
path-spiral[Spiral]
path-svg[SVG]
path-zig-zag[Zig Zag]
end
subgraph all-plugins [Plugins]
plugin-background-mask[Background Mask]
plugin-blend[Blend]
plugin-canvas-mask[Canvas Mask]
subgraph all-plugins-colors [Colors]
plugin-hsv-color[HSV Color]
plugin-hwb-color[HWB Color]
plugin-lab-color[Lab Color]
plugin-lch-color[Lch Color]
plugin-named-color[Named Color]
plugin-oklab-color[Oklab Color]
plugin-oklch-color[Oklch Color]
end
subgraph all-plugins-easings [Easings]
plugin-easing-back[Back]
plugin-easing-bounce[Bounce]
plugin-easing-circ[Circ]
plugin-easing-cubic[Cubic]
plugin-easing-elastic[Elastic]
plugin-easing-expo[Expo]
plugin-easing-gaussian[Gaussian]
plugin-easing-linear[Linear]
plugin-easing-quart[Quart]
plugin-easing-quint[Quint]
plugin-easing-sigmoid[Sigmoid]
plugin-easing-sine[Sine]
plugin-easing-smoothstep[Smoothstep]
end
subgraph all-plugin-emitters-shapes [Emitters Shapes]
plugin-emitters-shape-canvas[Canvas]
plugin-emitters-shape-path[Path]
plugin-emitters-shape-polygon[Polygon]
end
subgraph all-plugins-exports [Exports]
plugin-export-image[Image]
plugin-export-json[JSON]
plugin-export-video[Video]
end
plugin-infection[Infection]
plugin-manual-particles[Manual Particles]
plugin-motion[Motion]
plugin-poisson-disc[Poisson Disc]
plugin-polygon-mask[Polygon Mask]
plugin-responsive[Responsive]
plugin-sounds[Sounds]
plugin-themes[Themes]
plugin-trail[Trail]
plugin-zoom[Zoom]
end
subgraph all-shapes [Shapes]
shape-arrow[Arrow]
shape-cards[Cards]
shape-cog[Cog]
shape-heart[Heart]
shape-infinity[Infinity]
shape-matrix[Matrix]
shape-path[Path]
shape-rounded-polygon[Rounded Polygon]
shape-rounded-rect[Rounded Rect]
shape-spiral[Spiral]
shape-squircle[Squircle]
end
subgraph all-updaters [Updaters]
updater-gradient[Gradient]
updater-orbit[Orbit]
end
simplex-noise --> path-curl-noise
perlin-noise --> path-perlin-noise
simplex-noise --> path-simplex-noise
end
bundle-full --> bundle-all
```