React Marquee Component

const logos = ['ACME', 'VERTEX', 'NORTHSTAR', 'ORBIT']
export function Marquee() {
  return (
    <div className="group overflow-hidden border-y py-5" aria-label="Trusted companies">
      <div className="flex w-max animate-[marquee_18s_linear_infinite] gap-12 group-hover:[animation-play-state:paused] motion-reduce:animate-none">
        {[...logos, ...logos].map((logo, i) => <span key={i} aria-hidden={i >= logos.length} className="text-xl font-black">{logo}</span>)}
      </div>
      <style>{'@keyframes marquee{to{transform:translateX(-50%)}}'}</style>
    </div>
  )
}