Letter Shuffle

`<pura-letter-shuffle>` makes the characters of the text physically trade places: every letter jumps to a shuffled slot, then they all slide back along the X axis into the correct order (the React Bits Shuffle move). Unlike `<pura-scramble>`, which swaps glyphs in place, here the letters move. It is a FLIP animation: the server renders the text in its final order, then `play()` measures each character's slot, offsets every letter to a seeded shuffled slot with the first WAAPI keyframe and animates the transform back to identity with a per-letter stagger. The permutation comes from a seeded LCG (the `seed` attribute or a hash of the text), so runs are reproducible. A visually-hidden copy carries the readable string and the animated row is `aria-hidden`; SSR, no-JS and reduced motion all show the finished text with zero movement. Each instance registers in `window.__puraLetterShuffles` by `data-pura-id` with `{ text, play }`.

Preview

<!-- letters start in shuffled slots and slide back into place on scroll into view -->
<pura-letter-shuffle text="Welcome back" style="font-size: 3rem; font-weight: 700;"></pura-letter-shuffle>

<!-- nav-link move: replays on every hover, snappier slide, springy easing -->
<pura-letter-shuffle text="Projects" trigger="hover" duration="450" stagger="15"
  style="--pura-letter-shuffle-easing: cubic-bezier(0.34, 1.56, 0.64, 1);"></pura-letter-shuffle>

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

import "./pura/lib/letter-shuffle.js";