Marquee

Jack

@jack

Jill

@jill

John

@john

Jack

@jack

Jill

@jill

John

@john

Jack

@jack

Jill

@jill

John

@john

Jack

@jack

Jill

@jill

John

@john

Jane

@jane

Jenny

@jenny

James

@james

Jane

@jane

Jenny

@jenny

James

@james

Jane

@jane

Jenny

@jenny

James

@james

Jane

@jane

Jenny

@jenny

James

@james

Installation

Copy and paste the following code into your project.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        marquee: "marquee var(--duration) linear infinite",
        "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
      },
      keyframes: {
        marquee: {
          from: { transform: "translateX(0)" },
          to: { transform: "translateX(calc(-100% - var(--gap)))" },
        },
        "marquee-vertical": {
          from: { transform: "translateY(0)" },
          to: { transform: "translateY(calc(-100% - var(--gap)))" },
        },
      },
    },
  },
};

components/magicui/marquee.tsx

import { cn } from "@/lib/utils";
 
interface MarqueeProps {
  className?: string;
  reverse?: boolean;
  pauseOnHover?: boolean;
  children?: React.ReactNode;
  vertical?: boolean;
  repeat?: number;
  [key: string]: any;
}
 
export default function Marquee({
  className,
  reverse,
  pauseOnHover = false,
  children,
  vertical = false,
  repeat = 4,
  ...props
}: MarqueeProps) {
  return (
    <div
      {...props}
      className={cn(
        "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
        {
          "flex-row": !vertical,
          "flex-col": vertical,
        },
        className,
      )}
    >
      {Array(repeat)
        .fill(0)
        .map((_, i) => (
          <div
            key={i}
            className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
              "animate-marquee flex-row": !vertical,
              "animate-marquee-vertical flex-col": vertical,
              "group-hover:[animation-play-state:paused]": pauseOnHover,
              "[animation-direction:reverse]": reverse,
            })}
          >
            {children}
          </div>
        ))}
    </div>
  );
}

Examples

Vertical

Jack

@jack

Jack

@jack

Jack

@jack

Jack

@jack

Jill

@jill

John

@john

Jill

@jill

John

@john

Jill

@jill

John

@john

Jill

@jill

John

@john

3D

Props

Prop	Type	Default	Description
className	string		The class name to apply to the component.
reverse	boolean	false	Whether or not to reverse the direction of the marquee.
pauseOnHover	boolean	false	Whether or not to pause the marquee when the user hovers over the component.
vertical	boolean	false	Whether or not to display the marquee vertically.
children	node		The content to display in the marquee.
repeat	number	1	The number of times to repeat the content.