Wavy Text

`<pura-wavy-text>` is the classic wavy text of footers and playful CTAs: every character bobs on a continuous sine wave, phase-shifted by its index, so the string rolls like a flag. The pure template splits the `text` attribute into per-character spans and a single CSS keyframe with incremental negative `animation-delay` drives the whole wave, so no per-frame JS runs and the motion starts on first paint even before scripts load. Slotted text is lifted into the attribute on connect, so `<pura-wavy-text>hello</pura-wavy-text>` just works. `amplitude`, `duration` and `stagger` (or the matching `--pura-wavy-text-*` tokens) shape the wave. The animated spans are aria-hidden with a visually hidden accessible copy of the full string; under reduced motion the text sits still at the baseline. Each instance registers in `window.__puraWavyTexts` by `data-pura-id` with `{ text, chars }`.

Preview

<!-- footer sign-off: characters bob on a continuous sine wave -->
<pura-wavy-text text="thanks for scrolling" style="font-size: 2rem; font-weight: 700;"></pura-wavy-text>

<!-- slotted text works too; tune the wave shape per instance -->
<pura-wavy-text amplitude="0.5em" duration="2.2" stagger="120">
  stay groovy
</pura-wavy-text>

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

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