Infinite Marquee

Component

About

A horizontally scrolling marquee that loops logos or content seamlessly forever, with soft fade at both edges.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Infinite Marquee to your project and fits it to your theme.

Code

How Infinite Marquee is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import InfiniteMarquee from "@/components/ui/infinite-marquee";

const logos = ["Acme", "Globex", "Umbrella", "Initech", "Hooli", "Stark"];

export default function InfiniteMarqueeDemo() {
  const items = logos.map((name) => (
    <span key={name} className="text-lg font-semibold text-muted-foreground">
      {name}
    </span>
  ));

  return (
    <div className="flex w-full h-screen items-center justify-center bg-background">
      <InfiniteMarquee items={items} className="max-w-2xl" />
    </div>
  );
}