@tsparticles/effect-filter

tsParticles Filter Effect

tsParticles additional filter effect.

Quick checklist

1. Install @tsparticles/engine (or use the CDN bundle below)
2. Call the package loader function(s) before tsParticles.load(...)
3. Apply the package options in your tsParticles.load(...) config

How to use it

CDN / Vanilla JS / jQuery

The CDN/Vanilla version JS has one required file in vanilla configuration:

Including the tsparticles.effect.filter.min.js file will export the function to load the effect:

loadFilterEffect

Usage

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

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

  await tsParticles.load({
    id: "tsparticles",
    options: {
      /* options */
      /* here you can use particles.effect.type: "filter" */
    },
  });
})();

ESM / CommonJS

This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:

$ npm install @tsparticles/effect-filter

or

$ yarn add @tsparticles/effect-filter

Then you need to import it in the app, like this:

const { tsParticles } = require("@tsparticles/engine");
const { loadFilterEffect } = require("@tsparticles/effect-filter");

(async () => {
  await loadFilterEffect(tsParticles);
})();

or

import { tsParticles } from "@tsparticles/engine";
import { loadFilterEffect } from "@tsparticles/effect-filter";

(async () => {
  await loadFilterEffect(tsParticles);
})();

Safari compatibility

As specified in the MDN docs, canvas filter is not enabled by default in Safari (and Safari for iOS).

It can be enabled in the browser settings, so be careful with this effect if the target user could use Apple Devices.

Option mapping

• Effects are usually enabled through dedicated package loaders and effect-specific options.
• Package scope: filter
• Start from the usage snippet in this README, then merge with your main options object incrementally.

Common pitfalls

• Calling tsParticles.load(...) before loadFilterEffect(...)
• Verify required peer packages before enabling advanced options
• Change one option group at a time to isolate regressions quickly

Related docs

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