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.
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.
• 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
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.
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.
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.
Antony Raphy
