Ice scene: the glossy orbs become rising bubbles, ~38% more transparent
- Orbs rise from below the bottom edge to above the top edge, each with its own 36-68s pass (slower on phones), a negative delay (scene already populated on load), own horizontal position, a gentle sway and a slight scale drift; opacity fades in/out at the edges so the loop never pops. - Only transform + opacity animate, each orb on its own composited layer (will-change: transform); no filter/backdrop-filter, nothing animates size/offsets/shadow. The glacier blobs are untouched. - Opacity lowered ~38% in both themes: 0.55->0.34 light, 0.8->0.5 dark, phone overrides 0.32->0.2 / 0.42->0.26. - prefers-reduced-motion: rise removed, orbs return to the old static placements (a paused-from-start CSS animation is not applied in Chrome and would park them below the fold); tab hidden: a visibility listener parks the whole scene (.ice-paused), blob drift included. - Measured with a CDP perf trace on a 4x throttled phone profile: p95 33.4ms, 0 frames over 34ms, no long tasks - identical to the pre-change baseline; ~0.6% extra main-thread CPU. Desktop stays compositor-bound from the pre-existing blob drift, as before. tests/bubble-perf.mjs keeps it repeatable. - New bubbles suite (34 checks) in the repo harness; the axe contrast matrix is now 16 runs (360/390/1280 x dark/light x EN/CS) and passes. - SW cache -> freezmo-v31; README decision 46. Full suite: 11/11 suites, 424 checks.
This commit is contained in:
parent
dbd5dfbc58
commit
6b6a6ea158
9 changed files with 419 additions and 31 deletions
25
README.md
25
README.md
|
|
@ -1072,8 +1072,29 @@ Things I chose while building, with the reasoning:
|
|||
(native), i18n, the freeze loading screen, Smart Review, and phases 1–3 (backup/sync/usage
|
||||
limits, the learning engine, homework check/follow-ups). Suites that need a stub Ollama or
|
||||
VAPID keys start their own `next start` instance on a spare port, verify the port is free and
|
||||
kill the process group on exit; test scratch stays in `tests/.tmp/` (gitignored). 379 checks
|
||||
across the ten suites.
|
||||
kill the process group on exit; test scratch stays in `tests/.tmp/` (gitignored). Eleven suites,
|
||||
424 checks.
|
||||
|
||||
46. **The ice orbs are rising bubbles now, composited and cheaper to read through.** The glossy
|
||||
orbs (the glacier blobs stay exactly as they were) rise from below the bottom edge to above the
|
||||
top edge, each with its own 36–68 s pass (slower on phones), a negative delay so the scene is
|
||||
already populated on load, its own horizontal position, a gentle sway and a slight scale drift;
|
||||
opacity fades in/out near the edges so the loop never pops. Only `transform` and `opacity`
|
||||
animate, each orb owns a composited layer (`will-change: transform`), there is no
|
||||
filter/backdrop-filter on them, and nothing animates size, offsets or shadow. Opacity dropped
|
||||
~38% in both themes (0.55→0.34 light, 0.8→0.5 dark; phone overrides 0.32→0.2 / 0.42→0.26) so
|
||||
the background reads through while the gloss stays soft. Under `prefers-reduced-motion` the
|
||||
rise is removed and the orbs return to their old static placements — a paused-from-the-start
|
||||
CSS animation is not applied at all in Chrome (`getAnimations()` is empty), which would have
|
||||
parked them below the fold; while the tab is hidden a visibility listener parks the whole scene
|
||||
(`.ice-paused`), which also freezes the blob drift. Measured with a CDP performance trace on a
|
||||
4× throttled phone profile (390×844 @2x): p95 33.4 ms, zero frames over 34 ms and no long tasks
|
||||
— identical to the pre-change baseline — for ~0.6% extra main-thread CPU; the desktop scene
|
||||
stays compositor-bound from the pre-existing blob drift, exactly as before. Verified by the
|
||||
bubbles suite (34 checks: scene stacking/layout contract, keyframes only transform+opacity,
|
||||
rise/sway/scale/fade phases, per-breakpoint counts 5/3/2, phone pacing, reduced motion,
|
||||
tab-hidden parking) plus the 16-run axe contrast matrix (360/390/1280 × dark/light × EN/CS).
|
||||
`tests/bubble-perf.mjs` keeps the measurement repeatable.
|
||||
|
||||
36. **The mobile declutter pass reshapes, it doesn't fork.** Phones (≤639px) get a 3-step deck
|
||||
flow and a 2-step homework flow that share the exact state and handlers with the desktop
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue