---
title: "Mosaic Reveal 3D — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Evixel Studio · Effects. Mosaic Image Reveal transforms your image into a configurable grid of tiles and animates them into place with smooth 3D motion."
canonical: "https://framer.elliotli.dev/component/mosaic-reveal-3d"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Mosaic Reveal 3D

# Mosaic Reveal 3D

Dynamic 3D mosaic image reveals

[View on Framer](https://framer.com/marketplace/components/mosaic-reveal-3d/?via=elliot-li)

![Mosaic Reveal 3D preview image 1](https://framer.elliotli.dev/og/component/mosaic-reveal-3d/6f44107cfa40c39f/1600x1200.jpg)

## Summary

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

## Description

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

1.  Add the component to your Framer canvas.
    
2.  Select an image.
    
3.  Set your grid size (8 × 6 is a great starting point).
    
4.  Choose a reveal style and stagger pattern.
    
5.  Set the trigger to **In View** or **On Load**.
    
6.  Preview the animation. The canvas always shows the fully revealed state for easy editing.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #7532

## Details

- **Author**: Evixel Studio
- **Price**: $5.00
- **Published**: 2026-06-26
- **Updated**: 2026-10-30
- **Added**: 2026-06-26
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo