Marquee Text

scroll x repeat

Horizontally scrolling text marquee with pause on hover. From Magic UI.

marqueescrolltextmagicui

✦ Build Faster ✦✦ Ship Beautiful ✦✦ Build Faster ✦✦ Ship Beautiful ✦

Code

marquee-text.tsx

export function MarqueeText({ items }: { items: string[] }) {
  const row = [...items, ...items];
  return (
    <div className="overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]">
      <div className="flex w-max animate-[marquee_15s_linear_infinite] gap-8 motion-reduce:animate-none">
        {row.map((x, i) => <span key={i} className="text-2xl font-bold">{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 Marquee Text component and wire it to my accent.”