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,…
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](#tsparticles---typescript-particles)
@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 📖_
This library is available on two of the most popular CDNs and it's easy and ready to use, if you were usingparticles.js
it's even easier.
You'll find the
instructions below, with all the
links you need, and _don't be scared by
CDNs and npm have all the sources you need in
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
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:
- Options guide:
- Migration guide:
- Presets catalog:
Quick checklist
- Install
@tsparticles/engineand one bundle (@tsparticles/slimis the common default) - Load the bundle before calling
tsParticles.load(...) - Start from a small config, then extend incrementally
Choose your quick-start path
@tsparticles/engine + only needed feature packagesI want the easiest default: use @tsparticles/slimI 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:
- Root options guide:
- Migration guide:
jsDelivr
cdnjs
unpkg
---
_npm__tsParticles Confetti_
 
_tsParticles Particles_
 
_tsParticles Engine_
 
_tsParticles Fireworks_
 
_tsParticles Basic_
 
_tsParticles Slim_
 
_tsParticles_
 
_tsParticles All_
 
shell
npm install @tsparticles/engineshell
yarn add @tsparticles/engineshell
pnpm install @tsparticles/engineImport 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 ` tag.
---
_Usage_Load tsParticles and configure the particles:
htmljavascript
// @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`
 
Instructions available [here](https://github.com/tsparticles/tsparticles/tree/main
…
-
tsparticles ★ PINNED
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
TypeScript ★ 8.9k 20h agoExplain → -
cli ★ PINNED ▣
tsParticles CLI
JavaScript ★ 5 3mo agoExplain → -
utils ★ PINNED ▣
tsParticles Common Utils
TypeScript ★ 5 3mo agoExplain → -
templates ★ PINNED
tsParticles website templates collection
★ 80 2y agoExplain → -
404-templates ★ PINNED
tsParticles Auth Template for Websites
JavaScript ★ 186 20d agoExplain → -
react ▣
React tsParticles official component
JavaScript ★ 584 4mo agoExplain → -
vue3 ▣
Vue.js tsParticles official component
Vue ★ 188 4mo agoExplain → -
svelte ▣
Svelte tsParticles official plugin
Svelte ★ 67 4mo agoExplain → -
astro ▣
tsParticles Astro official component
Astro ★ 61 4mo agoExplain → -
auth-template
tsParticles Auth Template for Websites
HTML ★ 52 3y agoExplain → -
angular ▣
Angular tsParticles official component
TypeScript ★ 42 4mo agoExplain → -
presets ▣
tsParticles Official Presets Repository
TypeScript ★ 28 4mo agoExplain → -
react-demo
No description.
JavaScript ★ 22 2d agoExplain → -
solid ▣
Solid.js tsParticles official component
TypeScript ★ 19 4mo agoExplain → -
vue2 ▣
tsParticles Official Vue 2 component library
Vue ★ 18 4mo agoExplain → -
confetti
tsParticles official confetti website
JavaScript ★ 16 1h agoExplain → -
vue3-auth-template
tsParticles VueJS 3.x Authentication Forms template
Vue ★ 14 2d agoExplain → -
react-glass-auth-template
Glassmorphism React.js Auth Template with Javascript Particles using tsParticles
JavaScript ★ 14 1d agoExplain → -
jquery ▣
jQuery tsParticles official plugin
Pug ★ 13 4mo agoExplain → -
gatsby-landing-page-starter
tsParticles Simple Landing Page Starter for Gatsby Websites
JavaScript ★ 13 2d agoExplain → -
react-landing-page-template
React tsParticles Landing Page Template
JavaScript ★ 12 20d agoExplain → -
preact ▣
Preact.js tsParticles official component
JavaScript ★ 10 4mo agoExplain → -
svelte-auth-template
tsParticles Svelte Authentication Forms template
Svelte ★ 10 2d agoExplain → -
vue-auth-template
tsParticles VueJS Authentication Forms template
Vue ★ 10 1d agoExplain → -
landing-page-template
tsParticles Landing Page Template
HTML ★ 9 3y agoExplain → -
webcomponents ▣
Web Components tsParticles official component
TypeScript ★ 8 4mo agoExplain → -
angular-auth-template
Angular tsParticles Authentication Forms template
HTML ★ 8 15d agoExplain → -
react-auth-template
tsParticles ReactJS Authentication Forms template
JavaScript ★ 8 1d agoExplain → -
vue3-demo
tsParticles Vue.js 3.x demo for YouTube
Vue ★ 8 2d agoExplain → -
website
tsParticles official website
HTML ★ 7 1h agoExplain → -
glass-auth-template
Glassmorphism Auth Template with Javascript Particles using tsParticles
HTML ★ 7 1mo agoExplain → -
vanilla-demo
No description.
HTML ★ 7 4y agoExplain → -
wordpress ▣
WordPress tsParticles official plugin
JavaScript ★ 6 4mo agoExplain → -
ember ▣
tsParticles Official Ember.js component
TypeScript ★ 6 4mo agoExplain → -
riot ▣
Riot.js tsParticles official component
JavaScript ★ 6 4mo agoExplain → -
nuxt3-particles-demo ▣
Nuxt3 Particles Demo
Vue ★ 6 3y agoExplain → -
inferno ▣
Inferno.js tsParticles official component
TypeScript ★ 5 4mo agoExplain → -
editor ▣
tsParticles official editor
TypeScript ★ 4 4mo agoExplain → -
lit ▣
tsParticles Lit Official Component
JavaScript ★ 4 4mo agoExplain → -
storybook
tsParticles Storybook
JavaScript ★ 4 2d agoExplain → -
.github
tsParticles GitHub Profile
★ 4 2y agoExplain → -
create-react-app-templates
Create React App CLI Templates using tsParticles
SCSS ★ 4 2d agoExplain → -
palettes ▣
tsParticles Palettes
JavaScript ★ 3 4mo agoExplain → -
nuxt2-particles-demo ▣
Nuxt.js Particles Demo
Vue ★ 3 3y agoExplain → -
qwik ▣
Qwik tsParticles official component
TypeScript ★ 2 4mo agoExplain → -
stencil ▣
tsParticles Stencil.js official component library
TypeScript ★ 1 2mo agoExplain → -
tsparticles.github.io
tsParticles GitHub Website
HTML ★ 1 2y agoExplain → -
ribbons
tsParticles Ribbons website
JavaScript ★ 0 1h agoExplain →
No repos match these filters.