{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "infinite-moving-cards",
  "type": "registry:block",
  "title": "Infinite moving cards",
  "description": "Infinite moving cards",
  "files": [
    {
      "path": "components/usages/infinitemovingcardsusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { InfiniteMovingCards } from \"@/registry/open-source/infinite-moving-cards\";\n\nexport default function InfiniteMovingCardsDemo() {\n\treturn (\n\t\t<div className=\"h-160 rounded-md flex flex-col antialiased bg-background dark:bg-background dark:bg-grid-white/[0.05] items-center justify-center relative overflow-hidden\">\n\t\t\t<InfiniteMovingCards\n\t\t\t\titems={testimonialsUsages}\n\t\t\t\tdirection=\"right\"\n\t\t\t\tspeed=\"slow\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport const testimonialsUsages = [\n\t{\n\t\tquote: \"It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair.\",\n\t\tname: \"Charles Dickens\",\n\t\ttitle: \"A Tale of Two Cities\",\n\t},\n\t{\n\t\tquote: \"To be, or not to be, that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take Arms against a Sea of troubles, And by opposing end them: to die, to sleep.\",\n\t\tname: \"William Shakespeare\",\n\t\ttitle: \"Hamlet\",\n\t},\n\t{\n\t\tquote: \"All that we see or seem is but a dream within a dream.\",\n\t\tname: \"Edgar Allan Poe\",\n\t\ttitle: \"A Dream Within a Dream\",\n\t},\n\t{\n\t\tquote: \"It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.\",\n\t\tname: \"Jane Austen\",\n\t\ttitle: \"Pride and Prejudice\",\n\t},\n\t{\n\t\tquote: \"Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.\",\n\t\tname: \"Herman Melville\",\n\t\ttitle: \"Moby-Dick\",\n\t},\n];\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/infinitemovingcardsusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { InfiniteMovingCards } from \"@/registry/open-source/infinite-moving-cards\";\n\nexport default function InfiniteMovingCardsDemo() {\n\treturn (\n\t\t<div className=\"h-160 rounded-md flex flex-col antialiased bg-background dark:bg-background dark:bg-grid-white/[0.05] items-center justify-center relative overflow-hidden\">\n\t\t\t<InfiniteMovingCards\n\t\t\t\titems={testimonialsUsages}\n\t\t\t\tdirection=\"right\"\n\t\t\t\tspeed=\"slow\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport const testimonialsUsages = [\n\t{\n\t\tquote: \"It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair.\",\n\t\tname: \"Charles Dickens\",\n\t\ttitle: \"A Tale of Two Cities\",\n\t},\n\t{\n\t\tquote: \"To be, or not to be, that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take Arms against a Sea of troubles, And by opposing end them: to die, to sleep.\",\n\t\tname: \"William Shakespeare\",\n\t\ttitle: \"Hamlet\",\n\t},\n\t{\n\t\tquote: \"All that we see or seem is but a dream within a dream.\",\n\t\tname: \"Edgar Allan Poe\",\n\t\ttitle: \"A Dream Within a Dream\",\n\t},\n\t{\n\t\tquote: \"It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.\",\n\t\tname: \"Jane Austen\",\n\t\ttitle: \"Pride and Prejudice\",\n\t},\n\t{\n\t\tquote: \"Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.\",\n\t\tname: \"Herman Melville\",\n\t\ttitle: \"Moby-Dick\",\n\t},\n];\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/infinite-moving-cards.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { useEffect, useState } from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\n\r\n// https://ui.aceternity.com/components/infinite-moving-cards\r\n\r\nexport const InfiniteMovingCards = ({\r\n\titems,\r\n\tdirection = \"left\",\r\n\tspeed = \"fast\",\r\n\tpauseOnHover = true,\r\n\tclassName,\r\n}: {\r\n\titems: {\r\n\t\tquote: string;\r\n\t\tname: string;\r\n\t\ttitle: string;\r\n\t}[];\r\n\tdirection?: \"left\" | \"right\";\r\n\tspeed?: \"fast\" | \"normal\" | \"slow\";\r\n\tpauseOnHover?: boolean;\r\n\tclassName?: string;\r\n}) => {\r\n\tconst containerRef = React.useRef<HTMLDivElement>(null);\r\n\tconst scrollerRef = React.useRef<HTMLUListElement>(null);\r\n\r\n\tuseEffect(() => {\r\n\t\taddAnimation();\r\n\t}, []);\r\n\tconst [start, setStart] = useState(false);\r\n\tfunction addAnimation() {\r\n\t\tif (containerRef.current && scrollerRef.current) {\r\n\t\t\tconst scrollerContent = Array.from(scrollerRef.current.children);\r\n\r\n\t\t\tscrollerContent.forEach((item) => {\r\n\t\t\t\tconst duplicatedItem = item.cloneNode(true);\r\n\t\t\t\tif (scrollerRef.current) {\r\n\t\t\t\t\tscrollerRef.current.appendChild(duplicatedItem);\r\n\t\t\t\t}\r\n\t\t\t});\r\n\r\n\t\t\tgetDirection();\r\n\t\t\tgetSpeed();\r\n\t\t\tsetStart(true);\r\n\t\t}\r\n\t}\r\n\tconst getDirection = () => {\r\n\t\tif (containerRef.current) {\r\n\t\t\tif (direction === \"left\") {\r\n\t\t\t\tcontainerRef.current.style.setProperty(\r\n\t\t\t\t\t\"--animation-direction\",\r\n\t\t\t\t\t\"forwards\"\r\n\t\t\t\t);\r\n\t\t\t} else {\r\n\t\t\t\tcontainerRef.current.style.setProperty(\r\n\t\t\t\t\t\"--animation-direction\",\r\n\t\t\t\t\t\"reverse\"\r\n\t\t\t\t);\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\tconst getSpeed = () => {\r\n\t\tif (containerRef.current) {\r\n\t\t\tif (speed === \"fast\") {\r\n\t\t\t\tcontainerRef.current.style.setProperty(\r\n\t\t\t\t\t\"--animation-duration\",\r\n\t\t\t\t\t\"20s\"\r\n\t\t\t\t);\r\n\t\t\t} else if (speed === \"normal\") {\r\n\t\t\t\tcontainerRef.current.style.setProperty(\r\n\t\t\t\t\t\"--animation-duration\",\r\n\t\t\t\t\t\"40s\"\r\n\t\t\t\t);\r\n\t\t\t} else {\r\n\t\t\t\tcontainerRef.current.style.setProperty(\r\n\t\t\t\t\t\"--animation-duration\",\r\n\t\t\t\t\t\"80s\"\r\n\t\t\t\t);\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\treturn (\r\n\t\t<div\r\n\t\t\tref={containerRef}\r\n\t\t\tclassName={cn(\r\n\t\t\t\t\"scroller relative z-20  max-w-7xl overflow-hidden  mask-[linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]\",\r\n\t\t\t\tclassName\r\n\t\t\t)}\r\n\t\t>\r\n\t\t\t<ul\r\n\t\t\t\tref={scrollerRef}\r\n\t\t\t\tclassName={cn(\r\n\t\t\t\t\t\" flex min-w-full shrink-0 gap-4 py-4 w-max flex-nowrap\",\r\n\t\t\t\t\tstart && \"animate-scroll \",\r\n\t\t\t\t\tpauseOnHover && \"hover:paused\"\r\n\t\t\t\t)}\r\n\t\t\t>\r\n\t\t\t\t{items.map((item, idx) => (\r\n\t\t\t\t\t<li\r\n\t\t\t\t\t\tclassName=\"w-[350px] max-w-full relative rounded-2xl border border-b-0 shrink-0 border-slate-700 px-8 py-6 md:w-[450px]\"\r\n\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\tbackground:\r\n\t\t\t\t\t\t\t\t\"linear-gradient(180deg, var(--slate-800), var(--slate-900)\",\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tkey={item.name}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<blockquote>\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\t\t\t\tclassName=\"user-select-none -z-1 pointer-events-none absolute -left-0.5 -top-0.5 h-[calc(100%+4px)] w-[calc(100%+4px)]\"\r\n\t\t\t\t\t\t\t></div>\r\n\t\t\t\t\t\t\t<span className=\" relative z-20 text-sm leading-[1.6] text-foreground font-normal\">\r\n\t\t\t\t\t\t\t\t{item.quote}\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t<div className=\"relative z-20 mt-6 flex flex-row items-center\">\r\n\t\t\t\t\t\t\t\t<span className=\"flex flex-col gap-1\">\r\n\t\t\t\t\t\t\t\t\t<span className=\" text-sm leading-[1.6] text-foreground font-normal\">\r\n\t\t\t\t\t\t\t\t\t\t{item.name}\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t<span className=\" text-sm leading-[1.6] text-foreground font-normal\">\r\n\t\t\t\t\t\t\t\t\t\t{item.title}\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</blockquote>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t))}\r\n\t\t\t</ul>\r\n\t\t</div>\r\n\t);\r\n};\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}