Blur Text

`<pura-blur-text>` is the blur-in text entrance (React Bits Blur Text, Magic UI Blur Fade): the slotted text enters word by word (or character by character), each unit starting blurred, transparent and slightly offset, then sharpening into place with a stagger. The motion is one CSS keyframe animating `filter: blur` + `opacity` + `translateY`, staggered through a per-unit delay, so no per-frame JS runs. Where `<pura-split>` reveals through a clipping mask with a spring rise, this one resolves out of a progressive blur. `trigger="view"` (default) reveals on scroll-in; `trigger="load"` reveals on connect. `blur` sets the starting radius, `duration` the per-unit time, `direction` whether units settle upward or downward, and `--pura-blur-text-distance` the travel offset. Accessibility and SSR are preserved: the original text stays in the light DOM as the accessible copy (the animated spans are `aria-hidden`), the server paints the full text sharp, and reduced motion skips the entrance entirely. Each instance registers in `window.__puraBlurTexts` by `data-pura-id` with `{ by, units, replay }`.

Preview

<!-- words sharpen out of a blur when scrolled into view -->
<pura-blur-text>
  Isn't this so cool?
</pura-blur-text>

<!-- per-character, heavier blur, settling downward, plays on load -->
<pura-blur-text by="char" trigger="load" stagger="30" blur="12" direction="down">
  Character by character.
</pura-blur-text>

<script type="module">
  const b = document.querySelector('pura-blur-text');
  b.replay(); // re-run the entrance
</script>

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

import "./pura/lib/blur-text.js";