Laser Scan Line

<!-- Laser Scan Line — a light band sweeps the panel top to bottom -->
<div class="nuda-ne2-scanline">
  <span class="nuda-ne2-scanline__beam" aria-hidden="true"></span>
  <span class="nuda-ne2-scanline__label">SCANNING…</span>
</div>

.nuda-ne2-scanline {
  position: relative;
  width: 200px;
  height: 120px;
  background: #0c0c10;
  border: 1px solid rgba(228,255,84,.15);
  border-radius: 10px;
  overflow: hidden;
}

.nuda-ne2-scanline__beam {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26px;
  background: linear-gradient(180deg,rgba(228,255,84,0) 0%,rgba(228,255,84,.55) 50%,rgba(228,255,84,0) 100%);
  filter: blur(1px);
  transform: translateY(-30px);
  animation: _nuda-ne2scanline 2.6s ease-in-out infinite;
}

.nuda-ne2-scanline__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: .14em;
  color: #cfcfcf;
}

@keyframes _nuda-ne2scanline {
  0% {
    transform: translateY(-30px);
  }
  50% {
    transform: translateY(124px);
  }
  100% {
    transform: translateY(-30px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ne2-scanline__beam {
    animation: none;
    transform: translateY(40px);
    opacity: .8;
  }
}