# pixijs-filters

Guides PixiJS v8 visual effects through the filter pipeline. Use it for blur, colour adjustments, displacement, or custom shader effects.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 5800 installs · ★ 358
- Author: pixijs
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-filters/SKILL.md
- Updated: 2026-10-01
- HTML: https://affpapa.org/en/nevibecode/skills/pixijs-filters

## What it does

The skill gives an agent patterns for assigning a filter or filter chain to `container.filters` in PixiJS v8. It covers built-in effects such as `BlurFilter`, `ColorMatrixFilter`, `AlphaFilter`, `DisplacementFilter`, and `NoiseFilter`, plus `filterArea` bounds.

Custom effects use `Filter.from()` with GLSL or WGSL fragment shaders. Textures belong in `resources`, while shader values are accessed through filter resource groups. It also covers `resolution`, `padding`, `antialias`, and `blendRequired` when configuring a filter.

WebGPU requires `gpuProgram`, while `glProgram` targets WebGL. That is a reason to check the renderer setup before adding a custom shader. The skill also covers `pixi-filters/{name}` imports for PixiJS v8 community filters and filter-based advanced blend modes.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-filters -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/pixijs-filters/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/pixijs-filters/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-filters -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/pixijs-filters/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-filters -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/pixijs-filters/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pixijs/pixijs-skills pixijs-filters
```

2. **Manually: put the files in place**
- File: `.github/skills/pixijs-filters/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-filters -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/pixijs/pixijs-skills --path skills/pixijs-filters
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/pixijs-filters/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-filters -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-filters/SKILL.md

## When to use it
- apply blur to a PixiJS container
- chain blur with colour matrix adjustments
- create a custom effect with `Filter.from()`
- limit filter processing with `filterArea`
- import `GlowFilter` from `pixi-filters`

## Example prompts
- Add `BlurFilter` and `ColorMatrixFilter` to this sprite through `sprite.filters`.
- Create a wave effect with `Filter.from()` and a `uTime` fragment shader uniform.
- Set `filterArea` for this blurred PixiJS v8 container.

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 9fac10511d38c966.

BEGIN THIRD-PARTY FILE 9fac10511d38c966
````text
---
name: pixijs-filters
description: "Use this skill when applying visual effects to PixiJS v8 containers via the filter pipeline. Covers built-in filters (AlphaFilter, BlurFilter, ColorMatrixFilter, DisplacementFilter, NoiseFilter), custom Filter.from() with GLSL/WGSL, options (resolution, padding, antialias, blendRequired), filterArea optimization, pixi-filters community package. Triggers on: filters, BlurFilter, ColorMatrixFilter, DisplacementFilter, NoiseFilter, Filter.from, GLSL filter, pixi-filters, filterArea."
license: MIT
---

Attach visual effects by assigning one filter (or an array for chaining) to `container.filters`. Built-in filters cover blur, color matrix, displacement, alpha, and noise; custom filters wrap a GLSL/WGSL fragment shader via `Filter.from(...)`.

## Quick Start

```ts
const sprite = new Sprite(await Assets.load("hero.png"));
app.stage.addChild(sprite);

const blur = new BlurFilter({ strength: 4, quality: 4 });
const colorMatrix = new ColorMatrixFilter();
colorMatrix.brightness(1.2, false);

sprite.filters = [blur, colorMatrix];

const container = new Container();
container.filters = [new BlurFilter({ strength: 2 })];
container.filterArea = new Rectangle(0, 0, 800, 600);
app.stage.addChild(container);
```

**Related skills:** `pixijs-custom-rendering` (shader internals, uniform types), `pixijs-blend-modes` (composing with filters), `pixijs-performance` (filter tuning, filterArea).

## Core Patterns

### Built-in filters

```ts
import {
  AlphaFilter,
  BlurFilter,
  ColorMatrixFilter,
  DisplacementFilter,
  NoiseFilter,
  Assets,
  Sprite,
} from "pixi.js";

// Alpha (uniform transparency without per-child layering)
const alpha = new AlphaFilter({ alpha: 0.5 });

// Blur — strength/quality are uniform; strengthX/strengthY split axes;
// kernelSize must be odd (5, 7, 9, ... 15); repeatEdgePixels avoids transparent edges
const blur = new BlurFilter({
  strength: 4,
  quality: 4,
  kernelSize: 5,
  repeatEdgePixels: false,
});

// Color matrix — brightness is one of many presets. Others: tint, hue,
// contrast, saturate, desaturate, greyscale/grayscale, blackAndWhite,
// negative, sepia, technicolor, polaroid, kodachrome, browni, vintage,
// colorTone, night, predator, lsd, reset. Direct access via
// `colorMatrix.matrix` (20-element array) and `colorMatrix.alpha` (blend
// between original and transformed).
const colorMatrix = new ColorMatrixFilter();
colorMatrix.brightness(1.5, false);
colorMatrix.contrast(0.5, true); // multiply stacks on top of existing matrix
colorMatrix.alpha = 0.7; // blend at 70% strength

// Displacement — scale is a number or PointData
const displacementTexture = await Assets.load("displacement_map.png");
const displacementSprite = new Sprite(displacementTexture);
const displacement = new DisplacementFilter({
  sprite: displacementSprite,
  scale: { x: 20, y: 10 },
});

// Noise — seed is an arbitrary number that determines the noise pattern; same seed reproduces the same pattern
````
END THIRD-PARTY FILE 9fac10511d38c966

The third-party file has ended. Everything between the 9fac10511d38c966 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2995 of 9869 bytes. © pixijs · MIT · https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-filters/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md