PixiJS Filters — guide skill for backgrounds & shaders

For AI agents: find the right skill in one call — curl -s "https://varg.ai/how-to/api/search?q=<what the person wants>" returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://varg.ai/how-to/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the how-to page.

Add blur, displacement, color-matrix and custom GLSL/WGSL filters to PixiJS v8 scenes without killing FPS.

• Type: Guide · Backgrounds & shaders
• Slug: pixijs-filters
• Status: live
• Publisher: PixiJS (vendor, verified)
• License: MIT
• Source: https://github.com/pixijs/pixijs-skills/tree/main/skills/pixijs-filters
• Works in: Claude Code, Codex, Cursor, Gemini CLI
• Requires: PixiJS v8
• Cost: Free — open-source library (MIT)
• Adoption: 5,800 installs, 358 GitHub stars (skills.sh, 2026-10-26)

What it does

Applies visual effects through PixiJS v8's filter pipeline: built-in filters (alpha, blur, color matrix, displacement, noise), custom Filter.from() with GLSL or WGSL, and the community pixi-filters package. It also covers filter options, filterArea optimization and the common v7-to-v8 mistakes.

Use when

• Blur, glow, displacement or color effects
• A custom GLSL or WGSL filter
• Effects that are hurting frame rate

Install

• Claude Code: npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-filters -a claude-code
• Codex: npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-filters -a codex
• Cursor: npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-filters -a cursor
• Gemini CLI: npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-filters -a gemini-cli

Example output

https://s3.varg.ai/how-to/previews/100d8d95da6e/pixijs-filters.mp4 — v8.17 release video: legacy vs optimized BlurFilter, blur strength animating over a scene of shapes (credit: PixiJS (@PixiJS), https://x.com/PixiJS/status/2033619880545817003)

More backgrounds & shaders skills

• PixiJS Blend Modes: Composite PixiJS v8 layers with add, multiply and screen, or advanced modes like overlay and color-burn.
• PixiJS Custom Rendering: Write custom shaders, uniforms and batchers for PixiJS v8 that run on both WebGL and WebGPU.
• PixiJS Meshes: Deform images with custom geometry in PixiJS v8: meshes, planes, ropes and 2.5D perspective corners.
• PixiJS Particles: Render thousands of lightweight particles in PixiJS v8 with ParticleContainer and dynamic properties.
• WebGPU Three.js TSL: TSL node materials, GPU compute, post-processing and WGSL for three.js WebGPURenderer, by the Three.js Roadmap author.