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  ...props
44}: MarqueeProps) {
45  return (
46    <div
47      {...props}
48      className={cn(
49        "group flex gap-(--gap) overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
50        {
51          "flex-row": !vertical,
52          "flex-col": vertical,
53        },
54        className
55      )}
56    >
57      {Array(repeat)
58        .fill(0)
59        .map((_, i) => (
60          <div
61            key={i}
62            className={cn("flex shrink-0 justify-around gap-(--gap)", {
63              "animate-marquee flex-row": !vertical,
64              "animate-marquee-vertical flex-col": vertical,
65              "group-hover:[animation-play-state:paused]": pauseOnHover,
66              "[animation-direction:reverse]": reverse,
67            })}
68          >
69            {children}
70          </div>
71        ))}
72    </div>
73  )
74}