The scene stops heating the MacBook

"Terribly high CPU usage, the MacBook gets really hot" - a fanless MacBook
Air on a 144Hz screen. Measured on that machine with headed engines
(process CPU plus the per-process GPU time macOS keeps): an idle Aero
library cost LibreWolf ~110% CPU and ~230ms/s of GPU, the study feed ~130%,
Chromium up to ~57% CPU and ~350ms/s of GPU, Safari ~220-250ms/s of
WindowServer GPU. Priced one by one:

- the gradient mask on .ice-floats re-rendered the animated layer offscreen
  on every frame (~75 points of Gecko CPU). The floats now rise through a
  plain rectangular band clear of the header, the bottom chrome and the
  rail, and fade in and out inside it, so the clip never cuts a visible one;
- the overlay grain forced a backdrop readback per frame for a texture that
  measured a mean <=0.11/255 difference: removed;
- the invisible blob drift made every frame a full-screen redraw: the blobs
  are painted once;
- static glass (answer tiles, feedback panel, chips, inputs, dropzones,
  lists, segmented controls, Aero hint chips) re-blurred the moving scene
  every frame: only floating glass blurs now, and Aero's baked chat chrome
  drops a live blur that never showed under the bake;
- the scene also parks while the window has no focus and under any dialog
  or sheet scrim (.scene-pause); the loading icon is a compositor-run CSS
  animation instead of a framer-motion main-thread loop.

After, focused and animating: LibreWolf library 109% -> 33% CPU, study
134% -> 34%, chat 130% -> 42%; Chromium GPU 2.5-4.4x lower with 7-22 points
less CPU; Safari's WindowServer GPU -20-26% in Aero, about half in dark.
Unfocused or under a sheet: nothing. bubbles-test sweeps every float through
41 phases against the band and pins the parking and the cost contract;
tests/heat-probe.mjs (macOS) repeats the measurement; the suites find
Playwright's Chromium on macOS.

All 15 suites pass, lint clean, the contrast scan lost a finding. Version
0.6.7, SW v89.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/IceBackdrop.tsx

@@ -3,25 +3,32 @@
 import { useEffect, useState } from "react";
 
 /**
- * The fixed ice scene behind every screen: a navy (or pale) base, four slow
- * drifting glacier blobs, glossy ice orbs that rise slowly and fade at the
- * edges, and a whisper of grain. Purely decorative — it never intercepts
- * pointer events, only transform/opacity animate (each on its own composited
- * layer), the rise stops under `prefers-reduced-motion`, and everything parks
- * while the tab is hidden so a background tab costs no compositor work.
+ * The fixed ice scene behind every screen: a navy (or pale) base, four soft
+ * glacier blobs and glossy ice orbs that rise slowly through the open band
+ * and fade at its edges. Purely decorative — it never intercepts pointer
+ * events, only transform/opacity animate (each on its own composited layer),
+ * the rise stops under `prefers-reduced-motion`, and everything parks while
+ * the tab is hidden or the window has lost focus, so a page nobody is
+ * looking at costs no compositor work.
  */
 export function IceBackdrop() {
-  const [hidden, setHidden] = useState(false);
+  const [paused, setPaused] = useState(false);
 
   useEffect(() => {
-    const apply = () => setHidden(document.hidden);
+    const apply = () => setPaused(document.hidden || !document.hasFocus());
     apply();
     document.addEventListener("visibilitychange", apply);
-    return () => document.removeEventListener("visibilitychange", apply);
+    window.addEventListener("focus", apply);
+    window.addEventListener("blur", apply);
+    return () => {
+      document.removeEventListener("visibilitychange", apply);
+      window.removeEventListener("focus", apply);
+      window.removeEventListener("blur", apply);
+    };
   }, []);
 
   return (
-    <div className={`ice-scene${hidden ? " ice-paused" : ""}`} aria-hidden>
+    <div className={`ice-scene${paused ? " ice-paused" : ""}`} aria-hidden>
       <span className="ice-blob ice-blob-a" />
       <span className="ice-blob ice-blob-b" />
       <span className="ice-blob ice-blob-c" />
@@ -53,7 +60,6 @@ export function IceBackdrop() {
         <span className="ice-bubble ice-bubble-17" />
         <span className="ice-bubble ice-bubble-18" />
       </div>
-      <span className="ice-grain" />
     </div>
   );
 }