HyperSpaceOut/OBS-overlay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add animated gradient meter to header text based on player count

Browse Source 
CSS background-clip: text with dynamic linear-gradient replaces flat
header color. Fill sweeps left-to-right (pink to white) proportional
to playerCount/maxPlayers. Pulse glow fires when lobby is full.

Made-with: Cursor
This commit is contained in:
cottongin
2026-03-20 15:02:46 -04:00
parent d775f74035
commit 7a2f8419d5
2 changed files with 127 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
optimized-controls.html
View File

@@ -35,10 +35,24 @@
color: #f35dcb;
font-size: 80px;
font-weight: bold;
text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.8);
letter-spacing: 2px;
opacity: 0;
transition: opacity 0.5s ease;
background: linear-gradient(to right, #ffffff 0%, #ffffff 0%, #f35dcb 0%, #f35dcb 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.8));
}
@keyframes meter-full-pulse {
0% { filter: drop-shadow(3px 3px 8px rgba(0,0,0,0.8)); }
50% { filter: drop-shadow(0 0 20px rgba(255,255,255,0.6)) drop-shadow(3px 3px 8px rgba(0,0,0,0.8)); }
100% { filter: drop-shadow(3px 3px 8px rgba(0,0,0,0.8)); }
}
#header.meter-full-pulse {
animation: meter-full-pulse 0.6s ease-out;
}
#footer {