terminal
╭───────────────────────────────────────────────╮
│               L Y R I C O D E S              │
│          Advanced Terminal Interface          │
╰───────────────────────────────────────────────╯
♕
.glitch { animation: glitch 0.3s infinite; } @keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0); } } .broken-screen { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; overflow: hidden; } .broken-screen-cracks { position: absolute; inset: 0; pointer-events: none; } .crack { position: absolute; background: rgba(255, 0, 0, 0.1); box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); } .crack-1 { top: 0; left: 20%; width: 2px; height: 30%; transform: rotate(45deg); } .crack-2 { top: 50%; right: 15%; width: 2px; height: 40%; transform: rotate(-30deg); } .crack-3 { bottom: 10%; left: 35%; width: 2px; height: 50%; transform: rotate(15deg); } .crack-4 { top: 25%; right: 40%; width: 2px; height: 35%; transform: rotate(-60deg); } .crack-5 { bottom: 30%; left: 25%; width: 2px; height: 45%; transform: rotate(75deg); } .crack-6 { top: 15%; left: 45%; width: 2px; height: 25%; transform: rotate(-45deg); } .crack-7 { bottom: 20%; right: 30%; width: 2px; height: 30%; transform: rotate(30deg); } .destructing { animation: glitch 0.3s infinite; } .destruct-letter { display: inline-block; animation: letter-glitch 0.2s infinite; } .destruct-text { color: #ff0000; text-shadow: 0 0 10px rgba(255, 0, 0, 0.7); animation: pulse 1s infinite; } .pulse-border { animation: border-pulse 1s infinite; } @keyframes letter-glitch { 0% { transform: translate(0); opacity: 1; } 50% { transform: translate(1px, -1px); opacity: 0.7; } 100% { transform: translate(0); opacity: 1; } } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes border-pulse { 0% { border-color: rgba(255, 0, 0, 0.5); } 50% { border-color: rgba(255, 0, 0, 1); } 100% { border-color: rgba(255, 0, 0, 0.5); } }