Marquee

1"use client";
2 
3import React from "react";
4import { cn } from "@/lib/utils";
5 
6interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
7  duration?: number;
8  pauseOnHover?: boolean;
9  direction?: "left" | "right" | "up" | "down";
10  fade?: boolean;
11  fadeAmount?: number;
12}
13 
14export function Marquee({
15  children,
16  className,
17  duration = 20,
18  pauseOnHover = false,
19  direction = "left",
20  fade = true,
21  fadeAmount = 10,
22  ...props
23}: MarqueeProps) {
24  const containerRef = React.useRef<HTMLDivElement>(null);
25  const [isPaused, setIsPaused] = React.useState(false);
26 
27  const items = React.Children.toArray(children);
28  const isVertical = direction === "up" || direction === "down";
29 
30  return (
31    <>
32      <style jsx>
33        {`
34        @keyframes scroll {
35          from {
36            transform: translateX(0);
37          }
38          to {
39            transform: translateX(-50%);
40          }
41        }
42 
43        @keyframes scroll-reverse {
44          from {
45            transform: translateX(-50%);
46          }
47          to {
48            transform: translateX(0);
49          }
50        }
51 
52        @keyframes scroll-y {
53          from {
54            transform: translateY(0);
55          }
56          to {
57            transform: translateY(-50%);
58          }
59        }
60 
61        @keyframes scroll-y-reverse {
62          from {
63            transform: translateY(-50%);
64          }
65          to {
66            transform: translateY(0);
67          }
68        }
69 
70        .marquee-scroller {
71          display: flex;
72          animation: ${
73          isVertical
74            ? (direction === "up" ? "scroll-y" : "scroll-y-reverse")
75            : (direction === "left" ? "scroll" : "scroll-reverse")
76        } ${duration}s linear infinite;
77        }
78 
79        .marquee-scroller.paused {
80          animation-play-state: paused;
81        }
82      `}
83      </style>
84      <div
85        ref={containerRef}
86        className={cn(
87          "flex w-full overflow-hidden",
88          isVertical && "flex-col",
89          className,
90        )}
91        style={{
92          ...(fade && {
93            maskImage: isVertical
94              ? `linear-gradient(to bottom, transparent 0%, black ${fadeAmount}%, black ${
95                100 - fadeAmount
96              }%, transparent 100%)`
97              : `linear-gradient(to right, transparent 0%, black ${fadeAmount}%, black ${
98                100 - fadeAmount
99              }%, transparent 100%)`,
100            WebkitMaskImage: isVertical
101// … truncated