LiquidMaskReveal

Liquid mask effect reveals content

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. Key Features Easy editing inside FramerFully controllable through Framer's property panel. No code needed. Multi-Format Media SupportUpload images/videos directly, add URL from any server, YouTube/Vimeo hosting, or embed video. Flexible Sizing & PositioningCover/Fill/Contain + manual sizing. Position: Center/Top/Bottom/Left/Right + custom X/Y offset. Liquid Mask ControlsBlob size, smoothness, animation spring (stiffness + damping), reveal speed. Overlay & InteractionOverlay opacity, enable/disable magnetic hover effect, magnetic strength, animation speed. Dual Image SupportSet front image / video (default state) and back video / image (reveal state) for seamless transitions. Liquid Mask InteractionHover 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. Best For 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 Customization 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. Set up: Drag the Component into your Canvas. Set the Width to Fill and Height to Fit, add padding. Refund Policy 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! Support For any queries and help setting up the component, contact Atemo.studio@proton.me

Liquid mask effect reveals content