Lens
lensMagnifies arbitrary content beneath a movable circular lens.
Usage
Basic usage
Package image, displays a circular magnifying glass at the cursor when hovering.
<Lens className="w-80 rounded-[var(--radius)] border border-border">
<img src="/photo.jpg" alt="Forest" className="block aspect-[4/3] w-full object-cover" />
</Lens>Magnification
zoom Controls the zoom ratio under the magnifying glass. The larger the magnification, the more prominent the details.
<Lens zoom={2.6} className="w-80 rounded-[var(--radius)] border border-border">
<img src="/photo.jpg" alt="Forest" className="block aspect-[4/3] w-full object-cover" />
</Lens>Lens size
size Set the diameter of the magnifying glass (px), and use zoom to adjust the appropriate observation window.
<Lens zoom={2} size={200} className="w-80 rounded-[var(--radius)] border border-border">
<img src="/photo.jpg" alt="Forest" className="block aspect-[4/3] w-full object-cover" />
</Lens>When to Use
Use it to magnify a local area of product imagery, maps, screenshots, or arbitrary children through a circular pointer-following lens. It has no runtime dependency beyond its mask-and-scale implementation. Use GlareHover for a diagonal reflection, or BorderBeam and ShineBorder for border lighting.
Import
import { Lens } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| zoom | number | 1.6 | Magnification |
| size | number | 140 | Lens diameter in pixels |
| className | string | — | Forwarding className |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Amplified content (usually <img>) |
Usage Guidelines
- It needs to be triggered by pointer hover. There is no magnification effect in pure touch screen/keyboard scenarios. Do not use it as the only way to view details.
childrenmust be visual content with a certain size that can be scaled (such as<img>ofblock), otherwise the lens magnification area will be empty.
Related
BorderBeam · ShineBorder · GlareHover · AnimatedBeam · OrbitingCircles · ProgressiveBlur
Playground
<Lens zoom={1.8}>
<img src="/photo.jpg" />
</Lens>