hero-v2: boost sweep opacity 2.5x, add glow pulse animation

- Sweep peak: 0.06 → 0.15 (green), 0.025 → 0.04 (white)
- Glow now pulses via CSS @keyframes (opacity 0.7 ↔ 1, scale 1 ↔ 1.05)
- Hover: glow jumps to opacity 1.3 + scale 1.08 + sweep accelerates
This commit is contained in:
neo committed 2026-06-21 21:15:08 +05:00
1 parent af8b30e51d
commit d1fd87d9ee
1 file changed
+20 -7
+20 -7
View File
@@ -70,6 +70,11 @@ body {
);
z-index: 1;
pointer-events: none;
animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
/* Layer 3: Animated gradient sweep */
@@ -78,11 +83,11 @@ body {
background: linear-gradient(
90deg,
transparent 0%,
transparent 32%,
rgba(255,255,255,0.025) 44%,
rgba(34,197,94,0.06) 50%,
rgba(255,255,255,0.02) 56%,
transparent 68%,
transparent 28%,
rgba(255,255,255,0.04) 40%,
rgba(34,197,94,0.15) 50%,
rgba(255,255,255,0.03) 60%,
transparent 72%,
transparent 100%
);
background-size: 200% 100%;
@@ -358,8 +363,16 @@ let bgCurrentSpeed = 8; // lerped toward target
function accelerateBg(active) {
bgTargetSpeed = active ? 1.2 : 8;
const glow = document.querySelector('.hero-glow');
glow.style.opacity = active ? '1.15' : '1';
glow.style.transition = 'opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
if (active) {
glow.style.animation = 'none';
glow.style.opacity = '1.3';
glow.style.transform = 'translate(-50%, -50%) scale(1.08)';
glow.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
} else {
glow.style.opacity = '';
glow.style.transform = '';
glow.style.animation = '';
}
}
(function bgLoop() {