Logo Marquee

infinite x loop

An endless, reduced-motion-aware marquee for logos or tag rows.

infinitelogosloop

MeridianAuroraBroadsheetAtelierNorthwindCogniMeridianAuroraBroadsheetAtelierNorthwindCogni

Code

logo-marquee.tsx

/* globals.css:
   @keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } } */
export function LogoMarquee({ items }: { items: string[] }) {
  const row = [...items, ...items];
  return (
    <div className="relative overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_15%,black_85%,transparent)]">
      <div className="flex w-max animate-[marquee_20s_linear_infinite] gap-10 motion-reduce:animate-none">
        {row.map((x, i) => <span key={i} className="font-mono text-sm">{x}</span>)}
      </div>
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Logo Marquee component and wire it to my accent.”