perf(store): fix packs tab stutter (animated drop-shadow filters + per-tile backdrop blur) - #4821
Merged
Conversation
…er-tile backdrop blur The store packs tab ran three infinite CSS animations per plutonium icon, including one animating filter: drop-shadow (re-rasterized every frame) and a 0.15s sub-pixel jiggle, over a grid where every cosmetic tile also had backdrop-filter: blur(8px). Any one of these animations forced the whole blurred scene to re-render each frame: with the production catalog the packs tab measured ~18fps (median frame 50ms) in a software-rendered harness, and 60fps with the icon animations paused. - PlutoniumIcon: pulse now animates opacity/scale of a pre-blurred radial-gradient glow layer (compositor-only) with a static drop-shadow on the icon; the jiggle is removed; the 7s rotation stays. - CosmeticContainer: drop the per-tile backdrop blur — tile backgrounds are ~85% opaque gradients over the already-blurred modal shell, so it was invisible but multiplied blur surfaces (867 -> 21). Same harness after the change: ~39fps with all animations running, and a 16.7ms median frame once the modal-shell blur (GPU-trivial on real hardware) is excluded. Visuals are unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
WalkthroughThe changes remove an ineffective tile blur and update Plutonium icon animations. The icon now uses opacity, transforms, a radial-gradient glow, and a static image shadow. ChangesCosmetic rendering updates
Estimated code review effort: 2 (Simple) | ~10 minutes Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
github-project-automation
Bot
moved this from Triage
to Complete
in OpenFront Release Management
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 store's packs tab on openfront.io is slow and stuttery, while local dev feels fine. Local dev has no API, so no packs render — the regression only appears when pack tiles are present.
Diagnosis
Reproduced production locally by intercepting
cosmetics.jsonwith the real prod catalog (7 plutonium packs) and measuring the store in a headless-Chromium harness:Each
plutonium-iconruns three infinite CSS animations, and any one of them alone tanks the tab to ~16fps:plutonium-pulseanimatesfilter: drop-shadow(...)(2–3 stacked shadows) — not compositor-animatable, re-rasterizes the icon every frameplutonium-jiggle— a 0.15s infinite ±0.4px jitter, visually imperceptible but keeps the compositor permanently busyplutonium-rotate— fine by itself in principle, but every animated frame re-renders a scene containing 867 elements withbackdrop-filter: blur(8px)(every cosmetic tile + modal shell)A devtools trace confirmed the main thread is nearly idle — the cost is all compositor/raster work, which is exactly what stutters iGPU/mid-range machines.
plutonium-iconis also used in the headercurrency-display, so logged-in users paid this cost outside the packs grid too.Fix
opacity/transform(compositor-only), with a static drop-shadow on the icon; the jiggle is removed; the 7s rotation stays.will-changehints added.backdrop-filter: blur(8px). Tile backgrounds are ~85%-opaque gradients over the already-blurred modal shell, so the per-tile blur is visually invisible — but it multiplied blur surfaces 867 → 21.Results
Same harness after the change: ~39fps with all animations running (up from 17.7), and the median frame reaches 16.7ms (60fps) once the modal-shell blur — trivial for real GPUs, slow only under the harness's software rasterizer — is excluded. Before/after screenshots are visually identical (glow pulse look preserved).
Caveat: absolute numbers come from software-rendered headless Chromium, which exaggerates raster cost; the eliminated work (per-frame filter rasterization × dozens of blur surfaces) is what matters on real hardware.
🤖 Generated with Claude Code