āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/aceternity/components/lens ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
A lens component to zoom into images, videos, or practically anything.
content, special, effects, cards
Run the following command:
npx shadcn@latest add @aceternity/lens
| Prop | Type | Description | Default Value |
| :--- | :--- | :--- | :--- |
| 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 |
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā