Marquee

Component 9

About

A content track that scrolls in a seamless infinite loop, pausing on hover or keyboard focus and off screen, and draggable by the pointer, for logo walls, tag lists or ticker-style content.

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

Code

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

Usage.tsx

import { Marquee } from "@/components/ui/marquee";

const ports = [
  "Salvador",
  "Cartagena",
  "Havana",
  "Nassau",
  "Port Royal",
  "Tortuga",
  "Veracruz",
];

export default function MarqueeDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-background p-10">
      <Marquee
        pauseOnHover
        gap="1rem"
        className="w-full max-w-xl text-muted-foreground"
      >
        {ports.map((port) => (
          <a
            key={port}
            href={`#port-${port.toLowerCase().replace(/\s+/g, "-")}`}
            className="rounded-full border bg-card px-4 py-1.5 text-sm whitespace-nowrap hover:bg-accent"
          >
            {port}
          </a>
        ))}
      </Marquee>
    </div>
  );
}