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:T80d,

Mask Reveal Hero

Mask Reveal Hero uses a top-to-bottom mask transition combined with subtle opposing motion between image layers.

Instead of fading between images, the next image is revealed progressively while both layers move in opposite directions. This creates a smooth, cinematic sense of depth.

Why This Works

Traditional transitions treat images as separate states. This component treats them as layers in motion.

By syncing mask reveal with directional movement, it:

Creates depth without heavy visual effects
Maintains visual continuity
Feels smooth and controlled
Creates seamless transitions between images

The result is a more refined and natural viewing experience.

Key Features

Vertical mask reveal (top → bottom)
Seamless image transitions
Subtle opposing motion for added depth
Smooth easing for a cinematic feel
Infinite looping with clean resets
Fully responsive across devices
Lightweight implementation with no video required

Built for Real Framer Sites

Designed for production use, not just demos.

Works reliably in:

Hero sections
Landing pages
Portfolio websites
Agency websites
Story-driven layouts

Built to integrate smoothly into modern Framer projects without layout conflicts.

Customization

Control everything directly from Framer:

Image list
Transition speed
Delay between transitions
Motion intensity
Mask direction

All settings are tuned to feel smooth by default.

Summary

Mask Reveal Hero focuses on motion quality and visual depth. It replaces generic image transitions with layered movement that feels intentional, immersive, and ready for production websites.

5a:[["$","$L5d",null,{"post":{"id":"019e08a6-566d-7cdc-b8d2-e5bc2e9bcccb","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7fd40dc2-5d88-48bc-bbee-09cf536c40ce","name":"CndlHaus Studio","slug":"antony-raphy","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7fd40dc2-5d88-48bc-bbee-09cf536c40ce/oqu6u53f","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"B283jPz0mPyPm1H3a9LD","resolved":true,"title":"Mask Reveal BG","body":"$5e","bodyJson":null,"introduction":"Seamless image transitions with depth","slug":"mask-reveal-bg","author":{"framerUserId":"7fd40dc2-5d88-48bc-bbee-09cf536c40ce","name":"CndlHaus Studio","slug":"antony-raphy","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7fd40dc2-5d88-48bc-bbee-09cf536c40ce/oqu6u53f","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/B283jPz0mPyPm1H3a9LD/mask-reveal-bg-zsMjSR1Sjx2NVFazv7wpGenPb0ny8G","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-28T10:06:21.869Z","updatedAt":"2026-05-12T15:00:58.393Z","publishedAt":"2026-05-08T17:32:59.373Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://caring-gazelle-847750.framer.app/","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_wfnX1xwwxHsd8CwXNtIf7Dgn55xm8v18I2B9m2l7yBY","workshop":true,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"pgtMgbEJ5uRLvEb9hMRm","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-05-08T17:32:59.373Z","updatedAt":"2026-05-08T17:32:59.373Z","reported":false}}],"$L5f"]

Suggested for you