tsParticles - Easily add highly customizable particles animations to your website
Tags: javascript, showdev, react, vue
Published: 2020-11-06 10:27:00

# tsParticles - Easily add highly customizable particles animations to your website

[tsParticles](https://github.com/matteobruni/tsparticles) is a lightweight library that lets you create beautiful particle animations that you can customize deeply.

{% github https://github.com/matteobruni/tsparticles %}

If you are using `React`, `Vue.js` (2.x or 3.x), `Angular`, `Svelte`, `jQuery`, `Inferno` or `Preact` you can find a ready to use official component instead of creating your own.

You'll find all the instructions needed below, and if you have questions you can reach me on GitHub or join the official *tsParticles* Slack [here](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI)

## Samples

### Particles background for login form

[![login background](https://dev-to-uploads.s3.amazonaws.com/i/fvyyruca679dfe7ub15u.png)](https://codepen.io/matteobruni/pen/VwvPLMe)

### Particles mouse trail unveiling background

[![unveiling background](https://dev-to-uploads.s3.amazonaws.com/i/wleffuztebktorrd2hp6.png)](https://codepen.io/matteobruni/pen/YzwBmJZ)

### Smoke Particles Effect

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/huehfki7iatdnup3z8tt.png)](https://codepen.io/matteobruni/pen/rNLKowW)

### Starry night

[![starry night](https://dev-to-uploads.s3.amazonaws.com/i/2ydxau5zj1uavrj050vu.png)](https://codepen.io/matteobruni/pen/bGexNaZ)

### Snow

[![snow](https://dev-to-uploads.s3.amazonaws.com/i/re2bpautc6662wnlkza0.png)](https://codepen.io/matteobruni/pen/PoqmyEy)

## Usage

### Vanilla Javascript

#### CDNs

You can easily add *tsParticles* with the most used CDNs

##### cdnjs

Checkout the *cdnjs* page to get the latest version [here](https://cdnjs.com/libraries/tsparticles)
![cdnjs](https://dev-to-uploads.s3.amazonaws.com/i/vo8e5tfraj2ckq08d04o.png)

##### jsDelivr

Checkout the *jsDelivr* page to get the latest version [here](https://www.jsdelivr.com/package/npm/tsparticles)
![jsDelivr](https://dev-to-uploads.s3.amazonaws.com/i/3al1kmwqsui2znokyvv9.png)

##### unpkg

*Unpkg* doesn't have a simple UI like *jsDelivr* or *cdnjs* but you can simply use the following link in a script tag to have always the latest version
<https://unpkg.com/tsparticles>

If you want to see all versions available go [here](https://unpkg.com/tsparticles/)

#### index.html

```html
<!-- particles container -->
<div id="tsparticles"></div>

<!-- script -->
<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles"></script>
<script src="app.js"></script>
```

#### app.js

```javascript
tsParticles.load("tsparticles", /* paste options here */);
```

### NPM / Yarn

```shell
yarn add tsparticles
```

or

```shell
npm install tsparticles
```

#### ES Module

##### app.js

```javascript
import { tsParticles } from "tsparticles";

tsParticles.load("tsparticles", /* paste options here */);
```

**Warning: This file must be built for client side usage, SSR is not supported.**

#### CommonJS (NodeJS)

##### app.js

```javascript
const tsp = require("tsparticles");

tsp.tsParticles.load("tsparticles", /* paste options here */);
```

### ReactJS

```shell
yarn add react-tsparticles
```

or

```shell
npm install react-tsparticles
```

```javascript
import Particles from "react-tsparticles";

// component syntax, use it in your markup
<Particles options={/* paste options here */} />
```

### PreactJS

```shell
yarn add preact-particles
```

or

```shell
npm install preact-particles
```

```javascript
import Particles from "preact-particles";

// component syntax, use it in your markup
<Particles options={/* paste options here */} />
```

### Inferno

```shell
yarn add inferno-particles
```

or

```shell
npm install inferno-particles
```

```javascript
import Particles from "inferno-particles";

// component syntax, use it in your markup
<Particles options={/* paste options here */} />
```

### Angular

```shell
yarn add ng-particles
```

or

```shell
npm install ng-particles
```

#### template.html

```html
<Particles id="tsparticles" [options]="particlesOptions"></Particles>  
```

#### app.ts

```typescript
export class AppComponent {  
 /* particlesOptions is the value used in the template */
 particlesOptions = /* paste options here */;
}  
```

#### app.module.ts

```typescript
import { NgParticlesModule } from 'ng-particles';  
import { NgModule } from "@angular/core";  
  
@NgModule({  
 declarations: [ /* AppComponent */ ],
 imports: [
   /* other imports */
   NgParticlesModule // NgParticlesModule is required
 ],
 providers: [],
 bootstrap: [ /* AppComponent */ ]
 })  
export class AppModule { }  
```

### VueJS

#### 2.x

```shell
yarn add particles.vue
```

or

```shell
npm install particles.vue
```

##### app.js

```javascript
import Particles from 'particles.vue';

Vue.use(Particles);
```

##### template.vue

```javascript
<template>  
  <div id="app">
    <Particles id="tsparticles" :options="{ /* your options here */ }"></Particles>
  </div>
</template>
```

#### 3.x

```shell
yarn add particles.vue3
```

or

```shell
npm install particles.vue3
```

##### app.js

```javascript
import Particles from 'particles.vue3';

createApp(App).use(Particles)
```

##### template.vue

```javascript
<template>  
  <div id="app">
    <Particles id="tsparticles" :options="{ /* your options here */ }"></Particles>
  </div>
</template>
```

### Svelte

```shell
npm install svelte-particles
```

or

```shell
yarn add svelte-particles
```

#### Usage

```html
<script>
  import Particles from "svelte-particles";

  let particlesConfig = {
    /* your options here */
  };
</script>

<Particles id="tsparticles" options="{particlesConfig}" />
```

## Configurations

You can checkout all tsParticles options from [here](https://particles.js.org/interfaces/_options_interfaces_ioptions_.ioptions.html)

![Options Page](https://dev-to-uploads.s3.amazonaws.com/i/gz98p6prygu14hw6vx7c.png)

You can customize some presets [here](https://particles.matteobruni.it/Samples)

![Export config](https://dev-to-uploads.s3.amazonaws.com/i/36m4ws9zkr4u8mctq2mm.png)

There's also an official *CodePen* collection [here](https://codepen.io/collection/DPOage)

<https://codepen.io/collection/DPOage>

![CodePen](https://dev-to-uploads.s3.amazonaws.com/i/frmm4nylohaq37nvndxs.png)

## Migrating from particles.js

*tsParticles* fully supports all existing particles.js configurations.

You can check out [this guide](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m) to easily migrate to *tsParticles*

## Thanks

Thanks for reading, and if you liked the project support it with a star on [GitHub](https://github.com/matteobruni/tsparticles)