shader-effects
Visual shader effects—glow/bloom, chromatic aberration, distortion, vignette, film grain, scanlines, glitch, dissolve, outline, and fresnel. Use when adding visual polish, post-processing effects, or stylized rendering to shaders.
- Installs
- 214
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill shader-effects- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads shader-effects automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Shader Effects
Visual effects that add polish, style, and atmosphere to shader output.
Quick Start
// Combine multiple effects
vec3 color = baseColor;
color = applyVignette(color, uv, 0.5);
color = applyGrain(color, uv, uTime, 0.1);
color = applyChromaticAberration(color, uv, 0.005);
Glow / Bloom
Simple Glow
// Distance-based glow
float glow(float d, float radius, float intensity) {
return pow(radius / max(d, 0.001), intensity);
}
// Usage
float d = sdCircle(uv, 0.2);
vec3 color = vec3(glow(d, 0.1, 2.0)) * glowColor;
Bloom (Multi-sample)
// Sample in cross pattern for cheap bloom
vec3 bloom(sampler2D tex, vec2 uv, float radius) {
vec3 color = vec3(0.0);
float total = 0.0;
for (float x = -4.0; x <= 4.0; x += 1.0) {
for (float y = -4.0; y <= 4.0; y += 1.0) {
float weight = 1.0 / (1.0 + length(vec2(x, y)));
color += texture2D(tex, uv + vec2(x, y) * radius).rgb * weight;
total += weight;
}
}
return color / total;
}
Gaussian Blur (Separable)
// Horizontal pass
vec3 blurH(sampler2D tex, vec2 uv, float radius) {
vec3 color = vec3(0.0);
float weights[5] = float[](0.227, 0.194, 0.121, 0.054, 0.016);
color += texture2D(tex, uv).rgb * weights[0];
for (int i = 1; i < 5; i++) {
vec2 offset = vec2(float(i) * radius, 0.0);
color += texture2D(tex, uv + offset).rgb * weights[i];
color += texture2D(tex, uv - offset).rgb * weights[i];
}
return color;
}
// Vertical pass (same, swap x/y)
Chromatic Aberration
vec3 chromaticAberration(sampler2D tex, vec2 uv, float amount) {
vec2 dir = uv - 0.5;
vec2 offset = dir * amount;
vec3 color;
color.r = texture2D(tex, uv + offset).r;
color.g = texture2D(tex, uv).g;
color.b = texture2D(tex, uv - offset).b;
return color;
}
// Radial chromatic aberration (stronger at edges)
vec3 radialCA(sampler2D tex, vec2 uv, float amount) {
vec2 dir = uv - 0.5;
float dist = length(dir);
vec2 offset = dir * amount * dist;
vec3 color;
color.r = texture2D(tex, uv + offset).r;
color.g = texture2D(tex, uv).g;
color.b = texture2D(tex, uv - offset).b;
return color;
}
Distortion
Wave Distortion
vec2 waveDistort(vec2 uv, float time, float freq, float amp) {
uv.x += sin(uv.y * freq + time) * amp;
uv.y += cos(uv.x * freq + time) * amp;
return uv;
}
Barrel/Pincushion Distortion
vec2 barrelDistort(vec2 uv, float amount) {
vec2 centered = uv - 0.5;
float r2 = dot(centered, centered);
vec2 distorted = centered * (1.0 + amount * r2);
return distorted + 0.5;
}
Heat Haze
vec2 heatHaze(vec2 uv, float time, float intensity) {
float noise = snoise(vec3(uv * 10.0, time));
return uv + vec2(noise) * intensity;
}
Ripple
vec2 ripple(vec2 uv, vec2 center, float time, float freq, float amp) {
vec2 dir = uv - center;
float dist = length(dir);
float wave = sin(dist * freq - time) * amp;
return uv + normalize(dir) * wave;
}
Vignette
vec3 vignette(vec3 color, vec2 uv, float intensity, float smoothness) {
vec2 centered = uv - 0.5;
float dist = length(centered);
float vig = smoothstep(0.5, 0.5 - smoothness, dist * intensity);
return color * vig;
}
// Colored vignette
vec3 coloredVignette(vec3 color, vec2 uv, vec3 vigColor, float intensity) {
vec2 centered = uv - 0.5;
float dist = length(centered);
float vig = smoothstep(0.0, 0.5, dist * intensity);
return mix(color, vigColor, vig);
}
Film Grain
float random(vec2 st) {
return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
}
vec3 filmGrain(vec3 color, vec2 uv, float time, float intensity) {
float grain = random(uv + fract(time)) * 2.0 - 1.0;
return color + grain * intensity;
}
// Animated grain (smoother)
vec3 animatedGrain(vec3 color, vec2 uv, float time, float intensity) {
float x = (uv.x + 4.0) * (uv.y + 4.0) * (time * 10.0);
float grain = mod((mod(x, 13.0) + 1.0) * (mod(x, 123.0) + 1.0), 0.01) - 0.005;
return color + grain * intensity * 50.0;
}
Scanlines
vec3 scanlines(vec3 color, vec2 uv, float count, float intensity) {
float scanline = sin(uv.y * count * 3.14159) * 0.5 + 0.5;
return color * (1.0 - intensity + scanline * intensity);
}
// CRT-style scanlines
vec3 crtScanlines(vec3 color, vec2 fragCoord, float intensity) {
float scanline = sin(fragCoord.y * 0.7) * 0.1 * intensity;
float flicker = sin(uTime * 10.0) * 0.01 * intensity;
return color * (1.0 - scanline - flicker);
}
Glitch
vec3 glitch(sampler2D tex, vec2 uv, float time, float intensity) {
// Random block offset
float blockTime = floor(time * 20.0);
float blockRand = random(vec2(blockTime, 0.0));
if (blockRand > 0.9) {
// Horizontal shift
float shift = (random(vec2(uv.y, blockTime)) - 0.5) * intensity;
uv.x += shift;
}
// Color channel split
vec3 color;
color.r = texture2D(tex, uv + vec2(intensity * 0.01, 0.0)).r;
color.g = texture2D(tex, uv).g;
color.b = texture2D(tex, uv - vec2(intensity * 0.01, 0.0)).b;
// Random color inversion blocks
if (random(vec2(floor(uv.y * 20.0), blockTime)) > 0.98) {
color = 1.0 - color;
}
return color;
}
// Digital glitch with blocks
vec3 blockGlitch(sampler2D tex, vec2 uv, float time, float intensity) {
vec2 blockSize = vec2(0.1, 0.05);
vec2 block = floor(uv / blockSize);
float blockRand = random(block + floor(time * 10.0));
if (blockRand > 1.0 - intensity * 0.1) {
uv.x += (blockRand - 0.5) * 0.1;
}
return texture2D(tex, uv).rgb;
}
Dissolve
vec3 dissolve(vec3 color, vec2 uv, float progress, float edgeWidth, vec3 edgeColor) {
float noise = snoise(uv * 10.0);
// Discard dissolved pixels
if (noise < progress) {
discard;
}
// Edge glow
float edge = smoothstep(progress, progress + edgeWidth, noise);
return mix(edgeColor, color, edge);
}
// With alpha instead of discard
vec4 dissolveAlpha(vec3 color, vec2 uv, float progress, float edgeWidth, vec3 edgeColor) {
float noise = snoise(uv * 10.0);
float alpha = smoothstep(progress - edgeWidth, progress, noise);
float edge = smoothstep(progress, progress + edgeWidth, noise);
vec3 finalColor = mix(edgeColor, color, edge);
return vec4(finalColor, alpha);
}
Outline
// SDF-based outline
vec3 sdfOutline(float d, vec3 fillColor, vec3 outlineColor, float outlineWidth) {
float aa = fwidth(d);
float fill = smoothstep(aa, -aa, d);
float outline = smoothstep(aa, -aa, abs(d) - outlineWidth);
return mix(vec3(0.0), mix(outlineColor, fillColor, fill), max(fill, outline));
}
// Texture-based outline (sample neighbors)
float textureOutline(sampler2D tex, vec2 uv, float thickness) {
float alpha = texture2D(tex, uv).a;
float outline = 0.0;
for (float x = -1.0; x <= 1.0; x += 1.0) {
for (float y = -1.0; y <= 1.0; y += 1.0) {
outline += texture2D(tex, uv + vec2(x, y) * thickness).a;
}
}
return clamp(outline - alpha * 9.0, 0.0, 1.0);
}
Fresnel / Rim Light
// 3D fresnel (needs view direction and normal)
float fresnel(vec3 viewDir, vec3 normal, float power) {
return pow(1.0 - max(dot(viewDir, normal), 0.0), power);
}
// 2D fake fresnel (based on UV distance from center)
float fakeFresnel2D(vec2 uv, float power) {
vec2 centered = uv - 0.5;
float dist = length(centered) * 2.0;
return pow(dist, power);
}
// Usage
vec3 color = baseColor;
float rim = fresnel(viewDir, normal, 3.0);
color += rimColor * rim * rimIntensity;
Color Grading
Contrast / Brightness / Saturation
vec3 adjustContrast(vec3 color, float contrast) {
return (color - 0.5) * contrast + 0.5;
}
vec3 adjustBrightness(vec3 color, float brightness) {
return color + brightness;
}
vec3 adjustSaturation(vec3 color, float saturation) {
float gray = dot(color, vec3(0.299, 0.587, 0.114));
return mix(vec3(gray), color, saturation);
}
Color Remap
vec3 colorRemap(vec3 color, vec3 shadowColor, vec3 highlightColor) {
float luma = dot(color, vec3(0.299, 0.587, 0.114));
return mix(shadowColor, highlightColor, luma);
}
Posterize
vec3 posterize(vec3 color, float levels) {
return floor(color * levels) / levels;
}
Dithering
// Bayer 4x4 dithering
float bayer4x4(vec2 fragCoord) {
int x = int(mod(fragCoord.x, 4.0));
int y = int(mod(fragCoord.y, 4.0));
int bayer[16] = int[](
0, 8, 2, 10,
12, 4, 14, 6,
3, 11, 1, 9,
15, 7, 13, 5
);
return float(bayer[y * 4 + x]) / 16.0;
}
vec3 dither(vec3 color, vec2 fragCoord, float levels) {
float threshold = bayer4x4(fragCoord);
return floor(color * levels + threshold) / levels;
}
Combining Effects
vec3 applyEffects(vec3 color, vec2 uv, float time) {
// Order matters!
// 1. Distortion (modify UVs first)
// Already applied to texture sampling
// 2. Color adjustments
color = adjustContrast(color, 1.1);
color = adjustSaturation(color, 1.2);
// 3. Chromatic aberration
// (apply during texture sampling)
// 4. Vignette
color = vignette(color, uv, 1.2, 0.4);
// 5. Film grain (last, before final output)
color = filmGrain(color, uv, time, 0.05);
return color;
}
File Structure
shader-effects/
├── SKILL.md
├── references/
│ ├── effect-order.md # Recommended effect ordering
│ └── performance.md # Effect costs
└── scripts/
├── effects/
│ ├── glow.glsl # Glow/bloom
│ ├── distortion.glsl # Distortion effects
│ ├── color.glsl # Color grading
│ └── retro.glsl # CRT/retro effects
└── examples/
├── cyberpunk.glsl # Cyberpunk style combo
└── vintage.glsl # Vintage film look
Reference
references/effect-order.md— Recommended order for combining effectsreferences/performance.md— Performance cost of each effect
FAQ
What does the shader-effects skill do?
Visual shader effects—glow/bloom, chromatic aberration, distortion, vignette, film grain, scanlines, glitch, dissolve, outline, and fresnel. Use when adding visual polish, post-processing effects, or stylized rendering to shaders.
How do I install shader-effects?
Run npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill shader-effects in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/shader-effects/ (personal) or .claude/skills/shader-effects/ (project).
Which AI agents can use shader-effects?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is shader-effects safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains shader-effects?
It is published by bbeierle12 in bbeierle12/skill-mcp-claude. It has 214 recorded installs.
More from bbeierle12/skill-mcp-claude
gsap-react
bbeierle12/skill-mcp-claude
GSAP integration with React including useGSAP hook, ref handling, cleanup patterns, and context management. Use when implementing GSAP animations in React components, handling component lifecycle, or building reusable animation hooks.
gsap-scrolltrigger
bbeierle12/skill-mcp-claude
Scroll-based animations using GSAP ScrollTrigger plugin including pinning, scrubbing, snap points, and parallax effects. Use when creating scroll-driven animations, sticky sections, progress indicators, or parallax scrolling experiences.
gsap-fundamentals
bbeierle12/skill-mcp-claude
Open the skill to read its SKILL.md instructions.
d3js-visualization
bbeierle12/skill-mcp-claude
Open the skill to read its SKILL.md instructions.
shader-fundamentals
bbeierle12/skill-mcp-claude
Open the skill to read its SKILL.md instructions.
particles-gpu
bbeierle12/skill-mcp-claude
Open the skill to read its SKILL.md instructions.
Popular ai & agents skills
google-agents-cli-publish
google/agents-cli
This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).
google-agents-cli-eval
google/agents-cli
This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).
skill-creator
anthropics/skills
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
codex-pet
prime-skills/runcomfy-agent-skills
Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.
full-output-enforcement
leonxlnx/taste-skill
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
executing-plans
obra/superpowers
Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available