Logo marquee

/* Add once to globals.css:
@keyframes marquee { to { transform: translateX(-50%); } }
*/

const logos = ["Northwind", "Blue Pine", "Halcyon", "Larkspur", "Meridian", "Tidewell", "Oakline", "Quarry & Co"];

export function LogoMarquee() {
  // The list is rendered twice; moving the track by half its width loops seamlessly.
  const row = [...logos, ...logos];
  return (
    <section aria-label="Customers" className="bg-bg py-12 font-sans">
      <p className="mb-5 text-center text-[13px] text-fg-subtle">Trusted by finance teams at 2,400 companies</p>
      <div className="group relative overflow-hidden [mask-image:linear-gradient(90deg,transparent,var(--tst-fg)_12%,var(--tst-fg)_88%,transparent)]">
        <ul className="flex w-max animate-[marquee_34s_linear_infinite] group-hover:[animation-play-state:paused] group-focus-within:[animation-play-state:paused] motion-reduce:animate-none">
          {row.map((name, i) => (
            <li
              key={i}
              aria-hidden={i >= logos.length || undefined}
              className="flex h-11 items-center whitespace-nowrap px-8 text-lg font-semibold tracking-tight text-fg-muted transition-colors hover:text-fg"
            >
              {name}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}