About MosaicReveal
MosaicReveal is a feature showcase component for Framer that reveals images through animated geometric clip-path patterns, bars, mosaic tiles, or a grid, not a basic directional wipe or fade.
A numbered list lets visitors hover, focus, or click through your items. Each selection swaps the image behind a fresh burst of animated shapes that scale in with staggered timing, then settle into a subtle breathing pulse.
WHAT IT DOES
Add items, each with a title, image, and reveal pattern: bars, mosaic, or grid. Visitors browse the numbered list on one side; hovering or clicking any item triggers the reveal on the other side, built from real SVG clip-path shapes, not a single mask.
KEY FEATURES
Three distinct clip-path reveal patterns: bars, mosaic tiling, and grid
Per-item pattern selection, mix reveal styles across your list
Staggered shape entrance on every selection change
Idle breathing pulse once the entrance settles
Numbered index navigation, hover, focus, and click support
Optional auto-rotate with configurable interval
Fully responsive, list and image reflow on smaller screens
Full color controls, accent, active text, inactive text, background
Viewport-aware, only animates once scrolled into view
Static-safe rendering for canvas and thumbnails
Minimal dependencies, built on Framer Motion
WHY IT WORKS
Most reveal components do one thing: wipe or fade an image into view from a direction. MosaicReveal builds the reveal from real geometric shapes with staggered choreography, so a features section feels art-directed instead of templated.
PERFECT FOR
Agency service sections, product feature showcases, portfolio highlights, and any Framer site pairing a numbered list with a visual that changes on selection.
WHAT'S INCLUDED
A single drop-in component. Add items with title, image, and pattern choice, then tune colors, typography, and auto-rotate timing through property controls.
Drop it in, load your items, and let the shapes do the revealing.
