Image Reveal Grid

Image Reveal Grid

About Image Reveal Grid

This component is part of Framercrafts, a library of supercharged Framer components and overrides.

Description

Image Reveal Grid creates a dramatic image reveal effect by dividing the image into a grid and animating each cell's disappearance. The component includes an initial blur effect on the image that clears as the grid cells fade away, creating a smooth transition from hidden to visible.

Use Cases

1. Image Galleries - Engaging transitions between photos

2. Portfolio Displays - Creative way to showcase work

3. Product Reveals - Dramatic introduction of new products

4. Hero Sections - Attention-grabbing website headers

5. Loading Transitions - Stylish content loading indicators

Customizations

Image - Any image to be revealed with optional alt text

Grid Size - Number of cells in the grid (from fine to coarse)

Animation - Duration of the reveal effect

Color - Background/overlay color for the grid cells

Direction - Starting point for the reveal animation

Responsiveness - Adapts to any container dimensions