Crosshair

`<pura-crosshair>` overlays full-bleed horizontal and vertical hairlines that cross at the cursor position inside the area, the technical viewfinder look from editorial portfolios. The two 1px lines sit in a `pointer-events: none` layer positioned by CSS vars; `pointermove` updates a target and a rAF loop lerps the drawn position toward it (`smoothing` controls the trailing). `coords` adds a live monospace x, y readout, `dashed` switches to dashed lines, and `hide-cursor` hides the native cursor so only the cross shows. Lines fade in on hover and nothing is active on SSR. Theme with `--pura-crosshair-color`, `--pura-crosshair-thickness` and `--pura-crosshair-fade`. Reduced motion: the cross snaps to the pointer with no lerp and no fade. Each instance registers in `window.__puraCrosshairs` by `data-pura-id` with `{ set }`, and mirrors state in `data-pura-crosshair-active` / `data-pura-crosshair-x` / `data-pura-crosshair-y`.

Preview

<!-- viewfinder crosshair over a hero image, with live coordinates -->
<pura-crosshair coords style="height: 60vh;">
  <img src="/photos/studio.jpg" alt="Studio" style="width: 100%; height: 100%; object-fit: cover;" />
</pura-crosshair>

<!-- dashed accent lines, native cursor hidden, tighter follow -->
<pura-crosshair dashed hide-cursor smoothing="0.35"
  style="--pura-crosshair-color: #f43f5e; height: 320px;">
  <div style="padding: 4rem 2rem; font-size: 1.5rem;">Selected work, 2020 to 2026</div>
</pura-crosshair>

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

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