"use client"; import { useEffect, useRef } from "react"; import { motion, useAnimation, useInView } from "framer-motion"; import { useTheme } from "next-themes"; import { useIsMobile } from "@/hooks/use-mobile"; interface LogoCloudCarouselProps { logos: { name: string; url: string; darkUrl?: string; }[]; } interface MarqueeRowProps { direction: "left" | "right"; speed: number; // eslint-disable-next-line @typescript-eslint/no-explicit-any logos: any[]; resolvedTheme?: string; isMobile: boolean; } export function LogoCloudCarousel({ logos }: LogoCloudCarouselProps) { const { resolvedTheme } = useTheme(); const isMobile = useIsMobile(); const containerRef = useRef(null); const isInView = useInView(containerRef, { once: false, amount: 0.2 }); const controls = useAnimation(); useEffect(() => { if (isInView) { controls.start("visible"); } }, [controls, isInView]); return (

); } function MarqueeRow({ direction, speed, logos, // resolvedTheme, isMobile, className = "", }: MarqueeRowProps & { className?: string }) { const duplicatedLogos = [...logos, ...logos]; const translateValue = isMobile ? "100%" : "50%"; return ( {duplicatedLogos.map((logo, index) => (

))} ); }

Logo Cloud Carousel

Install Dependencies