Mosaic Reveal Card

Mosaic Reveal Card

About Mosaic Reveal Card

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.