tsParticles Matrix Preset

tsParticles preset for a Matrix-style rain animation.

Quick checklist

1. Install @tsparticles/engine (or use the CDN bundle below)
2. Call loadMatrixPreset(tsParticles) before tsParticles.load(...)
3. Set preset: "matrix" in options

How to use it

CDN / Vanilla JS / jQuery

<script src="https://cdn.jsdelivr.net/npm/@tsparticles/preset-matrix@4/tsparticles.preset.matrix.bundle.min.js"></script>
Copy

Usage

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

(async () => {
  await loadMatrixPreset(tsParticles);

  await tsParticles.load({
    id: "tsparticles",
    options: {
      preset: "matrix",
    },
  });
})();
Copy

Frameworks with a tsParticles component library

Checkout the documentation in the component library repository and call the loadMatrixPreset function instead of loadFull, loadSlim or similar functions.

The options shown above are valid for all the component libraries.

Dependencies

This preset loads and combines the following packages:

If you want to customize one specific behavior, start from the related package README above.

Common pitfalls

• Calling tsParticles.load(...) before loadMatrixPreset(tsParticles)
• Using particles.shape.type: "matrix" without loading the matrix shape package
• Applying the shadow and trail options without loading the corresponding effect packages

Related docs

• All presets catalog: https://github.com/tsparticles/presets
• Main tsParticles docs: https://particles.js.org/docs/

flowchart TD
  subgraph b [Bundles]
    bb[tsParticles Basic]
  end

  subgraph ef [Effects]
    es[Shadow]
    et[Trail]
  end

  subgraph pl [Plugins]
    pp[Poisson Disc]
  end

  subgraph s [Shapes]
    sm[Matrix]
  end

  subgraph pr [Presets]
    prm[Matrix]
  end

  bb & es & et & pp & sm --> prm
Copy