Grid Reveal Canvas transforms static images into interactive visual experiences using a grid-based distortion algorithm. As users interact with the component, boxes in a grid pattern scale and reveal the underlying image based on their distance from the interaction point, creating a ripple-like effect. The component offers extensive customization options including adjustable grid box size, image quality, fade effects, and decorative dots that can appear everywhere or only within the effect radius. Multiple trigger modes (pointer, hover, click, scroll) make it versatile for different use cases - from hero sections to scroll-triggered reveals. Performance-optimized with canvas rendering and viewport detection, it automatically pauses animations when out of view. The effect strength, follow speed, and visual appearance are all fully customizable through intuitive property controls, making it easy to match any design aesthetic.
Grid Reveal Canvas transforms static images into interactive visual experiences using a grid-based distortion algorithm. As users interact with the component, boxes in a grid pattern scale and reveal the underlying image based on their distance from the interaction point, creating a ripple-like effect. The component offers extensive customization options including adjustable grid box size, image quality, fade effects, and decorative dots that can appear everywhere or only within the effect radius. Multiple trigger modes (pointer, hover, click, scroll) make it versatile for different use cases - from hero sections to scroll-triggered reveals. Performance-optimized with canvas rendering and viewport detection, it automatically pauses animations when out of view. The effect strength, follow speed, and visual appearance are all fully customizable through intuitive property controls, making it easy to match any design aesthetic.