Marquee

A scrolling text component that animates horizontally.

Item 1Item 2Item 3Item 4Item 5

Installation

pnpm dlx shadcn@latest add https://neobrutal-ui.andongmin.com/r/marquee.json

Before using

You'll have to add this to @theme inline section inside your styling:

--animate-marquee: marquee 5s linear infinite;
--animate-marquee2: marquee2 5s linear infinite;
 
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
 
@keyframes marquee2 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

Make sure there is enough content in items so it loops perfectly.

Visit this article to learn more.

Usage

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

const items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];

<Marquee items={items} />