Animated Horizontal Logo Marquee Slider

<section class="relative w-full overflow-hidden py-8" style="mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);">
  <!-- 200% track that slides by 50% -->
  <div class="flex w-[200%] animate-marquee-x hover:[animation-play-state:paused]" style="--duration: 40s;">
    <!-- First half -->
    <ul class="flex w-1/2 shrink-0 items-center">
      <!-- Each item gets equal space with flex-1 -->
      <li class="flex-1 text-center px-8 py-3">Apple</li>
      <li class="flex-1 text-center px-8 py-3">Google</li>
      <li class="flex-1 text-center px-8 py-3">Figma</li>
      <li class="flex-1 text-center px-8 py-3">Stripe</li>
      <li class="flex-1 text-center px-8 py-3">Linear</li>
      <li class="flex-1 text-center px-8 py-3">Notion</li>
    </ul>

    <!-- Duplicate half (must match 1:1 for a seamless loop) -->
    <ul class="flex w-1/2 shrink-0 items-center" aria-hidden="true">
      <li class="flex-1 text-center px-8 py-3">Apple</li>
      <li class="flex-1 text-center px-8 py-3">Google</li>
      <li class="flex-1 text-center px-8 py-3">Figma</li>
      <li class="flex-1 text-center px-8 py-3">Stripe</li>
      <li class="flex-1 text-center px-8 py-3">Linear</li>
      <li class="flex-1 text-center px-8 py-3">Notion</li>
    </ul>
  </div>
  <style>
    @keyframes marquee-x {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    .animate-marquee-x {
      animation: marquee-x var(--duration, 30s) linear infinite;
    }

    @media (prefers-reduced-motion: reduce) {
      .animate-marquee-x {
        animation: none;
        transform: none;
      }
    }
  </style>
</section>