Marquee

featurefrom MagicUI Effects

Marquee

AI Usage Rules

Use Marquee for auto-scrolling content like logo clouds, testimonials, or social proof. Requires CSS keyframes for animate-marquee and animate-marquee-vertical. Use pauseOnHover for interactive content. Set --duration and --gap via CSS custom properties.

Code Template

import { type ComponentPropsWithoutRef } from "react"
import { cn } from "@/lib/utils"

interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
  className?: string
  reverse?: boolean
  pauseOnHover?: boolean
  children: React.ReactNode
  vertical?: boolean
  repeat?: number
}

export function Marquee({ className, reverse = false, pauseOnHover = false, children, vertical = false, repeat = 4, ...props }: MarqueeProps) {
  return (
    <div {...props} className={cn("group flex gap-(--gap) overflow-hidden p-2 [--duration:40s] [--gap:1rem]", { "flex-row": !vertical, "flex-col": vertical }, className)}>
      {Array(repeat).fill(0).map((_, i) => (
        <div key={i} className={cn("flex shrink-0 justify-around gap-(--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>
  )
}

Props Schema

Property	Type	Default
repeat	number	—
reverse	boolean	—
vertical	boolean	—
pauseOnHover	boolean	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "repeat": {
      "type": "number"
    },
    "reverse": {
      "type": "boolean"
    },
    "vertical": {
      "type": "boolean"
    },
    "pauseOnHover": {
      "type": "boolean"
    }
  }
}