---
title: "Block Mask Reveal — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Munzir Kareem · Effects. 3x3 staggered block image reveal"
canonical: "https://framer.elliotli.dev/component/block-mask-reveal"
---

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

# Block Mask Reveal

3x3 staggered block image reveal

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

![Block Mask Reveal preview image 1](https://framer.elliotli.dev/og/component/block-mask-reveal/12eb84af424e0f27/1600x1200.jpg)

## Summary

3x3 staggered block image reveal

## Description

A 3x3 grid reveal animation for images. When the image scrolls into view, it appears through nine staggered tile segments that expand outward from a center point, creating a layered, cinematic entrance instead of a simple fade or slide.

If you want to see how this component performs in a real layout, I've used it in my template [Maria Vale](https://framer.link/8Q5nsSR), you can check it there.

**Features:**

-   Staggered 3x3 block reveal driven by scroll position
    
-   Adjustable animation duration and easing curve
    
-   Configurable stagger and group delay timing for full control over the reveal rhythm
    
-   Trigger amount control to decide how much of the image must be visible before it plays
    
-   Option to play once or replay every time it enters view
    
-   Fill, Fit, and Stretch image sizing modes with 9 position options
    
-   Optional alt text for screen reader accessibility
    
-   Automatic static fallback for the Framer canvas, exports, and reduced motion preferences
    

**Use cases:**

-   Portfolio and case study pages where images need a distinctive entrance
    
-   Hero sections and above-the-fold banners
    
-   Product or gallery grids where each image reveals as the user scrolls
    
-   Editorial and magazine style layouts that want a more editorial feel than a basic fade-in
    

[Component Demo](https://youtu.be/aezGAxGltyo)

**Refund Policy:** This is a digital product, so refunds aren't available once purchased. If you're unsure it's the right fit, [email me](mailto:design.mentor2@gmail.com) or message me on [X](https://x.com/munzir_designs) and I'm happy to help.

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

-   All · #2750

## Details

- **Author**: Munzir Kareem
- **Price**: $5.00
- **Published**: 2026-08-24
- **Updated**: 2026-08-24
- **Added**: 2026-08-24
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows