Smooth Liquid Mask

Add a premium interactive liquid mask reveal to your images with smooth physics-based fluid simulation, customizable scatter edges, and high-performance WebGL rendering.

Features

• Real-time fluid physics simulation

• Premium WebGL-powered image rendering

• Smooth, interactive hover or click reveals

• Customizable scattered paper-edge masking

• Dynamic fluid density and velocity controls

• Highly optimized viewport performance (auto-pauses offscreen)

• Responsive resize handling

• Works perfectly for portfolios, hero sections, and cards

Customization Options

• Top (default) and bottom (reveal) images

• Mask edge cutoff and softness

• Scatter amount and noise scale

• Fluid fade and disappear speed

• Movement and pressure dissipation

• Swirl intensity (curl) and physics accuracy

• Touch/hover interaction radius

• Hover vs. click interaction modes

How to Use

• Drop the component onto your Framer canvas

• Upload your default and reveal images

• Adjust the edge threshold and scatter for your preferred look

• Tune the fluid physics, swirl, and fade speed

• Choose between hover or click interactions

• Publish for a premium, interactive fluid reveal effect

Use Cases

• Premium creative portfolios

• Interactive hero sections

• Photography showcases

• Modern agency landing pages

• Before-and-after image comparisons

• High-end e-commerce product reveals

• Interactive gallery grids