Fuzzy Text
`<pura-fuzzy-text>` renders text with a TV-static shake, in the style of React Bits' Fuzzy Text: the glyphs are drawn once to an offscreen canvas, and every frame thin horizontal slices are redrawn with random sideways jitter, so the text vibrates like a weak analog signal and intensifies on hover. It is a progressive enhancement: SSR and the pre-JS paint show the real slotted text, the canvas takes over only after the client measures and draws it, and the original text stays in the tree as the accessible copy. `intensity` sets the baseline jitter, `hover-intensity` the hovered jitter, `slice` the slice height; the canvas fill follows the host's computed color or `--pura-fuzzy-text-color`. Under reduced motion the canvas never shows and the plain static text remains. Each instance registers in `window.__puraFuzzyTexts` by `data-pura-id` with `{ text, intensity, hoverIntensity, refresh }`.
Preview
<!-- big 404 hero with TV-static fuzz, stronger on hover -->
<pura-fuzzy-text style="font-size: 5rem; font-weight: 800;">404</pura-fuzzy-text>
<!-- subtle always-on fuzz with a custom color token and thicker slices -->
<pura-fuzzy-text intensity="0.08" hover-intensity="0.3" slice="3" style="font-size: 2rem; --pura-fuzzy-text-color: #22d3ee;">SIGNAL LOST</pura-fuzzy-text>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
intensity | number | 0.18 | Baseline horizontal jitter, as a fraction of the font size (0..2). |
hover-intensity | number | 0.5 | Jitter while hovered, as a fraction of the font size. Set it equal to intensity to disable the hover boost. |
slice | number | 2 | Height in CSS px of each jittered horizontal slice (1..24). |
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/fuzzy-text.js"></script>import "./pura/lib/fuzzy-text.js";