Componentmedia0.55 KB gzipZero dependencies

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

Open in StackBlitz

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

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

Usage guidance

Use Marquee when a ticket stub surface needs Smooth ticker reel that pauses on hover. Keep props minimal and prefer composition with sibling stubs.

Avoid Marquee for long form flows or dense data grids where a dedicated layout block fits better.

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
children	React.ReactNode
speed?	number
direction?	"left" \| "right"
pauseOnHover?	boolean
className?	string