GTA
/
training-academy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

PERFORMANCE FIX: Optimize synthwave effects for smoother performance 

MAJOR OPTIMIZATIONS:
- Removed expensive filter: hue-rotate() from VHS glitch (was causing GPU strain)
- Reduced text-shadow blur radius from 80px to 20px max
- Slowed animation cycles: VHS glitch 12s20s, neon flicker 4s6s, scanline 8s12s
- Removed backdrop-filter: blur() from hero features (very expensive)
- Reduced 3D grid translateZ from 20px to 10px
- Added will-change: transform to grid for GPU optimization
- Limited scanning line to small area instead of full viewport
- Reduced grid opacity for lighter rendering

PERFORMANCE IMPROVEMENTS:
 Eliminated heavy GPU filter operations
 Reduced repainting frequency
 Optimized animation timing
 Lighter visual effects while maintaining aesthetic
 Should resolve latency/lag issues

Visual quality maintained while significantly improving performance
This commit is contained in:
dilgenfritz 2025-11-03 06:31:51 -06:00
parent 2f0f78cc08
commit 34261fcfa9
1 changed files with 22 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/styles/styles.css
View File

@ -199,9 +199,9 @@ body {
top: 0;
left: 0;
width: 100%;
height: 2px;
height: 1px;
background: linear-gradient(90deg, transparent, #00ffff, transparent);
animation: scanline 8s linear infinite;
animation: scanline 12s linear infinite;
z-index: 10;
}
@ -213,16 +213,17 @@ body {
height: 120%;
transform: translate(-50%, -50%) perspective(1000px) rotateX(60deg);
background-image:
linear-gradient(rgba(255, 0, 255, 0.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 0, 255, 0.3) 1px, transparent 1px);
linear-gradient(rgba(255, 0, 255, 0.2) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 0, 255, 0.2) 1px, transparent 1px);
background-size: 50px 50px;
animation: gridFloat 8s ease-in-out infinite alternate;
animation: gridFloat 12s ease-in-out infinite;
z-index: 1;
will-change: transform;
}
@keyframes gridFloat {
from { transform: translate(-50%, -50%) perspective(1000px) rotateX(60deg) translateZ(0); }
to { transform: translate(-50%, -50%) perspective(1000px) rotateX(60deg) translateZ(20px); }
0%, 100% { transform: translate(-50%, -50%) perspective(1000px) rotateX(60deg) translateZ(0); }
50% { transform: translate(-50%, -50%) perspective(1000px) rotateX(60deg) translateZ(10px); }
}
@keyframes synthwaveMove {
@ -258,32 +259,25 @@ body {
gap: var(--space-sm);
}
/* VHS Glitch Effect */
/* PERFORMANCE OPTIMIZED VHS Glitch Effect - Reduced frequency */
@keyframes vhsGlitch {
0%, 100% {
0%, 98% {
transform: translateX(0);
filter: hue-rotate(0deg);
}
1% {
transform: translateX(-1px);
}
2% {
transform: translateX(-2px);
filter: hue-rotate(90deg);
}
4% {
transform: translateX(2px);
filter: hue-rotate(180deg);
}
6% {
transform: translateX(0);
filter: hue-rotate(0deg);
transform: translateX(1px);
}
}
/* Synthwave Scanning Line Effect */
/* PERFORMANCE OPTIMIZED Scanning Line - Reduced to small area */
@keyframes scanline {
0% { transform: translateY(-100vh); opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { transform: translateY(100vh); opacity: 0; }
0% { transform: translateY(-20px); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(120px); opacity: 0; }
}
.hero-title-main {
@ -292,13 +286,11 @@ body {
font-weight: 400;
color: #ff00ff;
text-shadow:
0 0 20px #ff00ff,
0 0 40px #ff00ff,
0 0 80px #ff00ff,
0 4px 8px rgba(0, 0, 0, 0.8);
0 0 10px #ff00ff,
0 0 20px #ff00ff;
text-transform: uppercase;
letter-spacing: 8px;
animation: neonFlicker 4s ease-in-out infinite, vhsGlitch 12s ease-in-out infinite;
animation: neonFlicker 6s ease-in-out infinite, vhsGlitch 20s ease-in-out infinite;
line-height: 0.9;
}
@ -360,7 +352,6 @@ body {
transition: all 0.3s ease;
position: relative;
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
backdrop-filter: blur(10px);
}
.hero-feature:hover {