Lens

An interactive magnifier for images, videos, and other elements — follow the pointer, stay static, or start from a default spot.

Default

Hover the image to magnify under the cursor. zoomFactor={2} and lensSize={150}.

Loading…

Installation

CLI

npx @sonojs/ui@latest add lens

Also needs

npm i motion

Usage

lens.tsx

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

export function Example() {
  return (
    <Lens zoomFactor={2} lensSize={150}>
      <img src="/images/lens-demo.jpg" alt="Lens demo" />
    </Lens>
  )
}

Props

Prop	Type	Default	Description
children	React.ReactNode	-	Content magnified by the lens.
zoomFactor	number	1.3	Magnification scale (must be greater than 1).
lensSize	number	170	Lens diameter in pixels.
position	{ x: number; y: number }	-	Controlled lens position (required when static).
defaultPosition	{ x: number; y: number }	-	Initial lens position before hover.
isStatic	boolean	false	Keep the lens fixed instead of following the pointer.
duration	number	0.1	Enter/exit animation duration in seconds.
lensColor	string	"black"	Mask fill color used for the circular lens.
ariaLabel	string	"Zoom Area"	Accessible label for the lens region.
className	string	-	Classes on the root wrapper.