Fluid Reveal WebGL

Cursor-driven WebGL fluid reveal

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.

Cursor-driven WebGL fluid reveal