Experiment 08 · Advanced

Liquid Distortion — WebGL you can stir.

A GPU surface that flows around the cursor like syrup — the pattern bends, ripples and settles as you stir the canvas.

Technique · WebGL ripple distortion Hint · Stir the surface Level · 08 / 10
Demo 08 · Liquid Distortion

WebGL ripple field — stir the surface

Technique

Raw WebGL — no three.js required

This page uses a minimal WebGL setup: a fullscreen triangle, a ShaderMaterial-style program and a fragment shader doing domain-warped FBM noise. Cursor position is streamed in as a uniform each frame.

〜

Domain-warped FBM

Five octaves of value noise get warped twice, then re-sampled — creating the organic liquid veins, filaments and accent valleys in the FRAG shader.

◎

Radial ripples + swirl

Around the cursor, two sine ripples propagate outward and a tangential swirl rotates the field — damped uStrength keeps motion smooth and jitter-free.

Keep exploring

More motion experiments