Lens

Installation

showLineNumbers

import { Lens } from "@/components/ui/lens"

showLineNumbers

<Lens>
  <img src="/images/lens-demo.jpg" alt="Lens Demo" />
</Lens>

Property	Type	Default	Description
`children`	`React.ReactNode`	`-`	The content that will be magnified by the lens
`zoomFactor`	`number`	`1.3`	The magnification factor of the lens
`lensSize`	`number`	`170`	The size of the lens in pixels (works as a diameter)
`position`	`Position`	`-`	The current position of the lens
`defaultPosition`	`Position`	`-`	The initial position of the lens
`isStatic`	`boolean`	`false`	Determines if the lens will remain in a fixed position
`duration`	`number`	`0.1`	Duration of the animation when the lens moves (in seconds)
`lensColor`	`string`	`-`	The color of the lens (CSS color value)
`ariaLabel`	`string`	`-`	Accessibility label for the lens component