Infinite Marquee

import { InfiniteMarquee, MarqueeItem } from "@/components/ui/infinite-marquee";

export default function Example() {
  return (
    <div className="space-y-6 w-full p-10 overflow-hidden">
      <InfiniteMarquee speed={30}>
        {[
          "React",
          "Next.js",
          "TypeScript",
          "Tailwind",
          "Motion",
          "UniqueUI",
          "Vercel",
          "Node.js",
        ].map((item) => (
          <MarqueeItem key={item}>
            <span className="text-sm font-medium text-neutral-300">{item}</span>
          </MarqueeItem>
        ))}
      </InfiniteMarquee>
      <InfiniteMarquee speed={20} direction="right">
        {[
          "⚡ Fast",
          "🎨 Beautiful",
          "♿ Accessible",
          "📱 Responsive",
          "🔧 Customizable",
          "🚀 Production Ready",
        ].map((item) => (
          <MarqueeItem key={item} className="bg-purple-950/30 border-purple-800/50">
            <span className="text-sm font-medium text-purple-300">{item}</span>
          </MarqueeItem>
        ))}
      </InfiniteMarquee>
    </div>
  );
}