---
title: "Smooth Liquid Mask — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Saadat Ali · Interactive. Interactive fluid hover reveal"
canonical: "https://framer.elliotli.dev/component/smooth-liquid-mask"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Smooth Liquid Mask

# Smooth Liquid Mask

Interactive fluid hover reveal

[View on Framer](https://framer.com/marketplace/components/smooth-liquid-mask/?via=elliot-li)

![Smooth Liquid Mask preview image 1](https://framer.elliotli.dev/og/component/smooth-liquid-mask/b1566759c5b18deb/1600x1200.jpg)

## Summary

Interactive fluid hover reveal

## Description

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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #1660

## Details

- **Author**: Saadat Ali
- **Price**: $10.00
- **Published**: 2026-07-22
- **Updated**: 2026-07-28
- **Added**: 2026-07-22
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step