Lens

`<pura-lens>` magnifies the area of the slotted image (or any content) under the cursor, like a physical loupe that follows the pointer. The classic e-commerce product zoom. It works by cloning the slotted content into a hidden layer, scaling it by `zoom` with `transform-origin` at the pointer, and clipping it to a circle of `size` px via `clip-path: circle()` positioned by two CSS vars updated on `pointermove`, so the pixel under the cursor stays fixed while its surroundings magnify. The copy and the ring are `aria-hidden`; the original media remains the single accessible source. SSR and pre-JS render the plain media with no lens. Theme with `--pura-lens-ring`, `--pura-lens-shadow` and `--pura-lens-cursor`. Each instance registers in `window.__puraLenss` by `data-pura-id` with `{ zoom, size, show(x, y), hide }`, and fires `pura-lens-show` / `pura-lens-hide`.

Preview

<!-- product zoom: hover the image to magnify the area under the cursor -->
<pura-lens>
  <img src="/products/sneaker.jpg" alt="Sneaker, side view" />
</pura-lens>

<!-- stronger magnification, larger lens, custom ring -->
<pura-lens zoom="3.5" size="220" style="--pura-lens-ring: 3px solid white;">
  <img src="/photos/fabric.jpg" alt="Fabric texture close-up" />
</pura-lens>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/lens.js"></script>

import "./pura/lib/lens.js";