Get started with tsparticles CDN

MIT licensed

TSParticles is a popular library for creating interactive WebGL particle systems in Three.js.

Tags:
  • tsparticles
  • particles.js
  • particlesjs
  • particles
  • particle
  • canvas
  • jsparticles
  • xparticles
  • particles-js
  • particles-bg
  • particles-bg-vue
  • particles-ts
  • particles.ts
  • react-particles-js
  • react-particles.js
  • react-particles
  • react
  • reactjs
  • vue-particles
  • ngx-particles
  • angular-particles
  • particleground
  • vue
  • vuejs
  • preact
  • preactjs
  • jquery
  • angularjs
  • angular
  • typescript
  • javascript
  • animation
  • web
  • html5
  • web-design
  • webdesign
  • css
  • html
  • css3
  • animated
  • background
  • confetti
  • fireworks
  • fireworks-js
  • confetti-js
  • confettijs
  • fireworksjs
  • canvas-confetti

Stable version

Copied!

How to start using tsparticles CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with tsparticles CDN - cdnhub.io</title>
  <style>
    body { margin: 0; }
    canvas { width: 100%; height: 100vh; }
  </style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/@tesla/react-refresh@0.0.8/tesla-refresh-browser.min.js"></script>
  <script src="https://cdn.cdnhub.io/tsparticles/3.3.0/tsparticles.bundle.min.js"></script>
  <script>
    const particles = new TSParticles({
      container: document.querySelector('canvas.bg'),
      backgroundMode: {
        color: '#000000',
        opacity: 0.5
      },
      fpsLimit: 60,
      interactivity: {
        events: {
          onClick: {
            enable: true,
            mode: 'repulse'
          }
        },
        modes: {
          repulse: {
            distance: 200,
            duration: 0.4
          }
        }
      },
      particles: {
        color: {
          value: '#ffffff'
        },
        links: {
          color: '#ffffff',
          distance: 150
        },
        move: {
          direction: 'none',
          enable: true,
          outMode: 'out'
        },
        size: {
          value: 5
        }
      },
      pauseOnBlur: false,
      pauseOnInteraction: false,
      style: {
        fill: 'rgba(255, 255, 255, 0.1)'
      }
    });

    particles.init();
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions

1.10.0 1.10.1 1.10.2 1.10.3 1.10.4 1.11.0 1.11.1 1.11.2 1.12.0 1.12.1 1.12.10 1.12.11 1.12.2 1.12.3 1.12.4 1.12.5 1.12.6 1.12.7 1.12.8 1.12.9 1.13.0 1.13.0-alpha.0 1.13.0-alpha.1 1.13.0-alpha.2 1.13.0-alpha.3 1.13.0-alpha.4 1.13.0-alpha.5 1.13.0-alpha.6 1.13.0-alpha.7 1.13.0-beta.0 1.13.0-beta.1 1.13.0-beta.2 1.13.0-beta.3 1.13.0-beta.4 1.13.0-beta.5 1.13.0-beta.6 1.13.0-beta.7 1.13.0-beta.8 1.13.0-beta.9 1.13.1 1.13.2 1.13.3 1.13.4 1.13.5 1.13.6 1.13.7 1.13.8 1.13.9 1.14.0 1.14.0-alpha.0 1.14.0-alpha.1 1.14.0-alpha.2 1.14.0-alpha.3 1.14.0-alpha.4 1.14.0-alpha.5 1.14.0-alpha.6 1.14.0-alpha.7 1.14.0-beta.0 1.14.0-beta.1 1.14.0-beta.2 1.14.1 1.14.2 1.14.3 1.15.0 1.15.0-alpha.0 1.15.0-alpha.1 1.15.0-alpha.10 1.15.0-alpha.2 1.15.0-alpha.3 1.15.0-alpha.4 1.15.0-alpha.5 1.15.0-alpha.6 1.15.0-alpha.7 1.15.0-alpha.8 1.15.0-alpha.9 1.15.0-beta.0 1.15.0-beta.1 1.15.0-beta.2 1.15.0-beta.3 1.15.0-beta.4 1.15.0-beta.5 1.15.0-beta.6 1.15.0-beta.7 1.15.0-beta.8 1.15.1 1.16.0 1.16.0-alpha.0 1.16.0-alpha.1 1.16.0-alpha.11 1.16.0-alpha.12 1.16.0-alpha.2 1.16.0-alpha.3 1.16.0-alpha.4 1.16.0-alpha.5 1.16.0-alpha.6 1.16.0-alpha.7 1.16.0-alpha.8 1.16.0-alpha.9 1.16.0-beta.2 1.16.0-beta.3 1.16.0-beta.4 1.16.0-beta.5 1.16.0-beta.6 1.16.2 1.16.3 1.17.0 1.17.0-alpha.0 1.17.0-alpha.1 1.17.0-alpha.10 1.17.0-alpha.11 1.17.0-alpha.13 1.17.0-alpha.14 1.17.0-alpha.2 1.17.0-alpha.3 1.17.0-alpha.4 1.17.0-alpha.5 1.17.0-alpha.6 1.17.0-alpha.7 1.17.0-alpha.8 1.17.0-alpha.9 1.17.0-beta.0 1.17.0-beta.1 1.17.0-beta.2 1.17.0-beta.3 1.17.0-beta.4 1.17.0-beta.5 1.17.0-beta.6 1.17.0-beta.7 1.17.1 1.17.10 1.17.11 1.17.12 1.17.2 1.17.3 1.17.4 1.17.5 1.17.6 1.17.7 1.17.8 1.17.9 1.18.0 1.18.0-alpha.0 1.18.0-alpha.1 1.18.0-alpha.10 1.18.0-alpha.11 1.18.0-alpha.12 1.18.0-alpha.13 1.18.0-alpha.14 1.18.0-alpha.2 1.18.0-alpha.3 1.18.0-alpha.4 1.18.0-alpha.5 1.18.0-alpha.6 1.18.0-alpha.7 1.18.0-alpha.8 1.18.0-alpha.9 1.18.0-beta.0 1.18.0-beta.1 1.18.0-beta.2 1.18.0-beta.3 1.18.0-beta.4 1.18.0-beta.5 1.18.1 1.18.10 1.18.11 1.18.12 1.18.2 1.18.3 1.18.4 1.18.5 1.18.6 1.18.7 1.18.8 1.18.9 1.19.0 1.19.0-alpha.0 1.19.0-alpha.1 1.19.0-alpha.2 1.19.0-alpha.3 1.19.0-alpha.4 1.19.0-alpha.5 1.19.1 1.19.2 1.19.3 1.19.4 1.20.0 1.20.1 1.21.0 1.22.0 1.22.1 1.23.0 1.24.0 1.24.1 1.24.2 1.24.3 1.25.0 1.26.0 1.26.1 1.26.2 1.26.3 1.27.0 1.28.0 1.28.1 1.28.2 1.29.0 1.29.1 1.29.2 1.30.0 1.30.1 1.30.2 1.30.3 1.30.4 1.31.0 1.31.1 1.32.0 1.33.0 1.33.1 1.33.2 1.33.3 1.34.0 1.34.1 1.35.0 1.35.1 1.35.2 1.35.3 1.35.4 1.36.0 1.37.0 1.37.1 1.37.2 1.37.3 1.37.4 1.37.5 1.37.6 1.38.0 1.39.0 1.39.1 1.39.2 1.39.3 1.40.0 1.40.1 1.40.2 1.41.0 1.41.1 1.41.2 1.41.3 1.41.4 1.41.5 1.41.6 1.42.0 1.42.1 1.42.2 1.42.3 1.42.4 1.43.0 1.43.1 1.8.0 1.8.1 1.8.2 1.9.0 1.9.1 1.9.2 2.0.0 2.0.0-beta.0 2.0.0-beta.1 2.0.0-beta.2 2.0.0-beta.3 2.0.0-beta.4 2.0.0-beta.5 2.0.1 2.0.2 2.0.3 2.0.4 2.0.5 2.0.6 2.1.0 2.1.1 2.1.2 2.1.3 2.1.4 2.10.0 2.10.1 2.11.0 2.11.1 2.12.0 2.2.0 2.2.1 2.2.2 2.2.3 2.2.4 2.3.0 2.3.1 2.3.2 2.3.3 2.3.4 2.4.0 2.5.0 2.5.1 2.5.2 2.5.3 2.6.0 2.7.0 2.7.1 2.8.0 2.9.0 2.9.1 2.9.2 2.9.3 3.0.0 3.0.0-alpha.0 3.0.0-alpha.1 3.0.0-beta.0 3.0.0-beta.1 3.0.0-beta.2 3.0.0-beta.3 3.0.0-beta.4 3.0.0-beta.5 3.0.1 3.0.2 3.0.3 3.1.0 3.2.0 3.2.1 3.2.2 3.3.0 *** 3.4.0