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)));
}
}