Lens
Hover Lens is an interactive Framer component that adds a smooth magnifying glass effect to any content. A circular lens follows the cursor on hover, revealing a zoomed-in view with customizable size, zoom level, and animated transitions.
About this Component
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.
