Noise-driven YES, sticky hero with frosted cards, full light theme

Three changes that belong together, all verified against a real
mounted page in headless WebKit:

- yes.js's two behavior dials (containment/wiggle) now drift on a
  smooth two-octave value-noise field at cloud pace (~25s per weather
  change) instead of following the mouse. Includes a real bug fix
  found in verification: the hash's final XOR yields a SIGNED 32-bit
  value in JS, so the "0..1" noise dipped to -0.36 without a
  reinterpreting >>> 0.

- The landing hero is position: sticky, so the piece keeps animating
  behind the whole page. Cards go translucent with backdrop blur and
  a soft shadow so the piece reads faintly through and around them
  (near-opaque fallback where backdrop-filter is unsupported). The
  hero copy fades out over the first half-screen of scroll - pinned,
  it ghosted through the cards. The bottom fade gradient is gone: its
  hard-cut reason disappeared with the canvas behind everything.

- Full prefers-color-scheme light theme: warm paper, near-black ink,
  accent deepened from dusty cyan to teal ink (#8ec2c0 washes out on
  white), wordmark inverted via filter. yes.js mirrors the palette
  itself (canvas can't read CSS vars): CMYK process-ink strokes dark
  enough to carry on paper, raster ghost repainted as multiply-blended
  gray on white, live re-theme on scheme flip with a trail clear.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

style/main.css

@@ -47,11 +47,22 @@
   --accent-soft: rgba(142, 194, 192, 0.16);
 
   --paper: #0a0a0a;
-  --paper-raised: #161616;
   --ink: #ededed;
   --ink-dim: #9a9a9a;
   --line: #2a2a2a;
 
+  /* Cards float over the sticky YES canvas - translucent so the piece
+     reads faintly through them (paired with backdrop-filter on
+     .alt-card), shadowed so their edge against the animated backdrop
+     is a soft lift rather than a hard contrast line. */
+  --card-bg: rgba(22, 22, 22, 0.55);
+  --card-bg-opaque: rgba(22, 22, 22, 0.94);
+  --card-shadow: rgba(0, 0, 0, 0.5);
+
+  --error: #ff6b6b;
+  /* Behind .hero-copy: dark halo on dark stock, paper halo on light. */
+  --hero-glow: rgba(0, 0, 0, 0.8);
+
   --heading: "Quicksand", var(--sans);
   --sans: -apple-system, "SF Pro Text", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
 
@@ -64,6 +75,44 @@
   font-size: max(12px, calc(2.1lvmin + 3pt));
 }
 
+/* Light theme: the same muted-press idea on white stock - warm paper,
+   near-black ink, and the accent deepened from dusty cyan to a teal
+   ink that actually carries as text on light paper (the dark theme's
+   #8ec2c0 washes out there). yes.js mirrors this palette on its own
+   (matchMedia in setupTheme) since canvas paint can't read CSS vars. */
+@media (prefers-color-scheme: light) {
+  :root {
+    --accent: #47807e;
+    --accent-soft: rgba(71, 128, 126, 0.16);
+
+    --paper: #f6f5f1;
+    --ink: #1d1d1b;
+    --ink-dim: #6d6c66;
+    --line: #d9d7cf;
+
+    --card-bg: rgba(252, 251, 248, 0.55);
+    --card-bg-opaque: rgba(252, 251, 248, 0.94);
+    --card-shadow: rgba(50, 48, 42, 0.18);
+
+    --error: #a83a32;
+    --hero-glow: rgba(246, 245, 241, 0.85);
+  }
+
+  /* The wordmark SVG is a hardcoded white stroke (also used raw in
+     dark contexts elsewhere) - flip it to ink here rather than fork
+     the asset. */
+  .wordmark img {
+    filter: invert(0.92);
+  }
+
+  /* overlay against near-white paper resolves to ~white and the
+     raster ghost vanishes; multiply lets the light theme's gray YES
+     (see rasterizeText's themed repaint in yes.js) show as ink. */
+  .hero-canvas #rasterCanvas {
+    mix-blend-mode: multiply;
+  }
+}
+
 * {
   box-sizing: border-box;
 }
@@ -157,7 +206,14 @@ main.not-found {
    than interrupting the canvas. */
 
 .hero-yes {
-  position: relative;
+  /* Sticky at the viewport top for the whole scroll (its containing
+     block is the page itself), so the piece stays animating behind
+     everything that follows - the translucent cards scroll over it
+     and it shows through them and in the gaps around them. z-index 0
+     so positioned content below can stack above with z-index 1. */
+  position: sticky;
+  top: 0;
+  z-index: 0;
   max-width: none;
   width: 100%;
   /* svh here is only the pre-JS/no-JS fallback (and first paint before
@@ -203,28 +259,17 @@ main.not-found {
   z-index: 1;
   padding: 0 1.5rem 3.5rem;
   gap: 0.6rem;
-  text-shadow: 0 0.12em 1.4em rgba(0, 0, 0, 0.8);
+  text-shadow: 0 0.12em 1.4em var(--hero-glow);
-}
-
-/* Softens the otherwise hard cut where the full-bleed canvas meets the
-   page background right below it - fades to the same --paper color
-   over the last few ems instead of stopping dead. Non-interactive so
-   it never steals clicks meant for the canvas underneath. */
-.hero-yes::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 8rem;
-  background: linear-gradient(to bottom, transparent, var(--paper));
-  pointer-events: none;
-  z-index: 1;
 }
 
 /* alternatives */
 
+/* position + z-index on these three: everything that scrolls over the
+   sticky canvas must be a positioned box above the hero's z-index 0,
+   or the (positioned) hero would paint over it. */
 .alternatives {
+  position: relative;
+  z-index: 1;
   max-width: 75ch;
   margin: 0 auto 5rem;
   padding: 0 1.5rem;
@@ -232,6 +277,12 @@ main.not-found {
   gap: 1.25rem;
 }
 
+.question-nav,
+.question-responsible {
+  position: relative;
+  z-index: 1;
+}
+
 @media (max-width: 43.75rem) {
   .alternatives {
     padding: 0;
@@ -295,10 +346,25 @@ main.not-found {
 }
 
 .alt-card {
-  background: var(--paper-raised);
+  background: var(--card-bg);
+  /* Frosted glass over the animated canvas behind: the blur is what
+     keeps text on a translucent card readable while the piece still
+     reads through it in color and motion. */
+  -webkit-backdrop-filter: blur(0.8rem);
+  backdrop-filter: blur(0.8rem);
   border: 0.06rem solid var(--line);
   border-radius: var(--radius);
   padding: 1.75rem 1.9rem;
+  box-shadow: 0 1.1rem 2.4rem var(--card-shadow);
+}
+
+/* Without backdrop blur, 0.55-alpha cards put text straight over the
+   moving canvas - illegible. Engines lacking the filter get a
+   near-opaque card instead. */
+@supports not ((backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem))) {
+  .alt-card {
+    background: var(--card-bg-opaque);
+  }
 }
 
 .alt-image {
@@ -570,7 +636,7 @@ textarea:focus {
   font-family: var(--sans);
   font-weight: 600;
   font-size: 0.95rem;
-  color: #0a0a0a;
+  color: var(--paper);
   background: var(--accent);
   border: none;
   border-radius: 0.7rem;
@@ -609,7 +675,7 @@ textarea:focus {
 }
 
 .resource-error {
-  color: #ff6b6b;
+  color: var(--error);
   font-size: 0.9rem;
 }
 

yes.js

@@ -36,8 +36,6 @@ export class RasterizedYES {
         this.destroyed = false;
         this.time = 0;
 
-        this.mouseX = 0.5;
-        this.mouseY = 0.5;
         this.containmentStrength = 0.5;
         this.wiggleAmount = 0.5;
 
@@ -48,7 +46,9 @@ export class RasterizedYES {
 
         this.setupCanvas();
         this.setupResizeHandler();
-        this.setupMouseTracking();
+        this.setupDrift();
+        this.setupTheme();
+        this.setupScrollFade();
         this.setupClickHandler();
         this.rasterizeText();
         this.initializeLines();
@@ -60,6 +60,82 @@ export class RasterizedYES {
         if (this._resizeHandler) {
             window.removeEventListener('resize', this._resizeHandler);
         }
+        if (this._themeQuery) {
+            this._themeQuery.removeEventListener('change', this._themeHandler);
+        }
+        if (this._scrollHandler) {
+            window.removeEventListener('scroll', this._scrollHandler);
+        }
+    }
+
+    // The hero is position: sticky (main.css), so without this the
+    // title/wordmark stay pinned at the viewport bottom for the whole
+    // page and ghost through the translucent cards scrolling over
+    // them. Fade the copy out across the first half-screen of scroll;
+    // visibility: hidden at the end so the wordmark link can't be
+    // clicked while invisible.
+    setupScrollFade() {
+        this.heroCopy = this.heroEl ? this.heroEl.querySelector('.hero-copy') : null;
+        if (!this.heroCopy) return;
+        this._scrollHandler = () => {
+            const opacity = Math.max(0, 1 - window.scrollY / (this.displayHeight * 0.5));
+            this.heroCopy.style.opacity = opacity;
+            this.heroCopy.style.visibility = opacity <= 0.01 ? 'hidden' : '';
+        };
+        window.addEventListener('scroll', this._scrollHandler, { passive: true });
+        this._scrollHandler();
+    }
+
+    // Canvas paint can't read CSS custom properties, so the piece
+    // carries its own copy of both palettes and follows
+    // prefers-color-scheme itself - values must track main.css's :root
+    // (--paper especially: the fade fill IS the page background where
+    // the canvas shows through translucent cards). Dark keeps the
+    // original neon-on-black inks; light restates them as CMYK process
+    // inks dark enough to carry on paper, since 80%-lightness pastels
+    // vanish on white.
+    setupTheme() {
+        this._themeQuery = window.matchMedia('(prefers-color-scheme: light)');
+        this._themeHandler = () => {
+            this.applyTheme();
+            // Repaint the raster ghost in the new theme's ink and
+            // hard-clear the trails - a slow 3%-alpha fade from the
+            // old paper color would smear across the flip otherwise.
+            this.rasterizeText();
+            this.lineCtx.fillStyle = this.theme.paper;
+            this.lineCtx.fillRect(0, 0, this.displayWidth, this.displayHeight);
+        };
+        this._themeQuery.addEventListener('change', this._themeHandler);
+        this.applyTheme();
+    }
+
+    applyTheme() {
+        this.theme = this._themeQuery.matches
+            ? {
+                paper: '#f6f5f1',
+                fade: 'rgba(246, 245, 241, 0.03)',
+                // White ground so multiply (the light theme's CSS
+                // blend mode for #rasterCanvas) leaves the paper
+                // untouched; gray ink becomes the faint YES ghost.
+                rasterBg: '#ffffff',
+                rasterInk: '#6b6b6b',
+                strokes: [
+                    'hsla(185, 70%, 32%, 0.85)',
+                    'hsla(315, 60%, 38%, 0.85)',
+                    'hsla(50, 90%, 40%, 0.85)'
+                ]
+            }
+            : {
+                paper: '#0a0a0a',
+                fade: 'rgba(10, 10, 10, 0.03)',
+                rasterBg: '#111111',
+                rasterInk: '#ffffff',
+                strokes: [
+                    'hsla(180, 90%, 80%, 0.8)',
+                    'hsla(300, 90%, 80%, 0.8)',
+                    'hsla(60, 90%, 80%, 0.8)'
+                ]
+            };
     }
 
     // Reading .hero-canvas's rendered rect (a prior attempt at this)
@@ -119,50 +195,59 @@ export class RasterizedYES {
         window.addEventListener('resize', this._resizeHandler);
     }
 
-    setupMouseTracking() {
+    // The two behavior dials (containmentStrength from x, wiggleAmount
-        const updatePosition = (clientX, clientY) => {
+    // from y) used to follow the pointer. Now a smooth noise field
-            this.mouseX = clientX / this.displayWidth;
+    // wanders them instead - the same 0..1 inputs a mouse would give,
-            this.mouseY = clientY / this.displayHeight;
+    // but drifting at cloud pace, so the piece breathes on its own and
-            this.containmentStrength = 0.1 + (this.mouseX * 0.9);
+    // behaves identically with nobody touching it (which on a landing
-            this.wiggleAmount = 0.1 + (this.mouseY * 1.9);
+    // hero is most of the time, and on touch devices was always the
+    // case between taps). Value noise with two octaves: smooth
+    // (C1-continuous via smoothstep), never repeats visibly, no jumps.
+    setupDrift() {
+        const channel = (seed) => {
+            const rand = (i) => {
+                let h = Math.imul(i ^ seed, 2654435761) >>> 0;
+                h ^= h >>> 13;
+                h = Math.imul(h, 0x5bd1e995) >>> 0;
+                // The >>> 0 here is load-bearing: ^ yields a SIGNED
+                // 32-bit value, and without the reinterpret a set top
+                // bit made this "0..1" noise go as low as -0.5,
+                // pushing both dials below their intended floors.
+                h = (h ^ (h >>> 15)) >>> 0;
+                return h / 4294967296;
+            };
+            const noise = (t) => {
+                const i = Math.floor(t);
+                const f = t - i;
+                const s = f * f * (3 - 2 * f);
+                return rand(i) * (1 - s) + rand(i + 1) * s;
+            };
+            // Two octaves, renormalized to 0..1: the slow octave sets
+            // the overall weather, the faster one keeps it from
+            // feeling like a pendulum.
+            return (t) => (noise(t) * 2 / 3 + noise(t * 2.7 + 913) * 1 / 3);
         };
 
-        window.addEventListener('mousemove', (e) => {
+        // One full "weather change" roughly every DRIFT_PERIOD
-            updatePosition(e.clientX, e.clientY);
+        // seconds per octave - the pace of watching clouds, not of a
-        });
+        // hand on a mouse.
+        this.driftPeriod = 25;
+        this.driftX = channel(0x9e3779b9);
+        this.driftY = channel(0x85ebca6b);
 
-        // Scoped to the canvas itself, not `window` (see below), and
-        // no longer calling preventDefault(): the original standalone
-        // page was the whole document, so blocking default touch
-        // behavior was harmless (nothing else to scroll to). Embedded
-        // as a hero above a longer page, .hero-yes covers the entire
-        // first screen - preventDefault() here was fighting the
-        // browser's own native scroll for any touch gesture starting
-        // in that region, which is what actually caused scrolling to
-        // jump/stutter (only once this component had mounted and
-        // attached these listeners - a plain page scroll never needed
-        // default prevented in the first place, just the position for
-        // the cosmetic line-cluster tracking below).
-        this.lineCanvas.addEventListener('touchmove', (e) => {
-            if (e.touches.length > 0) {
-                const touch = e.touches[0];
-                updatePosition(touch.clientX, touch.clientY);
-            }
-        }, { passive: true });
-
-        this.lineCanvas.addEventListener('touchstart', (e) => {
-            if (e.touches.length > 0) {
-                const touch = e.touches[0];
-                updatePosition(touch.clientX, touch.clientY);
-            }
-        }, { passive: true });
-
-        this.mouseX = 0.5;
-        this.mouseY = 0.5;
         this.containmentStrength = 0.55;
         this.wiggleAmount = 1.05;
     }
 
+    updateDrift() {
+        const t = this.time / this.driftPeriod;
+        const x = this.driftX(t);
+        const y = this.driftY(t);
+        // Same mapping the mouse position used to feed.
+        this.containmentStrength = 0.1 + (x * 0.9);
+        this.wiggleAmount = 0.1 + (y * 1.9);
+    }
+
     setupClickHandler() {
         this.lineCanvas.addEventListener('click', () => {
             this.restartAnimation();
@@ -171,7 +256,7 @@ export class RasterizedYES {
 
     restartAnimation() {
         this.time = 0;
-        this.lineCtx.fillStyle = '#0a0a0a';
+        this.lineCtx.fillStyle = this.theme.paper;
         this.lineCtx.fillRect(0, 0, this.displayWidth, this.displayHeight);
         this.initializeLines();
         this.isActive = true;
@@ -227,9 +312,14 @@ export class RasterizedYES {
             this.letterRasters[i] = this.rasterCtx.getImageData(0, 0, this.rasterCanvas.width, this.rasterCanvas.height);
         }
 
-        this.rasterCtx.fillStyle = '#111';
+        // The visible layer, distinct from the letterRasters sampled
+        // above (those stay #111/#fff - isInSpecificLetter's red>128
+        // test depends on it): painted in theme ink so the ghost works
+        // under the theme's blend mode (overlay on dark, multiply on
+        // light - see #rasterCanvas in main.css).
+        this.rasterCtx.fillStyle = this.theme.rasterBg;
         this.rasterCtx.fillRect(0, 0, width, height);
-        this.rasterCtx.fillStyle = '#ffffff';
+        this.rasterCtx.fillStyle = this.theme.rasterInk;
         this.rasterCtx.fillText('YES', textStartX, textY);
 
         this.rasterData = this.rasterCtx.getImageData(0, 0, this.rasterCanvas.width, this.rasterCanvas.height);
@@ -286,19 +376,16 @@ export class RasterizedYES {
                 centerY = startY;
             }
 
-            const colors = [
+            // Stroke color lives on the theme, looked up per frame by
-                'hsl(180, 90%, 70%)',
+            // letterIndex (see draw()) - not frozen per line - so a
-                'hsl(300, 90%, 70%)',
+            // theme flip recolors live lines instead of leaving
-                'hsl(60, 90%, 70%)'
+            // dark-theme neon smearing across light paper.
-            ];
-
             this.lines.push({
                 relativeX: (startX - centerX) / this.fontSize,
                 relativeY: (startY - centerY) / this.fontSize,
                 prevRelativeX: (startX - centerX) / this.fontSize,
                 prevRelativeY: (startY - centerY) / this.fontSize,
                 angle: Math.random() * Math.PI * 2,
-                color: colors[letterIndex],
                 letterIndex: letterIndex,
                 lastSeenInside: { x: (startX - centerX) / this.fontSize, y: (startY - centerY) / this.fontSize },
                 outsideDuration: 0
@@ -347,6 +434,7 @@ export class RasterizedYES {
 
     updateLines() {
         this.time += 0.016;
+        this.updateDrift();
         if (!this.isActive) return;
 
         const letterCentroids = this.calculateLetterCentroids();
@@ -454,7 +542,7 @@ export class RasterizedYES {
     }
 
     draw() {
-        this.lineCtx.fillStyle = 'rgba(10, 10, 10, 0.03)';
+        this.lineCtx.fillStyle = this.theme.fade;
         this.lineCtx.fillRect(0, 0, this.displayWidth, this.displayHeight);
 
         const letterCentroids = this.calculateLetterCentroids();
@@ -470,7 +558,7 @@ export class RasterizedYES {
 
             if (prevX === currentX && prevY === currentY) return;
 
-            this.lineCtx.strokeStyle = line.color.replace('70%)', '80%, 0.8)');
+            this.lineCtx.strokeStyle = this.theme.strokes[line.letterIndex];
             this.lineCtx.lineWidth = this.fontSize * 0.003;
             this.lineCtx.lineCap = 'round';