Hard Edge-Fade Marquee

<div class="nuda-mq2-hard-edge" aria-hidden="true">
  <div class="nuda-mq2-hard-edge__track">
    <div class="nuda-mq2-hard-edge__item">FAST</div>
    <div class="nuda-mq2-hard-edge__item">LIGHT</div>
    <div class="nuda-mq2-hard-edge__item">FLEXIBLE</div>
    <div class="nuda-mq2-hard-edge__item">OPEN</div>
    <!-- Duplicate the items above for a seamless loop -->
    <div class="nuda-mq2-hard-edge__item">FAST</div>
    <div class="nuda-mq2-hard-edge__item">LIGHT</div>
    <div class="nuda-mq2-hard-edge__item">FLEXIBLE</div>
    <div class="nuda-mq2-hard-edge__item">OPEN</div>
  </div>
</div>

.nuda-mq2-hard-edge {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 280px;
  background: #0d0d0f;
  border-radius: 6px;
  padding: 10px 0;
  mask-image: linear-gradient(90deg,transparent 0,transparent 4%,#000 6%,#000 94%,transparent 96%,transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,transparent 0,transparent 4%,#000 6%,#000 94%,transparent 96%,transparent 100%);
}

.nuda-mq2-hard-edge::before,.nuda-mq2-hard-edge::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(228,255,84,.5);
  z-index: 1;
}

.nuda-mq2-hard-edge::before {
  left: 6%;
}

.nuda-mq2-hard-edge::after {
  right: 6%;
}

.nuda-mq2-hard-edge__track {
  display: flex;
  width: max-content;
  gap: 16px;
  padding: 0 14px;
  animation: _nuda-mq2hardedge 14s linear infinite;
}

.nuda-mq2-hard-edge__item {
  flex: none;
  font-size: .65rem;
  font-weight: 700;
  color: #fafafa;
  white-space: nowrap;
  background: rgba(255,255,255,.05);
  border-radius: 6px;
  padding: 5px 10px;
}

.nuda-mq2-hard-edge:hover .nuda-mq2-hard-edge__track {
  animation-play-state: paused;
}

@keyframes _nuda-mq2hardedge {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-mq2-hard-edge__track {
    animation: none;
  }
}