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

CSS for full screen background with particles

particles.css

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

Vanilla Javascript

app.js

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

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>

NPM / Yarn

yarn add tsparticles

or

npm install tsparticles

ES Module

app.js

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

const { tsParticles } from require("tsparticles");

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

ReactJS

yarn add react-tsparticles

or

npm install react-tsparticles

import Particles from "react-tsparticles";

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

PreactJS

yarn add preact-particles

or

npm install preact-particles

import Particles from "preact-particles";

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

Inferno

yarn add inferno-particles

or

npm install inferno-particles

import Particles from "inferno-particles";

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

Angular

yarn add ng-particles

or

npm install ng-particles

template.html

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

app.ts

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

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 { }  

VueJS

yarn add particles.vue

or

npm install particles.vue

app.js

import Particles from 'particles.vue';

Vue.use(Particles);

template.vue

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

Svelte

npm install svelte-particles

or

yarn add svelte-particles

Usage

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

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

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