Liquid Mask Cursor

Summary

A Three.js and WebGL cursor effect that renders a liquid distortion mask following the pointer, with configurable refraction, edge blur, and trail persistence across any background image.

Visual description

A full-bleed photographic landscape of rolling green grassy hills with white wildflowers under a pale sky fills the frame. A circular liquid-distorted blob at the lower right shows a different red, orange and white image inside it, with rippled, wavy edges where it meets the grass. A dark control panel at the top right lists labeled sliders such as base radius, distortion, noise scale, edge blur, refraction, cursor smoothness and trail length with blue values.

Key takeaway

Use the cursor as a liquid lens that reveals a second image through a rippling glass-like mask, turning hover into a reveal moment. Exposing tunable parameters in a compact panel makes the effect easy to tune and share.

Reuse notes

Reach for this as a motion still reference. Pairs with abstract, experimental directions. Original by Sabo Sugi.