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:T152d,'use client'; import { cn } from '@/lib/utils'; import { animate, HTMLMotionProps, motion, useMotionValue } from 'motion/react'; import { useEffect, useRef } from 'react'; import useMeasure from 'react-use-measure'; type InfiniteSliderProps = { children: React.ReactNode; gap?: number; speed?: number; pauseOnHover?: boolean; direction?: 'horizontal' | 'vertical'; reverse?: boolean; className?: string; }; function InfiniteSlider({ children, gap = 16, speed = 100, pauseOnHover = false, direction = 'horizontal', reverse = false, className, }: InfiniteSliderProps) { const [ref, { width, height }] = useMeasure(); const translation = useMotionValue(0); const animationRef = useRef | null>(null); useEffect(() => { const size = direction === 'horizontal' ? width : height; const contentSize = size + gap; const from = reverse ? -contentSize / 2 : 0; const to = reverse ? 0 : -contentSize / 2; animationRef.current = animate(translation, [from, to], { ease: 'linear', duration: Math.abs(to - from) / speed, repeat: Infinity, repeatType: 'loop', repeatDelay: 0, onRepeat: () => translation.set(from), }); return () => animationRef.current?.stop(); }, [translation, speed, width, height, gap, direction, reverse]); const hoverProps = pauseOnHover ? { onHoverStart: () => animationRef.current?.pause(), onHoverEnd: () => animationRef.current?.play(), } : {}; return (

{children} {children}

); } const GRADIENT_ANGLES = { top: 0, right: 90, bottom: 180, left: 270 } as const; type ProgressiveBlurProps = { direction?: keyof typeof GRADIENT_ANGLES; blurLayers?: number; className?: string; blurIntensity?: number; } & HTMLMotionProps<'div'>; function ProgressiveBlur({ direction = 'bottom', blurLayers = 8, className, blurIntensity = 0.25, ...props }: ProgressiveBlurProps) { const layers = Math.max(blurLayers, 2); const segmentSize = 1 / (blurLayers + 1); const angle = GRADIENT_ANGLES[direction]; return (

{Array.from({ length: layers }).map((_, i) => { const stops = [i, i + 1, i + 2, i + 3] .map( (n, j) => `rgba(255,255,255,${j === 1 || j === 2 ? 1 : 0}) ${n * segmentSize * 100}%`, ) .join(', '); const gradient = `linear-gradient(${angle}deg, ${stops})`; return ( ); })}

); } type LogoItem = { name: string; svg: React.ReactNode; }; type LogoCloudProps = { logos: LogoItem[]; label?: string; speed?: number; gap?: number; reverse?: boolean; }; export default function LogoCloud({ logos, label, speed = 40, gap = 112, reverse = false, }: LogoCloudProps) { 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":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion"}]]}]}],["$","li","react-use-measure",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/react-use-measure","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"react-use-measure"}]]}]}]]}],["$","$L51",null,{"registryDependencies":[]}]]}],["$","$L52",null,{"sourceUrl":"https://www.odysseyui.com/r/components-logoclouds-logocloud-3.json","proxyUrl":"https://shadcnregistry.com/r/odysseyui/components-logoclouds-logocloud-3","itemId":"@odysseyui/components-logoclouds-logocloud-3"}],["$","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-3/index.tsx","content":"$54","type":"registry:ui","target":"components/odysseyui/logocloud-3.tsx"}]}]]}],"$L55"]}]

Logo Cloud 3

Installation

Files

components

Styles