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

@@ -4,24 +4,21 @@
* through components. The hue lives in styles/app.css because CSS is where it is used;
* it is repeated here only for the canvas, which cannot read a custom property. */
import { LOW_POWER } from "../lowPower";
/** The turquoise lagoon. Music is 210, Hörbücher 55, "Mein Zimmer" 300. */
export const HUE = 175;
/** Frost the glass panels with a real backdrop blur. Expensive on weak GPUs, and the
* on-screen keyboard frosts every single key - off under `?pi=1`, like the music app's
* matching toggle. */
export const SHOW_GLASS_BLUR = !LOW_POWER;
/** Frost the glass panels with a real backdrop blur. Looks like the first thing to cut
* on a weak GPU; on the Pi it measured five times worse with it off, because the blur is
* what gives each panel its own compositing layer. Same finding as the music app's
* matching toggle - see the table in ../lowPower.ts. */
export const SHOW_GLASS_BLUR = true;
/** The decorative rising bubbles behind everything. A dozen elements animating forever,
* carrying no information, so `?pi=1` drops them. */
export const SHOW_BUBBLES = !LOW_POWER;
/** The decorative rising bubbles behind everything. A dozen elements on a CSS transform
* loop; measured as noise on the Pi, so they stay. */
export const SHOW_BUBBLES = true;
/** The earned pets swimming behind every screen. The reward that is always in view - off
* only to rule it out when chasing a performance problem. Kept on even under `?pi=1`: a
* handful of images moved by writing `transform`, and taking away what she earned to save
* a few frames is the wrong trade. */
* only to rule it out when chasing a performance problem. */
export const SHOW_AQUARIUM_CREATURES = true;
/** Fade screens in on entry. */