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:
parent
9b0354fb11
commit
13b3a80e1c
5 changed files with 59 additions and 29 deletions
11
README.md
11
README.md
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue