Zoom Lens

圖片放大鏡，鏡片跟隨游標就地放大，或以側邊面板呈現放大結果。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

放大模式variant

放大倍率zoom

2.5

鏡片／面板尺寸 (px)size

160

鏡片形狀（lens）shape

面板位置（panel）panelPosition

<ZoomLens />

npx shadcn@latest add https://webberui.com/r/zoom-lens.json

或在 components.json 設定 registries 後，改用 @webberui/zoom-lens 安裝。

安裝依賴後，從 registry JSON（/r/zoom-lens.json 的 files[0].content）複製 zoom-lens.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

import { ZoomLens } from "@/components/ui/zoom-lens";

<ZoomLens
  src="/product.jpg"
  alt="產品細節圖"
  className="w-full max-w-md"
/>

panel variant 會在原圖上標示取景框，並於側邊面板顯示放大結果，適合電商商品圖。

<ZoomLens
  src="/product.jpg"
  alt="產品細節圖"
  variant="panel"
  panelPosition="right"
  zoom={2.6}
  size={200}
  className="w-64"
/>

於 className 給定寬度（如 w-full max-w-md），圖片以 h-auto 依原比例撐開，元件透過 ResizeObserver 量測顯示尺寸並據此計算放大背景。
取景中心會被夾取在圖片範圍內，放大內容不會露出空白邊。
位置以 Motion spring 平滑跟隨；lens 與 panel 共用同一套背景座標運算，倍率與尺寸表現一致。
支援滑鼠、觸控與觸控筆（Pointer Events）；觸控時以拖曳移動取景，放開即收起。