Marquee

A modern marquee component supporting infinite scrolling for seamless display of text, images, and videos. Features smooth animations, customizable speed, and responsive design for continuous content scrolling.

Jack

@jack

Jill

@jill

John

@john

Jack

@jack

Jill

@jill

John

@john

Jack

@jack

Jill

@jill

John

@john

Jack

@jack

Jill

@jill

John

@john

Jane

@jane

Jenny

@jenny

James

@james

Jane

@jane

Jenny

@jenny

James

@james

Jane

@jane

Jenny

@jenny

James

@james

Jane

@jane

Jenny

@jenny

James

@james

Usage

@import "tailwindcss";

@theme inline {
  --animate-border: border 4s linear infinite;
  --animate-infinite-scroll: infinite-scroll 25s linear infinite;
  --animate-marquee: marquee var(--duration) linear infinite;
  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
  --animate-marquee-reverse: marquee-reverse var(--duration) linear infinite;
  --animate-marquee-vertical-reverse: marquee-vertical-reverse var(--duration) linear infinite;

  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }
  @keyframes marquee-vertical {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(calc(-100% - var(--gap)));
    }
  }
  @keyframes marquee-reverse {
    from {
      transform: translateX(calc(-100% - var(--gap)));
    }
    to {
      transform: translateX(0);
    }
  }
  @keyframes marquee-vertical-reverse {
    from {
      transform: translateY(calc(-100% - var(--gap)));
    }
    to {
      transform: translateY(0);
    }
  }
}

import { cn } from '@/lib/utils';

interface MarqueeProps {
  className?: string;
  reverse?: boolean;
  pauseOnHover?: boolean;
  children?: React.ReactNode;
  vertical?: boolean;
  repeat?: number;
  [key: string]: any;
}

export default function Marquee({
  className,
  reverse,
  pauseOnHover = false,
  children,
  vertical = false,
  repeat = 4,
  ...props
}: MarqueeProps) {
  return (
    <div
      {...props}
      className={cn(
        'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] gap-(--gap)',
        {
          'flex-row': !vertical,
          'flex-col': vertical,
        },
        className
      )}
    >
      {Array(repeat)
        .fill(0)
        .map((_, i) => (
          <div
            key={i}
            className={cn('flex shrink-0 justify-around gap-(--gap)', {
              'animate-marquee flex-row': !vertical && !reverse,
              'animate-marquee-vertical flex-col': vertical && !reverse,
              'animate-marquee-reverse flex-row': !vertical && reverse,
              'animate-marquee-vertical-reverse flex-col': vertical && reverse,
              'group-hover:[animation-play-state:paused]': pauseOnHover,
            })}
          >
            {children}
          </div>
        ))}
    </div>
  )
}

Exammple

Varticle Maruqee

Jack

@jack

Jack

@jack

Jack

@jack

Jack

@jack

Jill

@jill

John

@john

Jill

@jill

John

@john

Jill

@jill

John

@john

Jill

@jill

John

@john

Logos Maruqee

3D Maruqee

Sparkles Title Infinity Brand