Effects

tsParticles

Highly-configurable particle & network effects with a live customizer.

Live demotsparticles

tsParticles is the modern successor to particles.js. Four presets below — click to switch. For a full visual editor with every option exposed, use the official playground.

Install

npm i @tsparticles/react @tsparticles/slim

Snippet

import Particles, { initParticlesEngine } from "@tsparticles/react";
import { loadSlim } from "@tsparticles/slim";

useEffect(() => {
  initParticlesEngine(async (e) => loadSlim(e)).then(() => setReady(true));
}, []);

<Particles id="bg" options={{
  "fullScreen": {
    "enable": false
  },
  "background": {
    "color": {
      "value": "#000000"
    }
  },
  "particles": {
    "number": {
      "value": 60,
      "density": {
        "enable": true
      }
    },
    "color": {
      "value": [
        "#22d3ee",
        "#8b5cf6",
        "#f472b6"
      ]
    },
    "shape": {
      "type": "circle"
    },
    "links": {
      "enable": true,
      "distance": 140,
      "color": "#8b5cf6",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 0.8,
      "outModes": "bounce"
    },
    "size": {
      "value": {
        "min": 1,
        "max": 3
      }
    },
    "opacity": {
      "value": 0.8
    }
  },
  "interactivity": {
    "events": {
      "onHover": {
        "enable": true,
        "mode": "grab"
      }
    },
    "modes": {
      "grab": {
        "distance": 180,
        "links": {
          "opacity": 0.9
        }
      }
    }
  },
  "detectRetina": true
}} />