diff --git a/astro.config.mjs b/astro.config.mjs
index a8e4c69..2a9aad3 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -159,6 +159,10 @@ export default defineConfig({
     // pages that exist in multiple locales. Keys are URL slugs, values are the
     // hreflang codes — so /zh/ is advertised as zh-Hans.
     sitemap({
+      // Keep noindex pages out of the sitemap — advertising a URL we then tell
+      // crawlers to ignore is a contradictory signal. /brand/wallpaper/ is an
+      // internal brand tool, not a page we want indexed.
+      filter: (page) => !page.includes('/brand/wallpaper/'),
       i18n: {
         defaultLocale: 'en',
         locales: {
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index fa1d288..a21441b 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -39,6 +39,11 @@ const groups = [
     links: [
       { href: localeHref('/blog/'), label: ui.navBlog },
       { href: localeHref('/about/'), label: ui.footerAbout },
+      // English-only, deliberately: the wallpaper page itself isn't translated,
+      // so it's offered where the reader is already reading English rather than
+      // pointing a localized footer at an English destination. That also keeps
+      // it from costing a ninth translation of a label for a brand extra.
+      ...(lang === 'en' ? [{ href: '/brand/wallpaper/', label: 'Wallpaper' }] : []),
     ],
   },
 ];
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 4812fe7..91debd1 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -18,6 +18,12 @@ interface Props {
   ogImageAlt?: string;
   ogType?: 'website' | 'article';
   noindex?: boolean;
+  /**
+   * Mount the shared animated waveform backdrop. Off only for pages that draw
+   * their own full-bleed field (the /brand/wallpaper/ live wallpaper), so two
+   * canvases never animate at once.
+   */
+  siteBackground?: boolean;
   article?: {
     publishedTime?: Date;
     modifiedTime?: Date;
@@ -33,6 +39,7 @@ const {
   ogImageAlt = 'WaveKat — open-source AI voice tools for small business',
   ogType = 'website',
   noindex = false,
+  siteBackground = true,
   article,
 } = Astro.props;
 
@@ -175,7 +182,7 @@ const orgSchema = {
     </script>
   </head>
   <body class="min-h-screen bg-white dark:bg-wk-bg text-gray-900 dark:text-gray-100 transition-colors duration-200">
-    <SiteBackground />
+    {siteBackground && <SiteBackground />}
 
     {bannerOffers.length > 0 && (
       <div
diff --git a/src/pages/brand/wallpaper.astro b/src/pages/brand/wallpaper.astro
new file mode 100644
index 0000000..b1d96ef
--- /dev/null
+++ b/src/pages/brand/wallpaper.astro
@@ -0,0 +1,1045 @@
+---
+// Live wallpaper — a chrome-free, always-moving WaveKat display.
+//
+// Two uses it's built for: leave it fullscreen on a spare monitor, or point a
+// screen recorder / OBS browser source at it and use it as a backdrop. Both
+// want the same things: no header, no footer, no scrollbar, controls that get
+// out of the way, and motion that never resolves into a loop you can see.
+//
+// The aspect presets letterbox the *stage* (not the window), so you can frame
+// a capture crop to a real target — 3440 × 1440 on an ultrawide, 1080 × 1920
+// for a vertical clip — while still working in a normal browser window.
+//
+// Deliberately noindex + English-only: it's an internal brand tool, not a
+// marketing page, so it's excluded from the sitemap (see astro.config.mjs) and
+// isn't linked from the nav.
+import Base from '../../layouts/Base.astro';
+import { Clock, Download, Maximize2, Moon, Pause, Play, Sun } from '@lucide/astro';
+
+// Each preset does two jobs: it letterboxes the on-screen stage to that aspect,
+// and it's the pixel size the PNG export writes. Labels name the device or the
+// size people actually think in, not the bare ratio.
+//
+// `w: 0` means "fit the viewport" on screen and "match this display" on export —
+// the real screen resolution including devicePixelRatio. That's also why there's
+// no separate 4K chip: on a 4K monitor, Fit screen already exports 3840 × 2160,
+// and every fixed preset here is a distinct aspect rather than the same shape at
+// another scale.
+const presets = [
+  { id: 'fit', label: 'Fit screen', w: 0, h: 0 },
+  { id: '1080p', label: '16:9 (1920 × 1080)', w: 1920, h: 1080 },
+  { id: 'ultrawide', label: '34-inch (3440 × 1440)', w: 3440, h: 1440 },
+  { id: '16-10', label: '16:10 (2560 × 1600)', w: 2560, h: 1600 },
+  { id: 'macbook', label: 'MacBook (3024 × 1964)', w: 3024, h: 1964 },
+  { id: 'square', label: 'Square (1080 × 1080)', w: 1080, h: 1080 },
+  { id: 'vertical', label: 'Vertical (1080 × 1920)', w: 1080, h: 1920 },
+];
+---
+
+<Base
+  title="WaveKat Live Wallpaper"
+  description="A chrome-free, animated WaveKat wordmark on a flowing waveform field — for a spare monitor, a fullscreen desktop backdrop, or a recording background in OBS."
+  noindex
+  siteBackground={false}
+>
+  <main class="wallpaper" data-motion="on">
+    <!-- The page is all artwork, so the only heading is for screen readers —
+         it names the page the wordmark can only show. The wordmark images are
+         decorative (alt="") because this h1 already says what they say. -->
+    <h1 class="sr-only">WaveKat live wallpaper</h1>
+
+    <!-- The stage is what gets captured: letterboxed to the chosen aspect,
+         centred in the viewport, and the only thing that carries artwork. -->
+    <div class="stage" id="stage">
+      <canvas class="field" id="field" aria-hidden="true"></canvas>
+
+      <div class="mark">
+        <img
+          class="mark-img mark-light"
+          src="/logos/wavekat-tight-light.svg"
+          alt=""
+          width="184"
+          height="53"
+        />
+        <img
+          class="mark-img mark-dark"
+          src="/logos/wavekat-tight-dark.svg"
+          alt=""
+          width="184"
+          height="53"
+        />
+        <!-- A highlight band swept across the wordmark's own silhouette. The
+             SVG is used as an alpha mask, so the shimmer follows the letter
+             shapes instead of a rectangle. -->
+        <span class="shimmer" aria-hidden="true"></span>
+
+        <!-- Inside .mark on purpose: the clock is part of the lockup, so it
+             floats and leans with the wordmark instead of drifting against it.
+             Sits at top:100%, so it never affects .mark's own box. -->
+        <time class="clock" id="clock" hidden></time>
+      </div>
+    </div>
+
+    <!-- Controls: fade out after a few idle seconds so a recording never
+         catches them, and come back on the first pointer move. -->
+    <div class="controls" id="controls">
+      <div class="panel">
+        <div class="chips" role="group" aria-label="Aspect ratio">
+          {
+            presets.map((p) => (
+              <button
+                type="button"
+                class="chip"
+                data-preset={p.id}
+                data-ratio={p.w ? String(p.w / p.h) : ''}
+                data-w={String(p.w)}
+                data-h={String(p.h)}
+                aria-pressed="false"
+              >
+                {p.label}
+              </button>
+            ))
+          }
+        </div>
+
+        <span class="divider" aria-hidden="true"></span>
+
+        <button
+          type="button"
+          class="icon-btn"
+          id="clock-toggle"
+          aria-label="Show clock"
+          aria-pressed="false"
+        >
+          <Clock class="w-4 h-4" />
+        </button>
+        <button type="button" class="icon-btn" id="motion-toggle" aria-label="Pause motion">
+          <Pause class="w-4 h-4 icon-when-moving" />
+          <Play class="w-4 h-4 icon-when-still" />
+        </button>
+        <button type="button" class="icon-btn" id="wallpaper-theme" aria-label="Toggle theme">
+          <Sun class="w-4 h-4 icon-when-light" />
+          <Moon class="w-4 h-4 icon-when-dark" />
+        </button>
+        <button type="button" class="icon-btn" id="fullscreen-toggle" aria-label="Fullscreen">
+          <Maximize2 class="w-4 h-4" />
+        </button>
+        <button type="button" class="icon-btn" id="export-png" aria-label="Download PNG">
+          <Download class="w-4 h-4" />
+        </button>
+      </div>
+      <p class="hint"><kbd>F</kbd> fullscreen · <kbd>H</kbd> hide controls · <kbd>C</kbd> clock ·
+        <kbd>S</kbd> save PNG · <kbd>1</kbd>–<kbd>7</kbd> presets</p>
+    </div>
+  </main>
+</Base>
+
+<style is:global>
+  /* This page is the viewport — no scrolling, no rubber-banding, nothing to
+     catch in a capture. Scoped to the page via the body class so it can't leak. */
+  html:has(.wallpaper),
+  html:has(.wallpaper) body {
+    height: 100%;
+    overflow: hidden;
+    overscroll-behavior: none;
+  }
+</style>
+
+<style>
+  .wallpaper {
+    position: fixed;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    /* The matte around a letterboxed stage — plain, so a crop that overshoots
+       the stage edge picks up flat colour rather than artwork. */
+    background: #f6f7f9;
+  }
+  :global(.dark) .wallpaper {
+    background: #04070c;
+  }
+
+  .stage {
+    position: relative;
+    overflow: hidden;
+    /* Container query units below size the wordmark against the *stage*, so
+       the composition holds at any aspect without a resize listener. */
+    container-type: size;
+    background: radial-gradient(ellipse 90% 80% at 50% 45%, #ffffff 0%, #eef0f4 100%);
+  }
+  :global(.dark) .stage {
+    background: radial-gradient(ellipse 90% 80% at 50% 45%, #0d141f 0%, #04070c 100%);
+  }
+
+  /* Fill the viewport ("Fit screen"), or letterbox to an aspect. */
+  .stage {
+    width: 100%;
+    height: 100%;
+  }
+  .stage[data-ratio] {
+    width: min(100%, calc(100dvh * var(--ratio)));
+    height: min(100%, calc(100dvw / var(--ratio)));
+    aspect-ratio: var(--ratio);
+  }
+
+  /* Show the capture boundary only while the controls are up, so it can never
+     end up in a recording. */
+  .wallpaper:has(.controls:not(.is-hidden)) .stage[data-ratio] {
+    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
+  }
+  :global(.dark) .wallpaper:has(.controls:not(.is-hidden)) .stage[data-ratio] {
+    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12);
+  }
+
+  .field {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    -webkit-mask-image: radial-gradient(ellipse 120% 105% at 50% 50%, #000 60%, transparent 100%);
+    mask-image: radial-gradient(ellipse 120% 105% at 50% 50%, #000 60%, transparent 100%);
+  }
+
+  /* The wordmark. Width is capped against the stage height too, so a vertical
+     or square preset doesn't blow it up past the frame. No halo behind it —
+     the waves are the atmosphere, and a bloom on top of them just muddies the
+     ground the wordmark has to read against. */
+  .mark {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    /* Height is the binding constraint on wide stages and width on narrow ones,
+       so `min()` of the two tracks the frame: ~56% of a 16:9, ~42% of an
+       ultrawide, ~72% of a vertical — instead of one fraction that's oversized
+       at 21:9 and lost at 9:16. */
+    width: min(72cqw, 100cqh);
+    /* --px/--py are the cursor lean, written by the render loop. Using the
+       `translate` property rather than `transform` keeps the centring and the
+       lean composed with the float animation's transform. */
+    translate: calc(-50% + var(--px, 0px)) calc(-50% + var(--py, 0px));
+    animation: float 14s ease-in-out infinite;
+    /* Own stacking context, so the shimmer's blend stays local to the mark. */
+    isolation: isolate;
+  }
+
+  .mark-img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  .mark-dark {
+    display: none;
+  }
+  :global(.dark) .mark-light {
+    display: none;
+  }
+  :global(.dark) .mark-dark {
+    display: block;
+  }
+
+  /* Sized against the frame, like the wordmark, so the lockup holds its
+     proportions from a 9:16 phone shape to a 21:9 ultrawide. Muted rather than
+     full-strength white: the mark is the subject, the clock is a readout. */
+  .clock {
+    position: absolute;
+    /* em-based, so the gap tracks the clock's own size across presets. The
+       wordmark SVG carries a little padding below the ribbon, so this is
+       tighter than it looks. */
+    top: calc(100% + 0.15em);
+    left: 50%;
+    translate: -50% 0;
+    font-family: var(--font-mono);
+    font-size: min(5.5cqw, 7.6cqh);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.06em;
+    line-height: 1;
+    white-space: nowrap;
+    color: rgb(17 24 39 / 0.55);
+  }
+  :global(.dark) .clock {
+    color: rgb(255 255 255 / 0.5);
+  }
+
+  /* With the clock showing, the lockup grew downward — lift it so the pair
+     still reads as optically centred in the frame. */
+  .stage[data-clock] .mark {
+    translate: calc(-50% + var(--px, 0px)) calc(-50% - 3cqh + var(--py, 0px));
+  }
+
+  .shimmer {
+    position: absolute;
+    inset: 0;
+    -webkit-mask-image: url('/logos/wavekat-tight-dark.svg');
+    mask-image: url('/logos/wavekat-tight-dark.svg');
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    background: linear-gradient(
+      100deg,
+      transparent 38%,
+      rgb(255 160 64 / 0.55) 48%,
+      rgb(255 215 64 / 0.85) 50%,
+      rgb(255 160 64 / 0.55) 52%,
+      transparent 62%
+    );
+    background-size: 300% 100%;
+    animation: sweep 7s ease-in-out infinite;
+    /* `screen` blows out on a white ground, so light mode uses `overlay` and
+       dark mode opts back into `screen` — where it makes the sweep glow. */
+    mix-blend-mode: overlay;
+  }
+  :global(.dark) .shimmer {
+    mix-blend-mode: screen;
+  }
+
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(-0.9cqh);
+    }
+    50% {
+      transform: translateY(0.9cqh);
+    }
+  }
+  @keyframes sweep {
+    0% {
+      background-position: 150% 0;
+    }
+    55%,
+    100% {
+      background-position: -150% 0;
+    }
+  }
+
+  /* Motion off (button, or prefers-reduced-motion): everything holds still. */
+  .wallpaper[data-motion='off'] .mark,
+  .wallpaper[data-motion='off'] .shimmer {
+    animation: none;
+  }
+
+  /* ── Controls ─────────────────────────────────────────────────────────── */
+
+  /* Full-width and centred by flexbox rather than `left: 50%` — a fixed element
+     offset from the left is shrink-to-fit against the *remaining* half of the
+     viewport, which capped the panel at 50vw and wrapped the preset row. */
+  .controls {
+    position: fixed;
+    bottom: 1.5rem;
+    inset-inline: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    pointer-events: none;
+    transition:
+      opacity 0.35s ease,
+      transform 0.35s ease;
+  }
+  .controls.is-hidden {
+    opacity: 0;
+    transform: translateY(0.75rem);
+  }
+  .panel,
+  .hint {
+    pointer-events: auto;
+  }
+  .controls.is-hidden .panel,
+  .controls.is-hidden .hint {
+    pointer-events: none;
+  }
+
+  .panel {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    /* Wide enough that the preset row stays on one line on a laptop — when it
+       wraps, the icon buttons get stranded on a line of their own. */
+    max-width: min(94vw, 76rem);
+    padding: 0.5rem;
+    border-radius: 1rem;
+    border: 1px solid rgb(0 0 0 / 0.08);
+    background: rgb(255 255 255 / 0.82);
+    backdrop-filter: blur(16px);
+    box-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
+  }
+  :global(.dark) .panel {
+    border-color: rgb(255 255 255 / 0.1);
+    background: rgb(10 16 24 / 0.78);
+    box-shadow: 0 8px 32px rgb(0 0 0 / 0.5);
+  }
+
+  .chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+  .chip {
+    padding: 0.3rem 0.65rem;
+    border-radius: 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: rgb(75 85 99);
+    background: rgb(0 0 0 / 0.05);
+    white-space: nowrap;
+    transition: all 0.15s ease;
+    cursor: pointer;
+  }
+  .chip:hover {
+    background: rgb(0 0 0 / 0.09);
+    color: rgb(17 24 39);
+  }
+  .chip[aria-pressed='true'] {
+    background: #ff6d00;
+    color: #fff;
+  }
+  :global(.dark) .chip {
+    color: rgb(156 163 175);
+    background: rgb(255 255 255 / 0.06);
+  }
+  :global(.dark) .chip:hover {
+    background: rgb(255 255 255 / 0.12);
+    color: #fff;
+  }
+  :global(.dark) .chip[aria-pressed='true'] {
+    background: #ff6d00;
+    color: #fff;
+  }
+
+  .divider {
+    width: 1px;
+    align-self: stretch;
+    margin: 0.125rem 0.25rem;
+    background: rgb(0 0 0 / 0.1);
+  }
+  :global(.dark) .divider {
+    background: rgb(255 255 255 / 0.12);
+  }
+
+  .icon-btn {
+    display: grid;
+    place-items: center;
+    padding: 0.45rem;
+    border-radius: 0.5rem;
+    color: rgb(107 114 128);
+    transition: all 0.15s ease;
+    cursor: pointer;
+  }
+  .icon-btn:hover {
+    background: rgb(0 0 0 / 0.06);
+    color: rgb(17 24 39);
+  }
+  :global(.dark) .icon-btn:hover {
+    background: rgb(255 255 255 / 0.08);
+    color: #fff;
+  }
+
+  .icon-when-still,
+  :global(.dark) .icon-when-light,
+  .icon-when-dark {
+    display: none;
+  }
+  :global(.dark) .icon-when-dark {
+    display: block;
+  }
+  .wallpaper[data-motion='off'] .icon-when-moving {
+    display: none;
+  }
+  .wallpaper[data-motion='off'] .icon-when-still {
+    display: block;
+  }
+
+  .hint {
+    font-size: 0.6875rem;
+    color: rgb(107 114 128 / 0.85);
+  }
+  .hint kbd {
+    padding: 0.05rem 0.3rem;
+    border-radius: 0.25rem;
+    border: 1px solid rgb(0 0 0 / 0.12);
+    font-family: inherit;
+    font-size: 0.65rem;
+  }
+  :global(.dark) .hint kbd {
+    border-color: rgb(255 255 255 / 0.15);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .mark,
+    .shimmer,
+    .controls {
+      animation: none;
+      transition: none;
+    }
+  }
+</style>
+
+<script>
+  // ── The waveform field ────────────────────────────────────────────────────
+  // Two sources of life. Unattended, the layers carry it themselves: mixed
+  // wavelengths that never re-align, plus a slow amplitude and brightness
+  // breath per layer. Under the cursor, the field answers — waves swell and
+  // brighten around the pointer, the wordmark leans against it, and a click
+  // sends a ripple out through every layer.
+  //
+  // The cursor's influence DECAYS to nothing a couple of seconds after the last
+  // move. That matters more here than on the site: a wallpaper is mostly left
+  // alone, and a bright blob frozen wherever the mouse was parked would sit in
+  // every recording.
+  const wallpaper = document.querySelector<HTMLElement>('.wallpaper');
+  const stage = document.getElementById('stage');
+  const canvas = document.getElementById('field') as HTMLCanvasElement | null;
+  const controls = document.getElementById('controls');
+  const ctx = canvas?.getContext('2d');
+  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  const STORE = 'wk-wallpaper';
+  const read = () => {
+    try {
+      return JSON.parse(localStorage.getItem(STORE) || '{}');
+    } catch {
+      return {};
+    }
+  };
+  const write = (patch: Record<string, unknown>) => {
+    try {
+      localStorage.setItem(STORE, JSON.stringify({ ...read(), ...patch }));
+    } catch {
+      /* private mode — settings just don't persist */
+    }
+  };
+
+  if (wallpaper && stage && canvas && ctx && controls) {
+    const layers = [
+      { y: 0.1, amp: 16, len: 0.0068, speed: 0.5, phase: 0.0, alpha: 0.14, width: 1.5 },
+      { y: 0.24, amp: 22, len: 0.0044, speed: -0.36, phase: 1.7, alpha: 0.11, width: 2 },
+      { y: 0.38, amp: 19, len: 0.0057, speed: 0.63, phase: 3.1, alpha: 0.13, width: 2.5 },
+      { y: 0.52, amp: 26, len: 0.0031, speed: -0.44, phase: 4.6, alpha: 0.1, width: 3.5 },
+      { y: 0.66, amp: 18, len: 0.0062, speed: 0.41, phase: 5.9, alpha: 0.12, width: 2 },
+      { y: 0.8, amp: 24, len: 0.0039, speed: -0.55, phase: 2.4, alpha: 0.1, width: 2.5 },
+      { y: 0.92, amp: 15, len: 0.0074, speed: 0.34, phase: 0.8, alpha: 0.13, width: 1.5 },
+    ];
+
+    let w = 0;
+    let h = 0;
+    // Cached so pointermove never forces a layout read. The stage only moves
+    // when the viewport or the preset changes, and both call resize().
+    let originX = 0;
+    let originY = 0;
+
+    function resize() {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      const rect = stage!.getBoundingClientRect();
+      w = Math.max(1, rect.width);
+      h = Math.max(1, rect.height);
+      originX = rect.left;
+      originY = rect.top;
+      canvas!.width = Math.floor(w * dpr);
+      canvas!.height = Math.floor(h * dpr);
+      ctx!.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+
+    // ── Cursor state ────────────────────────────────────────────────────────
+    // Coordinates are stage-relative, not viewport-relative — with a letterboxed
+    // preset those differ, and the swell has to land under the actual cursor.
+    // `x/y` chase `tx/ty` and `energy` chases `target`, all eased, so the field
+    // swells and settles like water rather than snapping.
+    const ptr = { x: -9999, y: -9999, tx: -9999, ty: -9999, energy: 0, target: 0 };
+    let lastMove = -Infinity;
+
+    // A click sends an expanding wavelet through every layer. Kept as plain
+    // data so a ripple survives a preset change mid-flight.
+    const ripples: { x: number; y: number; t0: number }[] = [];
+
+    window.addEventListener(
+      'pointermove',
+      (e) => {
+        if (paused) return; // motion off / reduced motion: the field stays still
+        ptr.tx = e.clientX - originX;
+        ptr.ty = e.clientY - originY;
+        // First move after a rest: jump rather than sweep in from the far edge.
+        if (ptr.energy < 0.01) {
+          ptr.x = ptr.tx;
+          ptr.y = ptr.ty;
+        }
+        ptr.target = 1;
+        lastMove = performance.now();
+      },
+      { passive: true },
+    );
+    window.addEventListener('pointerleave', () => (ptr.target = 0), { passive: true });
+
+    stage!.addEventListener('pointerdown', (e) => {
+      if (paused) return;
+      ripples.push({ x: e.clientX - originX, y: e.clientY - originY, t0: lastT });
+      // Only a handful can be in flight; each dies in ~2s anyway.
+      if (ripples.length > 6) ripples.shift();
+    });
+
+    // Deliberately restrained. This is a wallpaper, not a toy: the cursor
+    // should make the field *acknowledge* it, not redraw it. A gain that reads
+    // as playful on a marketing page reads as noise on something you leave up
+    // on a monitor or record against.
+    const AMP_GAIN = 0.6; // peak extra amplitude directly under the cursor
+    const RIPPLE_LIFE = 2.0; // seconds before a click's wavelet is spent
+    const PARALLAX = 8; // px the wordmark leans, at the far corner
+
+    let parallaxX = 0;
+    let parallaxY = 0;
+    let wroteX = 0;
+    let wroteY = 0;
+
+    const isDark = () => document.documentElement.classList.contains('dark');
+
+    // The palette can't just be re-alpha'd per theme: amber on white is
+    // low-contrast at any opacity, so light mode drops to the deeper end of the
+    // brand ramp and dark mode keeps the bright one.
+    const rampFor = (dark: boolean) =>
+      dark
+        ? { a: '255, 109, 0', b: '255, 160, 64', c: '255, 215, 64', boost: 1.9 }
+        : { a: '230, 81, 0', b: '255, 109, 0', c: '255, 145, 0', boost: 2.4 };
+
+    /**
+     * Draws the wave field into any 2D context at any size. Shared by the live
+     * canvas and the PNG export, so an exported wallpaper is the same artwork
+     * rather than a lookalike that drifts as the on-screen version is tuned.
+     *
+     * `cursor` is off for the export: an exported wallpaper shouldn't have a
+     * swell baked in wherever the mouse happened to be.
+     */
+    function drawField(c: CanvasRenderingContext2D, W: number, H: number, t: number, cursor: boolean) {
+      const ramp = rampFor(isDark());
+      const E = cursor ? ptr.energy : 0;
+      const RX = Math.max(120, Math.min(W, H) * 0.3);
+      const RY = Math.max(90, H * 0.2);
+      const scale = H / 900;
+      const rippleSpeed = Math.max(W, H) * 0.62; // px/s the ring travels
+      const rippleWidth = 70 * scale; // thickness of the travelling crest
+      const active = cursor ? ripples : [];
+
+      for (const L of layers) {
+        // Amplitude and brightness breathe on their own slow, prime-ish cycles
+        // so no two layers peak together.
+        const breath = 1 + 0.28 * Math.sin(t * 0.19 + L.phase);
+        const glow = 0.75 + 0.45 * Math.sin(t * 0.13 + L.phase * 1.7);
+        const baseY = H * L.y;
+
+        // How strongly the cursor reaches this layer's baseline vertically.
+        const dyl = baseY - ptr.y;
+        const vInf = E > 0.001 ? Math.exp(-(dyl * dyl) / (2 * RY * RY)) * E : 0;
+
+        c.beginPath();
+        for (let x = 0; x <= W; x += 4) {
+          let amp = L.amp * breath * scale;
+          if (vInf > 0.001) {
+            const dx = x - ptr.x;
+            amp *= 1 + AMP_GAIN * Math.exp(-(dx * dx) / (2 * RX * RX)) * vInf;
+          }
+
+          let y =
+            Math.sin(x * L.len + t * L.speed + L.phase) * amp +
+            Math.sin(x * L.len * 0.5 - t * L.speed * 0.6 + L.phase) * amp * 0.35 +
+            Math.sin(x * L.len * 2.3 + t * L.speed * 0.25) * amp * 0.12;
+
+          // Click ripples: a crest travelling out from the click point, fading
+          // with both distance behind the front and age.
+          for (const r of active) {
+            const age = t - r.t0;
+            const ddx = x - r.x;
+            const ddy = baseY - r.y;
+            const off = Math.sqrt(ddx * ddx + ddy * ddy) - age * rippleSpeed;
+            if (off > -rippleWidth * 2 && off < rippleWidth * 2) {
+              y +=
+                Math.sin(off / rippleWidth) *
+                Math.exp(-(off * off) / (2 * rippleWidth * rippleWidth)) *
+                Math.exp(-age / (RIPPLE_LIFE * 0.42)) *
+                14 *
+                scale;
+            }
+          }
+
+          const yy = baseY + y;
+          if (x === 0) c.moveTo(x, yy);
+          else c.lineTo(x, yy);
+        }
+
+        // Brand gradient along the wave, so a single stroke carries the full
+        // orange → amber range instead of one flat colour. Near the cursor a
+        // radial halo is layered over it, so the waves there don't just grow —
+        // they light up.
+        const a = L.alpha * glow * ramp.boost;
+        if (vInf > 0.02) {
+          const hot = c.createRadialGradient(ptr.x, ptr.y, 0, ptr.x, ptr.y, RX * 1.8);
+          hot.addColorStop(0, `rgba(${ramp.c}, ${Math.min(0.5, a + 0.16 * vInf)})`);
+          hot.addColorStop(0.45, `rgba(${ramp.b}, ${a + 0.05 * vInf})`);
+          hot.addColorStop(1, `rgba(${ramp.a}, ${a * 0.8})`);
+          c.strokeStyle = hot;
+        } else {
+          const g = c.createLinearGradient(0, 0, W, 0);
+          g.addColorStop(0, `rgba(${ramp.a}, ${a * 0.7})`);
+          g.addColorStop(0.5, `rgba(${ramp.b}, ${a})`);
+          g.addColorStop(1, `rgba(${ramp.c}, ${a * 0.8})`);
+          c.strokeStyle = g;
+        }
+        c.lineWidth = L.width * Math.max(1, scale);
+        c.stroke();
+      }
+    }
+
+    function render(t: number) {
+      ctx!.clearRect(0, 0, w, h);
+
+      // Let go of the cursor a beat after it stops, then ease back to calm.
+      if (ptr.target > 0 && performance.now() - lastMove > 1800) ptr.target = 0;
+      ptr.x += (ptr.tx - ptr.x) * 0.1;
+      ptr.y += (ptr.ty - ptr.y) * 0.1;
+      // Rises quickly, falls slowly — the swell should arrive with the cursor
+      // and drain away like the water settling.
+      ptr.energy += (ptr.target - ptr.energy) * (ptr.target > ptr.energy ? 0.14 : 0.035);
+
+      // Retire spent ripples before drawField reads them.
+      for (let i = ripples.length - 1; i >= 0; i--) {
+        if (t - ripples[i].t0 > RIPPLE_LIFE) ripples.splice(i, 1);
+      }
+
+      drawField(ctx!, w, h, t, true);
+
+      // The wordmark leans toward the cursor. Written as a custom property so
+      // it composes with the float animation's transform instead of fighting it.
+      const E = ptr.energy;
+      const tpx = E > 0.001 ? ((ptr.x - w / 2) / (w / 2)) * PARALLAX * E : 0;
+      const tpy = E > 0.001 ? ((ptr.y - h / 2) / (h / 2)) * PARALLAX * E : 0;
+      parallaxX += (tpx - parallaxX) * 0.08;
+      parallaxY += (tpy - parallaxY) * 0.08;
+      // Only touch style when it would actually move a pixel — this runs 60×/s.
+      if (Math.abs(parallaxX - wroteX) > 0.05 || Math.abs(parallaxY - wroteY) > 0.05) {
+        wroteX = parallaxX;
+        wroteY = parallaxY;
+        stage!.style.setProperty('--px', `${parallaxX.toFixed(2)}px`);
+        stage!.style.setProperty('--py', `${parallaxY.toFixed(2)}px`);
+      }
+    }
+
+    // ── Aspect presets ──────────────────────────────────────────────────────
+    const chips = Array.from(controls.querySelectorAll<HTMLButtonElement>('.chip'));
+
+    function applyPreset(id: string, persist = true) {
+      const chip = chips.find((c) => c.dataset.preset === id) || chips[0];
+      for (const c of chips) c.setAttribute('aria-pressed', String(c === chip));
+      const ratio = chip.dataset.ratio;
+      if (ratio) {
+        stage!.dataset.ratio = ratio;
+        stage!.style.setProperty('--ratio', ratio);
+      } else {
+        delete stage!.dataset.ratio;
+        stage!.style.removeProperty('--ratio');
+      }
+      if (persist) write({ preset: chip.dataset.preset });
+      updateExportLabel();
+      // The stage just changed size — the canvas has to follow before the
+      // next frame, or one frame renders stretched.
+      resize();
+      if (paused) render(lastT);
+    }
+
+    for (const chip of chips) {
+      chip.addEventListener('click', () => applyPreset(chip.dataset.preset!));
+    }
+
+    // ── Motion ──────────────────────────────────────────────────────────────
+    let raf = 0;
+    let lastT = 0;
+    let paused = reduce || read().motion === 'off';
+
+    function loop(ms: number) {
+      lastT = ms * 0.001;
+      render(lastT);
+      raf = requestAnimationFrame(loop);
+    }
+    function start() {
+      if (raf) return;
+      raf = requestAnimationFrame(loop);
+    }
+    function stop() {
+      cancelAnimationFrame(raf);
+      raf = 0;
+    }
+
+    // Pausing has to clear the cursor's influence, not just freeze it — a still
+    // frame holding a half-lit swell where the mouse happened to be is exactly
+    // the artefact the idle decay exists to prevent.
+    function resetPointer() {
+      ptr.target = 0;
+      ptr.energy = 0;
+      parallaxX = 0;
+      parallaxY = 0;
+      ripples.length = 0;
+      stage!.style.removeProperty('--px');
+      stage!.style.removeProperty('--py');
+      wroteX = 0;
+      wroteY = 0;
+    }
+
+    function setMotion(on: boolean, persist = true) {
+      paused = !on;
+      wallpaper!.dataset.motion = on ? 'on' : 'off';
+      const btn = document.getElementById('motion-toggle');
+      btn?.setAttribute('aria-label', on ? 'Pause motion' : 'Resume motion');
+      if (on) start();
+      else {
+        stop();
+        resetPointer();
+        render(lastT);
+      }
+      if (persist) write({ motion: on ? 'on' : 'off' });
+    }
+
+    document
+      .getElementById('motion-toggle')
+      ?.addEventListener('click', () => setMotion(paused));
+
+    // ── Theme ───────────────────────────────────────────────────────────────
+    // Same key and class as the site header, so a choice made here follows you
+    // back to the rest of the site.
+    document.getElementById('wallpaper-theme')?.addEventListener('click', () => {
+      const dark = document.documentElement.classList.toggle('dark');
+      try {
+        localStorage.setItem('theme', dark ? 'dark' : 'light');
+      } catch {
+        /* ignore */
+      }
+      if (paused) render(lastT);
+    });
+
+    // ── Clock ───────────────────────────────────────────────────────────────
+    // 24h HH:MM. Not tied to `paused`: a clock isn't motion, and a stopped
+    // clock on a wallpaper is worse than no clock.
+    const clockEl = document.getElementById('clock') as HTMLTimeElement | null;
+    const clockBtn = document.getElementById('clock-toggle');
+    let clockOn = read().clock === 'on';
+    let clockTimer = 0;
+    let stamp = '';
+
+    function tick() {
+      const d = new Date();
+      const text = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+      if (text === stamp) return; // only touch the DOM on the minute
+      stamp = text;
+      if (clockEl) {
+        clockEl.textContent = text;
+        clockEl.dateTime = text;
+      }
+    }
+
+    function setClock(on: boolean, persist = true) {
+      clockOn = on;
+      if (clockEl) clockEl.hidden = !on;
+      if (on) stage!.dataset.clock = '';
+      else delete stage!.dataset.clock;
+      clockBtn?.setAttribute('aria-pressed', String(on));
+      clockBtn?.setAttribute('aria-label', on ? 'Hide clock' : 'Show clock');
+      clearInterval(clockTimer);
+      if (on) {
+        stamp = '';
+        tick();
+        // Polled rather than scheduled to the minute boundary: a second of
+        // string comparison is free, and it recovers on its own from a sleep,
+        // a timezone change, or the system clock being set.
+        clockTimer = window.setInterval(tick, 1000);
+      }
+      if (persist) write({ clock: on ? 'on' : 'off' });
+    }
+
+    clockBtn?.addEventListener('click', () => setClock(!clockOn));
+
+    // ── PNG export ──────────────────────────────────────────────────────────
+    // Redrawn at the target resolution rather than scaled up from the on-screen
+    // canvas, so a 3440 × 1440 wallpaper is genuinely 3440 × 1440 — sharp on the
+    // display it's meant for.
+    //
+    // Three things are deliberately left out of the file:
+    //   • the cursor swell and any in-flight ripples — a wallpaper shouldn't
+    //     have a bright blob baked in wherever the mouse was;
+    //   • the shimmer, which is a moving highlight, not a resting state;
+    //   • the clock, because a desktop wallpaper frozen at 21:07 forever is a
+    //     bug, not a feature.
+    const exportBtn = document.getElementById('export-png');
+
+    /** Target pixel size: the preset's own, or this display's real resolution. */
+    function exportSize(): [number, number] {
+      const chip = chips.find((c) => c.getAttribute('aria-pressed') === 'true');
+      const pw = Number(chip?.dataset.w || 0);
+      const ph = Number(chip?.dataset.h || 0);
+      if (pw && ph) return [pw, ph];
+      const dpr = window.devicePixelRatio || 1;
+      return [Math.round(screen.width * dpr), Math.round(screen.height * dpr)];
+    }
+
+    /** CSS `radial-gradient(ellipse RX% RY% at CX% CY%, …)` on a 2D context. */
+    function ellipseGradient(
+      c: CanvasRenderingContext2D,
+      W: number,
+      H: number,
+      rx: number,
+      ry: number,
+      cx: number,
+      cy: number,
+      stops: [number, string][],
+    ) {
+      c.save();
+      c.translate(W * cx, H * cy);
+      const a = W * rx;
+      const b = H * ry;
+      c.scale(1, b / a);
+      const g = c.createRadialGradient(0, 0, 0, 0, 0, a);
+      for (const [at, color] of stops) g.addColorStop(at, color);
+      c.fillStyle = g;
+      // Generous rect: the vertical scale shrinks the paintable area, so cover
+      // well past the canvas in the transformed space.
+      c.fillRect(-W * 2, (-H * 2 * a) / b, W * 4, (H * 4 * a) / b);
+      c.restore();
+    }
+
+    function updateExportLabel() {
+      const [W, H] = exportSize();
+      const text = `Download PNG (${W} × ${H})`;
+      exportBtn?.setAttribute('aria-label', text);
+      exportBtn?.setAttribute('title', text);
+    }
+
+    async function exportPng() {
+      const [W, H] = exportSize();
+      const dark = isDark();
+
+      const out = document.createElement('canvas');
+      out.width = W;
+      out.height = H;
+      const c = out.getContext('2d');
+      if (!c) return;
+
+      // 1. Ground — the same radial the stage carries in CSS.
+      c.fillStyle = dark ? '#04070c' : '#eef0f4';
+      c.fillRect(0, 0, W, H);
+      ellipseGradient(c, W, H, 0.9, 0.8, 0.5, 0.45, [
+        [0, dark ? '#0d141f' : '#ffffff'],
+        [1, dark ? 'rgba(4, 7, 12, 0)' : 'rgba(238, 240, 244, 0)'],
+      ]);
+
+      // 2. Waves, drawn on their own canvas so the edge mask can be applied
+      //    with destination-in without eating the background underneath.
+      const field = document.createElement('canvas');
+      field.width = W;
+      field.height = H;
+      const fc = field.getContext('2d');
+      if (fc) {
+        drawField(fc, W, H, lastT, false);
+        fc.globalCompositeOperation = 'destination-in';
+        ellipseGradient(fc, W, H, 1.2, 1.05, 0.5, 0.5, [
+          [0, '#000'],
+          [0.6, '#000'],
+          [1, 'rgba(0, 0, 0, 0)'],
+        ]);
+        fc.globalCompositeOperation = 'source-over';
+        c.drawImage(field, 0, 0);
+      }
+
+      // 3. Wordmark, at the same fraction of the frame the CSS gives it.
+      const img = document.querySelector<HTMLImageElement>(dark ? '.mark-dark' : '.mark-light');
+      if (img) {
+        if (!img.complete) await img.decode().catch(() => {});
+        const mw = Math.min(0.72 * W, 1.0 * H);
+        const mh = (mw * img.naturalHeight) / img.naturalWidth;
+        c.drawImage(img, (W - mw) / 2, (H - mh) / 2, mw, mh);
+      }
+
+      const blob: Blob | null = await new Promise((res) => out.toBlob(res, 'image/png'));
+      if (!blob) return;
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `wavekat-wallpaper-${W}x${H}${dark ? '' : '-light'}.png`;
+      a.click();
+      // Revoke on the next turn — revoking synchronously can beat the download.
+      setTimeout(() => URL.revokeObjectURL(url), 10_000);
+    }
+
+    exportBtn?.addEventListener('click', () => {
+      exportPng().catch(() => {});
+    });
+
+    // ── Fullscreen ──────────────────────────────────────────────────────────
+    const toggleFullscreen = () => {
+      if (document.fullscreenElement) document.exitFullscreen();
+      else document.documentElement.requestFullscreen?.().catch(() => {});
+    };
+    document.getElementById('fullscreen-toggle')?.addEventListener('click', toggleFullscreen);
+
+    // ── Auto-hiding controls ────────────────────────────────────────────────
+    // The whole point of the page is what's behind the panel, so it retreats
+    // on its own and only a real pointer move brings it back. `forcedHidden`
+    // (H) survives pointer moves — that's the "I'm recording now" mode.
+    let idleTimer = 0;
+    let forcedHidden = false;
+
+    function showControls() {
+      if (forcedHidden) return;
+      controls!.classList.remove('is-hidden');
+      clearTimeout(idleTimer);
+      idleTimer = window.setTimeout(() => controls!.classList.add('is-hidden'), 3000);
+    }
+    function hideControls() {
+      clearTimeout(idleTimer);
+      controls!.classList.add('is-hidden');
+    }
+
+    window.addEventListener('pointermove', showControls, { passive: true });
+    controls.addEventListener('pointerenter', () => clearTimeout(idleTimer));
+    controls.addEventListener('pointerleave', showControls);
+
+    window.addEventListener('keydown', (e) => {
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      const key = e.key.toLowerCase();
+      if (key === 'h') {
+        forcedHidden = !forcedHidden;
+        if (forcedHidden) hideControls();
+        else showControls();
+      } else if (key === 'f') {
+        e.preventDefault();
+        toggleFullscreen();
+      } else if (key === 's') {
+        e.preventDefault();
+        exportPng().catch(() => {});
+        showControls();
+      } else if (key === 'c') {
+        setClock(!clockOn);
+        showControls();
+      } else if (key >= '1' && key <= String(chips.length)) {
+        applyPreset(chips[Number(key) - 1].dataset.preset!);
+        showControls();
+      }
+    });
+
+    // ── Boot ────────────────────────────────────────────────────────────────
+    const saved = read();
+    applyPreset(typeof saved.preset === 'string' ? saved.preset : 'fit', false);
+    new ResizeObserver(() => {
+      resize();
+      if (paused) render(lastT);
+    }).observe(stage);
+
+    setMotion(!paused, false);
+    setClock(clockOn, false);
+    showControls();
+
+    // Don't burn a GPU on a hidden tab — but a wallpaper left on a second
+    // monitor is often "hidden" only because another window has focus, so this
+    // keys off visibility, not focus.
+    document.addEventListener('visibilitychange', () => {
+      if (document.hidden) stop();
+      else if (!paused) start();
+    });
+  }
+</script>
