Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

Docs
Lens

Lens

A interactive component that enables zooming into images, videos and other elements.

image placeholder

Your next camp

See our latest and best camp destinations all across the five continents of the globe.

Installation

Examples

Static Lens

image placeholder
image placeholder

Your next camp

See our latest and best camp destinations all across the five continents of the globe.

Lens with a Default Position

image placeholder
image placeholder

Your next camp

See our latest and best camp destinations all across the five continents of the globe.

Props

PropertyTypeDefaultDescription
childrenReact.ReactNode-The content that will be magnified by the lens
zoomFactornumber1.3The magnification factor of the lens
lensSizenumber170The size of the lens in pixels (works as a diameter)
positionPosition-The current position of the lens
defaultPositionPosition-The initial position of the lens
isStaticbooleanfalseDetermines if the lens will remain in a fixed position
durationnumber0.1Duration of the animation when the lens moves (in seconds)
lensColorstring-The color of the lens (CSS color value)
ariaLabelstring-Accessibility label for the lens component