Skip to content

Grid Reveal Canvas

Interactive image distortion effect

Grid Reveal Canvas preview image 1

Summary

Grid Reveal Canvas transforms static images into interactive visual experiences using a grid-based distortion algorithm.

Description

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.

Rank history How rankings work →

120014001600166658/149/59/2710/1911/10
  • All · #6665

Details

More like this