Chroma Ripple

Turn a static hero image or gradient background into something that reacts. ChromaRipple is a WebGL shader that ripples your content with a chromatic-aberration (RGB color-channel split) effect that spreads outward like a shockwave — following the cursor, pulsing with scroll or clicks, or drifting entirely on its own.

Drop it behind an image and it distorts that image directly. Leave the image empty and it ripples an animated gradient built from your own color stops instead, so it works as a drop-in background even before you have final imagery.

Customize:

• Optional image input, or a 2–4 stop color gradient when no image is set

• Four trigger modes: Cursor, Scroll, Click, or self-running Ambient

• Distortion strength, RGB-split (aberration) strength, and animation speed

• Ripple decay for how fast a Scroll or Click pulse fades

• Grain overlay amount and corner radius

• Three render-quality presets to balance sharpness against performance

• A Static Fallback toggle for a plain CSS version on demand

Use it for:

• Portfolio and agency hero images that feel alive under the cursor

• Landing page backgrounds that pulse gently as visitors scroll

• Gallery or case-study thumbnails that ripple on click before opening