5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tb4c,

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

5a:[["$","$L5d",null,{"post":{"id":"019d45ce-7fb1-7d33-aa4b-c8e8a4a8d24e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2a274f4e-85c0-4dcc-8c1f-0067e4d07fe6","name":"Atemo Art","slug":"atemo-art","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1370640/avatar-GLnS5MpReVfqK7Z0vrVcf8j3EIQtnD.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"VySc9MpFe7fxld54vEp2","resolved":true,"title":"LiquidMaskReveal","body":"$5e","bodyJson":null,"introduction":"Liquid mask effect reveals content","slug":"liquidmaskreveal","author":{"framerUserId":"2a274f4e-85c0-4dcc-8c1f-0067e4d07fe6","name":"Atemo Art","slug":"atemo-art","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1370640/avatar-GLnS5MpReVfqK7Z0vrVcf8j3EIQtnD.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/VySc9MpFe7fxld54vEp2/liquidmaskreveal-yw5W5Db7DXVrKdM1dZhgpdAI4VOarE","metadata":{"tint":{"h":24,"s":31,"l":25},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-15T10:05:00.487Z","updatedAt":"2026-03-31T17:12:08.047Z","publishedAt":"2026-03-31T21:30:54.257Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://liquid-mask-reveal.framer.website/","price":"16","paymentUrl":"https://contra.com/payment-link/gyo694zI-liquid-mask-effect-reveal-framer-component","workshop":true,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"9GFTmsr6EbXq43SdPoU4","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-31T21:30:54.257Z","updatedAt":"2026-03-31T21:30:54.257Z","reported":false}}],"$L5f"]

Suggested for you