# Backgrounds & shaders: agent skills for video backgrounds and 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.

Shader backgrounds, overlays, filters, particles and WebGL effects. 11 skills for Claude Code, Codex and Cursor, by type: workflows take a brief to a finished video, effects and styles change how it looks, prompts and guides teach the agent the craft, models run the generation.

## Skills (11)

### Guides (10)

- [HyperFrames Registry](https://skills.varg.ai/skills/hyperframes-registry.md) — HeyGen: Pull any of ~450 ready-made blocks into a video as editable source: transitions, titles, captions, charts, 3D.
- [PixiJS](https://skills.varg.ai/skills/pixijs.md) — PixiJS: Build fast 2D WebGL/WebGPU graphics with PixiJS v8; routes each task to the right PixiJS skill.
- [PixiJS Blend Modes](https://skills.varg.ai/skills/pixijs-blend-modes.md) — PixiJS: Composite PixiJS v8 layers with add, multiply and screen, or advanced modes like overlay and color-burn.
- [PixiJS Custom Rendering](https://skills.varg.ai/skills/pixijs-custom-rendering.md) — PixiJS: Write custom shaders, uniforms and batchers for PixiJS v8 that run on both WebGL and WebGPU.
- [PixiJS Filters](https://skills.varg.ai/skills/pixijs-filters.md) — PixiJS: 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) — PixiJS: 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) — PixiJS: Render thousands of lightweight particles in PixiJS v8 with ParticleContainer and dynamic properties.
- [Three.js Skills](https://skills.varg.ai/skills/threejs-skills.md) — CloudAI-X: 13 Three.js skills: scenes, geometry, materials, lighting, GLSL and TSL shaders, animation, post-processing, R3F.
- [R3F Skills](https://skills.varg.ai/skills/enzed-r3f-skills.md) — Nicolas Zullo: 11 React Three Fiber skills checked against Fiber 9.7 and three r185: Canvas, demand loops, loaders, shaders, post.
- [WebGPU Three.js TSL](https://skills.varg.ai/skills/dgreenheck-webgpu-threejs-tsl.md) — Dan Greenheck, beta: TSL node materials, GPU compute, post-processing and WGSL for three.js WebGPURenderer, by the Three.js Roadmap author.

### Workflows (1)

- [HyperFrames Figma](https://skills.varg.ai/skills/hyperframes-figma.md) — HeyGen: Turn a Figma link into video: rendered assets, brand tokens, components and storyboard frames rebuilt as motion.