Image Lens Magnifier

Image Lens Magnifier is an image interaction in the UI HUB image interactions collection. A hover lens: a circular, pointer-events-none overlay tracks the clamped cursor; an inner copy of the base image is scaled ~3x (1.5-6) and translated so the pixel under the lens centre lands on the lens centre; a shared CSS transform transition gives the follower a short lag with zero JS animation loop; leaving fades t…

The component is driven by 10 documented props (image, zoom, lensSize, cornerRadius, borderColor, followSmoothing and 4 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.

Implementation notes: POINTER-follow with clamped lens position; magnified inner layer pinned under lens centre; ResizeObserver sizing, disconnected on unmount.

Preview the image interaction in the browser above, copy the source, and paste it into your project. Image Interactions components in UI HUB are grouped by category so you can compare effects side by side before choosing one.