Glitch Text

`<pura-glitch-text>` renders text with a digital signal-error glitch: two RGB-shifted copies of the text (red and cyan `text-shadow`) sit on top of the real text while animated `clip-path: inset()` slices jump across them on hand-authored CSS keyframes, so every run is deterministic and zero per-frame JS runs. The real slotted text is always present, which makes the SSR and pre-JS paint clean readable text; JS only mirrors the text into `data-text` to light up the glitch layers, and the duplicated copies are hidden from assistive tech. `speed` sets the cycle duration, `intensity` the RGB shift distance, and `hover` restricts the glitch to hover. Colors and offsets are themeable via `--pura-glitch-text-color-a`, `--pura-glitch-text-color-b` and `--pura-glitch-text-shift`. Under reduced motion the glitch layers are removed entirely. Each instance registers in `window.__puraGlitchTexts` by `data-pura-id` with `{ text, speed, intensity, hover, refresh }`.

Preview

<!-- tech hero headline, always glitching -->
<h1 style="font-size: 4rem; font-weight: 800;">
  <pura-glitch-text>CYBERPUNK 2099</pura-glitch-text>
</h1>

<!-- subtle, slower glitch that only fires on hover -->
<pura-glitch-text hover intensity="low" speed="4" style="font-size: 1.25rem;">
  ENTER THE GRID
</pura-glitch-text>

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

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