Marquee

PreviousNext

Renders a looping marquee animation with horizontal or vertical scrolling. Supports adjustable speed, direction, repeat count, and pause on hover.

Installation

pnpm dlx shadcn@latest add https://aliimam.in/r/marquee.json

Usage

import { Marquee } from "@/components/marquee"
<Marquee speed="fast" pauseOnHover className="bg-gray-900 p-2 text-white">
  <span className="px-4">🚀 Fast</span>
  <span className="px-4">🔥 Scrolling</span>
  <span className="px-4">🌈 Marquee</span>
</Marquee>

CSS

@import "tailwindcss";
@import "tw-animate-css";
 
@theme inline {
  --animate-marquee: marquee var(--duration) infinite linear;
  --animate-marquee-vertical: marquee-vertical 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)));
  }
}