Liquid Surface
GPU water surface: ripples follow the cursor, splash on click. Pro · 3D and motion › WebGL
A pool of water behind your content: a height field simulated on the GPU (the wave equation on a grid of float textures, ping-ponged every 60th of a second) and drawn with refraction (split faintly by colour on steep ripples), a Fresnel sky reflection, a specular glint and gathered light. The pointer trails an unbroken wake, a click or tap splashes, and an occasional drop keeps it alive. The grid size, pixel ratio and frame rate follow quality; it simulates only on screen, and not at all once the water has gone flat (without rain). The water takes its colours from the theme. With reduced motion one still frame of settled ripples; without WebGL2 float targets a CSS wash stands in.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add liquid-surfacenpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { LiquidSurface } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
persistence | number | 0.6 | How long ripples live: 0 calms them at once, 1 lets them run on and bounce off the edges. |
rain | boolean | true | Drops now and then, so the surface stays alive without a pointer. |
colors | string[] | Up to two CSS colours of the water, deep and shallow. Default: the theme's accent and chart colour 2. | |
quality | 'auto' | 'low' | 'balanced' | 'high' | 'auto' | Rendering quality: auto picks from the device; low / balanced / high set the simulation grid, pixel ratio and frame rate. |
interactive | boolean | true | The pointer trails ripples and a click or tap makes a splash. |
Related components
- Shader Aurora — WebGL shader aurora that reaches toward the cursor
- Shader Gradient — Live shader gradient for heroes: colors flow around the cursor
- Particle Fabric — Fabric of tens of thousands of glowing points: folds, cursor, waves
- Particle Picture — Particles assemble into an image or text and flow between them
- Dot Globe — WebGL2 dot globe: markers, pulsing arcs, drag to rotate
- Horizon Grid — Endless grid floor fading into a glowing horizon
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
Previous: Shader Gradient · Next: Particle Fabric · All 3D and motion