# Image lens

> A magnifying glass that follows the pointer (or arrow keys) over an image.

Component · Pro · https://lodeui.com/components/image-lens

## When to use

- Product photos, maps and detailed artwork.

## When not to use

- Small images: there's nothing to magnify.

## Installation

```bash
npx shadcn@latest add @lode/image-lens
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { ImageLens } from "@/components/ui/image-lens";

<ImageLens src="/products/jacket.jpg" alt="Linen jacket, stitching detail" zoom={3} />
```

## API reference

### ImageLens

Shows a magnified circle under the pointer.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| src / children | `string / ReactNode` | – | An image URL or any element. |
| alt | `string` | – | Describes the image. |
| zoom / size | `number` | `2.5 / 150` | Magnification and lens size. |
| aspectRatio | `string` | `"4 / 3"` | Frame ratio. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → / ↑ / ↓ | Move the lens |
| Shift + arrows | Move faster |

## Accessibility

- Focusable and labelled with the alt text plus how to use the lens.

## Motion

- The lens springs in and follows the pointer with a light spring.

## Responsive behavior

- Touch screens don't hover; the lens appears on focus only.

## Performance

- The magnified copy is the same image, scaled.

## Notes for AI

- Use a high-resolution source so the zoom stays sharp.

## Related

- [Lightbox](https://lodeui.com/components/lightbox) — Thumbnail grid that opens a full-screen viewer with swipe, arrows and captions.
- [Image compare](https://lodeui.com/components/image-compare) — Before and after slider with drag, hover and keyboard control.
- [Product detail](https://lodeui.com/blocks/product-detail) — Gallery that follows the color, variants with stock, quantity and add to cart.