Mosaic Image Reveal

Mosaic Image Reveal transforms your image into a configurable grid of tiles and animates them into place with smooth 3D motion.

Mosaic Image Reveal transforms your image into a configurable grid of tiles and animates them into place with smooth 3D motion. Perfect for eye-catching hero sections or subtle feature reveals, every aspect of the animation can be customized directly from Framer's property panel. Features Six 3D reveal styles: Explode, Flip 3D, Depth Zoom, Rise, Shuffle, and Blinds Eight stagger patterns: Random, Left → Right, Right → Left, Top → Bottom, Diagonal, Center Out, Edges In, and Wave Scroll-triggered or On Load reveal with adjustable viewport threshold Cursor-following parallax tilt with configurable strength Spring-based motion with adjustable stiffness, damping, and mass Optional gradient overlay for cinematic depth and vignette effects Tile gap and border radius controls Accessible with built-in screen-reader alt text Canvas-safe: always displays the final revealed state while editing Property Controls Image — Add any image with support for Framer responsive image tokens and object positioning. Grid — Configure columns, rows (1–24), tile gap, overlap, and border radius. Reveal — Choose In View or On Load , select a stagger pattern, set per-tile delay, and adjust the viewport trigger threshold. 3D Motion — Pick a reveal style and customize perspective, scatter distance, rotation, and spring physics. Interaction — Enable cursor parallax tilt and control its strength. Overlay — Add a gradient overlay with customizable colors, opacity, blend mode, and backdrop color. Quick Start Add the component to your Framer canvas. Select an image. Set your grid size (8 × 6 is a great starting point). Choose a reveal style and stagger pattern. Set the trigger to In View or On Load . Preview the animation. The canvas always shows the fully revealed state for easy editing.

Reveal images with 3D mosaic anima