From b0241787eada6d21612c57571b011bea863f01f1 Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Wed, 2 Jul 2025 00:28:45 +0530 Subject: Fixes and Features * Fixes ENTER button doesn't close the intro modal * Implements glitch effect for Terminal * Pressing ENTER button on intro modal will now close the modal --- hg.css | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) (limited to 'hg.css') diff --git a/hg.css b/hg.css index 389b497..145bf34 100644 --- a/hg.css +++ b/hg.css @@ -1615,3 +1615,77 @@ canvas { inset 0 -1px 0 rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.3); } + +/* Terminal Overlay Glitch Animations */ +.terminal-overlay { + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; +} + +.terminal-overlay.open { + visibility: visible; + opacity: 1; + animation: terminalGlitchIn 1.2s ease-out forwards; +} + +.terminal-overlay.closing { + animation: terminalGlitchOut 0.8s ease-in forwards; +} + +@keyframes terminalGlitchIn { + 0% { + opacity: 0; + transform: scale(0.7) translateX(0); + filter: hue-rotate(0deg) saturate(1) brightness(1); + } + 8% { + opacity: 0.2; + transform: scale(0.8) translateX(-30px); + filter: hue-rotate(120deg) saturate(4) brightness(1.5); + } + 12% { + opacity: 0.6; + transform: scale(1.15) translateX(25px); + filter: hue-rotate(-60deg) saturate(3) brightness(0.8); + } + 16% { + opacity: 0.3; + transform: scale(0.75) translateX(-15px); + filter: hue-rotate(200deg) saturate(5) brightness(1.8); + } + 20% { + opacity: 0.8; + transform: scale(1.08) translateX(12px); + filter: hue-rotate(-100deg) saturate(2) brightness(0.6); + } + 100% { + opacity: 1; + transform: scale(1) translateX(0); + filter: hue-rotate(0deg) saturate(1) brightness(1); + } +} + +@keyframes terminalGlitchOut { + 0% { + opacity: 1; + transform: scale(1) translateX(0); + filter: hue-rotate(0deg) saturate(1) brightness(1); + } + 15% { + opacity: 0.8; + transform: scale(1.02) translateX(2px); + filter: hue-rotate(30deg) saturate(2) brightness(1.2); + } + 50% { + opacity: 0.2; + transform: scale(0.8) translateX(-12px); + filter: hue-rotate(-120deg) saturate(5) brightness(0.5); + } + 100% { + opacity: 0; + visibility: hidden; + transform: scale(0.4) translateX(0); + filter: hue-rotate(0deg) saturate(1) brightness(1); + } +} -- cgit v1.2.3