TheLazy.Dev
Portfolio GitHub

Blog

tutorial |javascript |html |showdev

How to use tsParticles

matteobruni

Matteo Bruni

Posted on July 25, 2020

How to use tsParticles

How to add tsParticles to your website

How to get options

You can get tsParticles options from https://particles.matteobruni.it

Export config

CSS for full screen background with particles

particles.css 



/* suggested css */
#tsparticles {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

Vanilla Javascript

app.js 



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

index.html 



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

<!-- script -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles@1.16.2/dist/tsparticles.min.js" integrity="sha256-2Sly/Hf9UP7YBu6LEPpn/6rxMZR5EeGq89mBa4G5+YA=" crossorigin="anonymous"></script>
<script src="app.js"></script>
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 { tsParticles } from require("tsparticles");

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 



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

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
💖 💪 🙅 🚩
matteobruni
Matteo Bruni

Posted on July 25, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to use tsParticles
tutorial How to use tsParticles

July 25, 2020