WebGL Shader Effects
Overview
Fragment shaders are small programs that run on the GPU, computing the color of every pixel on screen in parallel. This showcase demonstrates three distinct shader effects — all written in GLSL and rendered via raw WebGL with zero external libraries.
Effects Demonstrated
1. Animated Gradient Mesh
The hero background uses layered fractal Brownian motion (fBm) noise to create an organic, flowing gradient. A cosine-based color palette maps the noise values to a teal-cyan-warm spectrum. Mouse position is passed as a uniform, creating a subtle influence radius that brightens the gradient near the cursor.
2. Image Hover Distortion
A procedurally generated image is displaced based on cursor distance. Pixels near the mouse get pushed outward with a sinusoidal wave pattern, creating a ripple effect. Chromatic aberration separates the RGB channels at the distortion edge, adding a photographic quality. The effect fades smoothly on mouse enter/leave via an interpolated uniform.
3. Liquid Metaballs
Six blobs orbit at different speeds and radii. Each blob contributes to a scalar field using the inverse-square distance formula. Where the combined field exceeds a threshold (computed via smoothstep()), the pixel is "inside" the blob. The threshold creates the liquid merging/separating effect — blobs that come close enough seamlessly merge into one shape.
Technical Details
- Zero external libraries — raw WebGL API, no Three.js or other abstraction
- GLSL fragment shaders — all visual computation runs on the GPU
- Full-screen quad technique — a single triangle strip covers the viewport, the shader does the rest
- Mouse-reactive uniforms — cursor position and hover state interpolated smoothly into shader inputs
- Responsive canvases — ResizeObserver updates resolution and viewport on container resize
- DPR-aware — pixel ratio capped at 2x to balance clarity and GPU load
Real-World Applications
Luxury & Fashion Brands
Gucci, Balenciaga, and high-end brands use shader effects for premium hero backgrounds and image hover distortions. The subtle fluidity communicates craftsmanship.
Music & Entertainment
Artist pages and album launches use gradient mesh backgrounds and liquid transitions to create mood. Shader effects react to audio waveforms in real time.
Portfolio & Agency Sites
Design studios use hover distortion on project thumbnails and liquid page transitions to demonstrate creative capability through the site itself.
Fintech & Data Platforms
Dashboard backgrounds with animated gradient meshes feel alive and modern. Shader-based data visualizations handle millions of data points without lag.