Lens
A lens component to zoom into images, videos, or practically anything.
Installation
Run the following command
npx shadcn@latest add @aceternity/lensExamples
Basic with Animation
Static
Lens on a React Component
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | Required | The content to be displayed inside the lens |
zoomFactor | number | 1.5 | The magnification factor for the lens |
lensSize | number | 170 | The diameter of the lens in pixels |
position | { x: number, y: number } | { x: 200, y: 150 } | The static position of the lens (when isStatic is true) |
isStatic | boolean | false | If true, the lens stays in a fixed position; if false, it follows the mouse |
isFocusing | () => void | - | Callback function when the lens is focusing (not used in current implementation) |
hovering | boolean | - | External control for the hover state |
setHovering | (hovering: boolean) => void | - | External setter for the hover state |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time
