Lens

A magnifying glass over any React content — images, text, charts. The copy is scaled around the pointer and clipped to a circle.

pointerclip-path4 files · 213 locdeps: clsx, tailwind-merge

The fine print nobody reads: by hovering this card you agree that the lens works on any React content — text, tables, charts, even other components. It renders the children twice and scales the copy around your pointer, clipped to a circle. No canvas, no screenshots, no html2canvas. Accessibility: the magnified copy is inert and aria-hidden.

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/lens.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs lens

Usage

import { Lens } from "@/components/opus/effects/lens";

<Lens zoom={2.5}><img src="/poster.jpg" alt="" /></Lens>

API

Prop	Type	Default	Description
zoom	number	2.2	Magnification.
size	number	170	Lens diameter (px).
ringColor	string	—	Ring around the lens.

Notes

Children render twice; the magnified copy is inert and aria-hidden, so it can't be focused or announced.

← PreviousGlow Cards Next →Hover Reveal List