Liquid Mask Reveal transforms standard before/after images/video content into immersive dual-compositions  hover interactions. Built with real-time liquid mask simulation and organic physics, it creates tactile reveal effects that feel sophisticated and deliberate directly inside your Framer layout

Features customizable blob size, spring animations, and magnetic interactions—fine-tune every detail for cinematic transitions.

Easy editing inside Framer Fully controllable through Framer's property panel. No code needed.

Multi-Format Media Support Upload images/videos directly, add URL from any server, YouTube/Vimeo hosting, or embed video.

Flexible Sizing & Positioning Cover/Fill/Contain + manual sizing. Position: Center/Top/Bottom/Left/Right + custom X/Y offset.

Liquid Mask Controls Blob size, smoothness, animation spring (stiffness + damping), reveal speed.

Overlay & Interaction Overlay opacity, enable/disable magnetic hover effect, magnetic strength, animation speed.

Dual Image Support Set front image / video (default state) and back video / image (reveal state) for seamless transitions.

Liquid Mask Interaction Hover reveals back image through organic, cursor-following liquid displacement.

 

This component is a powerful tool for designers seeking cinematic image transitions with zero complexity. Use it for before/after showcases, product transformations, or layered storytelling to add award-winning motion design to your Framer projects—just drop it in, swap your media, and adjust the sliders.

Product before/after showcases

Portfolio image transitions

Creative agency case studies

E-commerce hover previews

Brand transformation stories

Fashion lookbook reveals

Architectural visualizations

Art direction experiments

After completing your purchase, you will receive a link to the component. Copy the URL and paste it into your Framer project to import it.

Drag the Component into your Canvas.

Set the Width  to Fill and Height to Fit, add padding.

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

For any queries and help setting up the component, contact Atemo.studio@proton.me