# Paper Shaders Backgrounds — effect 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.

Frame-exact shader backgrounds and logo stings: 9 varg presets plus all 124 of Paper's own, rendered locally.

- **Type:** [Effect](https://skills.varg.ai/effects.md) · [Backgrounds & shaders](https://skills.varg.ai/browse/skills/shaders.md)
- **Slug:** `craft-paper-shaders`
- **Status:** draft
- **Publisher:** varg (varg, verified)
- **License:** MIT
- **Source:** https://github.com/vargHQ/skills/pull/26
- **Works in:** Claude Code, Codex, Cursor, Gemini CLI, OpenClaw, varg Studio
- **Requires:** HyperFrames or Remotion, Headless Chrome with WebGL (Remotion: --gl=angle), @paper-design/shaders-react pinned to an exact version, Node 22 and ffmpeg (for HyperFrames)
- **Cost:** Free — renders locally in HyperFrames or Remotion; no varg credits.
- **Runtime:** Seconds to minutes (local render)

## What it does

Turns the 30 Paper Shaders (mesh gradient, grain gradient, god rays, liquid metal, halftone, paper texture, dithering …) into frame-exact motion design for HyperFrames or Remotion: set `speed={0}` and drive `frame={(currentFrame / fps) * 1000 * k}`, so every exported frame is a pure function of time and parallel renders never flicker. Presets ship as JSON refs (shader + props + brand-color mapping), not video files, and spend no generation credits. Paper Shaders switched from PolyForm Shield to Apache-2.0 on 2026-06-27 and allows commercial video use without visible attribution; pin an exact 0.0.x release (0.0.82 shipped 2026-10-21) and keep LICENSE and NOTICE when vendoring. The skill is in review as vargHQ/skills PR #26 (version 0.1.0, MIT, Paper Shaders pinned to 0.0.82). Since commit b48987f the PR also ships all 124 of Paper's built-in presets (30 shaders, 4–6 each, Apache-2.0, Paper's own colors and speeds) and a full-frame gallery example; `paperSequenceSource` in templates/paper-preset.js drives any number of presets from one WebGL context.

## Use when

- A branded motion background, texture or loader behind text or product cards
- Finishing AI clips with paper, halftone, dithering or grain overlays
- A logo sting with liquid metal, gem smoke or heatmap

## Not for

- Photoreal footage (generate it with a video model)
- Paper Shaders 0.0.47–0.0.76 (PolyForm Shield, published 2025-08-22 → 2026-06-27); 0.0.10–0.0.46 were MIT and 0.0.77+ are Apache-2.0 — check the LICENSE of any pinned version

## Install

Not published as a standalone skill yet. Source: https://github.com/vargHQ/skills/pull/26

**Models it drives:** render

## Example output

https://skills.varg.ai/previews/craft-paper-shaders.mp4 — One second of each of the 9 presets, rendered by the skill's own examples/preset-reel with HyperFrames 0.8.206 and @paper-design/shaders 0.0.82 — no generation credits (credit: varg — paper-shaders skill (Paper Shaders, Apache-2.0), https://github.com/vargHQ/skills/pull/26)

## Used for

- [Lyric video](https://skills.varg.ai/use-cases/lyric-video.md): Lyrics synced to the song: the sung line big and highlighted, karaoke-style, over art or a shader.
- [Logo animation / intro sting](https://skills.varg.ai/use-cases/logo-animation.md): Your logo animated into a short intro or outro: 3D chrome, liquid, shader, glitch or clean motion.

## 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 Custom Rendering](https://skills.varg.ai/skills/pixijs-custom-rendering.md): 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): 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.