Marquee

1// beui.dev/components/motion/marquee
2import { Children, type ReactNode } from "react";
3import { cn } from "@/lib/utils";
4 
5export interface MarqueeProps {
6  children: ReactNode;
7  direction?: "left" | "right" | "up" | "down";
8  speed?: number;
9  pauseOnHover?: boolean;
10  gap?: string;
11  className?: string;
12  fade?: boolean;
13}
14 
15export function Marquee({
16  children,
17  direction = "left",
18  speed = 30,
19  pauseOnHover = true,
20  gap = "1rem",
21  className,
22  fade = true,
23}: MarqueeProps) {
24  const vertical = direction === "up" || direction === "down";
25  const reverse = direction === "right" || direction === "down";
26  const items = Children.toArray(children);
27 
28  return (
29    <div
30      className={cn(
31        "group relative flex overflow-hidden",
32        vertical ? "flex-col" : "flex-row",
33        fade && !vertical && "[mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)]",
34        fade && vertical && "[mask-image:linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)]",
35        className,
36      )}
37      // gap on the wrapper too, so the seam between the two tracks matches the
38      // spacing between items and the loop stays even.
39      style={{ "--gap": gap, gap } as React.CSSProperties}
40    >
41      {[0, 1].map((dup) => (
42        <div
43          key={dup}
44          aria-hidden={dup === 1}
45          inert={dup === 1}
46          style={{
47            animationDuration: `${speed}s`,
48            animationDirection: reverse ? "reverse" : "normal",
49            gap,
50          }}
51          className={cn(
52            "flex shrink-0 items-center",
53            vertical ? "flex-col animate-marquee-vertical" : "flex-row animate-marquee",
54            pauseOnHover && "group-hover:[animation-play-state:paused]",
55          )}
56        >
57          {items.map((child, i) => (
58            // biome-ignore lint/suspicious/noArrayIndexKey: Marquee duplicates static child slots; item order is not mutated.
59            <div key={i} className="shrink-0">
60              {child}
61            </div>
62          ))}
63        </div>
64      ))}
65    </div>
66  );
67}