# PixiJS Custom Rendering — guide skill for backgrounds & shaders

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

Write custom shaders, uniforms and batchers for PixiJS v8 that run on both WebGL and WebGPU.

- **Type:** [Guide](https://skills.varg.ai/guides.md) · [Backgrounds & shaders](https://skills.varg.ai/browse/skills/shaders.md)
- **Slug:** `pixijs-custom-rendering`
- **Status:** live
- **Publisher:** PixiJS (vendor, verified)
- **License:** MIT
- **Source:** https://github.com/pixijs/pixijs-skills/tree/main/skills/pixijs-custom-rendering
- **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

Low-level PixiJS v8 rendering: dual-renderer shaders for WebGL and WebGPU, typed uniform groups and UBO mode, textures as shader resources, custom filters, advanced GPU features and extension-based custom batchers. It flags the critical v8 API mistakes, such as the old `Shader.from` signature.

## Use when

- Writing a custom shader for PixiJS
- Animating uniforms at runtime
- A custom batcher or draw path

## Install

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

## Example output

https://skills.varg.ai/previews/pixijs-custom-rendering.mp4 — HTML-in-canvas page transition made with GSAP and the PixiJS Skills: a custom WebGL/WebGPU shader breaks the page into pixels on the way to the next one (credit: PixiJS (@PixiJS), https://x.com/PixiJS/status/2050275368255598985)

## More backgrounds & shaders skills

- [PixiJS Blend Modes](https://skills.varg.ai/skills/pixijs-blend-modes.md): Composite PixiJS v8 layers with add, multiply and screen, or advanced modes like overlay and color-burn.
- [PixiJS Filters](https://skills.varg.ai/skills/pixijs-filters.md): Add blur, displacement, color-matrix and custom GLSL/WGSL filters to PixiJS v8 scenes without killing FPS.
- [PixiJS Meshes](https://skills.varg.ai/skills/pixijs-meshes.md): Deform images with custom geometry in PixiJS v8: meshes, planes, ropes and 2.5D perspective corners.
- [PixiJS Particles](https://skills.varg.ai/skills/pixijs-particles.md): Render thousands of lightweight particles in PixiJS v8 with ParticleContainer and dynamic properties.
- [WebGPU Three.js TSL](https://skills.varg.ai/skills/dgreenheck-webgpu-threejs-tsl.md): TSL node materials, GPU compute, post-processing and WGSL for three.js WebGPURenderer, by the Three.js Roadmap author.