import * as React from "react";
import { cn } from "@/lib/utils";

export function LogoMarquee({
  items,
  speed = 28,
  className,
}: {
  items: React.ReactNode[];
  speed?: number;
  className?: string;
}) {
  const doubled = [...items, ...items];

  return (
    <div
      className={cn("group relative w-full overflow-hidden", className)}
      style={{
        maskImage:
          "linear-gradient(to right, transparent, black 12%, black 88%, transparent)",
        WebkitMaskImage:
          "linear-gradient(to right, transparent, black 12%, black 88%, transparent)",
      }}
    >
      <div
        className="flex w-max items-center gap-12 group-hover:[animation-play-state:paused]"
        style={{ animation: "templets-marquee " + speed + "s linear infinite" }}
      >
        {doubled.map((item, index) => (
          <div
            key={index}
            className="flex h-10 shrink-0 items-center text-muted-foreground opacity-70 transition-opacity hover:opacity-100"
          >
            {item}
          </div>
        ))}
      </div>

      <style>
        {"@keyframes templets-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }"}
      </style>
    </div>
  );
}

Related components