Cursor Image Grid

Cursor-reactive image grid hover effect

Image Grid Hover transforms a standard image into an interactive tiled canvas effect. The original image stays visible underneath, while a canvas layer draws a grid of magnified image cells around the visitor’s cursor. You can customize the image, object fit, grid cell size, tile radius, effect opacity, reactivity, and trail length directly from Framer’s property panel. Use smaller cells for a more detailed mosaic look, larger cells for a bold blocky hover, and rounded cells for a softer card-like texture. Why does this component require code? Because the effect is generated in real time with canvas drawing, pointer tracking, image sampling, smoothing, and animation-frame updates, it requires code rather than native Framer interactions alone. Made with ♡ by SOSOTAR. If you have any question, email play@sosotar.com

Cursor image grid hover effect