Density Lens
An interactive floating lens that tracks pointer movement to reveal high-density data, magnified details, or alternative views.
Microservice Cluster Topology
STATUS: HEALTHYHover your cursor across this surface to inspect sub-pixel details, high-density telemetry data, and underlying node architecture without expanding layout.
NODE_US_EAST_1
NODE_EU_CENTRAL
NODE_AP_SOUTH
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/density-lens
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Underlying background content being inspected |
| renderLensContent | (pos: { x: number, y: number, scale: number }) => ReactNode | undefined | Custom overlay rendered inside lens |
| lensSize | number | 150 | Diameter/width of lens in pixels |
| lensShape | 'circle' | 'oval' | 'square' | 'circle' | Geometric shape of lens |
| zoomScale | number | 2 | Magnification factor |
| showBorder | boolean | true | Renders border and glass glow around perimeter |