JSPM

  • Created
  • Published
  • Downloads 31180
  • Score
    100M100P100Q15555F
  • License MIT

Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.

Package Exports

  • tsparticles-particles.js
  • tsparticles-particles.js/cjs/index.js
  • tsparticles-particles.js/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tsparticles-particles.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

banner

tsParticles Particles.js Compatibility Package

jsDelivr npmjs npmjs GitHub Sponsors

tsParticles particles.js compatibility library.

How to use it

CDN / Vanilla JS / jQuery

The CDN/Vanilla version JS has two different files:

  • One is a bundle file with all the scripts included in a single file
  • One is a file including just the initPjs function to load the tsParticles/particles.js compatibility

Bundle

Including the tsparticles.pjs.bundle.min.js file will work exactly like v1, you can start using the tsParticles or the particlesJS instance in the same way.

This is the easiest usage, since it's a single file with the some of the v1 features.

All new features will be added as external packages, this bundle is recommended for migrating from v1 easily.

Not Bundle

This installation requires more work since all dependencies must be included in the page. Some lines above are all specified in the Included Packages section.

Usage

Once the scripts are loaded you can set up tsParticles or particlesJS like this:

const { particlesJS } = initPjs(tsParticles); // not needed if using the bundle script, required for any other installation

particlesJS("tsparticles", {
  /* options */
});

// or

tsParticles.load("tsparticles", {
  /* options */
});