Image lensPro
A magnifying glass that follows the pointer (or arrow keys) over an image.
When to use
- Product photos, maps and detailed artwork.
When not to use
- Small images: there's nothing to magnify.
Installation
Usage
Import it from @/components/ui/image-lens after installing.
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 |
|---|---|
| ←or→or↑or↓ | 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.
This page as Markdown, for assistants and coding agents:
/components/image-lens/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt