VHS Tape Band

<!-- VHS Tape Band — drifting tracking bar over noise -->
<div class="nuda-ng2-vhs-band">
  <div class="nuda-ng2-vhs-band__glitch" aria-hidden="true"></div>
  <span class="nuda-ng2-vhs-band__label">PLAY ▸ SP</span>
  <div class="nuda-ng2-vhs-band__tracking" aria-hidden="true"></div>
</div>

.nuda-ng2-vhs-band {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 130px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg,#0e0e10,#09090b);
  display: flex;
  align-items: flex-end;
  padding: 10px 12px;
  isolation: isolate;
}

.nuda-ng2-vhs-band__glitch {
  position: absolute;
  inset: -40%;
  width: 180%;
  height: 180%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: .16;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: _nuda-ng2vhsband-noise .5s steps(4) infinite;
}

.nuda-ng2-vhs-band__tracking {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: linear-gradient(180deg,transparent,rgba(228,255,84,.35) 45%,rgba(228,255,84,.5) 50%,rgba(228,255,84,.35) 55%,transparent);
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
  animation: _nuda-ng2vhsband-track 5s linear infinite;
}

.nuda-ng2-vhs-band__label {
  position: relative;
  z-index: 1;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #e4ff54;
  text-shadow: 1px 0 rgba(255,80,120,.5),-1px 0 rgba(80,220,255,.4);
}

@keyframes _nuda-ng2vhsband-noise {
  0% {
    transform: translate3d(0,0,0);
  }
  25% {
    transform: translate3d(-3px,2px,0);
  }
  50% {
    transform: translate3d(2px,-3px,0);
  }
  75% {
    transform: translate3d(-2px,-1px,0);
  }
  100% {
    transform: translate3d(0,0,0);
  }
}

@keyframes _nuda-ng2vhsband-track {
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(144px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ng2-vhs-band__glitch {
    animation: none;
    opacity: .1;
  }
  .nuda-ng2-vhs-band__tracking {
    animation: none;
    opacity: 0;
  }
}