Make grain a treatment, tempo a governor, and params commit harder

Grain was in every video. It was added twice unconditionally — every scene
called sigGrain, and the grade added its own on top — so the only thing that
varied between two tracks was how much of it there was. That makes grain the
renderer's fingerprint rather than a decision about one video.

It is now described rather than dialled (look/grain.js): a mode (off /
constant / swell / sections / transient), a cell size in pixels, a refresh
rate in frames, a mask (uniform, shadows, highlights, edges, bands) and a
chroma amount. Roughly 45% of tracks get none at all. The non-constant modes
carry a per-frame envelope computed in Show._postAt from frame and features
only, so preview and export still agree. Scene-side grain is gated the same
way, and a module can decline it outright with `texture: 0` — crisp line work
should stay crisp. The post tab grew a real grain block so any of it can be
forced per track.

Slow songs got fast scenes. `motion` bias was mostly section energy with
tempo as a small correction, so a 70bpm track's drop asked for nearly as much
speed as a 150bpm one. Motion is now tempo-dominated, and every `rate: true`
param is additionally scaled by a per-track rateScale — measured, 84bpm now
samples its rate params at 0.276 of range against 148bpm's 0.571.

Parameter sampling also commits harder: extremity starts at 0.45 rather than
0.25 and shapes the draw more aggressively. This was first pushed to 0.82 and
backed off to 0.72, because the gates caught the overshoot — seeds began
collapsing onto the same range ends and a sparse scene sampled at its low end
rendered effectively black.

Fallout worth recording: turning the default grade grain off exposed two
scenes that were never really animating. Dust Chamber and Eclipse Field
passed the Phase 7 movement gate only because per-pixel noise was moving
underneath them; both now breathe on their own fixed clock, and Dust Chamber
needed a brightness floor as well. Four scenes (Classic Wave, Silk Ribbon,
Kaleido Tunnel, Slow Orb) express the style trait ONLY through grain and so
cannot opt out yet; they hold a reduced share at 0.35 pending real edge and
softness response.

Phase 3's look-space check now measures its closest pair relative to image
brightness, the same correction Phase 10 already documents for sparse scenes:
the absolute number was being propped up by grain rather than by look-space
width. Five new Phase 10 checks cover grain distribution, treatment variety,
envelope range, the texture opt-out, and tempo. 93/93 pass.

Two transport bugs, both stale state surfacing in the UI:

- Loading a track replaces audio.src, which stops playback silently, so
  state.playing stayed true and the play button stayed on pause — the first
  click after a track change only flipped the flag back. Added stopPlayback().
- The controls row wrapped mid-song because two readouts that change length
  while playing were sized by their content: the clock crossing ten minutes
  and the section label whenever a scene name is long or a crossfade appears.
  The clock is now fixed-width with tabular figures and the section label is
  the row's only flexible item, laying out at zero width and ellipsising into
  whatever space is left. The two spacers competed with it for that space and
  are gone; its own text-align does their job.

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

flow-state/src/engine/Compositor.js

@@ -10,7 +10,13 @@ const DEFAULT_POST = {
     bloomThreshold: 0.6,
     bloomKnee: 0.3,
     chroma: 0.15,
-    grain: 0.02,
+    // Grain defaults to absent. What it looks like when a look does ask for it
+    // is described by the four fields below — see look/grain.js.
+    grain: 0,
+    grainScale: 1,
+    grainRate: 1,
+    grainMask: 0,
+    grainChroma: 0,
     vignette: 0.35,
     contrast: 1.05,
     saturation: 1.1,
@@ -98,6 +104,10 @@ export class Compositor {
             u_bloomAmount: { value: 0 },
             u_chroma: { value: 0 },
             u_grain: { value: 0 },
+            u_grainScale: { value: 1 },
+            u_grainRate: { value: 1 },
+            u_grainMask: { value: 0 },
+            u_grainChroma: { value: 0 },
             u_vignette: { value: 0 },
             u_contrast: { value: 1 },
             u_saturation: { value: 1 },
@@ -313,6 +323,10 @@ export class Compositor {
         cu.u_bloomAmount.value = p.bloom;
         cu.u_chroma.value = p.chroma;
         cu.u_grain.value = p.grain;
+        cu.u_grainScale.value = p.grainScale;
+        cu.u_grainRate.value = p.grainRate;
+        cu.u_grainMask.value = p.grainMask;
+        cu.u_grainChroma.value = p.grainChroma;
         cu.u_vignette.value = p.vignette;
         cu.u_contrast.value = p.contrast;
         cu.u_saturation.value = p.saturation;

flow-state/src/engine/Layer.js

@@ -92,7 +92,7 @@ export function setFrameUniforms(layer, renderer, target, ctx) {
         if (c) u.u_colors.value[i].set(c[0], c[1], c[2]);
     }
 
-    const signature = signatureUniforms(layer.personality);
+    const signature = signatureUniforms(layer.personality, layer.module);
     for (const [name, type] of Object.entries(SIGNATURE_UNIFORMS)) {
         const v = signature[name];
         if (type === 'vec2') u[name].value.set(v[0], v[1]);

flow-state/src/engine/passes.js

@@ -107,6 +107,10 @@ uniform sampler2D u_bloom;
 uniform float u_bloomAmount;
 uniform float u_chroma;
 uniform float u_grain;
+uniform float u_grainScale;    // pixels per noise cell, 1 = per-pixel
+uniform float u_grainRate;     // frames a noise field survives
+uniform int   u_grainMask;     // see look/grain.js GRAIN_MASKS
+uniform float u_grainChroma;   // 0 = mono speckle, 1 = full colour speckle
 uniform float u_vignette;
 uniform float u_contrast;
 uniform float u_saturation;
@@ -152,9 +156,38 @@ void main() {
     col *= clamp(v, 0.0, 1.0);
 
     // Deterministic grain: keyed on frame index, never on a random source.
+    //
+    // Cell size and refresh rate are separate on purpose. Fine-and-boiling is
+    // film; coarse-and-sticky is a dirty sensor; and they are different enough
+    // that two tracks carrying grain do not read as the same treatment. The
+    // mask decides where it lands, which does more for that than amount ever
+    // did — grain only in the shadows is a look, grain everywhere is a filter.
     if (u_grain > 0.0001) {
-        float n = hash13(vec3(floor(uv * u_resolution), u_frame));
-        col += (n - 0.5) * u_grain;
+        float cellPx = max(u_grainScale, 1.0);
+        vec2 cell = floor(uv * u_resolution / cellPx);
+        float slot = floor(u_frame / max(u_grainRate, 1.0));
+
+        float m = 1.0;
+        float lum = dot(clamp(col, 0.0, 1.0), vec3(0.2126, 0.7152, 0.0722));
+        if      (u_grainMask == 1) m = 1.0 - smoothstep(0.02, 0.6, lum);       // shadows
+        else if (u_grainMask == 2) m = smoothstep(0.2, 0.9, lum);              // highlights
+        else if (u_grainMask == 3) m = smoothstep(0.02, 0.45, dot(dir, dir));  // toward the edges
+        else if (u_grainMask == 4) {
+            // Horizontal bands: grain in stripes, so it reads as a signal
+            // problem rather than as a surface.
+            float band = fract(uv.y * u_resolution.y / (cellPx * 8.0));
+            m = mix(0.15, 1.0, smoothstep(0.35, 0.5, band) * smoothstep(0.95, 0.8, band));
+        }
+
+        float n = hash13(vec3(cell, slot));
+        vec3 speckle = vec3(n);
+        if (u_grainChroma > 0.001) {
+            vec3 rgb = vec3(n,
+                            hash13(vec3(cell + 19.0, slot)),
+                            hash13(vec3(cell + 47.0, slot)));
+            speckle = mix(speckle, rgb, u_grainChroma);
+        }
+        col += (speckle - 0.5) * u_grain * m;
     }
 
     col *= u_fade;