Heatmap: live cutoff label + relocate animate toggle

- "Low cutoff: X.XX" label now follows the live preview during scrub
  (was stuck at the URL-committed value, since pointer-only hover never
  commits). Added a small React-state mirror of the preview ref —
  re-renders Controls per move but doesn't touch the 3D path (shader
  still reads the ref).
- "Animate cutoff changes" toggle moved from the global Settings
  drawer into the Heatmap section right under the cutoff scrubber,
  where it belongs alongside the other heatmap controls.

Author: ryan-williams

pkgs/core/src/components/Controls.tsx

@@ -94,9 +94,16 @@ interface ControlsProps {
   heatmapGamma?: number
   onHeatmapGammaChange?: (v: number) => void
   heatmapLowCutoff?: number
+  /** Live cutoff for the "Low cutoff: X.XX" label — equals preview while
+   *  scrubbing, equals `heatmapLowCutoff` otherwise. The slider/histogram
+   *  positioning still uses `heatmapLowCutoff` (committed). */
+  displayedHeatmapLowCutoff?: number
   onHeatmapLowCutoffChange?: (v: number) => void
   /** Transient low-cutoff preview while hovering the heatmap histogram. */
   onHeatmapLowCutoffPreview?: (v: number | null) => void
+  /** Smooth-lerp the heatmap shader's cutoff between values, vs snapping. */
+  heatmapCutoffAnim?: boolean
+  onHeatmapCutoffAnimChange?: (v: boolean) => void
   /** Symmetric absolute-max for the heatmap histogram x-axis. Defaults to
    *  `maxDensity` (unsigned data); diff mode passes `max(|min|, |max|)`. */
   dataAbsMax?: number
@@ -189,8 +196,11 @@ export function Controls({
   heatmapGamma = 2.5,
   onHeatmapGammaChange,
   heatmapLowCutoff = 0,
+  displayedHeatmapLowCutoff,
   onHeatmapLowCutoffChange,
   onHeatmapLowCutoffPreview,
+  heatmapCutoffAnim,
+  onHeatmapCutoffAnimChange,
   dataAbsMax,
   heatmapStepCount = 256,
   onHeatmapStepCountChange,
@@ -436,7 +446,7 @@ export function Controls({
                 <span title={isDiff
                   ? "Densities with |val| / dataAbsMax below this fraction contribute zero alpha"
                   : "Densities below this fraction contribute zero alpha (hard threshold)"
-                }>Low cutoff: {heatmapLowCutoff.toFixed(2)}</span>
+                }>Low cutoff: {(displayedHeatmapLowCutoff ?? heatmapLowCutoff).toFixed(2)}</span>
                 <button
                   className={styles.resetBtn}
                   onClick={() => onHeatmapLowCutoffChange(0)}
@@ -467,6 +477,16 @@ export function Controls({
                 />
               )}
             </div>
+            {onHeatmapCutoffAnimChange && (
+              <label className={styles.toggle} title="Smoothly lerp the cutoff between values vs snapping (more GPU work, less choppy)">
+                <input
+                  type="checkbox"
+                  checked={!!heatmapCutoffAnim}
+                  onChange={e => onHeatmapCutoffAnimChange(e.target.checked)}
+                />
+                Animate cutoff changes
+              </label>
+            )}
             <div className={styles.controlLabel}>
               <div className={styles.sliderHeader}>
                 <span title="Ray-march sample count — higher is smoother but slower">Steps: {heatmapStepCount}</span>

pkgs/core/src/components/Settings.tsx

@@ -59,23 +59,6 @@ export function Settings({ settings, onUpdate, showCacheToggle = true, lineWidth
         />
         MB
       </label>
-      <label style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 8,
-        fontSize: 13,
-        color: '#ccc',
-        cursor: 'pointer',
-        marginTop: 6,
-      }}>
-        <input
-          type="checkbox"
-          checked={settings.heatmapCutoffAnim}
-          onChange={e => onUpdate({ heatmapCutoffAnim: e.target.checked })}
-          style={{ accentColor: '#4a9eff' }}
-        />
-        Animate heatmap cutoff changes
-      </label>
       {onLineWidthChange && (
         <label style={{
           display: 'flex',

pkgs/static/src/App.tsx

@@ -1565,6 +1565,11 @@ export default function App() {
   // and pushes it straight to the shader uniform — drag updates land in the
   // 3D viz next frame (~16 ms) instead of after a full React reconciliation.
   const heatmapLowCutoffPreviewRef = useRef<number | null>(null)
+  // Mirror of the preview ref as React state, used ONLY for the "Low cutoff:
+  // X.XX" label so it tracks the live scrub. The shader still reads the ref
+  // (no App re-render needed for the 3D path); this state's re-render only
+  // touches Controls.
+  const [displayedHeatmapLowCutoff, setDisplayedHeatmapLowCutoff] = useState<number | null>(null)
   // Populated by `<InvalidateBridge>` inside the Canvas with R3F's `invalidate`.
   // Wakes the render loop after a ref write so the shader paints next tick.
   const invalidateRef = useRef<(() => void) | null>(null)
@@ -1586,6 +1591,7 @@ export default function App() {
   }, [])
   const setPreviewHeatmapLowCutoff = useCallback((v: number | null) => {
     heatmapLowCutoffPreviewRef.current = v
+    setDisplayedHeatmapLowCutoff(v)
     // Null = clear (hover-out, drag-release): flush immediately so the committed
     // value snaps back without waiting on debounce.
     if (v === null) { flushScrub(); return }
@@ -1927,8 +1933,11 @@ export default function App() {
               heatmapGamma={heatmapGamma}
               onHeatmapGammaChange={setHeatmapGamma}
               heatmapLowCutoff={heatmapLowCutoff}
+              displayedHeatmapLowCutoff={displayedHeatmapLowCutoff ?? heatmapLowCutoff}
               onHeatmapLowCutoffChange={setHeatmapLowCutoff}
               onHeatmapLowCutoffPreview={setPreviewHeatmapLowCutoff}
+              heatmapCutoffAnim={settings.heatmapCutoffAnim}
+              onHeatmapCutoffAnimChange={v => updateSettings({ heatmapCutoffAnim: v })}
               dataAbsMax={dataAbsMax}
               heatmapStepCount={heatmapStepCount}
               onHeatmapStepCountChange={setHeatmapStepCount}