Skip to main content

​
Overview

Lens is a magnifying lens component that can zoom into images, videos, or any content. Features adjustable zoom levels, lens size, and both static and mouse-following modes.

​
Usage

<template>
  <Lens
    :zoomFactor="1.5"
    :lensSize="170"
    :isStatic="false"
  >
    <img src="/image.jpg" alt="Image to zoom" />
  </Lens>
</template>

​
API Reference

​
Props

Prop NameTypeDefaultDescription
zoomFactornumber1.5The magnification factor for the lens.
lensSizenumber170The 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).
isStaticbooleanfalseIf true, the lens stays in a fixed position; if false, it follows the mouse.
hoveringboolean"false"External control for the hover state.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us