title: Lens
description: A lens component to zoom into images, videos, or practically anything.
---

```vue
<template>
  <div
    class="relative mx-auto my-10 w-full max-w-md overflow-hidden rounded-3xl bg-gradient-to-r from-[#1D2235] to-[#121318] p-8"
  >
    <Rays />
    <Beams />
    <div class="relative z-10">
      <Lens
        :hovering="hovering"
        @hover-update="setHovering"
      >
        <img
          src="https://images.unsplash.com/photo-1713869820987-519844949a8a?q=80&w=3500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="image"
          width="500"
          height="500"
          class="rounded-2xl"
        />
      </Lens>
      <div
        :style="{ filter: hovering ? 'blur(2px)' : 'blur(0px)' }"
        class="relative z-20 py-4"
      >
        <h2 class="text-left text-2xl font-bold text-white">Apple Vision Pro</h2>
        <p class="mt-4 text-left text-neutral-200">
          The all new apple vision pro was the best thing that happened around 8 months ago, not
          anymore.
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const hovering = ref(false);

function setHovering(value: boolean) {
  hovering.value = value;
}
</script>

```

## Install using CLI

```vue
<InstallationCli component-id="lens" />
```

## Install Manually

Copy and paste the following code in the same folder

::code-group

:CodeViewerTab{label="Lens.vue" language="vue" componentName="Lens" type="ui" id="lens"}
:CodeViewerTab{label="Rays.vue" language="vue" componentName="Rays" type="examples" id="lens"}
:CodeViewerTab{label="Beams.vue" language="vue" componentName="Beams" type="examples" id="lens"}

::

## Examples

Lens are static in center

```vue
<template>
  <div
    class="relative mx-auto my-10 w-full max-w-md overflow-hidden rounded-3xl bg-gradient-to-r from-[#1D2235] to-[#121318] p-8"
  >
    <Rays />
    <Beams />
    <div class="relative z-10">
      <Lens is-static>
        <img
          src="https://images.unsplash.com/photo-1713869820987-519844949a8a?q=80&w=3500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="image"
          width="500"
          height="500"
          class="rounded-2xl"
        />
      </Lens>
      <div
        :style="{ filter: hovering ? 'blur(2px)' : 'blur(0px)' }"
        class="relative z-20 py-4"
      >
        <h2 class="text-left text-2xl font-bold text-white">Apple Vision Pro</h2>
        <p class="mt-4 text-left text-neutral-200">
          The all new apple vision pro was the best thing that happened around 8 months ago, not
          anymore.
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const hovering = ref(false);

function setHovering(value: boolean) {
  hovering.value = value;
}
</script>

```

## API

| Prop Name    | Type                       | Default              | Description                                                                  |
| ------------ | -------------------------- | -------------------- | ---------------------------------------------------------------------------- |
| `zoomFactor` | `number`                   | `1.5`                | The magnification factor for the lens.                                       |
| `lensSize`   | `number`                   | `170`                | The diameter of the lens in pixels.                                          |
| `position`   | `{ x: number, y: number }` | `{ x: 200, y: 150 }` | The static position of the lens (when isStatic is true).                     |
| `isStatic`   | `boolean`                  | `false`              | If true, the lens stays in a fixed position; if false, it follows the mouse. |
| `hovering`   | `boolean`                  | `"false"`            | External control for the hover state.                                        |

## Features

- **Slot Support**: Easily add any content inside the component using the default slot.

## Credits

- Credits to [Aceternity UI](https://ui.aceternity.com/components/lens).
- Credits to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for porting this component.