MarqueePro

• Logo walls, testimonials and tag clouds on landing pages.

• Content people must read or act on: moving text is hard to read.
• More than two marquees in one view.

Import it from @/components/ui/marquee after installing.

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

export function Logos({ names }: { names: string[] }) {
  return (
    <Marquee aria-label="Customers" speed={36}>
      {names.map((n) => <span key={n} className="text-lg font-semibold">{n}</span>)}
    </Marquee>
  );
}

• A labelled region; only the first copy is read.
• Pauses on hover and focus, and has a pause button, so moving content can always be stopped.
• Under reduced motion it becomes a static row you can scroll.

• Speed eases to zero and back instead of stopping abruptly.
• The loop wraps at exactly one copy's length, so there is no visible jump.

• Fills its container; items keep their natural size.
• Vertical marquees need a height on the container.

• One requestAnimationFrame loop writes a transform; no React renders while moving.
• Width is measured with ResizeObserver, so font loading never breaks the loop.

• Always pass aria-label.
• Keep items short and visual; put long copy elsewhere.