Wavy Background

`<pura-waves>` layers animated sine waves along the bottom (or top) of a section, as filled shapes or thin lines, in the style of Aceternity's Wavy Background and Vanta's WAVES. Each layer is an SVG path two viewBox widths wide, translated by exactly two periods in a seamless CSS `@keyframes` loop; layers differ in amplitude, baseline, speed, phase and direction, giving a parallax depth effect with zero per-frame JS. All variation is deterministic per-index math in the pure template, so SSR and client paint identical waves and the effect works before any JS runs. Theme with `--pura-waves-color` (or `--pura-waves-color-1..5` per layer), `--pura-waves-height` and `--pura-waves-line-width`. Reduced motion renders the stack as a static decoration. Each instance registers in `window.__puraWavess` by `data-pura-id` with `{ pause, play }`.

Preview

<!-- filled waves under a hero, three parallax layers -->
<pura-waves amplitude="40" style="height: 60vh; background: #0f172a; --pura-waves-color: #4f46e5;">
  <h1>Ship calmer UIs</h1>
</pura-waves>

<!-- thin floating lines hugging the top edge -->
<pura-waves lines layers="4" position="top" speed="20"
  style="height: 240px; --pura-waves-line-width: 1px; --pura-waves-color: var(--pura-accent);">
  <p>Section content</p>
</pura-waves>

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

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