"use client" import React, { useCallback, useEffect, useMemo, useState, type SVGProps, } from "react" import { AnimatePresence, motion } from "motion/react" // Define the structure for our logo objects interface Logo { name: string id: number img: React.ComponentType> } // Utility function to randomly shuffle an array // This is used to mix up the order of logos for a more dynamic display const shuffleArray = (array: T[]): T[] => { const shuffled = [...array] for (let i = shuffled.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)) ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]] } return shuffled } // Utility function to distribute logos across multiple columns // This ensures each column has a balanced number of logos const distributeLogos = (allLogos: Logo[], columnCount: number): Logo[][] => { const shuffled = shuffleArray(allLogos) const columns: Logo[][] = Array.from({ length: columnCount }, () => []) // Distribute logos evenly across columns shuffled.forEach((logo, index) => { columns[index % columnCount].push(logo) }) // Ensure all columns have the same number of logos by filling shorter columns const maxLength = Math.max(...columns.map((col) => col.length)) columns.forEach((col) => { while (col.length < maxLength) { col.push(shuffled[Math.floor(Math.random() * shuffled.length)]) } }) return columns } // Props for the LogoColumn component interface LogoColumnProps { logos: Logo[] index: number currentTime: number } // LogoColumn component: Displays a single column of animated logos const LogoColumn: React.FC = React.memo( ({ logos, index, currentTime }) => { const cycleInterval = 2000 // Time each logo is displayed (in milliseconds) const columnDelay = index * 200 // Stagger the start of each column's animation // Calculate which logo should be displayed based on the current time const adjustedTime = (currentTime + columnDelay) % (cycleInterval * logos.length) const currentIndex = Math.floor(adjustedTime / cycleInterval) // Memoize the current logo to prevent unnecessary re-renders const CurrentLogo = useMemo( () => logos[currentIndex].img, [logos, currentIndex] ) return ( // Framer Motion component for the column container {/* AnimatePresence enables animation of components that are removed from the DOM */} {/* Framer Motion component for each logo */} ) } ) // Main LogoCarousel component function LogoCarousel({ columnCount = 2 }: { columnCount?: number }) { const [logoSets, setLogoSets] = useState([]) const [currentTime, setCurrentTime] = useState(0) // Memoize the array of logos to prevent unnecessary re-renders const allLogos: Logo[] = useMemo( () => [ { name: "Apple", id: 1, img: AppleIcon }, { name: "CEO Supabase", id: 2, img: SupabaseIcon }, { name: "Vercel", id: 3, img: VercelIcon }, { name: "Lowes", id: 4, img: LowesIcon }, { name: "Ally", id: 5, img: AllyLogo }, { name: "Pierre", id: 6, img: PierreIcon }, { name: "BMW", id: 7, img: BMWIcon }, { name: "Claude", id: 8, img: ClaudeAIIcon }, { name: "Nextjs", id: 9, img: NextjsIcon }, { name: "Tailwind", id: 10, img: TailwindCSSIcon }, { name: "Upstash", id: 11, img: UpstashIcon }, { name: "Typescript", id: 12, img: TypeScriptIcon }, { name: "Stripe", id: 13, img: StripeIcon }, { name: "OpenAI", id: 14, img: OpenAIIconBlack }, ], [] ) // Distribute logos across columns when the component mounts useEffect(() => { const distributedLogos = distributeLogos(allLogos, columnCount) setLogoSets(distributedLogos) }, [allLogos]) // Function to update the current time (used for logo cycling) const updateTime = useCallback(() => { setCurrentTime((prevTime) => prevTime + 100) }, []) // Set up an interval to update the time every 100ms useEffect(() => { const intervalId = setInterval(updateTime, 100) return () => clearInterval(intervalId) }, [updateTime]) // Render the logo columns return (

{logoSets.map((logos, index) => ( ))}

) } function AppleIcon(props: SVGProps) { return ( ) } function PierreIcon(props: SVGProps) { return ( ) } function BMWIcon(props: SVGProps) { return ( ) } function LowesIcon(props: SVGProps) { return ( ) } function AllyLogo(props: SVGProps) { return ( ) } function VercelIcon(props: SVGProps) { return ( ) } const StripeIcon = (props: SVGProps) => ( ) const TypeScriptIcon = (props: SVGProps) => ( ) const ClaudeAIIcon = (props: SVGProps) => ( ) function SupabaseIcon(props: SVGProps) { return ( ) } function OpenAIIconBlack(props: SVGProps) { return ( ) } function UpstashIcon(props: SVGProps) { return ( ) } const TailwindCSSIcon = (props: SVGProps) => ( ) const NextjsIcon = (props: SVGProps) => ( ) export { LogoCarousel } export default LogoCarousel

Logo Carousel

Instalação

Dependências