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.
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.
Sirrah Space
