GridReveal

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.