Is Inspect Lens free for commercial use?

Inspect Lens follows the repository's MIT with Commons Clause licence. Use it in personal and commercial projects while preserving the source notice and respecting the restriction on selling the component itself. See LICENCE.md for the terms.

Can I use the image magnifier with a keyboard or touch?

Yes. A native inspection toggle and four native direction buttons expose overlapping windows across the full image. Touch can also choose a position directly without capturing page scrolling. Reduced motion disables continuous tracking and keeps immediate explicit controls.

What happens when an inspection image fails?

A failed detail source falls back to the original and shows a visible note. A failed or invalid original leaves a labelled unavailable surface, removes inspection actions and retains a safe focus destination. No image service, retry loop or Next image dependency is required.

Inspect Lens

A free image magnifier for React with keyboard controls, bounded source inspection and an opt-in lens.

Cotton paper print with fine interlaced cream lines, an ochre E seal and the etched edition mark E/07 at the lower right — Field Notes, edition 07. Inspect the interlaced ink and the small edition mark on cotton stock.

Customise

Magnification2

Lens diameter160px

Code

<MediaInspectLens
  image={{ src: "/your-print.jpg", alt: "Your print and its fine edition mark", width: 1800, height: 1200 }}
  caption="Inspect the interlaced ink and edition mark."
/>

Inspect Lens is a free image magnifier for React and Next.js, styled with Tailwind CSS and operated with native keyboard controls. Turn inspection on to examine print, product or illustration detail through a circular lens. The original image and its description stay in place.

Left, Right, Up and Down advance through overlapping source windows, including every edge. Fine-pointer movement adds optional tracking. Reduced motion keeps immediate native controls and touch positioning while removing continuous following and activation fades.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/media-inspect-lens

Usage

import { MediaInspectLens } from "@/components/media-inspect-lens";

export function PrintDetail() {
  return <MediaInspectLens
    image={{ src: "/print.jpg", alt: "Cotton print with an etched edition mark", width: 1800, height: 1200 }}
    detailSrc="/print-detail.jpg"
    caption="Inspect the interlaced ink and edition mark."
  />;
}

Props

Prop	Type	Default	Description
image	{ src: string; alt: string; width: number; height: number }	required	Meaningful original image. Width and height must be positive finite intrinsic dimensions. Empty source or alt renders an unavailable surface.
detailSrc	string	image.src	Higher-resolution image with the same crop and aspect ratio. Failure falls back to the original with a visible note.
caption	string	undefined	Visible figure caption. Include all essential information in the original alt or caption.
active	boolean	undefined	Controlled state. Apply onActiveChange requests in the caller.
defaultActive	boolean	false	Initial uncontrolled state. Ignored when active is supplied.
onActiveChange	(active: boolean) => void	undefined	Called only for a user toggle request.
zoom	number	2	Static magnification, clamped to 1.5–4. Non-finite values use 2.
lensSize	number	160	Preferred diameter in CSS pixels, clamped to 96–240 and then to the available image space.
label	string	"Inspect image"	Stable visible toggle name. Its pressed state conveys whether inspection is active.
className	string	undefined	Classes merged onto the semantic figure.

Customisation

Supply your own original and detail images with identical crop and aspect ratio. Adjust zoom and lensSize independently. Scoped --inspect-lens-ring, --inspect-lens-surface and --inspect-lens-ink control the perimeter and controls; --inspect-lens-duration defaults through --dur-1 to 150ms. Pair foreground and background overrides and check the actual imagery. Original demo vectors are authored locally; the installed component needs no demo asset or docs stylesheet.

<MediaInspectLens
  image={yourImage}
  zoom={3}
  lensSize={120}
  className="max-w-sm [--inspect-lens-surface:var(--card)] [--inspect-lens-ink:var(--card-foreground)]"
/>

Frequently asked questions

Is Inspect Lens free for commercial use?: Inspect Lens follows the repository's MIT with Commons Clause licence. Use it in personal and commercial projects while preserving the source notice and respecting the restriction on selling the component itself. See LICENCE.md for the terms.
Can I use the image magnifier with a keyboard or touch?: Yes. A native inspection toggle and four native direction buttons expose overlapping windows across the full image. Touch can also choose a position directly without capturing page scrolling. Reduced motion disables continuous tracking and keeps immediate explicit controls.
What happens when an inspection image fails?: A failed detail source falls back to the original and shows a visible note. A failed or invalid original leaves a labelled unavailable surface, removes inspection actions and retains a safe focus destination. No image service, retry loop or Next image dependency is required.

Related components

Want the complete page?Explore Template Empire templates built with the same motion system.Explore Template Empire templates