Mosaic Reveal Card
An interactive card that splits images into a mosaic grid. Hover to vanish tiles and reveal hidden text or a second image underneath.
Make it with Workshop
Build your own component with AI
An interactive card that splits images into a mosaic grid. Hover to vanish tiles and reveal hidden text or a second image underneath.
Make it with Workshop
Build your own component with AI
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
Insert: Drag the component onto your canvas. A good starting size is 300x400px.
Grid Setup: Use the Rows and Columns sliders to determine how many tiles the image splits into.
Content: Choose your Reveal Type (Text or Image). Upload your Cover Image and fill in the hidden details.
Animation: Adjust Speed and Stagger to control how fast the tiles disappear. Enable Randomize for a more playful effect.
