51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:Tf51,'use client'; import { cn } from '@/lib/utils'; import * as React from 'react'; const KEYFRAMES = ` @keyframes logos-enter { from { transform: translateY(32px); filter: blur(4px); opacity: 0; } to { transform: translateY(0); filter: blur(0px); opacity: 1; } } @keyframes logos-exit { from { transform: translateY(0); filter: blur(0px); opacity: 1; } to { transform: translateY(-32px); filter: blur(4px); opacity: 0; } } `; type LogoItem = { name: string; svg: React.ReactNode; }; type LogosCarouselProps = { logos: LogoItem[]; count?: number; stagger?: number; duration?: number; interval?: number; initialDelay?: number; className?: string; label?: string; }; export default function LogosCarousel({ logos, count = 4, stagger = 0.1, duration = 500, interval = 2500, initialDelay = 800, className, label, }: LogosCarouselProps) { const [groupIndex, setGroupIndex] = React.useState(0); const [active, setActive] = React.useState(false); const groups = React.useMemo(() => { const result: LogoItem[][] = []; for (let i = 0; i < logos.length; i += count) { result.push(logos.slice(i, i + count)); } return result; }, [logos, count]); const groupCount = groups.length; const nextIndex = (groupIndex + 1) % groupCount; React.useEffect(() => { const t = setTimeout(() => setActive(true), initialDelay); return () => clearTimeout(t); }, [initialDelay]); React.useEffect(() => { if (!active || groupCount < 2) return; const id = setInterval( () => setGroupIndex((prev) => (prev + 1) % groupCount), interval, ); return () => clearInterval(id); }, [active, interval, groupCount]); if (groupCount === 0) return null; return (

{label && (

{label}

)}

{groups.map((group, gi) => { const isCurrent = gi === groupIndex; const isNext = active && gi === nextIndex; const visible = isCurrent || isNext; return (

{group.map((logo, li) => ( {logo.svg} ))}

); })}

); } type AnimatedLogoProps = { children: React.ReactNode; animate: boolean; state: 'enter' | 'exit'; index: number; stagger: number; duration: number; }; function AnimatedLogo({ children, animate, state, index, stagger, duration, }: AnimatedLogoProps) { const style: React.CSSProperties = animate ? { animationName: state === 'enter' ? 'logos-enter' : 'logos-exit', animationDelay: `${index * stagger}s`, animationDuration: `${duration}ms`, animationFillMode: 'both', animationTimingFunction: 'ease', } : { opacity: state === 'exit' ? 1 : 0 }; return

{children}

; } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L51",null,{"registryDependencies":[]}]]}],["$","$L52",null,{"sourceUrl":"https://www.odysseyui.com/r/components-logoclouds-logocloud-4.json","proxyUrl":"https://shadcnregistry.com/r/odysseyui/components-logoclouds-logocloud-4","itemId":"@odysseyui/components-logoclouds-logocloud-4"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/components/logoclouds/logocloud-4/index.tsx","content":"$54","type":"registry:ui","target":"components/odysseyui/logocloud-4.tsx"}]}]]}],"$L55"]}]

Logo Cloud 4

Installation

Files

components

Styles