WebGL Background Noise Playground

An interactive playground for exploring 9 animated noise patterns with real-time controls

A collection of 9 WebGL-powered animated backgrounds, each with a design-system-style properties panel for tweaking parameters in real-time.


Patterns

Pattern Description
Perlin Classic gradient noise
Simplex Smooth organic patterns
Worley Cellular/voronoi distance
Voronoi Edge Cell boundaries and cracks
Turbulence Billowy clouds and smoke
Ridged Mountain ridges and lightning
Domain Warp Fluid distortion and warping
Caustics Underwater light patterns
Marble Stone veins and wood grain

Open the Playground →

Keyboard shortcuts available: Ctrl+T to cycle themes, Escape to close modals, Enter/Space to activate buttons
FPS: --
Memory: --
This website uses themes. Press Ctrl+T to cycle through available themes.
Some elements on this page are interactive and can be dragged around.