Infinite Slider

import { InfiniteSlider } from "@/components/ui/infinite-slider";

const logos = [
  {
    src: "https://motion-primitives.com/apple_music_logo.svg",
    alt: "Apple Music",
  },
  { src: "https://motion-primitives.com/chrome_logo.svg", alt: "Chrome" },
  { src: "https://motion-primitives.com/strava_logo.svg", alt: "Strava" },
  { src: "https://motion-primitives.com/nintendo_logo.svg", alt: "Nintendo" },
  { src: "https://motion-primitives.com/jquery_logo.svg", alt: "jQuery" },
  { src: "https://motion-primitives.com/prada_logo.svg", alt: "Prada" },
];

export default function InfiniteSliderDemo() {
  return (
    <div className="flex min-h-[220px] w-full items-center justify-center bg-background p-8">
      <div className="relative w-full max-w-xl">
        <InfiniteSlider gap={64} speed={40} speedOnHover={20}>
          {logos.map((logo) => (
            <img
              key={logo.alt}
              src={logo.src}
              alt={logo.alt}
              className="h-12 w-auto object-contain dark:invert"
            />
          ))}
        </InfiniteSlider>
        <div className="pointer-events-none absolute inset-y-0 left-0 w-1/6 bg-gradient-to-r from-background to-transparent" />
        <div className="pointer-events-none absolute inset-y-0 right-0 w-1/6 bg-gradient-to-l from-background to-transparent" />
      </div>
    </div>
  );
}