Wavr
An interactive animated gradient editor. Create moving mesh gradients and visual effects through a visual editor, then export as CSS, PNG, or video. Raw WebGL shaders, no abstraction layer.
Challenge
Gradient tools are static
CSS gradient generators produce flat output. Designers want animated, organic gradients but shader programming has a steep learning curve.
Approach
Visual controls over raw GLSL
Exposed every shader uniform through intuitive UI controls — sliders for speed, complexity, distortion. The fragment shader does the heavy lifting; the interface hides the math.
Execution
Single-shader architecture
One fragment shader handles all gradient modes, noise, particles, bloom, and post-processing. No recompilation when switching modes — just uniform swaps.
Result
Export-ready motion gradients
Designers create living gradients and export as CSS, PNG, or WebM video in seconds. Mouse-reactive effects make every gradient feel interactive.
Stack
Next
Houston