I just removed this animation block, wanted to share my findings.
Root Cause Found
The high GPU consumption on login.tsx (and across the entire frontend apps) was caused by the continuous CSS animation fsh-aurora applied to body:
@keyframes fsh-aurora {
0% { background-position: 0% 0%, 100% 0%; }
50% { background-position: 6% 3%, 94% 5%; }
100% { background-position: 0% 0%, 100% 0%; }
}
@media (prefers-reduced-motion: no-preference) {
body {
background-size: 130% 130%, 130% 130%;
animation: fsh-aurora 72s var(--ease-in-out-cubic) infinite;
}
}
Why this consumed high GPU:
- Uncomposited Animation Property: In web browsers, animating
background-position cannot be offloaded to the GPU compositor thread like transform or opacity. It triggers continuous style recalculations and full-screen paint invalidations on every frame at the monitor's full refresh rate (e.g., 144Hz / 165Hz / 240Hz).
- Layer Invalidation Cascade: Because the root
body background changed every 6ms:
- The fixed overlay in
body::before with mix-blend-mode: multiply had to perform a full-screen GPU blend pass every frame.
- The atmospheric background orbs (
blur-[140px], blur-[120px], blur-[80px]) and the login card's backdrop-blur-xl filter had to re-run expensive multi-pass Gaussian blur fragment shaders continuously on idle.
Fix Applied
Removed the continuous fsh-aurora infinite background animation and unused keyframes from:
clients/dashboard/src/styles/globals.css
clients/admin/src/styles/globals.css
Verification
- Idle Animations: Verified via browser evaluation that running document animations on
/login dropped from continuous 165 FPS down to 0 running animations when idle.
- Visual Appearance: Verified with full-page screenshot that the static subtle brand radial gradient, card elevation, and aesthetic remain identical and intact.
- Builds: Ran
npm run build on both clients/dashboard and clients/admin; both completed with 0 errors.
I just removed this animation block, wanted to share my findings.
Root Cause Found
The high GPU consumption on login.tsx (and across the entire frontend apps) was caused by the continuous CSS animation
fsh-auroraapplied tobody:Why this consumed high GPU:
background-positioncannot be offloaded to the GPU compositor thread liketransformoropacity. It triggers continuous style recalculations and full-screen paint invalidations on every frame at the monitor's full refresh rate (e.g., 144Hz / 165Hz / 240Hz).bodybackground changed every 6ms:body::beforewithmix-blend-mode: multiplyhad to perform a full-screen GPU blend pass every frame.blur-[140px],blur-[120px],blur-[80px]) and the login card'sbackdrop-blur-xlfilter had to re-run expensive multi-pass Gaussian blur fragment shaders continuously on idle.Fix Applied
Removed the continuous
fsh-aurorainfinite background animation and unused keyframes from:clients/dashboard/src/styles/globals.cssclients/admin/src/styles/globals.cssVerification
/logindropped from continuous 165 FPS down to 0 running animations when idle.npm run buildon bothclients/dashboardandclients/admin; both completed with 0 errors.