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.