tsParticles

tsParticles - Easily create highly customizable JavaScript particles effect...

matteobruni/tsparticles particles.js.org tsparticles

README

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

[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") [![Buy Me A Coffee](https://img.buymeacoffee.com/button-api/?text=Buy%20me%20a%20beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00")](https://www.buymeacoffee.com/matteobruni)

⚠️⚠️ \_This readme refers to v2

version, read here forv1 documentation\* ⚠️⚠️

- Use for your website

- Library installation

- Official components for some of the most used frameworks

- Angular

- Inferno

- jQuery

- Preact

- ReactJS

- RiotJS

- SolidJS

- Svelte

- VueJS 2.x

- VueJS 3.x

- Web Components

- WordPress

- Elementor

- Presets

- Big Circles

- Bubbles

- Confetti

- Fire

- Firefly

- Fireworks

- Fountain

- Links

- Sea Anemone

- Snow

- Stars

- Triangles

- Templates and Resources

- Demo / Generator

- Characters as particles

- Mouse hover connections

- Polygon mask

- Animated stars

- Nyan cat flying on scrolling stars

- Background Mask particles

- Video Tutorials

- Migrating from Particles.js

- Plugins/Customizations

- Dependency Graphs

- Sponsors

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.

_Library installation_

_Hosting / CDN_

_Please use these hosts or your own to load tsParticles on your projects_

jsDelivr

cdnjs

unpkg

_npm_

_tsParticles Engine_

_tsParticles Slim_

_tsParticles_

``` sh
npm install tsparticles-engine
```

_yarn_

``` sh
yarn add tsparticles-engine
```

_pnpm_

``` sh
pnpm install tsparticles-engine
```

Import and require

Starting from version 1.12.11 import and require can be used to import tsParticles .

Now you can write something like this

``` js
const tsParticles = require("tsparticles-engine");
// or
import { tsParticles } from "tsparticles-engine";
```

The imported tsParticles is the same instance you have when including the script.

_NuGet_

_Usage_

Load tsParticles and configure the particles:

index.html

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

app.js

``` js
// @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.loadJSON(@dom-id, @path-json, @callback (optional)); */
tsParticles
.loadJSON("tsparticles", "presets/default.json")
.then(container => {
console.log("callback - tsparticles config loaded");
})
.catch(error => {
console.error(error);
});
//or
/* tsParticles.load(@dom-id, @options); */
tsParticles.load("tsparticles", {
/* options here */
});
//or
/* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */
tsParticles.loadFromArray("tsparticles", [
{
/* options here */
},
{
/* other options here */
},
]);
//random object
tsParticles.loadFromArray(
"tsparticles",
[
{
/* options here */
},
{
/* other options here */
},
],
1
); //the second one
// Important! If the index is not in range 0...
// after initialization this can be used.
/* tsParticles.setOnClickHandler(@callback); */
/* this will be fired from all particles loaded */
tsParticles.setOnClickHandler((event, particles) => {
/* 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.domItem(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

ng-particles

Instructions available here

Inferno

inferno-particles

Instructions available here

jQuery

jquery-particles

Instructions available here

Preact

preact-particles

Instructions available here

ReactJS

react-particles

Instructions available here

RiotJS

riot-particles

You can find the instructions here

SolidJS

solid-particles

You can find the instructions here

Svelte

svelte-particles

Instructions available here

VueJS 2.x

vue2-particles

Instructions available here

VueJS 3.x

vue3-particles

Instruction available here

Web Components

web-particles

You can find the instructions here

WordPress

wordpress-particles

The plugin page hosted on WordPress.org can be

found here

Elementor

Actually, an official tsParticles plugin isn't existing, but I have a collaboration with

the Premium Addons for Elementor plugin collection.

Premium Addons for Elementor is one of the most common plugins for Elementor that offers 55+ highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in the Premium Particles Section Add-on for the Elementor Page Builder. Check It Now.
Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without writing a single line of code. See a Live Example.