{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","css":{},"dependencies":[],"description":"Infinite scrolling logo marquee","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport type React from \"react\";\nimport {\n  Canpoy,\n  Canva,\n  Casetext,\n  Clearbit,\n  Descript,\n  Duolingo,\n  Faire,\n  Strava,\n} from \"@/components/smoothui/shared\";\n\nexport interface LogoMarqueeProps {\n  description?: string;\n  direction?: \"left\" | \"right\";\n  logos?: Array<{\n    name: string;\n    logo: React.ReactNode;\n  }>;\n  pauseOnHover?: boolean;\n  speed?: \"slow\" | \"normal\" | \"fast\";\n  title?: string;\n}\n\nconst DEFAULT_LOGOS = [\n  { logo: <Canpoy />, name: \"Canpoy\" },\n  { logo: <Canva />, name: \"Canva\" },\n  { logo: <Casetext />, name: \"Casetext\" },\n  { logo: <Strava />, name: \"Strava\" },\n  { logo: <Descript />, name: \"Descript\" },\n  { logo: <Duolingo />, name: \"Duolingo\" },\n  { logo: <Faire />, name: \"Faire\" },\n  { logo: <Clearbit />, name: \"Clearbit\" },\n];\n\nconst SPEED_MAP = {\n  fast: \"20s\",\n  normal: \"40s\",\n  slow: \"60s\",\n};\n\nexport function LogoMarquee({\n  title = \"Trusted by industry leaders\",\n  description = \"Join thousands of companies already using our platform\",\n  logos = DEFAULT_LOGOS,\n  speed = \"normal\",\n  direction = \"left\",\n  pauseOnHover = true,\n}: LogoMarqueeProps) {\n  const animationDuration = SPEED_MAP[speed];\n  const animationDirection = direction === \"right\" ? \"reverse\" : \"normal\";\n\n  return (\n    <section className=\"overflow-hidden py-20\">\n      <style>\n        {`\n          @keyframes marquee-scroll {\n            from {\n              transform: translateX(0);\n            }\n            to {\n              transform: translateX(-50%);\n            }\n          }\n\n          .marquee-track {\n            animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;\n            animation-direction: var(--marquee-direction, normal);\n          }\n\n          .marquee-container:hover .marquee-track {\n            animation-play-state: var(--marquee-pause-on-hover, running);\n          }\n\n          @media (prefers-reduced-motion: reduce) {\n            .marquee-track {\n              animation: none;\n            }\n          }\n        `}\n      </style>\n      <div className=\"mx-auto max-w-7xl px-6\">\n        <div className=\"mb-12 text-center\">\n          <h2 className=\"mb-4 font-bold text-2xl text-foreground lg:text-3xl\">\n            {title}\n          </h2>\n          <p className=\"text-foreground/70 text-lg\">{description}</p>\n        </div>\n\n        <div\n          className=\"marquee-container relative overflow-hidden\"\n          style={{\n            maskImage:\n              \"linear-gradient(to right, transparent, black 10%, black 90%, transparent)\",\n            WebkitMaskImage:\n              \"linear-gradient(to right, transparent, black 10%, black 90%, transparent)\",\n          }}\n        >\n          <div\n            className=\"marquee-track flex w-max\"\n            style={\n              {\n                \"--marquee-direction\": animationDirection,\n                \"--marquee-duration\": animationDuration,\n                \"--marquee-pause-on-hover\": pauseOnHover ? \"paused\" : \"running\",\n              } as React.CSSProperties\n            }\n          >\n            {/* First set of logos */}\n            {logos.map((logo, index) => (\n              <div\n                className=\"flex shrink-0 items-center justify-center px-8 py-4 opacity-60 transition-opacity duration-200 *:fill-foreground hover:opacity-100\"\n                key={`first-${logo.name}-${index}`}\n              >\n                {logo.logo}\n              </div>\n            ))}\n            {/* Second set of logos for seamless loop */}\n            {logos.map((logo, index) => (\n              <div\n                className=\"flex shrink-0 items-center justify-center px-8 py-4 opacity-60 transition-opacity duration-200 *:fill-foreground hover:opacity-100\"\n                key={`second-${logo.name}-${index}`}\n              >\n                {logo.logo}\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default LogoMarquee;\n","path":"index.tsx","target":"components/smoothui/logo-cloud-3/index.tsx","type":"registry:block"}],"name":"logo-cloud-3","registryDependencies":["https://smoothui.dev/r/shared.json"],"title":"Logo Cloud 3","type":"registry:block"}