Aero glass is transparent now, blurred without the per-frame cost

The white-ish fills are gone: every surface is a thin translucent glass with
the gloss and a bright rim, and the wallpaper reads through all of it.

The blur is a pre-blurred copy of the wallpaper (public/aero/
background-blur.webp, 3 kB) glued to the viewport with
background-attachment: fixed, layered under the tint and the gloss, instead
of a live backdrop-filter. Blurring the live scene measured 66ms per frame
at 2x CPU throttle (115 frames over 34ms) because the bubbles move behind
every surface; with the pre-blurred layer the same scene runs at 33ms and 8
slow frames — the same as the other themes, so the MacBook stays cool.

Sticky chrome, sheets and dropdowns keep a real backdrop-filter (they sit
over scrolling content, and their area is small).

Contrast: 0 below-minimum findings, 0 axe violations, all three themes.
Version 0.2.5, SW -> freezmo-v58.
This commit is contained in:
Martin Dvořák 2026-10-13 07:45:22 +00:00
commit 13b3a80e1c
5 changed files with 59 additions and 29 deletions

View file

@ -1419,9 +1419,14 @@ Things I chose while building, with the reasoning:
(<https://wallpapersafari.com/w/IlWuz7>, re-encoded to a 237 kB WebP in `public/aero/` and
credited in Settings), with ten drawn bubbles rising over it (`.ice-bubble` — `display: none`
outside aero so they cost nothing elsewhere, still under reduced motion). Buttons and segments
are **liquid glass** (translucent, glossed top half, bright rim, backdrop blur), the cards are
pale blue glass, and the helper lines that sit straight on the wallpaper (the keyboard tip, the
AI note) get their own small glass chip — dark text on grass measured 2.5:1. The light/dark
are **liquid glass** — transparent, glossed, with a bright rim — and every surface shows a
**pre-blurred copy of the wallpaper** (`public/aero/background-blur.webp`, 3 kB, glued to the
viewport with `background-attachment: fixed`) instead of blurring the live scene: the bubbles
move behind every surface, so a real `backdrop-filter` re-runs ~60 times a second (measured
66ms/frame at 2x throttle vs 17ms with nothing blurring). The tint and the gloss ride on top of
that layer, so the look is identical at zero per-frame cost. The helper lines that sit straight
on the wallpaper (the keyboard tip, the AI note) get a small glass chip — dark text on grass
measured 2.5:1. The light/dark
toggles (header, rail, chat header) hide while it is on and the picker says why; the PWA status
bar follows the wallpaper's sky (#2fa7e6). Covered by the axe and pixel-contrast scans in all
three themes.