Marquee

A scrolling text component that animates horizontally.

Item 1Item 2Item 3Item 4Item 5
Item 1Item 2Item 3Item 4Item 5

Installation

pnpm dlx shadcn@latest add https://neobrutalism.dev/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} />