Liquid Mask Cursor

Liquid Mask Cursor turns any hero section into an interactive reveal.

Liquid Mask Cursor turns any hero section into an interactive reveal. A liquid blob follows the cursor and shows a second image through a glassy, refracting edge, leaving a smooth tapered trail behind it.

Features

Choose your own outer and inner images. Use two shots of the same scene for a magnifying-glass effect, or two different images for a surprise reveal.

Fine-tune the look with 16 controls: size, distortion, noise scale, animation speed, edge blur, refraction, parallax, cursor smoothness, trail length, persistence and taper, idle delay, fade in and fade out, background colour, and an editor preview toggle.

The blob fades away when the cursor stops or leaves, and comes back the moment it moves.

Text and buttons can sit on top of the effect without breaking it.

It's built on WebGL for smooth 60fps motion, and pauses automatically when scrolled out of view.

How to use

Paste the component onto your Framer canvas and set its width and height to fill your section. Add your outer and inner images in the properties panel, and you're done.