Measure the Pi profile on the Pi, and keep only what helped

The first cut of ?pi=1 switched off the two things that look most expensive - the
backdrop-filter glass blur and the decorative CSS animation loops - and made the device
slower, not faster: 53.5% of a core idle became 118%. Measured on musicdolphin, sum of
the Firefox process tree, idle on the browse screen, 15s average:

  full app                                       53.5%
  + ambient canvas at half resolution            25.0%   <- the whole win
  + 30fps cap on top of that                     25.0%   (no idle change)
  + decorative CSS animation loops off           24.6%   (noise; left on)
  + backdrop-filter glass blur off              118.1%   <- 5x worse

The blur is what promotes each glass panel to its own compositing layer. Without it the
animated canvas and the whole album grid above it collapse into one layer and every
canvas frame repaints all of it. The most expensive-looking CSS in the app is what was
keeping the rest of it cheap. SHOW_GLASS_BLUR and SHOW_DECORATIVE_ANIMATIONS therefore
go back to unconditionally on, in both the music app and the typing game, with the
numbers written down next to them so the next person does not repeat this.

What is left is one real change - paint a quarter of the pixels - plus three caps that
only bite while something is playing and so are not in the table above: 30fps on the
canvas, 60 bubbles alive at once, and ten progress-bar re-renders a second. Those three
are unmeasured; measuring them means playing audio.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-20 13:44:05 +02:00
parent cc3db44c4e
commit 2514ecbc35
4 changed files with 83 additions and 61 deletions

View File

@@ -11,7 +11,6 @@
import type { CSSProperties } from "react";
import { LOW_POWER } from "./lowPower";
import type { Group } from "./search";
import type { UiState } from "./keyboard";
@@ -35,13 +34,14 @@ export const ROW_SPACING = 25;
* container, not per card, so cost stays flat regardless of grid size. */
export const ANIMATE_VIEW_TRANSITIONS = true;
/** Frost the glass panels/cards/rows with a real backdrop blur. `backdrop-filter` is
* one of the most GPU-expensive CSS effects in the app - a live backdrop copy+blur
* per element, repeated for every album card in the unvirtualized grid - and unlike
* the canvas there is no cheaper version of it to fall back to, so `?pi=1` switches
* it off outright: a plain translucent background, no blur. This is the one visible
* cost of the Pi profile. */
export const SHOW_GLASS_BLUR = !LOW_POWER;
/** Frost the glass panels/cards/rows with a real backdrop blur.
*
* The obvious thing to cut on weak hardware, and on the Pi that is exactly wrong: it
* measured five times *worse* with the blur off (118% of a core against 25%). The blur
* is what promotes each panel to its own compositing layer; without it the animated
* canvas and the whole album grid above it share one layer and every canvas frame
* repaints all of it. See the table in lib/lowPower.ts before touching this. */
export const SHOW_GLASS_BLUR = true;
/** Render the play view's animated canvas background (gradient + bubbles, both
* redrawn every frame at 60fps). Off falls back to `.stage`'s own static CSS
@@ -53,10 +53,10 @@ export const SHOW_GLASS_BLUR = !LOW_POWER;
export const SHOW_AMBIENCE = true;
/** Run the purely decorative CSS animation loops: the room page's bubble field and
* the dolphin mascot's bob/swim. Individually cheap (opacity/transform only), but
* a couple of dozen elements animating forever still means a repaint every frame on
* a machine compositing in software, and they carry no information. */
export const SHOW_DECORATIVE_ANIMATIONS = !LOW_POWER;
* the dolphin mascot's bob/swim. Left on even under `?pi=1`: switching them off on the
* Pi moved the idle figure by 0.4 percentage points, which is noise, and they are the
* kind of detail this app is for. */
export const SHOW_DECORATIVE_ANIMATIONS = true;
// ------------------------------------------------------------------ colors --