logo-cloud-4

1// https://motion-primitives.com/docs/infinite-slider
2import { InfiniteSlider } from "@/components/ui/infinite-slider";
3// https://motion-primitives.com/docs/progressive-blur
4import { ProgressiveBlur } from "@/components/ui/progressive-blur";
5import { cn } from "@/lib/utils";
6 
7type Logo = {
8  src: string;
9  alt: string;
10  width?: number;
11  height?: number;
12};
13 
14type LogoCloudProps = React.ComponentProps<"div"> & {
15  logos: Logo[];
16};
17 
18export function LogoCloud({ className, logos, ...props }: LogoCloudProps) {
19  return (
20    <div
21      className={cn(
22        "relative mx-auto max-w-3xl border bg-gradient-to-r from-secondary via-transparent to-secondary py-6",
23        className
24      )}
25      {...props}
26    >
27      <InfiniteSlider gap={42} reverse speed={60} speedOnHover={20}>
28        {logos.map((logo) => (
29          <img
30            alt={logo.alt}
31            className="pointer-events-none h-4 select-none md:h-5 dark:brightness-0 dark:invert"
32            height="auto"
33            key={`logo-${logo.alt}`}
34            loading="lazy"
35            src={logo.src}
36            width="auto"
37          />
38        ))}
39      </InfiniteSlider>
40 
41      <ProgressiveBlur
42        blurIntensity={1}
43        className="pointer-events-none absolute top-0 left-0 h-full w-[100px] md:w-[160px]"
44        direction="left"
45      />
46      <ProgressiveBlur
47        blurIntensity={1}
48        className="pointer-events-none absolute top-0 right-0 h-full w-[100px] md:w-[160px]"
49        direction="right"
50      />
51    </div>
52  );
53}