Waveform

---
/**
 * Waveform — a row of bars drawn from a word, like the shape of an episode's sound: the same word draws the same
 * shape on every build, rising and falling the way speech does. A share of it can be marked as played (`progress`, or
 * the --ma-wave-progress custom property a player script sets), and while it plays, or while a link around it is
 * hovered, the bars move. Zero JavaScript.
 *
 * It is decoration unless it has a `label`; a player that drives it owns the controls and the time.
 */
import type { HTMLAttributes } from 'astro/types';

interface Props extends HTMLAttributes<'div'> {
  /** The word the shape is drawn from: an episode's title, say. */
  seed: string;
  /** How many bars, 12–120. */
  bars?: number;
  /** The share already played, 0–1: the bars up to it take the played colour. */
  progress?: number;
  /** The bars move as if it is playing (a player sets data-playing itself). */
  playing?: boolean;
  /** What it shows, for a screen reader. Unset, it is decoration and hidden from it. */
  label?: string;
  /** No movement, ever. */
  still?: boolean;
}

const { seed, bars: count = 48, progress = 0, playing = false, label, still = false, class: className, style, ...rest } = Astro.props;
// a style given as an object keeps its declarations next to the component's own (camelCase keys become CSS names)
const own = typeof style === 'string' ? style : style && typeof style === 'object' ? Object.entries(style as Record<string, string | number>).map(([k, v]) => `${k.startsWith('--') ? k : k.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}:${v}`).join(';') : '';
const n = Math.max(12, Math.min(120, Math.round(count)));
// a seeded walk: each bar a little away from the last, pulled back toward the middle, with now and then a pause (a
// short bar) the way speech has breaths; the first and last few taper in and out
let h = 2166136261;
for (const ch of seed) h = Math.imul(h ^ ch.charCodeAt(0), 16777619) >>> 0;
const rand = () => {
  h = Math.imul(h ^ (h >>> 15), 2246822507) >>> 0;
  h = Math.imul(h ^ (h >>> 13), 3266489909) >>> 0;
  return ((h ^= h >>> 16) >>> 0) / 4294967296;
};
let level = 0.55;
const heights = Array.from({ length: n }, (_, i) => {
  level += (rand() - 0.5) * 0.5 + (0.55 - level) * 0.25;
  const breath = rand() < 0.08 ? 0.35 : 1;
  const edge = Math.min(1, (Math.min(i, n - 1 - i) + 1) / 4);
  return Math.max(0.12, Math.min(1, level * breath * (0.55 + 0.45 * edge)));
});
const a11y = label ? { role: 'img' as const, 'aria-label': label } : { 'aria-hidden': 'true' as const };
const inline = [`--ma-wave-n:${n}`, `--ma-wave-progress:${Math.max(0, Math.min(1, progress))}`, own].filter(Boolean).join(';');
---

<div class:list={['ma-wave', className]} data-playing={playing ? '' : undefined} data-still={still ? '' : undefined} style={inline} {...a11y} {...rest}>
  {heights.map((v, i) => <span style={`--i:${i};--h:${v.toFixed(3)};--d:${((i * 37) % 23) * -53}ms`}></span>)}
</div>

<style is:global>
  @layer components {
    /* theme contract: the bars are the text's colour; the played ones --ma-wave-on (the emphasis colour, else the text),
       the rest --ma-wave-off (a share of the text). The row fills its box's width at --ma-wave-height */
    :where(.ma-wave) {
      --_on: var(--ma-wave-on, var(--ma-em, currentColor));
      --_off: var(--ma-wave-off, color-mix(in oklab, currentColor 32%, transparent));
      display: flex; align-items: center; gap: max(1px, calc(18% / var(--ma-wave-n)));
      inline-size: 100%; block-size: var(--ma-wave-height, 3rem);
    }
    :where(.ma-wave > span) {
      --_t: clamp(0, calc(var(--ma-wave-progress, 0) * var(--ma-wave-n) - var(--i)), 1);
      flex: 1 1 0; block-size: 100%; border-radius: 999px;
      background: color-mix(in oklab, var(--_on) calc(var(--_t) * 100%), var(--_off));
      scale: 1 var(--h); transform-origin: 50% 50%;
      transition: scale var(--ma-duration-base, 300ms) var(--ma-ease-out);
    }
    @media (prefers-reduced-motion: no-preference) {
      :where(.ma-wave[data-playing]:not([data-still]) > span),
      :where(:is(:is(a, button, .ma-wave-host):is(:hover, :focus-visible), .ma-wave-host:has(:focus-visible)) .ma-wave:not([data-still]) > span) {
        animation: ma-wave-bar 0.9s var(--ma-ease-in-out, ease-in-out) var(--d) infinite alternate;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-wave > span) { transition: none; }
    }
  }
  @keyframes ma-wave-bar {
    from { scale: 1 var(--h); }
    to { scale: 1 calc(var(--h) * 0.35 + 0.08); }
  }
</style>