bfc0f806b9
"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>
65 lines
2.7 KiB
TypeScript
65 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
/**
|
|
* 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 [paused, setPaused] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const apply = () => setPaused(document.hidden || !document.hasFocus());
|
|
apply();
|
|
document.addEventListener("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${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" />
|
|
<span className="ice-blob ice-blob-d" />
|
|
<div className="ice-floats">
|
|
<span className="ice-orb ice-orb-1" />
|
|
<span className="ice-orb ice-orb-2" />
|
|
<span className="ice-orb ice-orb-3" />
|
|
<span className="ice-orb ice-orb-4" />
|
|
<span className="ice-orb ice-orb-5" />
|
|
{/* Aero-only bubbles: display:none unless the aero theme is on, so they
|
|
cost nothing in the other themes (see .ice-bubble in globals.css). */}
|
|
<span className="ice-bubble ice-bubble-1" />
|
|
<span className="ice-bubble ice-bubble-2" />
|
|
<span className="ice-bubble ice-bubble-3" />
|
|
<span className="ice-bubble ice-bubble-4" />
|
|
<span className="ice-bubble ice-bubble-5" />
|
|
<span className="ice-bubble ice-bubble-6" />
|
|
<span className="ice-bubble ice-bubble-7" />
|
|
<span className="ice-bubble ice-bubble-8" />
|
|
<span className="ice-bubble ice-bubble-9" />
|
|
<span className="ice-bubble ice-bubble-10" />
|
|
<span className="ice-bubble ice-bubble-11" />
|
|
<span className="ice-bubble ice-bubble-12" />
|
|
<span className="ice-bubble ice-bubble-13" />
|
|
<span className="ice-bubble ice-bubble-14" />
|
|
<span className="ice-bubble ice-bubble-15" />
|
|
<span className="ice-bubble ice-bubble-16" />
|
|
<span className="ice-bubble ice-bubble-17" />
|
|
<span className="ice-bubble ice-bubble-18" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|