---
title: "GridReveal — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Sections. GridReveal is a hover-driven feature section for Framer where hovering a text item triggers a full pixel grid image transition beside…"
canonical: "https://framer.elliotli.dev/component/gridreveal"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/GridReveal

# GridReveal

Pixel grid image reveal section

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

![GridReveal preview image 1](https://framer.elliotli.dev/og/component/gridreveal/cc48d9b4d4a77358/1600x1200.jpg)

## Summary

GridReveal is a hover-driven feature section for Framer where hovering a text item triggers a full pixel grid image transition beside it, a real tiled dissolve, not just a fade or…

## Description

GridReveal is a hover-driven feature section for Framer where hovering a text item triggers a full pixel grid image transition beside it, a real tiled dissolve, not just a fade or basic wipe.

Most pixel and grid transition components animate one image in isolation. GridReveal pairs the effect with a numbered text list, so hovering, focusing, or clicking any item dissolves the current image in a directional pixel-tile pattern while the next assembles behind it.

### **WHAT IT DOES**

Add items, each with a title and image. Visitors hover, focus, or click through the numbered list; every switch shrinks outgoing tiles while incoming tiles scale up and settle, using a radial-plus-diagonal delay pattern so the reveal sweeps naturally instead of firing at once.

### **KEY FEATURES**

-   Real tiled pixel grid transition, not a fade or basic wipe
    
-   Adjustable grid density from 3x3 up to 24x24 tiles
    
-   Radial and diagonal stagger pattern for natural reveal timing
    
-   Hover, focus, and click interaction on the list
    
-   Optional auto-play with configurable interval
    
-   Automatic aspect-ratio handling per image
    
-   Responsive two-column layout, stacks cleanly on small screens
    
-   Full typography and color controls, title, index, background
    
-   Viewport-aware, only triggers once scrolled into view
    
-   Static-safe rendering for canvas and thumbnails
    
-   Supports up to 8 items
    

### **WHY IT WORKS**

An image transition alone is a trick. Paired with real text content, it becomes a functional feature section that also looks expensive, the kind of interaction usually reserved for custom-coded agency sites.

### **PERFECT FOR**

Agency service sections, product feature showcases, portfolio category breakdowns, and any Framer site that wants a text-and-image pairing with more presence than a static list.

### **WHAT'S INCLUDED**

A single drop-in component. Add items with title and image, then tune grid density, colors, typography, and auto-play timing through property controls.

Drop it in, load your items, and let the grid do the revealing.

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

-   All · #4640

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2026-08-31
- **Updated**: 2026-08-31
- **Added**: 2026-08-31
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes