Lens

A interactive component that enables zooming into images, videos and other elements.

Your next camp

See our latest and best camp destinations all across the five continents of the globe.

import { Button } from '@/components/ui/button'
import { Lens } from '@/registry/magicui/lens'

const IMAGE_URL = 'https://images.unsplash.com/photo-1736606355698-5efdb410fe93?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'

export function LensDemo() {
  return (
    <div class="
      relative max-w-md rounded-xl border bg-card text-card-foreground
      shadow-none
    "
    >
      <div class="p-6">
        <Lens zoomFactor={2} lensSize={150} ariaLabel="Zoom Area">
          <img
            class="rounded-xl"
            src={IMAGE_URL}
            alt="image placeholder"
            width={500}
            height={500}
          />
        </Lens>
      </div>
      <div class="space-y-1.5 p-6 pt-0">
        <h3 class="text-2xl leading-none font-semibold tracking-tight">Your next camp</h3>
        <p class="text-sm text-muted-foreground">
          See our latest and best camp destinations all across the five continents of the globe.
        </p>
      </div>
      <div class="flex items-center gap-4 p-6 pt-0">
        <Button>Let&apos;s go</Button>
        <Button variant="secondary">Another time</Button>
      </div>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @magicui-solid/lens

bunx shadcn@latest add @magicui-solid/lens

yarn dlx shadcn@latest add @magicui-solid/lens

npx shadcn@latest add @magicui-solid/lens

Examples

Static Lens

Your next camp

See our latest and best camp destinations all across the five continents of the globe.

import { Button } from '@/components/ui/button'
import { Lens } from '@/registry/magicui/lens'

const IMAGE_URL = 'https://images.unsplash.com/photo-1736606355698-5efdb410fe93?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'

export function LensDemoStatic() {
  return (
    <div class="
      relative max-w-md rounded-xl border bg-card text-card-foreground
      shadow-none
    "
    >
      <div class="p-6">
        <Lens isStatic position={{ x: 260, y: 150 }}>
          <img
            class="rounded-xl"
            src={IMAGE_URL}
            alt="image placeholder"
            width={500}
            height={500}
          />
        </Lens>
      </div>
      <div class="space-y-1.5 p-6 pt-0">
        <h3 class="text-2xl leading-none font-semibold tracking-tight">Your next camp</h3>
        <p class="text-sm text-muted-foreground">
          See our latest and best camp destinations all across the five continents of the globe.
        </p>
      </div>
      <div class="flex items-center gap-4 p-6 pt-0">
        <Button>Let&apos;s go</Button>
        <Button variant="secondary">Another time</Button>
      </div>
    </div>
  )
}

Lens with a Default Position

Your next camp

See our latest and best camp destinations all across the five continents of the globe.

import { Button } from '@/components/ui/button'
import { Lens } from '@/registry/magicui/lens'

const IMAGE_URL = 'https://images.unsplash.com/photo-1736606355698-5efdb410fe93?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'

export function LensDemoDefaultPosition() {
  return (
    <div class="
      relative max-w-md rounded-xl border bg-card text-card-foreground
      shadow-none
    "
    >
      <div class="p-6">
        <Lens defaultPosition={{ x: 260, y: 150 }}>
          <img
            class="rounded-xl"
            src={IMAGE_URL}
            alt="image placeholder"
            width={500}
            height={500}
          />
        </Lens>
      </div>
      <div class="space-y-1.5 p-6 pt-0">
        <h3 class="text-2xl leading-none font-semibold tracking-tight">Your next camp</h3>
        <p class="text-sm text-muted-foreground">
          See our latest and best camp destinations all across the five continents of the globe.
        </p>
      </div>
      <div class="flex items-center gap-4 p-6 pt-0">
        <Button>Let&apos;s go</Button>
        <Button variant="secondary">Another time</Button>
      </div>
    </div>
  )
}

Import

import { Lens } from '@/components/magicui/lens'

Usage

<Lens>
  <img src="https://images.unsplash.com/photo-1736606355698-5efdb410fe93?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Lens Demo" />
</Lens>

Props

Prop	Type	Default	Description
`children`	`JSX.Element`	`-`	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

Original:

magicui.design/docs/components/lens