Marquee

Motion

Seamless infinite horizontal scroll with edge fades and pause-on-hover. Pure CSS, server-renderable.

Requires the .prism-marquee styles from globals.css.

$npx shadcn@latest add https://prism.icglabs.co/r/marquee.json

components/prism/Marquee.tsx

/**
 * Marquee — a seamless, infinite horizontal scroll of its children, with edge
 * fades and optional pause-on-hover. Pure CSS (no JS), so it's server-renderable
 * and cheap. The children are duplicated once for the seamless loop.
 */
export function Marquee({
  children,
  speed = 30,
  reverse = false,
  pauseOnHover = true,
  className = "",
}: {
  children: React.ReactNode;
  /** seconds per full loop */
  speed?: number;
  reverse?: boolean;
  pauseOnHover?: boolean;
  className?: string;
}) {
  return (
    <div className={`prism-marquee ${pauseOnHover ? "prism-marquee--pause" : ""} ${className}`}>
      <div
        className="prism-marquee__track"
        style={{ animationDuration: `${speed}s`, animationDirection: reverse ? "reverse" : "normal" }}
      >
        <div className="prism-marquee__group">{children}</div>
        <div className="prism-marquee__group" aria-hidden>
          {children}
        </div>
      </div>
    </div>
  );
}