[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)

# tsParticles Filter Effect

[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/effect-filter/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/effect-filter)
[![npmjs](https://badge.fury.io/js/@tsparticles/effect-filter.svg)](https://www.npmjs.com/package/@tsparticles/effect-filter)
[![npmjs](https://img.shields.io/npm/dt/@tsparticles/effect-filter)](https://www.npmjs.com/package/@tsparticles/effect-filter) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)

[tsParticles](https://github.com/tsparticles/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:

```text
loadFilterEffect
```

### Usage

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

```javascript
(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:

```shell
$ npm install @tsparticles/effect-filter
```

or

```shell
$ yarn add @tsparticles/effect-filter
```

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

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

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

or

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

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

## Safari compatibility

As specified in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter), 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/>