{
  "name": "infinite-moving-cards",
  "type": "registry:ui",
  "files": [
    {
      "path": "components/ui/infinite-moving-cards.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport React, { useEffect, useState } from \"react\";\n\nexport const InfiniteMovingCards = ({\n  items,\n  direction = \"left\",\n  speed = \"fast\",\n  pauseOnHover = true,\n  className,\n}: {\n  items: {\n    quote: string;\n    name: string;\n    title: string;\n  }[];\n  direction?: \"left\" | \"right\";\n  speed?: \"fast\" | \"normal\" | \"slow\";\n  pauseOnHover?: boolean;\n  className?: string;\n}) => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const scrollerRef = React.useRef<HTMLUListElement>(null);\n\n  useEffect(() => {\n    addAnimation();\n  }, []);\n  const [start, setStart] = useState(false);\n  function addAnimation() {\n    if (containerRef.current && scrollerRef.current) {\n      const scrollerContent = Array.from(scrollerRef.current.children);\n\n      scrollerContent.forEach((item) => {\n        const duplicatedItem = item.cloneNode(true);\n        if (scrollerRef.current) {\n          scrollerRef.current.appendChild(duplicatedItem);\n        }\n      });\n\n      getDirection();\n      getSpeed();\n      setStart(true);\n    }\n  }\n  const getDirection = () => {\n    if (containerRef.current) {\n      if (direction === \"left\") {\n        containerRef.current.style.setProperty(\n          \"--animation-direction\",\n          \"forwards\",\n        );\n      } else {\n        containerRef.current.style.setProperty(\n          \"--animation-direction\",\n          \"reverse\",\n        );\n      }\n    }\n  };\n  const getSpeed = () => {\n    if (containerRef.current) {\n      if (speed === \"fast\") {\n        containerRef.current.style.setProperty(\"--animation-duration\", \"20s\");\n      } else if (speed === \"normal\") {\n        containerRef.current.style.setProperty(\"--animation-duration\", \"40s\");\n      } else {\n        containerRef.current.style.setProperty(\"--animation-duration\", \"80s\");\n      }\n    }\n  };\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        \"scroller relative z-20 max-w-7xl overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]\",\n        className,\n      )}\n    >\n      <ul\n        ref={scrollerRef}\n        className={cn(\n          \"flex w-max min-w-full shrink-0 flex-nowrap gap-4 py-4\",\n          start && \"animate-scroll\",\n          pauseOnHover && \"hover:[animation-play-state:paused]\",\n        )}\n      >\n        {items.map((item, idx) => (\n          <li\n            className=\"relative w-[350px] max-w-full shrink-0 rounded-2xl border border-b-0 border-zinc-200 bg-[linear-gradient(180deg,#fafafa,#f5f5f5)] px-8 py-6 md:w-[450px] dark:border-zinc-700 dark:bg-[linear-gradient(180deg,#27272a,#18181b)]\"\n            key={item.name}\n          >\n            <blockquote>\n              <div\n                aria-hidden=\"true\"\n                className=\"user-select-none pointer-events-none absolute -top-0.5 -left-0.5 -z-1 h-[calc(100%_+_4px)] w-[calc(100%_+_4px)]\"\n              ></div>\n              <span className=\"relative z-20 text-sm leading-[1.6] font-normal text-neutral-800 dark:text-gray-100\">\n                {item.quote}\n              </span>\n              <div className=\"relative z-20 mt-6 flex flex-row items-center\">\n                <span className=\"flex flex-col gap-1\">\n                  <span className=\"text-sm leading-[1.6] font-normal text-neutral-500 dark:text-gray-400\">\n                    {item.name}\n                  </span>\n                  <span className=\"text-sm leading-[1.6] font-normal text-neutral-500 dark:text-gray-400\">\n                    {item.title}\n                  </span>\n                </span>\n              </div>\n            </blockquote>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/infinite-moving-cards.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Infinite Moving Cards"
}