---
title: "Mask Reveal BG — Framer component · Best of Framer"
description: "$5.00 · Framer component · by CndlHaus Studio · Effects. Seamless image transitions with depth"
canonical: "https://framer.elliotli.dev/component/mask-reveal-bg"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Mask Reveal BG

# Mask Reveal BG

Seamless image transitions with depth

[View on Framer](https://framer.com/marketplace/components/mask-reveal-bg/?via=elliot-li)

![Mask Reveal BG preview image 1](https://framer.elliotli.dev/og/component/mask-reveal-bg/846f67b49e8d20bb/1600x1200.jpg)

## Summary

Seamless image transitions with depth

## Description

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #9140

## Details

- **Author**: CndlHaus Studio
- **Price**: $5.00
- **Published**: 2026-05-08
- **Updated**: 2026-05-12
- **Added**: 2026-04-28
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo