---
title: "3D Mosaic Hover Grid — Free Framer component · Best of Framer"
description: "Free Framer component · by Munzir Kareem · Effects. The 3D Mosaic Hover Grid splits your image into a grid of animated 3D cube tiles that breathe and flip on hover — revealing a hidden second…"
canonical: "https://framer.elliotli.dev/component/3d-mosaic-hover-grid"
---

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

# 3D Mosaic Hover Grid

Mosaic grid with 3D ripple flip effect

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

![3D Mosaic Hover Grid preview image 1](https://framer.elliotli.dev/og/component/3d-mosaic-hover-grid/9137f5d81cb8e839/1600x1200.jpg)

## Summary

The 3D Mosaic Hover Grid splits your image into a grid of animated 3D cube tiles that breathe and flip on hover — revealing a hidden second image with a smooth ripple effect from…

## Description

Turn any two images into a stunning 3D interactive experience. The 3D Mosaic Hover Grid splits your image into a grid of animated 3D cube tiles that breathe and flip on hover — revealing a hidden second image with a smooth ripple effect from the center outward.

**Key Features**

-   Hover Image Reveal — Mouse over to trigger a ripple flip that uncovers a second image
    
-   3D Flip Animation — Each tile rotates 180° on the Y-axis like a real 3D cube
    
-   Breathing Motion — Tiles float on the Z-axis continuously for a living, ambient effect
    
-   Ripple Effect — Flip animation spreads outward from center like a wave
    
-   Customizable Grid — Set columns, rows, tile size, and gap to fit any layout
    
-   Two Breathing Modes — Synchronized or randomized per-tile breathing patterns
    
-   Keyboard Accessible — Press Enter or Space to toggle, Escape to reset
    
-   Loading States — Built-in image preloading with error handling
    
-   Static Render Support — Works correctly in Framer exports and thumbnails
    
-   Performance Optimized — Uses requestAnimationFrame and will-change for smooth 60fps
    

**Perfect For**

-   Before and after image comparison
    
-   Hero section with hover reveal
    
-   Creative portfolio and agency websites
    
-   Product image showcase
    
-   Interactive image gallery
    
-   Landing page eye-catchers
    
-   Photography and art direction sites
    
-   SaaS and startup marketing pages
    

**Customization Options**

-   Columns and rows — 4 to 20 columns, 4 to 16 rows
    
-   Tile size — 40px to 150px per tile
    
-   Gap spacing — 0 to 20px between tiles
    
-   Flip duration — control how fast tiles rotate
    
-   Ripple speed — how fast the wave spreads across the grid
    
-   Breathing speed and depth — control the Z-axis float intensity
    
-   Background color and cube face color
    
-   Default image and hover image — two separate image slots
    

**How It Works**

On idle, the grid displays your first image across all tiles with a subtle floating motion. On hover, a ripple wave triggers each tile to flip 180° and reveal the second image underneath — like turning cards in a mosaic. Move the cursor away and the tiles flip back in the same ripple pattern.

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

-   All · #7005

## Details

- **Author**: Munzir Kareem
- **Published**: 2026-05-30
- **Updated**: 2026-05-30
- **Added**: 2026-05-16
- **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