{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-loop",
  "type": "registry:block",
  "title": "Logo loop",
  "description": "Logo loop",
  "files": [
    {
      "path": "components/usages/logoloopusage.tsx",
      "content": "import LogoLoop from \"@/registry/open-source/logo-loop\";\nimport {\n\tSiNextdotjs,\n\tSiReact,\n\tSiTailwindcss,\n\tSiTypescript,\n} from \"react-icons/si\";\n\nconst techLogos = [\n\t{ node: <SiReact />, title: \"React\", href: \"https://react.dev\" },\n\t{ node: <SiNextdotjs />, title: \"Next.js\", href: \"https://nextjs.org\" },\n\t{\n\t\tnode: <SiTypescript />,\n\t\ttitle: \"TypeScript\",\n\t\thref: \"https://www.typescriptlang.org\",\n\t},\n\t{\n\t\tnode: <SiTailwindcss />,\n\t\ttitle: \"Tailwind CSS\",\n\t\thref: \"https://tailwindcss.com\",\n\t},\n];\n\n// Alternative with image sources\nconst imageLogos = [\n\t{\n\t\tsrc: \"/logos/company1.png\",\n\t\talt: \"Company 1\",\n\t\thref: \"https://company1.com\",\n\t},\n\t{\n\t\tsrc: \"/logos/company2.png\",\n\t\talt: \"Company 2\",\n\t\thref: \"https://company2.com\",\n\t},\n\t{\n\t\tsrc: \"/logos/company3.png\",\n\t\talt: \"Company 3\",\n\t\thref: \"https://company3.com\",\n\t},\n];\n\nfunction App() {\n\treturn (\n\t\t<div\n\t\t\tstyle={{ height: \"200px\", position: \"relative\", overflow: \"hidden\" }}\n\t\t>\n\t\t\t<LogoLoop\n\t\t\t\tlogos={techLogos}\n\t\t\t\tspeed={120}\n\t\t\t\tdirection=\"left\"\n\t\t\t\tlogoHeight={48}\n\t\t\t\tgap={40}\n\t\t\t\tpauseOnHover\n\t\t\t\tscaleOnHover\n\t\t\t\tfadeOut\n\t\t\t\tfadeOutColor=\"#ffffff\"\n\t\t\t\tariaLabel=\"Technology partners\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default App;\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/logoloopusage.tsx",
      "content": "import LogoLoop from \"@/registry/open-source/logo-loop\";\nimport {\n\tSiNextdotjs,\n\tSiReact,\n\tSiTailwindcss,\n\tSiTypescript,\n} from \"react-icons/si\";\n\nconst techLogos = [\n\t{ node: <SiReact />, title: \"React\", href: \"https://react.dev\" },\n\t{ node: <SiNextdotjs />, title: \"Next.js\", href: \"https://nextjs.org\" },\n\t{\n\t\tnode: <SiTypescript />,\n\t\ttitle: \"TypeScript\",\n\t\thref: \"https://www.typescriptlang.org\",\n\t},\n\t{\n\t\tnode: <SiTailwindcss />,\n\t\ttitle: \"Tailwind CSS\",\n\t\thref: \"https://tailwindcss.com\",\n\t},\n];\n\n// Alternative with image sources\nconst imageLogos = [\n\t{\n\t\tsrc: \"/logos/company1.png\",\n\t\talt: \"Company 1\",\n\t\thref: \"https://company1.com\",\n\t},\n\t{\n\t\tsrc: \"/logos/company2.png\",\n\t\talt: \"Company 2\",\n\t\thref: \"https://company2.com\",\n\t},\n\t{\n\t\tsrc: \"/logos/company3.png\",\n\t\talt: \"Company 3\",\n\t\thref: \"https://company3.com\",\n\t},\n];\n\nfunction App() {\n\treturn (\n\t\t<div\n\t\t\tstyle={{ height: \"200px\", position: \"relative\", overflow: \"hidden\" }}\n\t\t>\n\t\t\t<LogoLoop\n\t\t\t\tlogos={techLogos}\n\t\t\t\tspeed={120}\n\t\t\t\tdirection=\"left\"\n\t\t\t\tlogoHeight={48}\n\t\t\t\tgap={40}\n\t\t\t\tpauseOnHover\n\t\t\t\tscaleOnHover\n\t\t\t\tfadeOut\n\t\t\t\tfadeOutColor=\"#ffffff\"\n\t\t\t\tariaLabel=\"Technology partners\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default App;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/logo-loop.tsx",
      "content": "import React, {\r\n\tuseCallback,\r\n\tuseEffect,\r\n\tuseMemo,\r\n\tuseRef,\r\n\tuseState,\r\n} from \"react\";\r\n\r\nexport type LogoItem =\r\n\t| {\r\n\t\t\tnode: React.ReactNode;\r\n\t\t\thref?: string;\r\n\t\t\ttitle?: string;\r\n\t\t\tariaLabel?: string;\r\n\t  }\r\n\t| {\r\n\t\t\tsrc: string;\r\n\t\t\talt?: string;\r\n\t\t\thref?: string;\r\n\t\t\ttitle?: string;\r\n\t\t\tsrcSet?: string;\r\n\t\t\tsizes?: string;\r\n\t\t\twidth?: number;\r\n\t\t\theight?: number;\r\n\t  };\r\n\r\nexport interface LogoLoopProps {\r\n\tlogos: LogoItem[];\r\n\tspeed?: number;\r\n\tdirection?: \"left\" | \"right\";\r\n\twidth?: number | string;\r\n\tlogoHeight?: number;\r\n\tgap?: number;\r\n\tpauseOnHover?: boolean;\r\n\tfadeOut?: boolean;\r\n\tfadeOutColor?: string;\r\n\tscaleOnHover?: boolean;\r\n\tariaLabel?: string;\r\n\tclassName?: string;\r\n\tstyle?: React.CSSProperties;\r\n}\r\n\r\nconst ANIMATION_CONFIG = {\r\n\tSMOOTH_TAU: 0.25,\r\n\tMIN_COPIES: 2,\r\n\tCOPY_HEADROOM: 2,\r\n} as const;\r\n\r\nconst toCssLength = (value?: number | string): string | undefined =>\r\n\ttypeof value === \"number\" ? `${value}px` : (value ?? undefined);\r\n\r\nconst cx = (...parts: Array<string | false | null | undefined>) =>\r\n\tparts.filter(Boolean).join(\" \");\r\n\r\nconst useResizeObserver = (\r\n\tcallback: () => void,\r\n\telements: Array<React.RefObject<Element | null>>,\r\n\tdependencies: React.DependencyList\r\n) => {\r\n\tuseEffect(() => {\r\n\t\tif (!window.ResizeObserver) {\r\n\t\t\tconst handleResize = () => callback();\r\n\t\t\twindow.addEventListener(\"resize\", handleResize);\r\n\t\t\tcallback();\r\n\t\t\treturn () => window.removeEventListener(\"resize\", handleResize);\r\n\t\t}\r\n\r\n\t\tconst observers = elements.map((ref) => {\r\n\t\t\tif (!ref.current) return null;\r\n\t\t\tconst observer = new ResizeObserver(callback);\r\n\t\t\tobserver.observe(ref.current);\r\n\t\t\treturn observer;\r\n\t\t});\r\n\r\n\t\tcallback();\r\n\r\n\t\treturn () => {\r\n\t\t\tobservers.forEach((observer) => observer?.disconnect());\r\n\t\t};\r\n\t}, dependencies);\r\n};\r\n\r\nconst useImageLoader = (\r\n\tseqRef: React.RefObject<HTMLUListElement | null>,\r\n\tonLoad: () => void,\r\n\tdependencies: React.DependencyList\r\n) => {\r\n\tuseEffect(() => {\r\n\t\tconst images = seqRef.current?.querySelectorAll(\"img\") ?? [];\r\n\r\n\t\tif (images.length === 0) {\r\n\t\t\tonLoad();\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tlet remainingImages = images.length;\r\n\t\tconst handleImageLoad = () => {\r\n\t\t\tremainingImages -= 1;\r\n\t\t\tif (remainingImages === 0) {\r\n\t\t\t\tonLoad();\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\timages.forEach((img) => {\r\n\t\t\tconst htmlImg = img as HTMLImageElement;\r\n\t\t\tif (htmlImg.complete) {\r\n\t\t\t\thandleImageLoad();\r\n\t\t\t} else {\r\n\t\t\t\thtmlImg.addEventListener(\"load\", handleImageLoad, { once: true });\r\n\t\t\t\thtmlImg.addEventListener(\"error\", handleImageLoad, { once: true });\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\timages.forEach((img) => {\r\n\t\t\t\timg.removeEventListener(\"load\", handleImageLoad);\r\n\t\t\t\timg.removeEventListener(\"error\", handleImageLoad);\r\n\t\t\t});\r\n\t\t};\r\n\t}, dependencies);\r\n};\r\n\r\nconst useAnimationLoop = (\r\n\ttrackRef: React.RefObject<HTMLDivElement | null>,\r\n\ttargetVelocity: number,\r\n\tseqWidth: number,\r\n\tisHovered: boolean,\r\n\tpauseOnHover: boolean\r\n) => {\r\n\tconst rafRef = useRef<number | null>(null);\r\n\tconst lastTimestampRef = useRef<number | null>(null);\r\n\tconst offsetRef = useRef(0);\r\n\tconst velocityRef = useRef(0);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst track = trackRef.current;\r\n\t\tif (!track) return;\r\n\r\n\t\tconst prefersReduced =\r\n\t\t\ttypeof window !== \"undefined\" &&\r\n\t\t\twindow.matchMedia &&\r\n\t\t\twindow.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n\r\n\t\tif (seqWidth > 0) {\r\n\t\t\toffsetRef.current =\r\n\t\t\t\t((offsetRef.current % seqWidth) + seqWidth) % seqWidth;\r\n\t\t\ttrack.style.transform = `translate3d(${-offsetRef.current}px, 0, 0)`;\r\n\t\t}\r\n\r\n\t\tif (prefersReduced) {\r\n\t\t\ttrack.style.transform = \"translate3d(0, 0, 0)\";\r\n\t\t\treturn () => {\r\n\t\t\t\tlastTimestampRef.current = null;\r\n\t\t\t};\r\n\t\t}\r\n\r\n\t\tconst animate = (timestamp: number) => {\r\n\t\t\tif (lastTimestampRef.current === null) {\r\n\t\t\t\tlastTimestampRef.current = timestamp;\r\n\t\t\t}\r\n\r\n\t\t\tconst deltaTime =\r\n\t\t\t\tMath.max(0, timestamp - lastTimestampRef.current) / 1000;\r\n\t\t\tlastTimestampRef.current = timestamp;\r\n\r\n\t\t\tconst target = pauseOnHover && isHovered ? 0 : targetVelocity;\r\n\r\n\t\t\tconst easingFactor =\r\n\t\t\t\t1 - Math.exp(-deltaTime / ANIMATION_CONFIG.SMOOTH_TAU);\r\n\t\t\tvelocityRef.current += (target - velocityRef.current) * easingFactor;\r\n\r\n\t\t\tif (seqWidth > 0) {\r\n\t\t\t\tlet nextOffset =\r\n\t\t\t\t\toffsetRef.current + velocityRef.current * deltaTime;\r\n\t\t\t\tnextOffset = ((nextOffset % seqWidth) + seqWidth) % seqWidth;\r\n\t\t\t\toffsetRef.current = nextOffset;\r\n\r\n\t\t\t\tconst translateX = -offsetRef.current;\r\n\t\t\t\ttrack.style.transform = `translate3d(${translateX}px, 0, 0)`;\r\n\t\t\t}\r\n\r\n\t\t\trafRef.current = requestAnimationFrame(animate);\r\n\t\t};\r\n\r\n\t\trafRef.current = requestAnimationFrame(animate);\r\n\r\n\t\treturn () => {\r\n\t\t\tif (rafRef.current !== null) {\r\n\t\t\t\tcancelAnimationFrame(rafRef.current);\r\n\t\t\t\trafRef.current = null;\r\n\t\t\t}\r\n\t\t\tlastTimestampRef.current = null;\r\n\t\t};\r\n\t}, [targetVelocity, seqWidth, isHovered, pauseOnHover]);\r\n};\r\n\r\nexport const LogoLoop = React.memo<LogoLoopProps>(\r\n\t({\r\n\t\tlogos,\r\n\t\tspeed = 120,\r\n\t\tdirection = \"left\",\r\n\t\twidth = \"100%\",\r\n\t\tlogoHeight = 28,\r\n\t\tgap = 32,\r\n\t\tpauseOnHover = true,\r\n\t\tfadeOut = false,\r\n\t\tfadeOutColor,\r\n\t\tscaleOnHover = false,\r\n\t\tariaLabel = \"Partner logos\",\r\n\t\tclassName,\r\n\t\tstyle,\r\n\t}) => {\r\n\t\tconst containerRef = useRef<HTMLDivElement>(null);\r\n\t\tconst trackRef = useRef<HTMLDivElement>(null);\r\n\t\tconst seqRef = useRef<HTMLUListElement>(null);\r\n\r\n\t\tconst [seqWidth, setSeqWidth] = useState<number>(0);\r\n\t\tconst [copyCount, setCopyCount] = useState<number>(\r\n\t\t\tANIMATION_CONFIG.MIN_COPIES\r\n\t\t);\r\n\t\tconst [isHovered, setIsHovered] = useState<boolean>(false);\r\n\r\n\t\tconst targetVelocity = useMemo(() => {\r\n\t\t\tconst magnitude = Math.abs(speed);\r\n\t\t\tconst directionMultiplier = direction === \"left\" ? 1 : -1;\r\n\t\t\tconst speedMultiplier = speed < 0 ? -1 : 1;\r\n\t\t\treturn magnitude * directionMultiplier * speedMultiplier;\r\n\t\t}, [speed, direction]);\r\n\r\n\t\tconst updateDimensions = useCallback(() => {\r\n\t\t\tconst containerWidth = containerRef.current?.clientWidth ?? 0;\r\n\t\t\tconst sequenceWidth =\r\n\t\t\t\tseqRef.current?.getBoundingClientRect?.()?.width ?? 0;\r\n\r\n\t\t\tif (sequenceWidth > 0) {\r\n\t\t\t\tsetSeqWidth(Math.ceil(sequenceWidth));\r\n\t\t\t\tconst copiesNeeded =\r\n\t\t\t\t\tMath.ceil(containerWidth / sequenceWidth) +\r\n\t\t\t\t\tANIMATION_CONFIG.COPY_HEADROOM;\r\n\t\t\t\tsetCopyCount(Math.max(ANIMATION_CONFIG.MIN_COPIES, copiesNeeded));\r\n\t\t\t}\r\n\t\t}, []);\r\n\r\n\t\tuseResizeObserver(\r\n\t\t\tupdateDimensions,\r\n\t\t\t[containerRef, seqRef],\r\n\t\t\t[logos, gap, logoHeight]\r\n\t\t);\r\n\r\n\t\tuseImageLoader(seqRef, updateDimensions, [logos, gap, logoHeight]);\r\n\r\n\t\tuseAnimationLoop(\r\n\t\t\ttrackRef,\r\n\t\t\ttargetVelocity,\r\n\t\t\tseqWidth,\r\n\t\t\tisHovered,\r\n\t\t\tpauseOnHover\r\n\t\t);\r\n\r\n\t\tconst cssVariables = useMemo(\r\n\t\t\t() =>\r\n\t\t\t\t({\r\n\t\t\t\t\t\"--logoloop-gap\": `${gap}px`,\r\n\t\t\t\t\t\"--logoloop-logoHeight\": `${logoHeight}px`,\r\n\t\t\t\t\t...(fadeOutColor && { \"--logoloop-fadeColor\": fadeOutColor }),\r\n\t\t\t\t}) as React.CSSProperties,\r\n\t\t\t[gap, logoHeight, fadeOutColor]\r\n\t\t);\r\n\r\n\t\tconst rootClasses = useMemo(\r\n\t\t\t() =>\r\n\t\t\t\tcx(\r\n\t\t\t\t\t\"relative overflow-x-hidden group\",\r\n\t\t\t\t\t\"[--logoloop-gap:32px]\",\r\n\t\t\t\t\t\"[--logoloop-logoHeight:28px]\",\r\n\t\t\t\t\t\"[--logoloop-fadeColorAuto:#ffffff]\",\r\n\t\t\t\t\t\"dark:[--logoloop-fadeColorAuto:#0b0b0b]\",\r\n\t\t\t\t\tscaleOnHover && \"py-[calc(var(--logoloop-logoHeight)*0.1)]\",\r\n\t\t\t\t\tclassName\r\n\t\t\t\t),\r\n\t\t\t[scaleOnHover, className]\r\n\t\t);\r\n\r\n\t\tconst handleMouseEnter = useCallback(() => {\r\n\t\t\tif (pauseOnHover) setIsHovered(true);\r\n\t\t}, [pauseOnHover]);\r\n\r\n\t\tconst handleMouseLeave = useCallback(() => {\r\n\t\t\tif (pauseOnHover) setIsHovered(false);\r\n\t\t}, [pauseOnHover]);\r\n\r\n\t\tconst renderLogoItem = useCallback(\r\n\t\t\t(item: LogoItem, key: React.Key) => {\r\n\t\t\t\tconst isNodeItem = \"node\" in item;\r\n\r\n\t\t\t\tconst content = isNodeItem ? (\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclassName={cx(\r\n\t\t\t\t\t\t\t\"inline-flex items-center\",\r\n\t\t\t\t\t\t\t\"motion-reduce:transition-none\",\r\n\t\t\t\t\t\t\tscaleOnHover &&\r\n\t\t\t\t\t\t\t\t\"transition-transform duration-300 ease-in-out group-hover/item:scale-120\"\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t\taria-hidden={!!(item as any).href && !(item as any).ariaLabel}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{(item as any).node}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t) : (\r\n\t\t\t\t\t<img\r\n\t\t\t\t\t\tclassName={cx(\r\n\t\t\t\t\t\t\t\"h-(--logoloop-logoHeight) w-auto block object-contain\",\r\n\t\t\t\t\t\t\t\"[-webkit-user-drag:none] pointer-events-none\",\r\n\t\t\t\t\t\t\t\"[image-rendering:-webkit-optimize-contrast]\",\r\n\t\t\t\t\t\t\t\"motion-reduce:transition-none\",\r\n\t\t\t\t\t\t\tscaleOnHover &&\r\n\t\t\t\t\t\t\t\t\"transition-transform duration-300 ease-in-out group-hover/item:scale-120\"\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t\tsrc={(item as any).src}\r\n\t\t\t\t\t\tsrcSet={(item as any).srcSet}\r\n\t\t\t\t\t\tsizes={(item as any).sizes}\r\n\t\t\t\t\t\twidth={(item as any).width}\r\n\t\t\t\t\t\theight={(item as any).height}\r\n\t\t\t\t\t\talt={(item as any).alt ?? \"\"}\r\n\t\t\t\t\t\ttitle={(item as any).title}\r\n\t\t\t\t\t\tloading=\"lazy\"\r\n\t\t\t\t\t\tdecoding=\"async\"\r\n\t\t\t\t\t\tdraggable={false}\r\n\t\t\t\t\t/>\r\n\t\t\t\t);\r\n\r\n\t\t\t\tconst itemAriaLabel = isNodeItem\r\n\t\t\t\t\t? ((item as any).ariaLabel ?? (item as any).title)\r\n\t\t\t\t\t: ((item as any).alt ?? (item as any).title);\r\n\r\n\t\t\t\tconst inner = (item as any).href ? (\r\n\t\t\t\t\t<a\r\n\t\t\t\t\t\tclassName={cx(\r\n\t\t\t\t\t\t\t\"inline-flex items-center no-underline rounded\",\r\n\t\t\t\t\t\t\t\"transition-opacity duration-200 ease-linear\",\r\n\t\t\t\t\t\t\t\"hover:opacity-80\",\r\n\t\t\t\t\t\t\t\"focus-visible:outline-solid focus-visible:outline-current focus-visible:outline-offset-2\"\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t\thref={(item as any).href}\r\n\t\t\t\t\t\taria-label={itemAriaLabel || \"logo link\"}\r\n\t\t\t\t\t\ttarget=\"_blank\"\r\n\t\t\t\t\t\trel=\"noreferrer noopener\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{content}\r\n\t\t\t\t\t</a>\r\n\t\t\t\t) : (\r\n\t\t\t\t\tcontent\r\n\t\t\t\t);\r\n\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<li\r\n\t\t\t\t\t\tclassName={cx(\r\n\t\t\t\t\t\t\t\"flex-none mr-(--logoloop-gap) text-(length:--logoloop-logoHeight) leading-none\",\r\n\t\t\t\t\t\t\tscaleOnHover && \"overflow-visible group/item\"\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t\tkey={key}\r\n\t\t\t\t\t\trole=\"listitem\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{inner}\r\n\t\t\t\t\t</li>\r\n\t\t\t\t);\r\n\t\t\t},\r\n\t\t\t[scaleOnHover]\r\n\t\t);\r\n\r\n\t\tconst logoLists = useMemo(\r\n\t\t\t() =>\r\n\t\t\t\tArray.from({ length: copyCount }, (_, copyIndex) => (\r\n\t\t\t\t\t<ul\r\n\t\t\t\t\t\tclassName=\"flex items-center\"\r\n\t\t\t\t\t\tkey={`copy-${copyIndex}`}\r\n\t\t\t\t\t\trole=\"list\"\r\n\t\t\t\t\t\taria-hidden={copyIndex > 0}\r\n\t\t\t\t\t\tref={copyIndex === 0 ? seqRef : undefined}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{logos.map((item, itemIndex) =>\r\n\t\t\t\t\t\t\trenderLogoItem(item, `${copyIndex}-${itemIndex}`)\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t</ul>\r\n\t\t\t\t)),\r\n\t\t\t[copyCount, logos, renderLogoItem]\r\n\t\t);\r\n\r\n\t\tconst containerStyle = useMemo(\r\n\t\t\t(): React.CSSProperties => ({\r\n\t\t\t\twidth: toCssLength(width) ?? \"100%\",\r\n\t\t\t\t...cssVariables,\r\n\t\t\t\t...style,\r\n\t\t\t}),\r\n\t\t\t[width, cssVariables, style]\r\n\t\t);\r\n\r\n\t\treturn (\r\n\t\t\t<div\r\n\t\t\t\tref={containerRef}\r\n\t\t\t\tclassName={rootClasses}\r\n\t\t\t\tstyle={containerStyle}\r\n\t\t\t\trole=\"region\"\r\n\t\t\t\taria-label={ariaLabel}\r\n\t\t\t\tonMouseEnter={handleMouseEnter}\r\n\t\t\t\tonMouseLeave={handleMouseLeave}\r\n\t\t\t>\r\n\t\t\t\t{fadeOut && (\r\n\t\t\t\t\t<>\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\taria-hidden\r\n\t\t\t\t\t\t\tclassName={cx(\r\n\t\t\t\t\t\t\t\t\"pointer-events-none absolute inset-y-0 left-0 z-1\",\r\n\t\t\t\t\t\t\t\t\"w-[clamp(24px,8%,120px)]\",\r\n\t\t\t\t\t\t\t\t\"bg-[linear-gradient(to_right,var(--logoloop-fadeColor,var(--logoloop-fadeColorAuto))_0%,rgba(0,0,0,0)_100%)]\"\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\taria-hidden\r\n\t\t\t\t\t\t\tclassName={cx(\r\n\t\t\t\t\t\t\t\t\"pointer-events-none absolute inset-y-0 right-0 z-1\",\r\n\t\t\t\t\t\t\t\t\"w-[clamp(24px,8%,120px)]\",\r\n\t\t\t\t\t\t\t\t\"bg-[linear-gradient(to_left,var(--logoloop-fadeColor,var(--logoloop-fadeColorAuto))_0%,rgba(0,0,0,0)_100%)]\"\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</>\r\n\t\t\t\t)}\r\n\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName={cx(\r\n\t\t\t\t\t\t\"flex w-max will-change-transform select-none\",\r\n\t\t\t\t\t\t\"motion-reduce:transform-none\"\r\n\t\t\t\t\t)}\r\n\t\t\t\t\tref={trackRef}\r\n\t\t\t\t>\r\n\t\t\t\t\t{logoLists}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t);\r\n\t}\r\n);\r\n\r\nLogoLoop.displayName = \"LogoLoop\";\r\n\r\nexport default LogoLoop;\r\n",
      "type": "registry:ui"
    }
  ]
}