51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T6e30,"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 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/ui/logo-carousel.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]