Marquee

1import { type ComponentPropsWithoutRef } from "react"
2 
3import { cn } from "@/lib/utils"
4 
5interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
6  /**
7   * Optional CSS class name to apply custom styles
8   */
9  className?: string
10  /**
11   * Whether to reverse the animation direction
12   * @default false
13   */
14  reverse?: boolean
15  /**
16   * Whether to pause the animation on hover
17   * @default false
18   */
19  pauseOnHover?: boolean
20  /**
21   * Content to be displayed in the marquee
22   */
23  children: React.ReactNode
24  /**
25   * Whether to animate vertically instead of horizontally
26   * @default false
27   */
28  vertical?: boolean
29  /**
30   * Number of times to repeat the content
31   * @default 4
32   */
33  repeat?: number
34}
35 
36export function Marquee({
37  className,
38  reverse = false,
39  pauseOnHover = false,
40  children,
41  vertical = false,
42  repeat = 4,
43  style,
44  ...props
45}: MarqueeProps) {
46  // Edge-fade mask applied via CSS mask-image so content fades out at both ends.
47  const fadeMask = vertical
48    ? "linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%)"
49    : "linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%)"
50 
51  return (
52    <div
53      {...props}
54      style={{
55        ...style,
56        maskImage: fadeMask,
57        WebkitMaskImage: fadeMask,
58      }}
59      className={cn(
60        "group relative flex gap-(--gap) overflow-hidden [--duration:40s] [--gap:12px]",
61        vertical ? "flex-col" : "flex-row",
62        className
63      )}
64    >
65      {/* Duplicate children N times so the marquee loops seamlessly without a visible gap. */}
66      {Array.from({ length: repeat }).map((_, i) => (
67        <div
68          key={i}
69          className={cn(
70            "flex shrink-0 justify-around gap-(--gap) motion-reduce:animate-none",
71            vertical
72              ? "animate-marquee-vertical flex-col"
73              : "animate-marquee flex-row",
74            reverse && "direction-[reverse]",
75            pauseOnHover && "group-hover:paused"
76          )}
77        >
78          {children}
79        </div>
80      ))}
81    </div>
82  )
83}