사이버펑크

<div class="hud">
  <div class="scan"></div>
  <span class="tag">SYS//ONLINE</span>
  <h1 id="title">ACCESS</h1>
  <div class="bar"><i></i></div>
</div>

.hud{position:relative;width:min(88%,320px);padding:22px;background:#0a0a12;overflow:hidden;
  clip-path:polygon(0 0,92% 0,100% 16%,100% 100%,8% 100%,0 84%);
  border:1px solid #2fe0ff;box-shadow:0 0 18px rgba(47,224,255,.35),inset 0 0 20px rgba(255,0,200,.08)}
.scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);
  animation:roll 6s linear infinite}
@keyframes roll{to{background-position:0 60px}}
.tag{font:700 10px/1 ui-monospace,monospace;color:#2fe0ff;letter-spacing:.16em}
h1{margin:10px 0 16px;font-family:"Arial Black",sans-serif;font-size:clamp(24px,6vmin,34px);
  letter-spacing:.05em;color:#fff;text-shadow:0 0 8px #ff2fd0}
h1.glitch{animation:gl .22s steps(3) 2}
@keyframes gl{
  0%{clip-path:inset(0 0 0 0)}
  20%{transform:translate(-3px,0);text-shadow:2px 0 #ff2fd0,-2px 0 #2fe0ff}
  40%{transform:translate(3px,0);text-shadow:-2px 0 #ff2fd0,2px 0 #2fe0ff}
  60%{transform:translate(-2px,0)}
  100%{transform:translate(0,0);text-shadow:0 0 8px #ff2fd0}
}
.bar{height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;width:30%;background:linear-gradient(90deg,#2fe0ff,#ff2fd0);
  animation:load 2.4s ease-in-out infinite}
@keyframes load{0%{width:10%}50%{width:88%}100%{width:10%}}

const h1 = document.getElementById('title');
setInterval(() => {
  h1.classList.remove('glitch');
  void h1.offsetWidth;
  h1.classList.add('glitch');
}, 1800);