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:T104f,'use client'; import { cn } from '@/lib/utils'; import React from 'react'; const KEYFRAMES = ` @keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes marquee-x-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } } @keyframes marquee-y { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes marquee-y-reverse { from { transform: translateY(-50%); } to { transform: translateY(0); } } `; const ANIMATION_NAME: Record = { left: 'marquee-x', right: 'marquee-x-reverse', up: 'marquee-y', down: 'marquee-y-reverse', }; type LogoItem = { name: string; svg: React.ReactNode; }; type MarqueeProps = { children: React.ReactNode; duration?: number; pauseOnHover?: boolean; direction?: 'left' | 'right' | 'up' | 'down'; gap?: number; fade?: boolean; fadeAmount?: number; className?: string; } & Omit, 'children'>; export function Marquee({ children, className, duration = 20, pauseOnHover = false, direction = 'left', gap = 32, fade = true, fadeAmount = 10, ...props }: MarqueeProps) { const [isPaused, setIsPaused] = React.useState(false); const isVertical = direction === 'up' || direction === 'down'; const items = React.Children.toArray(children); const maskImage = fade ? isVertical ? `linear-gradient(to bottom, transparent 0%, black ${fadeAmount}%, black ${100 - fadeAmount}%, transparent 100%)` : `linear-gradient(to right, transparent 0%, black ${fadeAmount}%, black ${100 - fadeAmount}%, transparent 100%)` : undefined; return ( <>

pauseOnHover && setIsPaused(true)} onMouseLeave={() => pauseOnHover && setIsPaused(false)} {...props} >

{items.map((item, i) => (

{item}

))} {items.map((item, i) => (

{item}

))}

); } type LogoMarqueeProps = { logos: LogoItem[]; label?: string; duration?: number; gap?: number; reverse?: boolean; pauseOnHover?: boolean; fade?: boolean; fadeAmount?: number; }; export default function LogoMarquee({ logos, label, duration = 20, gap = 80, reverse = false, pauseOnHover = true, fade = true, fadeAmount = 10, }: LogoMarqueeProps) { return (

{label && (

{label}

)} {logos.map(({ name, svg }) => ( {svg} ))}

); } 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-5.json","proxyUrl":"https://shadcnregistry.com/r/odysseyui/components-logoclouds-logocloud-5","itemId":"@odysseyui/components-logoclouds-logocloud-5"}],["$","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-5/index.tsx","content":"$54","type":"registry:ui","target":"components/odysseyui/logocloud-5.tsx"}]}]]}],"$L55"]}]

Logo Cloud 5

Installation

Files

components

Styles