Image Reveal Grid
A component that reveals images through an animated grid pattern, with customizable grid size, colors, animation duration, and reveal direction.
Make it with Workshop
Build your own component with AI
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
