Fluid Reveal WebGL

Fluid Reveal WebGL

About Fluid Reveal WebGL

Fluid Reveal turns your cursor into a brush that paints one layer through another — driven by a real GPU fluid simulation, not a canned mask animation.

Two layers, top and bottom. Move the cursor and the fluid dissolves the top layer wherever it flows, revealing what sits underneath. The brush stretches along the direction of motion, so fast movement draws long liquid trails and slow movement pools and spreads. Every splat obeys real velocity, curl and pressure — nothing is pre-rendered, so it never repeats and never loops.

Both layers take an image, a video, or a solid colour, each with its own Fit and Focus. The canvas composites with straight alpha, so a cut-out PNG on top lets your page background show through the unrevealed areas.

Ten controls shape the feel:

Linger — how long the reveal holds before fading back

Settle — how quickly the fluid comes to rest

Swirl — vorticity, for curling smoke-like motion

Brush Size / Force — the size and punch of each splat

Stretch — how far the brush elongates with speed

Reveal — the mask threshold

Liquid Edge — hard cut through to a soft feathered boundary

Quality — simulation resolution

Touch — enable reveal on mobile

Drop it in, connect a Top and Bottom layer, and it works at any size.

Falls back to the top layer if WebGL isn't available.