Marquee

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/registry/wise-ui/lib/utils"
5 
6interface MarqueeProps {
7  speed?: number
8  direction?: "left" | "right"
9  pauseOnHover?: boolean
10  children: React.ReactNode
11  className?: string
12}
13 
14function Marquee({
15  speed = 40,
16  direction = "left",
17  pauseOnHover = false,
18  children,
19  className,
20}: MarqueeProps) {
21  const containerRef = React.useRef<HTMLDivElement>(null)
22  const [contentWidth, setContentWidth] = React.useState(0)
23  const scopedId = React.useId().replace(/:/g, "")
24  const [paused, setPaused] = React.useState(false)
25 
26  React.useEffect(() => {
27    const el = containerRef.current
28    if (!el) return
29    const measure = () => {
30      const first = el.firstElementChild as HTMLElement | null
31      if (first) setContentWidth(first.scrollWidth)
32    }
33    measure()
34    const ro = new ResizeObserver(measure)
35    ro.observe(el)
36    return () => ro.disconnect()
37  }, [children])
38 
39  const duration = contentWidth > 0 ? contentWidth / speed : 0
40  const keyframeName = `marquee-${scopedId}`
41 
42  const from = direction === "left" ? "0%" : "-50%"
43  const to = direction === "left" ? "-50%" : "0%"
44 
45  return (
46    <div className={cn("overflow-hidden", className)}>
47      <style>{`
48        @keyframes ${keyframeName} {
49          from { transform: translateX(${from}); }
50          to { transform: translateX(${to}); }
51        }
52      `}</style>
53      <div
54        ref={containerRef}
55        className="flex w-max"
56        style={{
57          animationName: keyframeName,
58          animationDuration: `${duration}s`,
59          animationTimingFunction: "linear",
60          animationIterationCount: "infinite",
61          animationPlayState: paused ? "paused" : "running",
62        }}
63        onMouseEnter={() => pauseOnHover && setPaused(true)}
64        onMouseLeave={() => pauseOnHover && setPaused(false)}
65      >
66        <div className="flex shrink-0">{children}</div>
67        <div className="flex shrink-0" aria-hidden>
68          {children}
69        </div>
70      </div>
71    </div>
72  )
73}
74Marquee.displayName = "Marquee"
75 
76export { Marquee }
77export type { MarqueeProps }