Lens

lens that appears when users hover over content and smoothly follows their cursor.

Hover Lens displays a circular magnification lens that appears when users hover over content and smoothly follows their cursor. The lens reveals a zoomed-in version of the underlying area, making fine details easy to explore without leaving the page. The component offers full control over lens diameter, zoom strength, border styling, and shadow effects. Framer Motion powers subtle fade and scale animations, ensuring the lens feels responsive and polished during hover interactions. Built with performance in mind, Hover Lens adapts to any container size and works with images, layouts, and custom content. It’s ideal for product galleries, artwork, technical diagrams, portfolios, and interactive presentations where detail matters.

Cursor-based magnifier effect