DEV Community

loading...
Cover image for tsParticles - Easily add highly customizable particles animations to your website

tsParticles - Easily add highly customizable particles animations to your website

matteobruni profile image Matteo Bruni ・4 min read

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 matteobruni / tsparticles

tsParticles - Easily add particles animations to your website. Compatible also with React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno

banner

tsParticles - TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready!

Particles.js converted in TypeScript, dependency free (*), improved with new cool 😎 features and various bugs fixed and it's actively maintained!

jsDelivr Cdnjs npmjs npm lerna CodeFactor Codacy Badge Gitpod Ready-to-Code Run on Repl.it

Do you want to use it on your website?

This library is available on the two 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.min.js) and all files splitted for import syntax.

If you are still interested some lines below there are some instructions for migrating from…

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

Discussion

pic
Editor guide
Collapse
coolscratcher profile image
CoolScratcher

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 Author

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

Collapse
soorajsnblaze333 profile image
Sooraj

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 Author

Thank you so much 🤩