Marquee scrolls any row of content horizontally forever, duplicating children so the loop is seamless in both directions. It supports drag interaction that pauses and reverses the scroll, per-direction speeds, pause on hover, and edge fade masks. Built with Framer Motion and Tailwind CSS. The standard building block for logo strips, testimonial rows, and feature tickers on landing pages.

Installation

Examples

Horizontal Marquee

PreviewCode

Usage

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

export default function MyComponent() {
  return (
    <Marquee>
      {/* Your marquee content goes here */}
      <div className="px-4">Content Item 1</div>
      <div className="px-4">Content Item 2</div>
      <div className="px-4">Content Item 3</div>
    </Marquee>
  );
}

Props