← All skills
paper-shaders
77 / 100 · Review before installing
Check before installing. Some of what it can do is expected: a media skill usually calls an AI service over the internet.
By vargHQ/skills (GitHub) · media · 25 stars · scanned at commit 72e8109
Turns Paper Shaders (30 WebGL shaders: mesh and grain gradients, god rays, liquid metal, smoke ring, dithering, halftone, paper texture and more) into frame-exact backgrounds, textures and logo stings for HyperFrames or Remotion videos, in brand colors, with nine tested presets and 11 researched looks (liquid metal field, god rays, mesh and grain gradients, dithered gradient, marbled ink, paper, contour lines, hand-drawn burst, gradient flow, datamosh rain) with numbers from Inigo Quilez, Paper…
Works with any agent that supports SKILL.md skills.
What this skill can do
Downloads and installs other software
The author does not mention this.
Found in 19 places.
Show 16 more
- paper-shaders/SKILL.md, line 181
| `check-determinism.mjs <project> [--at …] [--software]` | Snapshots forwards and backwards in two runs and compares pixels (uses `npx hyperframes`) | - paper-shaders/references/brand-mapping.md, line 37
1. **Text stays readable.** Put headlines over the `base`-heavy part of the frame, or move the shader with `offsetX`/`offsetY`/`scale` (the preset reel moves `g - paper-shaders/references/determinism.md, line 65
The same machine in the same GPU mode renders identical frames. A different GPU, or GPU against SwiftShader, can move pixels slightly. For identical renders acr - paper-shaders/references/looks/liquid-metal-field.md, line 29
- Text over chrome: average luminance sits near mid-grey, so white or black type both fail contrast. Put a 40–60% black gradient scrim under the text block, or - paper-shaders/references/looks/mesh-gradient-grain.md, line 26
- Text: headline on the darkest quadrant; for `studio` use dark text (#1A1A1A). Run `npx hyperframes check` for WCAG AA. [20] - paper-shaders/references/shaders.md, line 68
Paper's image filters cannot sample video. For real footage in HyperFrames, grade it and add film grain with HyperFrames media treatments (`npx hyperframes medi - paper-shaders/references/shaders.md, line 94
5. Run `node scripts/validate-presets.mjs`, check stills with `npx hyperframes snapshot`, then `node scripts/build-manifest.mjs`. - paper-shaders/scripts/new-project.mjs, line 55
const npx = `npx --yes hyperframes@${HYPERFRAMES_VERSION}`; - paper-shaders/scripts/new-project.mjs, line 85
console.log(`\nNext (pinned to hyperframes@${HYPERFRAMES_VERSION}): cd ${dir} && npm run check && npx --yes hyperframes@${HYPERFRAMES_VERSION} snapshot --at 1,2 - README.md, line 19
npx skills add vargHQ/skills # pick skills and agents - README.md, line 20
npx skills add vargHQ/skills --skill caption-styles -a codex # one skill, one agent - README.md, line 283
| Any agent (Claude Code, Codex, Cursor, Grok, Gemini CLI, Copilot, OpenCode and 60+ more) | `npx skills add vargHQ/skills` or one skill: `npx skills add vargHQ - README.md, line 297
- **Update skills installed with the skills CLI:** `npx skills update`. - README.md, line 298
- **Pick agents and scope:** `npx skills add vargHQ/skills --skill varg-ai -a claude-code -a codex -g -y` (`-g` global, `-y` no prompts, `--list` to see every s - README.md, line 299
- **OpenCode:** `npx skills add vargHQ/skills -a opencode -g`, or copy one skill folder to `~/.config/opencode/skills/<skill>/`. - how-to/claude-code-motion-graphics/README.md, line 14
npx skills add vargHQ/skills --skill kinetic-type-art --skill title-design --skill transition-craft --skill social-overlays --skill paper-shaders --skill motion
Runs commands on your computer
The author does not mention this.
Found in 8 places.
Show 5 more
- paper-shaders/SKILL.md, line 98
npm i @paper-design/shaders@0.0.82 - paper-shaders/SKILL.md, line 199
node scripts/new-project.mjs ./preset-reel --example preset-reel - paper-shaders/scripts/check-determinism.mjs, line 9
import { spawnSync } from "node:child_process"; - paper-shaders/scripts/check-determinism.mjs, line 48
const run = spawnSync( - paper-shaders/scripts/check-determinism.mjs, line 60
const run = spawnSync("ffmpeg", ["-v", "error", "-i", join(folder, file), "-pix_fmt", "rgb24", "-f", "md5", "-"], { encoding: "utf8" });
Connects to the internet
This is disclosed by the author in the skill's SKILL.md or README. Expected for a media skill.
Found in 1 place.
Safer alternatives
Low-risk skills in the same category (media) that look related. Check that one does what you need.
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'paper-shaders' ] || [ -L ~/.agents/skills/'paper-shaders' ]; then echo 'A skill folder named paper-shaders already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/vargHQ/skills' "$d" && git -C "$d" checkout --quiet '72e8109188e3366ba8d365902a84d6b237dec1d7' -- 'paper-shaders' && mkdir -p ~/.agents/skills && cp -R "$d"/'paper-shaders' ~/.agents/skills/'paper-shaders' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'paper-shaders' ~/.claude/skills/'paper-shaders' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for vargHQ/skills shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/vargHQ/skills/)
Score history
| Date | Version | Score |
|---|
| 2026-11-07 | 72e8109 | 80 |