Focus Hover
`<pura-focus-hover>` is a focus-cards container: while the pointer rests on one slotted item, every sibling blurs, dims and shrinks so the pointed-at card stands out. Tabbing into a card with the keyboard triggers the same spotlight via `:focus-visible`. The whole effect is plain CSS on `::slotted()` children, so no per-frame JS runs and SSR simply paints the neutral resting grid. `columns` sets the grid, `blur`, `dim`, `shrink` and `grow` tune the effect, and `--pura-focus-hover-gap`, `--pura-focus-hover-duration` and `--pura-focus-hover-ease` theme the rest. Reduced motion swaps states instantly instead of transitioning. Each instance registers in `window.__puraFocusHovers` by `data-pura-id` with its effective config.
Preview
<!-- portfolio grid: hover one card, the rest blur and dim -->
<pura-focus-hover columns="3">
<figure><img src="/work/one.jpg" alt="Project one" /></figure>
<figure><img src="/work/two.jpg" alt="Project two" /></figure>
<figure><img src="/work/three.jpg" alt="Project three" /></figure>
</pura-focus-hover>
<!-- stronger spotlight, keyboard friendly: links get the same effect on focus -->
<pura-focus-hover columns="2" blur="8" dim="0.35" shrink="0.94" grow="1.04"
style="--pura-focus-hover-duration: 450ms; --pura-focus-hover-gap: 2rem;">
<a href="/work/atlas"><img src="/work/atlas.jpg" alt="Atlas" /></a>
<a href="/work/nimbus"><img src="/work/nimbus.jpg" alt="Nimbus" /></a>
<a href="/work/orbit"><img src="/work/orbit.jpg" alt="Orbit" /></a>
<a href="/work/quartz"><img src="/work/quartz.jpg" alt="Quartz" /></a>
</pura-focus-hover>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
columns | number | 3 | Grid column count. |
blur | number | 4 | Blur in px applied to non-focused siblings. |
dim | number | 0.55 | Opacity of non-focused siblings, 0..1. |
shrink | number | 0.97 | Scale of non-focused siblings. |
grow | number | 1.02 | Scale of the focused item. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/focus-hover.js"></script>import "./pura/lib/focus-hover.js";