Skip to content

Animation causing high GPU usage #1368

Description

@KursatKonak

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:

  1. 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).
  2. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions