Marquee

1"use client";
2 
3import { cn } from "@/lib/utils";
4 
5interface MarqueeProps extends React.ComponentProps<"div"> {
6  /**
7   * Direction of the animation
8   * @default "horizontal"
9   */
10  direction?: "horizontal" | "vertical";
11  /**
12   * Whether to reverse the animation direction
13   * @default false
14   */
15  reverse?: boolean;
16  /**
17   * Whether to pause the animation on hover
18   * @default false
19   */
20  pauseOnHover?: boolean;
21  /**
22   * Number of times to repeat the content
23   * @default 4
24   */
25  repeat?: number;
26}
27 
28function Marquee({
29  className,
30  reverse = false,
31  pauseOnHover = false,
32  children,
33  direction = "horizontal",
34  repeat = 4,
35  ...props
36}: MarqueeProps) {
37  return (
38    <div
39      role="marquee"
40      data-slot="marquee"
41      data-direction={direction}
42      data-reverse={reverse}
43      data-pause-on-hover={pauseOnHover}
44      data-repeat={repeat}
45      className={cn(
46        "group/marquee flex w-full min-w-0 gap-(--gap) overflow-hidden [--duration:20s] [--gap:1.25rem]",
47        direction === "horizontal" ? "flex-row" : "flex-col",
48        "has-data-[fade='left']:mask-l-from-80%",
49        "has-data-[fade='right']:mask-r-from-80%",
50        "has-data-[fade='top']:mask-t-from-80%",
51        "has-data-[fade='bottom']:mask-b-from-80%",
52        "has-data-[fade='vertical']:mask-y-from-80%",
53        "has-data-[fade='horizontal']:mask-x-from-80%",
54        className
55      )}
56      {...props}
57    >
58      {Array(repeat)
59        .fill(0)
60        .map((_, i) => (
61          <div
62            key={i}
63            data-slot={`marquee-repeat-${i + 1}`}
64            className={cn("flex min-w-0 shrink-0 justify-around gap-(--gap)", {
65              "animate-marquee flex-row": direction === "horizontal",
66              "animate-marquee-vertical flex-col": direction === "vertical",
67              "group-hover/marquee:paused": pauseOnHover,
68              "direction-[reverse]": reverse,
69            })}
70          >
71            {children}
72          </div>
73        ))}
74    </div>
75  );
76}
77 
78function MarqueeFade({
79  fade,
80}: {
81  fade: "left" | "right" | "top" | "bottom" | "horizontal" | "vertical";
82}) {
83  return (
84    <div
85      data-slot="marquee-fade"
86      data-fade={fade}
87      className="hidden"
88      aria-hidden="true"
89    />
90  );
91}
92 
93export { Marquee, MarqueeFade };