Marquee - neobrutal-ui

On this page2 sections

Loading preview...

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

export default function MarqueeDemo() {
  const items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];

  return <Marquee items={items} />;
}

#Installation

The CLI installation includes the animation tokens and keyframes automatically.

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

export default function Marquee({ items }: { items: string[] }) {
  return (
    <div className="relative flex w-full overflow-x-hidden border-b-2 border-t-2 border-border bg-secondary-background text-foreground font-base">
      <div className="animate-marquee whitespace-nowrap py-12 motion-reduce:animate-none">
        {items.map((item) => {
          return (
            <span key={item} className="mx-4 text-4xl">
              {item}
            </span>
          );
        })}
      </div>

      <div
        aria-hidden="true"
        className="absolute top-0 animate-marquee2 whitespace-nowrap py-12 motion-reduce:hidden"
      >
        {items.map((item) => {
          return (
            <span key={item} className="mx-4 text-4xl">
              {item}
            </span>
          );
        })}
      </div>
    </div>
  );
}

When installing manually, also add these animation tokens and keyframes inside your @theme inline block:

--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} />