50: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"] 51: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"] 52:T3f3b,"use client" import React, { useCallback, useEffect, useMemo, useRef, useState } from "react" export type LogoItem = | { node: React.ReactNode href?: string title?: string ariaLabel?: string } | { src: string alt?: string href?: string title?: string srcSet?: string sizes?: string width?: number height?: number } export interface LogoLoopProps { logos: LogoItem[] speed?: number direction?: "left" | "right" | "up" | "down" width?: number | string logoHeight?: number gap?: number pauseOnHover?: boolean hoverSpeed?: number fadeOut?: boolean fadeOutColor?: string scaleOnHover?: boolean renderItem?: (item: LogoItem, key: React.Key) => React.ReactNode ariaLabel?: string className?: string style?: React.CSSProperties } const ANIMATION_CONFIG = { SMOOTH_TAU: 0.25, MIN_COPIES: 2, COPY_HEADROOM: 2, } as const const toCssLength = (value?: number | string): string | undefined => typeof value === "number" ? `${value}px` : (value ?? undefined) const cx = (...parts: (string | false | null | undefined)[]) => parts.filter(Boolean).join(" ") const useResizeObserver = ( callback: () => void, elements: React.RefObject[], dependencies: React.DependencyList ) => { useEffect(() => { if (!window.ResizeObserver) { const handleResize = () => callback() window.addEventListener("resize", handleResize) callback() return () => window.removeEventListener("resize", handleResize) } const observers = elements.map((ref) => { if (!ref.current) return null const observer = new ResizeObserver(callback) observer.observe(ref.current) return observer }) callback() return () => { observers.forEach((observer) => observer?.disconnect()) } }, dependencies) } const useImageLoader = ( seqRef: React.RefObject, onLoad: () => void, dependencies: React.DependencyList ) => { useEffect(() => { const images = seqRef.current?.querySelectorAll("img") ?? [] if (images.length === 0) { onLoad() return } let remainingImages = images.length const handleImageLoad = () => { remainingImages -= 1 if (remainingImages === 0) { onLoad() } } images.forEach((img) => { const htmlImg = img as HTMLImageElement if (htmlImg.complete) { handleImageLoad() } else { htmlImg.addEventListener("load", handleImageLoad, { once: true }) htmlImg.addEventListener("error", handleImageLoad, { once: true }) } }) return () => { images.forEach((img) => { img.removeEventListener("load", handleImageLoad) img.removeEventListener("error", handleImageLoad) }) } }, dependencies) } const useAnimationLoop = ( trackRef: React.RefObject, targetVelocity: number, seqWidth: number, seqHeight: number, isHovered: boolean, hoverSpeed: number | undefined, isVertical: boolean ) => { const rafRef = useRef(null) const lastTimestampRef = useRef(null) const offsetRef = useRef(0) const velocityRef = useRef(0) useEffect(() => { const track = trackRef.current if (!track) return const prefersReduced = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches const seqSize = isVertical ? seqHeight : seqWidth if (seqSize > 0) { offsetRef.current = ((offsetRef.current % seqSize) + seqSize) % seqSize const transformValue = isVertical ? `translate3d(0, ${-offsetRef.current}px, 0)` : `translate3d(${-offsetRef.current}px, 0, 0)` track.style.transform = transformValue } if (prefersReduced) { track.style.transform = isVertical ? "translate3d(0, 0, 0)" : "translate3d(0, 0, 0)" return () => { lastTimestampRef.current = null } } const animate = (timestamp: number) => { if (lastTimestampRef.current === null) { lastTimestampRef.current = timestamp } const deltaTime = Math.max(0, timestamp - lastTimestampRef.current) / 1000 lastTimestampRef.current = timestamp const target = isHovered && hoverSpeed !== undefined ? hoverSpeed : targetVelocity const easingFactor = 1 - Math.exp(-deltaTime / ANIMATION_CONFIG.SMOOTH_TAU) velocityRef.current += (target - velocityRef.current) * easingFactor if (seqSize > 0) { let nextOffset = offsetRef.current + velocityRef.current * deltaTime nextOffset = ((nextOffset % seqSize) + seqSize) % seqSize offsetRef.current = nextOffset const transformValue = isVertical ? `translate3d(0, ${-offsetRef.current}px, 0)` : `translate3d(${-offsetRef.current}px, 0, 0)` track.style.transform = transformValue } rafRef.current = requestAnimationFrame(animate) } rafRef.current = requestAnimationFrame(animate) return () => { if (rafRef.current !== null) { cancelAnimationFrame(rafRef.current) rafRef.current = null } lastTimestampRef.current = null } }, [targetVelocity, seqWidth, seqHeight, isHovered, hoverSpeed, isVertical]) } export const LogoLoop = React.memo( ({ logos, speed = 120, direction = "left", width = "100%", logoHeight = 28, gap = 32, pauseOnHover, hoverSpeed, fadeOut = false, fadeOutColor, scaleOnHover = false, renderItem, ariaLabel = "Partner logos", className, style, }) => { const containerRef = useRef(null) const trackRef = useRef(null) const seqRef = useRef(null) const [seqWidth, setSeqWidth] = useState(0) const [seqHeight, setSeqHeight] = useState(0) const [copyCount, setCopyCount] = useState( ANIMATION_CONFIG.MIN_COPIES ) const [isHovered, setIsHovered] = useState(false) const effectiveHoverSpeed = useMemo(() => { if (hoverSpeed !== undefined) return hoverSpeed if (pauseOnHover === true) return 0 if (pauseOnHover === false) return undefined return 0 }, [hoverSpeed, pauseOnHover]) const isVertical = direction === "up" || direction === "down" const targetVelocity = useMemo(() => { const magnitude = Math.abs(speed) let directionMultiplier: number if (isVertical) { directionMultiplier = direction === "up" ? 1 : -1 } else { directionMultiplier = direction === "left" ? 1 : -1 } const speedMultiplier = speed < 0 ? -1 : 1 return magnitude * directionMultiplier * speedMultiplier }, [speed, direction, isVertical]) const updateDimensions = useCallback(() => { const containerWidth = containerRef.current?.clientWidth ?? 0 const sequenceRect = seqRef.current?.getBoundingClientRect?.() const sequenceWidth = sequenceRect?.width ?? 0 const sequenceHeight = sequenceRect?.height ?? 0 if (isVertical) { const parentHeight = containerRef.current?.parentElement?.clientHeight ?? 0 if (containerRef.current && parentHeight > 0) { const targetHeight = Math.ceil(parentHeight) if (containerRef.current.style.height !== `${targetHeight}px`) containerRef.current.style.height = `${targetHeight}px` } if (sequenceHeight > 0) { setSeqHeight(Math.ceil(sequenceHeight)) const viewport = containerRef.current?.clientHeight ?? parentHeight ?? sequenceHeight const copiesNeeded = Math.ceil(viewport / sequenceHeight) + ANIMATION_CONFIG.COPY_HEADROOM setCopyCount(Math.max(ANIMATION_CONFIG.MIN_COPIES, copiesNeeded)) } } else if (sequenceWidth > 0) { setSeqWidth(Math.ceil(sequenceWidth)) const copiesNeeded = Math.ceil(containerWidth / sequenceWidth) + ANIMATION_CONFIG.COPY_HEADROOM setCopyCount(Math.max(ANIMATION_CONFIG.MIN_COPIES, copiesNeeded)) } }, [isVertical]) useResizeObserver( updateDimensions, [containerRef, seqRef], [logos, gap, logoHeight, isVertical] ) useImageLoader(seqRef, updateDimensions, [ logos, gap, logoHeight, isVertical, ]) useAnimationLoop( trackRef, targetVelocity, seqWidth, seqHeight, isHovered, effectiveHoverSpeed, isVertical ) const cssVariables = useMemo( () => ({ "--logoloop-gap": `${gap}px`, "--logoloop-logoHeight": `${logoHeight}px`, ...(fadeOutColor && { "--logoloop-fadeColor": fadeOutColor }), }) as React.CSSProperties, [gap, logoHeight, fadeOutColor] ) const rootClasses = useMemo( () => cx( "relative group", isVertical ? "overflow-hidden h-full inline-block" : "overflow-x-hidden", "[--logoloop-gap:32px]", "[--logoloop-logoHeight:28px]", "[--logoloop-fadeColorAuto:#ffffff]", "dark:[--logoloop-fadeColorAuto:#0b0b0b]", scaleOnHover && "py-[calc(var(--logoloop-logoHeight)*0.1)]", className ), [isVertical, scaleOnHover, className] ) const handleMouseEnter = useCallback(() => { if (effectiveHoverSpeed !== undefined) setIsHovered(true) }, [effectiveHoverSpeed]) const handleMouseLeave = useCallback(() => { if (effectiveHoverSpeed !== undefined) setIsHovered(false) }, [effectiveHoverSpeed]) const renderLogoItem = useCallback( (item: LogoItem, key: React.Key) => { if (renderItem) { return (

{renderItem(item, key)}

) } const isNodeItem = "node" in item const content = isNodeItem ? ( {(item as any).node} ) : ( {(item

) const itemAriaLabel = isNodeItem ? ((item as any).ariaLabel ?? (item as any).title) : ((item as any).alt ?? (item as any).title) const inner = (item as any).href ? ( {content} ) : ( content ) return (

{inner}

) }, [isVertical, scaleOnHover, renderItem] ) const logoLists = useMemo( () => Array.from({ length: copyCount }, (_, copyIndex) => (

0} ref={copyIndex === 0 ? seqRef : undefined} > {logos.map((item, itemIndex) => renderLogoItem(item, `${copyIndex}-${itemIndex}`) )} )), [copyCount, logos, renderLogoItem, isVertical] ) const containerStyle = useMemo( (): React.CSSProperties => ({ width: isVertical ? toCssLength(width) === "100%" ? undefined : toCssLength(width) : (toCssLength(width) ?? "100%"), ...cssVariables, ...style, }), [width, cssVariables, style, isVertical] ) return (

{fadeOut && ( <> {isVertical ? ( <>

) : ( <>

)} )}

{logoLists}

) } ) LogoLoop.displayName = "LogoLoop" export default LogoLoop 4f:["$","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","react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react","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":"react"}]]}]}]]}],["$","$L50",null,{"namespace":"@gammaui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/gammaui/logo-loop.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]