github-such-software/such.software
1
0
Fork 0
mirror of https://github.com/Such-Software/such.software.git synced 2026-10-17 05:32:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Cut desktop TBT: splash idle animations framer-motion -> CSS; lighten nebula

Browse Source 
- The splash's always-on animations (logo float/breath, the two traveling
  glow rings) move from framer-motion (JS rAF every frame on the main thread)
  to CSS keyframes (browser/compositor). framer now only drives the one-shot
  click-to-enter water exit.
- Nebula: density 8 -> 4 and dropped the scroll parallax (the Forced-reflow
  source); reduced-motion still gets the static background.
This commit is contained in:
jwinterm
2026-06-06 17:16:13 -04:00
parent c9b6803a77
commit a5815e20ee
3 changed files with 29 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/globals.css
+12
View File
@@ -228,3 +228,15 @@
scroll-behavior: auto !important;
}
}
/* Splash hero idle animations as CSS (browser/compositor driven) instead of
framer-motion, so they cost no JS main-thread time. The reduced-motion block
above neutralizes them. */
@keyframes splash-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes splash-breath { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; } }
@keyframes splash-ring-a { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
@keyframes splash-ring-b { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1; } }
.splash-float { animation: splash-float 6s ease-in-out infinite; }
.splash-breath { animation: splash-breath 5s ease-in-out infinite; }
.splash-ring-a { animation: splash-ring-a 5s linear infinite; }
.splash-ring-b { animation: splash-ring-b 7s linear infinite; }