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

PatternDescription
PerlinClassic gradient noise
SimplexSmooth organic patterns
WorleyCellular/voronoi distance
Voronoi EdgeCell boundaries and cracks
TurbulenceBillowy clouds and smoke
RidgedMountain ridges and lightning
Domain WarpFluid distortion and warping
CausticsUnderwater light patterns
MarbleStone 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.