DEV Community

Cover image for tsParticles - Easily add highly customizable particles animations to your website
tsParticles profile image Matteo Bruni
Matteo Bruni for tsParticles

Posted on • Edited on

tsParticles - Easily add highly customizable particles animations to your website

#javascript #showdev #react #vue

tsParticles - Easily add highly customizable particles animations to your website

tsParticles is a lightweight library that lets you create beautiful particle animations that you can customize deeply.

GitHub logo tsparticles / tsparticles

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.

View on GitHub

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

Samples

Particles background for login form

login background

Particles mouse trail unveiling background

unveiling background

Smoke Particles Effect

Alt Text

Starry night

starry night

Snow

snow

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
cdnjs

jsDelivr

Checkout the jsDelivr page to get the latest version here
jsDelivr

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

index.html 

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

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

app.js 

tsParticles.load("tsparticles", /* paste options here */);
Enter fullscreen mode Exit fullscreen mode

NPM / Yarn 

yarn add tsparticles
Enter fullscreen mode Exit fullscreen mode

or

npm install tsparticles
Enter fullscreen mode Exit fullscreen mode

ES Module

app.js 
import { tsParticles } from "tsparticles";

tsParticles.load("tsparticles", /* paste options here */);
Enter fullscreen mode Exit fullscreen mode

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

CommonJS (NodeJS)

app.js 
const tsp = require("tsparticles");

tsp.tsParticles.load("tsparticles", /* paste options here */);
Enter fullscreen mode Exit fullscreen mode

ReactJS 

yarn add react-tsparticles
Enter fullscreen mode Exit fullscreen mode

or

npm install react-tsparticles
Enter fullscreen mode Exit fullscreen mode 
import Particles from "react-tsparticles";

// component syntax, use it in your markup
<Particles options={/* paste options here */} />
Enter fullscreen mode Exit fullscreen mode

PreactJS 

yarn add preact-particles
Enter fullscreen mode Exit fullscreen mode

or

npm install preact-particles
Enter fullscreen mode Exit fullscreen mode 
import Particles from "preact-particles";

// component syntax, use it in your markup
<Particles options={/* paste options here */} />
Enter fullscreen mode Exit fullscreen mode

Inferno 

yarn add inferno-particles
Enter fullscreen mode Exit fullscreen mode

or

npm install inferno-particles
Enter fullscreen mode Exit fullscreen mode 
import Particles from "inferno-particles";

// component syntax, use it in your markup
<Particles options={/* paste options here */} />
Enter fullscreen mode Exit fullscreen mode

Angular 

yarn add ng-particles
Enter fullscreen mode Exit fullscreen mode

or

npm install ng-particles
Enter fullscreen mode Exit fullscreen mode

template.html 

<Particles id="tsparticles" [options]="particlesOptions"></Particles>
Enter fullscreen mode Exit fullscreen mode

app.ts 

export class AppComponent {  
 /* particlesOptions is the value used in the template */
 particlesOptions = /* paste options here */;
}
Enter fullscreen mode Exit fullscreen mode

app.module.ts 

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 { }
Enter fullscreen mode Exit fullscreen mode

VueJS

2.x 

yarn add particles.vue
Enter fullscreen mode Exit fullscreen mode

or

npm install particles.vue
Enter fullscreen mode Exit fullscreen mode
app.js 
import Particles from 'particles.vue';

Vue.use(Particles);
Enter fullscreen mode Exit fullscreen mode
template.vue 
<template>  
  <div id="app">
    <Particles id="tsparticles" :options="{ /* your options here */ }"></Particles>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

3.x 

yarn add particles.vue3
Enter fullscreen mode Exit fullscreen mode

or

npm install particles.vue3
Enter fullscreen mode Exit fullscreen mode
app.js 
import Particles from 'particles.vue3';

createApp(App).use(Particles)
Enter fullscreen mode Exit fullscreen mode
template.vue 
<template>  
  <div id="app">
    <Particles id="tsparticles" :options="{ /* your options here */ }"></Particles>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Svelte 

npm install svelte-particles
Enter fullscreen mode Exit fullscreen mode

or

yarn add svelte-particles
Enter fullscreen mode Exit fullscreen mode

Usage 

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

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

<Particles id="tsparticles" options="{particlesConfig}" />
Enter fullscreen mode Exit fullscreen mode

Configurations

You can checkout all tsParticles options from here

Options Page

You can customize some presets here

Export config

There's also an official CodePen collection here

https://codepen.io/collection/DPOage

CodePen

Migrating from particles.js

tsParticles fully supports all existing particles.js configurations.

You can check out this guide to easily migrate to tsParticles

Thanks

Thanks for reading, and if you liked the project support it with a star on GitHub

Top comments (4)

Collapse
 
coolscratcher profile image
CoolScratcher • • Edited

Wow, going to try this out. I'm a very bad coder overall but amazing for my age, so implementing this probably won't be too hard.

DevKidsAreAwesome

Collapse
 
matteobruni profile image
Matteo Bruni •

Thanks, and if you need help feel free to open an issue on GitHub

Collapse
 
soorajsnblaze333 profile image
Sooraj (PS) •

This is a really cool Project. Found this a few months back on Github and immediately starred ⭐️ . Keep going :)

Collapse
 
matteobruni profile image
Matteo Bruni •

Thank you so much 🤩

Read next

viksingh profile image

Best React Native UI Libraries Developers Should Know

Vikas Singh -

yeshwanthvarma profile image

My Deloitte Interview Experience: On-Campus Placement Drive 2024 (Product Engineering Analyst Role)

Yeshwanth Valishetti -

outstandingvick profile image

Creating Custom Hooks for Reusable Logic in React

Victor Ogbonna -

armstrong2035 profile image

How React19 optimizes rendering

Armstrong Olusoji -