indrajith/retrowave-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes and Features

Browse Source 
* 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
This commit is contained in:
Indrajith K L
2025-07-02 00:28:45 +05:30
parent db6f27849f
commit b0241787ea
2 changed files with 129 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
hg.css
View File

@@ -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);
}
}