A WebGL2 liquid field with a three-stop gradient, shallow depth of field and a thin-film streak. Switch horizon and flat views, cycle between flood and ribbons, or hold a fixed recede amount. Pointer motion lifts and floods the liquid, with stronger ripples on fast moves and camera parallax. A tap holds the swell for 1.6 seconds. Reduced motion keeps a still frame; browsers without WebGL2 keep a static gradient.
How this shader works
Liquid Surface draws a satin liquid with a receding horizon, iridescent highlights and a swell that follows the cursor. View switches between a horizon and a flat view, and Recede either cycles between flood and ribbons or holds a fixed Amount. Moving the pointer lifts and floods the liquid, with stronger ripples on fast moves, and a tap holds the swell for 1.6 seconds.
Tips
- Set Recede to fixed and use Amount to hold one shape instead of cycling.
- Swell radius sets how wide the pointer swell is. Set Pointer to off for a surface that ignores the mouse.
- Quality on low helps on slower devices.
- The three colours, Shadow, Mid-tone and Highlight, set the whole gradient.
Questions
How do I add an interactive liquid background to a website?
Open Liquid Surface, choose the horizon or flat View and keep Pointer on so visitors can push the liquid. Export it as an HTML file or a React or Svelte component.
What happens in browsers that do not support WebGL2?
They show a static gradient instead of the animated liquid. Visitors who prefer reduced motion see a still frame.
Preview and customize in the browser. Exports require membership.