Block Mask Reveal

Block Mask Reveal

About Block Mask Reveal

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

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 or message me on X and I'm happy to help.