danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

sidebar orbs: drop scale() from the drift so the blur stops re-rasterizing (#935)

Browse source 
same antipattern as the dash-card blobs: .sidebar::before/::after are blur(28px) and the
orb keyframes animated transform: scale() infinitely → the GPU re-blurred them every frame,
on every page (the sidebar is always visible). keep the translate drift + opacity (both
compositor-only, the blur layer just moves), remove the scale. same look, no per-frame reblur.
This commit is contained in:
BoulderBadgeDad 2026-06-27 11:34:37 -07:00
parent bce6a91aa2
commit 9faaf5c50c
1 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
webui/static/style.css
View file

@ -142,18 +142,21 @@ body.reduce-effects .sidebar::after {
display: none !important;
}
/* translate + opacity only — NO scale(). The orbs are blur(28px); scaling a blurred
element re-rasterizes the blur every frame, but translating it just moves the cached
layer on the compositor (free). Same drifting glow, no per-frame re-blur (#935). */
@keyframes sidebar-orb-1 {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
25% { transform: translate(30px, 80px) scale(1.2); opacity: 1; }
50% { transform: translate(-10px, 180px) scale(0.9); opacity: 0.6; }
75% { transform: translate(20px, 50px) scale(1.15); opacity: 0.9; }
0%, 100% { transform: translate(0, 0); opacity: 0.5; }
25% { transform: translate(30px, 80px); opacity: 1; }
50% { transform: translate(-10px, 180px); opacity: 0.6; }
75% { transform: translate(20px, 50px); opacity: 0.9; }
}
@keyframes sidebar-orb-2 {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
30% { transform: translate(-20px, -100px) scale(1.25); opacity: 0.4; }
60% { transform: translate(30px, -50px) scale(0.85); opacity: 1; }
80% { transform: translate(-10px, 40px) scale(1.1); opacity: 0.5; }
0%, 100% { transform: translate(0, 0); opacity: 0.6; }
30% { transform: translate(-20px, -100px); opacity: 0.4; }
60% { transform: translate(30px, -50px); opacity: 1; }
80% { transform: translate(-10px, 40px); opacity: 0.5; }
}
.sidebar > * {