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…

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.

Pixel grid image reveal section