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

dashboard: stop the cursor-blob pseudo-elements re-blurring every frame (#935)

Browse source 
each .dash-card renders two accent-blob pseudo-elements — ::before is 1280x1280 blur(48px),
::after 540x540 blur(18px) + mix-blend-mode:screen — and both ran an INFINITE scale-pulse
animation. scaling a blurred element re-rasterizes the blur every frame; with 8 cards × 2
blobs that's 16 huge blurred layers re-blurring at 60fps whether or not the user touches
anything. that's the dashboard's whole-screen repaint / ~36% idle GPU.

remove the infinite pulse (the dashBlob*Pulse animations). the blob still follows the cursor
via --blob-x/y; it just no longer 'breathes' at idle, so when nothing's moving there's nothing
to repaint. trimmed will-change to the props that actually change (left/top).
This commit is contained in:
BoulderBadgeDad 2026-06-27 11:29:39 -07:00
parent 28a539a840
commit bce6a91aa2
1 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
webui/static/style.css
View file

@ -63351,8 +63351,10 @@ body[data-artist-source="source"] #artist-detail-page #library-artist-enhance-bt
opacity: 1;
pointer-events: none;
z-index: 0;
will-change: left, top, transform, opacity;
animation: dashBlobHaloPulse 5.5s ease-in-out infinite;
will-change: left, top;
/* No infinite scale-pulse: scaling a blur(48px) element re-rasterizes the blur every
frame, and with 8 cards × 2 blobs that pinned the GPU at idle (#935). The blob still
follows the cursor via --blob-x/y; it just doesn't breathe when nothing's happening. */
}
.dash-card::after {
content: '';
@ -63372,9 +63374,9 @@ body[data-artist-source="source"] #artist-detail-page #library-artist-enhance-bt
opacity: 1;
pointer-events: none;
z-index: 0;
will-change: left, top, transform, opacity;
will-change: left, top;
mix-blend-mode: screen;
animation: dashBlobCorePulse 3.7s ease-in-out infinite;
/* No infinite scale-pulse — same reason as ::before (#935). */
}
@keyframes dashBlobHaloPulse {