Mask Reveal BG — Seamless image transitions with depth

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.