Gradient Mask Marquee

<!--
  A mask-image on the viewport fades both edges to transparent, so items enter
  and leave instead of popping at a hard border. -webkit-mask-image is repeated
  for Safari. The mask is on the clipping strip, never the animated track.
-->
<style>
  @keyframes marquee-mask-scroll {
    to { transform: translateX(-50%); }
  }
</style>

<section
  class="w-full overflow-hidden py-8 [mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)] [-webkit-mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)]"
  aria-label="Featured brands"
>
  <div class="flex w-max animate-[marquee-mask-scroll_28s_linear_infinite] motion-reduce:w-full motion-reduce:animate-none">
    <ul class="flex shrink-0 items-center gap-12 pr-12 motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-4 motion-reduce:pr-0">
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-600 dark:text-gray-300">Vertex</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-600 dark:text-gray-300">Lumen</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-600 dark:text-gray-300">Cobalt</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-600 dark:text-gray-300">Aurora</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-600 dark:text-gray-300">Nimbus</li>
    </ul>
    <ul class="flex shrink-0 items-center gap-12 pr-12 motion-reduce:hidden" aria-hidden="true">
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-600 dark:text-gray-300">Vertex</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-600 dark:text-gray-300">Lumen</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-600 dark:text-gray-300">Cobalt</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-600 dark:text-gray-300">Aurora</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-600 dark:text-gray-300">Nimbus</li>
    </ul>
  </div>
</section>