Mosaic Image Hover

An interactive HTML5 Canvas grid that transforms your pointer into a tactile geometric magnifier. Gliding across the image dynamically scales nearby mosaic tiles based on cursor distance, blooming them outward in a circular ripple before they smoothly snap back into place.

Mosaic Image Hover

CategoryHover

TagGSAP, Canvas, Hover, Image, Mosaic, Pixel

Guide: How to UseView Guide

API References

Prop	Type	Default
image / imageUrl	Source image URL rendered across the interactive mosaic canvas grid	Cloudinary URL
boxSize	Grid cell dimension of individual mosaic pixel tiles in pixels	100
magnifierRadius	Radial reach of the magnifying lens effect centered around pointer in pixels	100
toggleFade	Enables smooth opacity fade-out transition when pointer exits canvas	false
width / height	Dimensions of the mosaic canvas viewport	700 / 500