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.

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

"use client";

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

export function LensDemo() {
  return (
    <Card className="relative max-w-md shadow-none">
      <CardHeader>
        <Lens
          zoomFactor={2}
          lensSize={150}
          isStatic={false}
          ariaLabel="Zoom Area"
        >
          <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>
  );
}

Installation


pnpm dlx shadcn@latest add https://sase-ui.vercel.app/r/lens.json

Examples

Static Lens

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 "@/registry/sase/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/registry/sase/card";
import { Lens } from "@/registry/sase/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

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 "@/registry/sase/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/registry/sase/card";
import { Lens } from "@/registry/sase/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>
  );
}

Usage

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

<Lens>
  <img src="/images/lens-demo.jpg" alt="Lens Demo" />
</Lens>

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

Hero Buttons Marquee

On This Page

Installation Examples Static Lens Lens with a Default Position Usage Props