"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
  /**
   * Direction of the marquee scroll
   * @default "left"
   */
  direction?: "left" | "right" | "up" | "down";
  /**
   * Speed of the animation in seconds
   * @default 30
   */
  duration?: number;
  /**
   * Gap between repeated items in pixels
   * @default 16
   */
  gap?: number;
  /**
   * Pause the animation on hover
   * @default true
   */
  pauseOnHover?: boolean;
  /**
   * Number of times to repeat the content
   * @default 4
   */
  repeat?: number;
  /**
   * Reverse the animation direction
   * @default false
   */
  reverse?: boolean;
  /**
   * Apply a gradient fade effect at the edges
   * @default true
   */
  fade?: boolean;
  /**
   * Width of the fade gradient
   * @default 64
   */
  fadeWidth?: number;
}

function Marquee({
  children,
  className,
  direction = "left",
  duration = 30,
  gap = 16,
  pauseOnHover = true,
  repeat = 4,
  reverse = false,
  fade = true,
  fadeWidth = 64,
  ...props
}: MarqueeProps) {
  const isVertical = direction === "up" || direction === "down";
  const shouldReverse =
    reverse || direction === "right" || direction === "down";

  const animationName = isVertical ? "marquee-vertical" : "marquee-horizontal";
  const animationDirection = shouldReverse ? "reverse" : "normal";

  return (
    <div
      className={cn(
        "group relative flex overflow-hidden",
        isVertical ? "flex-col" : "flex-row",
        className
      )}
      {...props}
    >
      {/* Fade overlay - left/top */}
      {fade && (
        <div
          className={cn(
            "pointer-events-none absolute z-10",
            isVertical
              ? "left-0 right-0 top-0 bg-gradient-to-b from-background to-transparent"
              : "bottom-0 left-0 top-0 bg-gradient-to-r from-background to-transparent"
          )}
          style={{
            [isVertical ? "height" : "width"]: fadeWidth,
          }}
          aria-hidden="true"
        />
      )}

      {/* Scrolling content */}
      <div
        className={cn(
          "flex shrink-0",
          isVertical ? "flex-col" : "flex-row",
          pauseOnHover && "group-hover:[animation-play-state:paused]"
        )}
        style={{
          gap,
          animationName,
          animationDuration: `${duration}s`,
          animationTimingFunction: "linear",
          animationIterationCount: "infinite",
          animationDirection,
        }}
      >
        {Array.from({ length: repeat }).map((_, i) => (
          <div
            key={i}
            className={cn(
              "flex shrink-0",
              isVertical ? "flex-col" : "flex-row"
            )}
            style={{ gap }}
            aria-hidden={i > 0}
          >
            {children}
          </div>
        ))}
      </div>

      {/* Fade overlay - right/bottom */}
      {fade && (
        <div
          className={cn(
            "pointer-events-none absolute z-10",
            isVertical
              ? "bottom-0 left-0 right-0 bg-gradient-to-t from-background to-transparent"
              : "bottom-0 right-0 top-0 bg-gradient-to-l from-background to-transparent"
          )}
          style={{
            [isVertical ? "height" : "width"]: fadeWidth,
          }}
          aria-hidden="true"
        />
      )}

      <style jsx>{`
        @keyframes marquee-horizontal {
          from {
            transform: translateX(0);
          }
          to {
            transform: translateX(calc(-100% / ${repeat} * 2));
          }
        }

        @keyframes marquee-vertical {
          from {
            transform: translateY(0);
          }
          to {
            transform: translateY(calc(-100% / ${repeat} * 2));
          }
        }
      `}</style>
    </div>
  );
}

export { Marquee };
Marquee

Dependencies

Files

Installation
