Componentmedia

Marquee

Smooth ticker reel that pauses on hover.

Preview

Live Preview

ADMIT ONE ★ BIGBULLUI ★ ROW C SEAT 12 ★ NO REFUNDS ★

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add marquee

Or install the full npm package:

npm install bigbullui

Usage

import { Marquee } from "@/components/ui/marquee";

<Marquee speed={25}>
  <span>★ ADMIT ONE ★ BIGBULLUI ★</span>
</Marquee>

Source code

marquee.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

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

export interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
  speed?: number; // duration in seconds
  direction?: "left" | "right";
  pauseOnHover?: boolean;
  className?: string;
}

export function Marquee({
  children,
  speed = 25,
  direction = "left",
  pauseOnHover = true,
  className,
  ...props
}: MarqueeProps) {
  const isRight = direction === "right";

  return (
    <div
      className={cn("group flex overflow-hidden select-none", className)}
      {...props}
    >
      <div
        className={cn(
          "flex min-w-full shrink-0 items-center justify-around gap-6 motion-reduce:transform-none",
          pauseOnHover && "group-hover:[animation-play-state:paused]"
        )}
        style={{
          animation: `marquee ${speed}s linear infinite ${isRight ? "reverse" : "normal"}`,
        }}
      >
        {children}
      </div>
      <div
        aria-hidden="true"
        className={cn(
          "flex min-w-full shrink-0 items-center justify-around gap-6 motion-reduce:transform-none",
          pauseOnHover && "group-hover:[animation-play-state:paused]"
        )}
        style={{
          animation: `marquee ${speed}s linear infinite ${isRight ? "reverse" : "normal"}`,
        }}
      >
        {children}
      </div>
    </div>
  );
}

Props

Prop	Type	Description
speed	number	Cycle duration in seconds (default 25).
direction	"left" \| "right"	Scroll direction (default 'left').
pauseOnHover	boolean	Pause on mouse hover (default true).