Block Mask Reveal

3x3 staggered block image 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.

3x3 staggered block image reveal