Split-Flap Text

`<pura-split-flap>` is the airport departures board move: every character sits in its own cell, and on reveal each cell flips through intermediate glyphs on two 3D leaves (rotateX under perspective, driven by WAAPI) until it locks on the target character, staggered left to right. `text` sets the target (it falls back to the slotted text and flipping to a new value is as simple as changing the attribute), `chars` swaps the glyph ring, and `flip-duration`, `stagger` and `steps` tune the rhythm. The board cells are aria-hidden while the original text stays accessible in the light DOM; with `text` set the server paint is the finished static board, and reduced motion (or a browser without WAAPI) jumps straight to the final glyphs. Theme with `--pura-split-flap-bg`, `--pura-split-flap-fg`, `--pura-split-flap-gap` and friends. Each instance registers in `window.__puraSplitFlaps` by `data-pura-id` with `{ text, flipTo, replay }`.

Preview

<!-- headline that flips in when scrolled into view -->
<pura-split-flap style="font-size: 2rem;">NOW BOARDING</pura-split-flap>

<!-- live board: change the text attribute and every cell flips to the new value -->
<pura-split-flap id="board" text="GATE 12 ON TIME" trigger="load" flip-duration="70" stagger="40"></pura-split-flap>
<script>
  document.getElementById("board").setAttribute("text", "GATE 12 DELAYED");
  // or via the agent registry / public API:
  // document.getElementById("board").flipTo("GATE 14 BOARDING");
</script>

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

import "./pura/lib/split-flap.js";