True Focus

`<pura-true-focus>` is the React Bits True Focus text effect: one word at a time stays in sharp focus inside an animated corner-bracket viewfinder while every other word blurs out, cycling through the sentence. The slotted text stays in the light DOM as the accessible copy and JS builds an aria-hidden word-span twin, so the sentence is readable with no JS, on the server, and by screen readers. Blur is pure CSS keyed off the active index; the viewfinder moves between words with a FLIP step animated via WAAPI. `interval` sets the dwell time per word, `duration` the frame travel and blur transition, `blur` the de-focus strength, and `manual` switches to hover-driven focus. Theme with `--pura-true-focus-color`, `--pura-true-focus-corner`, `--pura-true-focus-thickness` and `--pura-true-focus-blur`. Reduced motion disables the blur and the auto-cycle, leaving the frame parked on the first word. Each instance registers in `window.__puraTrueFocuss` by `data-pura-id` with `{ index, words, focusWord }`.

Preview

<!-- auto-cycling viewfinder, one word sharp at a time -->
<pura-true-focus style="font-size: 2.5rem; font-weight: 700;">
  Ship interfaces that feel alive
</pura-true-focus>

<!-- manual mode: focus follows the pointer, custom color and softer blur -->
<pura-true-focus manual blur="3" duration="300"
  style="font-size: 2rem; font-weight: 600; --pura-true-focus-color: #22c55e;">
  Hover any word to focus it
</pura-true-focus>

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

import "./pura/lib/true-focus.js";