A round magnifier that follows the pointer and shows the photo enlarged. It drifts along its own path until the pointer arrives and can be moved with the arrow keys.
npx shadcn@latest add https://hyperblur.dev/r/image-hover-zoom-lens.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/image-hover-zoom-lens.tsx.
import { ImageHoverZoomLens } from "@/components/hyperblur/image-hover-zoom-lens"
<ImageHoverZoomLens images={["/product.jpg"]} zoom={3} size={120} />| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | Image URLs. When empty or missing, four built-in gradient and SVG scenes are used. | |
| alt | string | "Photo" | Base accessible name. Each slide is announced as the alt text followed by its position, for example Photo 2 of 4. |
| width | number | string | "100%" | CSS width of the component. |
| height | number | string | CSS height. When omitted the height follows `aspect`. | |
| aspect | string | "16 / 10" | CSS aspect-ratio used when `height` is not set. |
| index | number | Controlled slide index. Pair with onChange. | |
| defaultIndex | number | 0 | Initial slide index when uncontrolled. |
| onChange | (index: number) => void | Called with the new slide index after every change, including automatic ones. | |
| zoom | number | 2.4 | Magnification inside the lens. |
| size | number | 96 | Lens diameter in pixels. |
| accent | string | "#2f7bff" | Color of focus rings and highlights. |