Marquee

1import type { ComponentPropsWithoutRef } from "react";
2import { cn } from "@/lib/utils";
3 
4interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
5  /**
6   * Optional CSS class name to apply custom styles
7   */
8  className?: string;
9  /**
10   * Whether to reverse the animation direction
11   * @default false
12   */
13  reverse?: boolean;
14  /**
15   * Whether to pause the animation on hover
16   * @default false
17   */
18  pauseOnHover?: boolean;
19  /**
20   * Content to be displayed in the marquee
21   */
22  children: React.ReactNode;
23  /**
24   * Whether to animate vertically instead of horizontally
25   * @default false
26   */
27  vertical?: boolean;
28  /**
29   * Number of times to repeat the content
30   * @default 4
31   */
32  repeat?: number;
33}
34 
35export function Marquee({
36  className,
37  reverse = false,
38  pauseOnHover = false,
39  children,
40  vertical = false,
41  repeat = 4,
42  ...props
43}: MarqueeProps) {
44  return (
45    <div
46      {...props}
47      className={cn(
48        "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
49        {
50          "flex-row": !vertical,
51          "flex-col": vertical,
52        },
53        className
54      )}
55    >
56      {Array(repeat)
57        .fill(0)
58        .map((_, i) => (
59          <div
60            className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
61              "animate-marquee flex-row": !vertical,
62              "animate-marquee-vertical flex-col": vertical,
63              "group-hover:[animation-play-state:paused]": pauseOnHover,
64              "[animation-direction:reverse]": reverse,
65            })}
66            key={i}
67          >
68            {children}
69          </div>
70        ))}
71    </div>
72  );
73}