Rounds 12-14 — fluidity overhaul + real-vs-shell architecture (lib v2.3.5)#28
Merged
Conversation
Library-side share of the round-12 fluidity work : - useAudioStore: eqBars triggerRef notifications capped at 30 Hz (analyser still sampled per frame ; consumers re-render half as often — the 4-bar chrome is visually identical at half rate) - EqBarsRow.vue: the per-instance eq DOM extracted into one shared renderer component used by MusicPlayer + MiniPlayer - byte-identical gate baseline moved v2.3.4 -> v2.3.5 (tag pushed with this PR ; PULSE_LIB_BASELINE_REF still overrides) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ture Measured root causes (2560x1440, prod build, headed GPU) : - per-frame filter pumps on hero glow/backdrop -> opacity/transform - 5 always-on rAF loops (orbit orbs blur(60px)+blend stepped 60 Hz even offscreen) -> IntersectionObserver-gated, orbs 30 Hz - scroll-driven font-variation-settings on the 96px headline (full text relayout per frame) -> static weight - content-visibility:auto on plain sections (pinned showcases exempt) - 25 full MusicPlayer instances -> 5 real + 11 pre-rendered WebP shells (PlayerShell.vue, 284 kB total) ; Pick-a-mood keeps ONE live player, clicking a shell moves it there ; reveal mobile slides now mount only at <=720px Numbers (same protocol before/after) : idle paused p50 6.1 ms 0% jank ; idle playing 36-48 -> 18.1 ms (1% jank) ; scroll-while-playing jank 63-99% -> 30% ; live backdrop-filters 29 -> 9, blur layers 45 -> 20. Shell pipeline : npm run generate:shells (showcase rig + sharp), regenerate after any lib visual change. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ures Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The demo was heavily janky on a 2K desktop even with audio paused (user report, RTX 3060).
Measured root causes
filterpumps on hero glow/backdrop (viewport-sized re-raster every frame while playing)font-variation-settingson the 96px headline (full text relayout per scrolled frame)Fixes
content-visibility: autoon plain sections (pinned showcases exempt)npm run generate:shellspipeline committed). Pick-a-mood keeps ONE live player — clicking a shell moves it. Reveal mobile slides mount only ≤720px.Numbers (same protocol, headed GPU 2K)
idle playing p50 36-48 → 18.1 ms (1% jank) · scroll-while-playing jank 63-99% → 30% · idle paused 6.1 ms, 0% jank · backdrop-filters 29 → 9
Validation
ci exit=0 (88 tests, 0 vulns, byte-identical v2.3.5 ✓) · consumer-smoke 4/4 · visual 2/2 · responsive 6/6 · Axe AA 2/2
🤖 Generated with Claude Code