---
title: "Mosaic Reveal Card — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Sirrah Space · Cards. Turn standard static images into engaging interactive experiences with the Mosaic Reveal Card."
canonical: "https://framer.elliotli.dev/component/mosaic-reveal-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Mosaic Reveal Card

# Mosaic Reveal Card

Hover Reveal Card

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

![Mosaic Reveal Card preview image 1](https://framer.elliotli.dev/og/component/mosaic-reveal-card/45c034812e6b1c7e/1600x1200.jpg)

## Summary

Turn standard static images into engaging interactive experiences with the Mosaic Reveal Card.

## Description

Turn standard static images into engaging interactive experiences with the Mosaic Reveal Card. Powered by complex Framer Motion logic, this component automatically splits your image into a grid of tiles that animate away when the user interacts with them.

You have full control over the "shattering" effect—choose between a chaotic random dispersion or a satisfying linear wave. It supports two distinct reveal modes: displaying informational text or unveiling a completely different image.

**Key Features:**

-   🧩 **Dynamic Grid System:** Fully control the number of rows and columns to create large blocks or detailed pixel-art effects.
    
-   🎭 **Dual Reveal Modes:** Switch seamlessly between revealing rich text content (Title & Description) or a secondary background image.
    
-   🔀 **Smart Animation Logic:** Toggle "Randomize" for an organic feel, or turn it off for a structured, wave-like transition.
    
-   ✨ **Seamless Cover:** Engineered with a "perfect cover" layer to ensure the image looks solid and crisp before the interaction begins.
    
-   🎨 **Highly Customizable:** Adjust gaps, border radius, fonts, overlay titles, and animation speeds to fit your brand.
    

How to Use

1.  **Insert:** Drag the component onto your canvas. A good starting size is **300x400px**.
    
2.  **Grid Setup:** Use the **Rows** and **Columns** sliders to determine how many tiles the image splits into.
    
3.  **Content:** Choose your **Reveal Type** (Text or Image). Upload your **Cover Image** and fill in the hidden details.
    
4.  **Animation:** Adjust **Speed** and **Stagger** to control how fast the tiles disappear. Enable **Randomize** for a more playful effect.
    

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

-   All · #9256

## Details

- **Author**: Sirrah Space
- **Price**: $4.00
- **Published**: 2026-01-12
- **Updated**: 2026-07-26
- **Added**: 2025-12-28
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator