A round lens that floats after the pointer on a spring and shows a second layer through it, such as live data over a blueprint. Press to widen the lens; arrow keys and plus or minus drive it from the keyboard.
npx shadcn@latest add https://hyperblur.dev/r/hover-reveal-lens.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hover-reveal-lens.tsx.
import { HoverRevealLens } from "@/components/hyperblur/hover-reveal-lens"
<HoverRevealLens base={<img src="/plan.png" />} reveal={<img src="/render.png" />} />| Prop | Type | Default | Description |
|---|---|---|---|
| base | ReactNode | Layer seen outside the lens. Defaults to a city blueprint. | |
| reveal | ReactNode | Layer seen through the lens. Defaults to the same city with live load data. | |
| radius | number | 52 | Lens radius in pixels. Pressing grows it by 45 percent. |
| accent | string | "#2f7bff" | Accent color for focus rings, highlights and glows. |
| autoPlay | boolean | true | Let the lens wander over the map by itself. The real pointer, a tap or keyboard focus takes over at once. |
| label | string | "Live load" | Chip text in the corner and part of the accessible name. |
| ratio | number | 0.625 | Height divided by width. |
| className | string | Extra classes on the root element. Other HTML attributes are forwarded too. |