Word Rotate

`<pura-word-rotate>` cycles one word inside a sentence with an animated swap: the outgoing word slides, flips or fades out while the next one comes in, and the container width FLIP-animates so the surrounding sentence reflows smoothly to fit the new word. Unlike `<pura-typewriter>`, which cycles phrases by typing them out, this is a whole-word swap. SSR renders every word in the DOM with only the first one visible, so the page is complete and correctly sized before any JS runs; the client drives the swap with WAAPI. The animated words are aria-hidden and a visually hidden copy of the current word stays readable to assistive tech. Reduced motion swaps words instantly with no animation. Each instance registers in `window.__puraWordRotates` by `data-pura-id` with `{ start, stop, next }`, and mirrors the current word in `data-pura-word-rotate-word`.

Preview

<!-- slide swap inside a headline; width animates to fit each word -->
<h1>
  Build
  <pura-word-rotate words="faster|smarter|better"></pura-word-rotate>
  products.
</h1>

<!-- 3D flip, quicker cadence, starts immediately on load -->
<p>
  We make
  <pura-word-rotate effect="flip" interval="1800" duration="400" start="load"
    words="websites|dashboards|apps"
    style="--pura-word-rotate-color: #6366f1; --pura-word-rotate-weight: 700;"></pura-word-rotate>
  in minutes.
</p>

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

import "./pura/lib/word-rotate.js";