3D and WebGL · 3.1
Sinusoidal ripple warp
Gradients that flow like water. Drop a stone, watch ripples spread.
A sine-wave UV displacement that undulates a colour field.
4 knobs
How it actually works
This is the archetype of the entire index, and the reason the naming discipline exists. "Sinusoidal ripple distortion" tells you what it is. "Gradients that flow like water" tells you what it is like. Neither sentence is sufficient and neither is decoration. If this playground ships one feature, it is this one.
Sine displacement applied to the UV coordinates in a fragment shader before the colour lookup, so the field itself deforms rather than the element moving. One fullscreen quad. The colour is never touched: every pixel simply asks the field for a different coordinate than the one it lives at.
The knobs, named
Amplitude, frequency, phase. Three numbers that make colour feel alive, plus direction. Amplitude is how far the water moves, frequency is how many waves fit, phase is where in the cycle you are standing.
| Knob | Source | What it teaches |
|---|---|---|
| Amplitude | sourced | How far each pixel reaches for its colour. This is wave height. |
| Frequency | sourced | How many ripples fit across the field. Low is a swell; high is corduroy. |
| Phase | sourced | Where in the cycle the field sits. Freeze time and drag this to walk the wave by hand. |
| Direction | sourced | Which axis the sine displaces. radial makes it a pond with a stone in the middle. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (rendered) for existence and knob names; shader source INFERRED
grep -oE '<canvas[^>]*>' on https://gradientlab.co/features/wave-warp returned two live <canvas data-engine="three.js r170">. The knob names are VERIFIED (author) from their own on-page copy: "Control the wave amplitude, frequency, and direction." We did not read their shader. Ours is our own.
- Seen on
- gradientlab.co/features/wave-warp (WAVE, "Sinusoidal ripples like water").
- Dependencies
- any shader context; vanilla WebGL viable (ours)
- Difficulty
- moderate
- Performance
- One full-screen quad, cheap math.
- Accessibility and the floor
- Freeze the time uniform under reduced motion; do not blank the canvas. A static gradient is the correct still. Ours also ships a CSS-gradient fallback for no-WebGL and no-JS.
Notes
Composability. Aurora plus wave plus velvet creates something that breathes. Stack this over 3.4's field and 9.3's material and you have gradientlab's whole product.