Demo 01 · Lab
The slow colour mesh
One WebGL fragment shader, no libraries. Domain-warped noise blends seven colours on a one-minute cycle.
Use this when
You want a premium hero without a video file: a field of slow colour that fills the frame and never asks for attention.
Skip it if: Your hero already carries heavy imagery. A mesh behind a busy photo is noise on noise.
The prompt
Add a full-viewport animated mesh-gradient background to my hero section, the style you see on big SaaS homepages, but on a dark palette. Requirements: - One WebGL fragment shader on a <canvas>, no libraries. - Use 3D simplex noise with domain warping to blend these colours: base #070812, indigo #1B2873, teal #0FA98C, violet #6543CF, magenta #D6408F, plus a restrained warm accent #FF6A2A and a faint cyan #63E2FF that only surface in small drifting patches. - Motion must be very slow (full drift cycle around 60 seconds), organic, with no visible looping seams. - Add fine film grain (~3% strength) inside the shader to prevent gradient banding. - Cap devicePixelRatio at 2 and resize cleanly with the window. - Respect prefers-reduced-motion: render a single static frame instead of animating. - Pause the render loop when the tab is hidden. - If WebGL is unavailable, fall back to a static layered CSS radial-gradient in the same palette. - Zero dependencies, under 8KB of JavaScript, and don't block first paint.
Performance notes
- Technique
- WebGL fragment shader
- JavaScript
- 6.3 KB
- Over the wire
- 2.9 KB gzipped
- Dependencies
- None
- Device pixel ratio
- Capped at 2
- Reduced motion
- Single static frame
- Hidden tab
- Render loop paused
- No WebGL
- CSS gradient fallback