Scramble

`<pura-scramble>` is the gsap ScrambleText move: the text resolves out of random glyph noise, locking in character by character from the left, the hacker/decode effect. JS drives the per-tick character swap (that is its purpose), but everything around it stays disciplined: the host `aria-label` always carries the real text, the animated span is `aria-hidden` so screen readers never hear the noise, whitespace is preserved so layout never jumps, and the noise comes from a seeded LCG rather than `Math.random`, so runs are deterministic and testable. SSR, no-JS, and reduced motion all show the full final text. `trigger="view"` (default) decodes when scrolled into view; `"load"` on connect; `"hover"` re-decodes on every pointerenter (the nav-link move); `"manual"` waits for `play()`. The glyph pool is a named set (`upper`, `lower`, `digits`, `binary`, `blocks`) or any custom string via `chars`. `from` picks the lock direction: `left` (default), `right`, `center` (resolves center-out, the motion.dev stagger-from-center move) or `edges` (resolves edges-in). Each instance registers in `window.__puraScrambles` by `data-pura-id` with `{ text, play }`.

Preview

<!-- decode when it scrolls into view -->
<pura-scramble text="Trust the process."></pura-scramble>

<!-- nav link that re-scrambles on hover -->
<a href="/work" style="text-decoration:none">
  <pura-scramble trigger="hover" text="WORK" speed="22"></pura-scramble>
</a>

<!-- terminal vibe: binary noise, faster lock-in -->
<pura-scramble text="ACCESS GRANTED" chars="binary" step="2" speed="24"
               style="font-family: ui-monospace, monospace;"></pura-scramble>

<!-- resolve from the center outward -->
<pura-scramble text="CENTER OUT" from="center" speed="30"></pura-scramble>

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

import "./pura/lib/scramble.js";