Shader Effects

This is the shader effects library you keep in your back pocket for polish passes. It covers the usual suspects: glow and bloom, chromatic aberration, vignettes, film grain, scanlines, glitch effects, dissolve transitions, outlines, and fresnel rim lighting. Most of these are single-function implementations you can drop in and tweak, like a simple distance-based glow or a Gaussian blur bloom. The glitch and dissolve effects are more involved and look surprisingly good for how little code they need. The chromatic aberration comes in both uniform and radial versions, which is the right call since radial looks way better for most use cases. If you're doing any kind of post-processing or stylized rendering, you'll recognize these patterns immediately and probably grab a few to customize.

skills.sh installs: 225
GitHub stars: 9
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add bbeierle12/skill-mcp-claude --skill shader-effects --agent claude-code

Installs into .claude/skills of the current project.

Files

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;
}