Lime Edge Wipe

<div class="nuda-vt2-lime-edge-wipe" aria-hidden="true">
  <div class="nuda-vt2-lime-edge-wipe__back"></div>
  <div class="nuda-vt2-lime-edge-wipe__front"></div>
  <div class="nuda-vt2-lime-edge-wipe__edge"></div>
</div>

.nuda-vt2-lime-edge-wipe-demo {
  padding: .5rem;
}

.nuda-vt2-lime-edge-wipe {
  position: relative;
  width: 160px;
  height: 88px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
}

.nuda-vt2-lime-edge-wipe__back {
  position: absolute;
  inset: 0;
  background: #18181b;
}

.nuda-vt2-lime-edge-wipe__front {
  position: absolute;
  inset: 0;
  background: #1f2937;
  animation: _nuda-vt2limewipe 2.6s cubic-bezier(.65,0,.35,1) infinite alternate;
}

.nuda-vt2-lime-edge-wipe__edge {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -6%;
  width: 10px;
  background: linear-gradient(180deg,transparent,#e4ff54,transparent);
  box-shadow: 0 0 12px 2px rgba(228,255,84,.7);
  transform: skewX(-12deg) translateX(0%);
  animation: _nuda-vt2limeedge 2.6s cubic-bezier(.65,0,.35,1) infinite alternate;
}

@keyframes _nuda-vt2limewipe {
  0% {
    clip-path: polygon(0% 0%,0% 0%,-15% 100%,-15% 100%);
  }
  100% {
    clip-path: polygon(0% 0%,115% 0%,100% 100%,-15% 100%);
  }
}

@keyframes _nuda-vt2limeedge {
  0% {
    transform: skewX(-12deg) translateX(-40px);
  }
  100% {
    transform: skewX(-12deg) translateX(190px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-vt2-lime-edge-wipe__front {
    animation: none;
    clip-path: polygon(0% 0%,115% 0%,100% 100%,-15% 100%);
  }
  .nuda-vt2-lime-edge-wipe__edge {
    animation: none;
    opacity: 0;
  }
}