Lens

Getting Started

Templates

Components

Special Effects

Animations

Text Animations

Device Mocks

Buttons

Backgrounds

Community

Examples

Static Lens

Open in

Your next camp

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

/* eslint-disable @next/next/no-img-element */

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Lens } from "@/registry/magicui/lens"

export function LensDemo() {
  return (
    <Card className="relative max-w-md shadow-none">
      <CardHeader>
        <Lens isStatic position={{ x: 260, y: 150 }}>
          <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="image placeholder"
            width={500}
            height={500}
          />
        </Lens>
      </CardHeader>
      <CardContent>
        <CardTitle className="text-2xl">Your next camp</CardTitle>
        <CardDescription>
          See our latest and best camp destinations all across the five
          continents of the globe.
        </CardDescription>
      </CardContent>
      <CardFooter className="space-x-4">
        <Button>Let&apos;s go</Button>
        <Button variant="secondary">Another time</Button>
      </CardFooter>
    </Card>
  )
}

Lens with a Default Position

Open in

Your next camp

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

/* eslint-disable @next/next/no-img-element */

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Lens } from "@/registry/magicui/lens"

export function LensDemo() {
  return (
    <Card className="relative max-w-md shadow-none">
      <CardHeader>
        <Lens defaultPosition={{ x: 260, y: 150 }}>
          <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="image placeholder"
            width={500}
            height={500}
          />
        </Lens>
      </CardHeader>
      <CardContent>
        <CardTitle className="text-2xl">Your next camp</CardTitle>
        <CardDescription>
          See our latest and best camp destinations all across the five
          continents of the globe.
        </CardDescription>
      </CardContent>
      <CardFooter className="space-x-4">
        <Button>Let&apos;s go</Button>
        <Button variant="secondary">Another time</Button>
      </CardFooter>
    </Card>
  )
}

Props

Property	Type	Default	Description
`children`	`React.ReactNode`	-	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

Examples

Static Lens

Open in

Your next camp

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

/* eslint-disable @next/next/no-img-element */

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Lens } from "@/registry/magicui/lens"

export function LensDemo() {
  return (
    <Card className="relative max-w-md shadow-none">
      <CardHeader>
        <Lens isStatic position={{ x: 260, y: 150 }}>
          <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="image placeholder"
            width={500}
            height={500}
          />
        </Lens>
      </CardHeader>
      <CardContent>
        <CardTitle className="text-2xl">Your next camp</CardTitle>
        <CardDescription>
          See our latest and best camp destinations all across the five
          continents of the globe.
        </CardDescription>
      </CardContent>
      <CardFooter className="space-x-4">
        <Button>Let&apos;s go</Button>
        <Button variant="secondary">Another time</Button>
      </CardFooter>
    </Card>
  )
}

Lens with a Default Position

Open in

Your next camp

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

/* eslint-disable @next/next/no-img-element */

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Lens } from "@/registry/magicui/lens"

export function LensDemo() {
  return (
    <Card className="relative max-w-md shadow-none">
      <CardHeader>
        <Lens defaultPosition={{ x: 260, y: 150 }}>
          <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="image placeholder"
            width={500}
            height={500}
          />
        </Lens>
      </CardHeader>
      <CardContent>
        <CardTitle className="text-2xl">Your next camp</CardTitle>
        <CardDescription>
          See our latest and best camp destinations all across the five
          continents of the globe.
        </CardDescription>
      </CardContent>
      <CardFooter className="space-x-4">
        <Button>Let&apos;s go</Button>
        <Button variant="secondary">Another time</Button>
      </CardFooter>
    </Card>
  )
}

Props

Property	Type	Default	Description
`children`	`React.ReactNode`	-	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

Installation

Examples

Static Lens

Lens with a Default Position

Usage

Props

Lens

Installation

Examples

Static Lens

Lens with a Default Position

Usage

Props