Marquee

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3 
4interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
5  /** Content to display in the marquee */
6  children: React.ReactNode
7  /** Direction of the marquee animation */
8  direction?: 'left' | 'right'
9  /** Speed of the animation: 'slow' | 'normal' | 'fast' */
10  speed?: 'slow' | 'normal' | 'fast'
11  /** Pause animation on hover */
12  pauseOnHover?: boolean
13  /** Show neubrutalism border styling */
14  bordered?: boolean
15  /** Number of times to repeat the content (for seamless loop) */
16  repeat?: number
17}
18 
19const speedClasses = {
20  slow: 'animate-marquee-slow',
21  normal: 'animate-marquee',
22  fast: 'animate-marquee-fast',
23}
24 
25const Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(
26  (
27    {
28      className,
29      children,
30      direction = 'left',
31      speed = 'normal',
32      pauseOnHover = true,
33      bordered = true,
34      repeat = 4,
35      ...props
36    },
37    ref
38  ) => {
39    // Use the speed-based class for both directions so `speed` is always
40    // honored; flip to a right-scroll via animation-direction (the dedicated
41    // *-reverse speed classes were never defined in the CSS).
42    const animationClass = speedClasses[speed]
43    const animationDirection = direction === 'right' ? 'reverse' : undefined
44 
45    return (
46      <div
47        ref={ref}
48        className={cn(
49          'flex overflow-hidden',
50          bordered && 'border-3 border-foreground bg-background',
51          className
52        )}
53        {...props}
54      >
55        <div
56          className={cn(
57            'marquee-content flex shrink-0 items-center gap-8 py-3',
58            animationClass,
59            pauseOnHover && 'hover:[animation-play-state:paused]'
60          )}
61          style={{ animationDirection }}
62        >
63          {Array.from({ length: repeat }).map((_, i) => (
64            <React.Fragment key={i}>{children}</React.Fragment>
65          ))}
66        </div>
67        <div
68          className={cn(
69            'marquee-content flex shrink-0 items-center gap-8 py-3',
70            animationClass,
71            pauseOnHover && 'hover:[animation-play-state:paused]'
72          )}
73          style={{ animationDirection }}
74          aria-hidden="true"
75        >
76          {Array.from({ length: repeat }).map((_, i) => (
77            <React.Fragment key={i}>{children}</React.Fragment>
78          ))}
79        </div>
80      </div>
81    )
82  }
83)
84Marquee.displayName = 'Marquee'
85 
86// … truncated