{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "3d-marquee",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/marquee/3d-marquee.tsx",
      "content": "'use client';\nimport { Marquee } from '@/components/ui/marquee';\n\nconst logos = [\n  {\n    name: 'Microsoft',\n    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',\n  },\n  {\n    name: 'Apple',\n    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',\n  },\n  {\n    name: 'Google',\n    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',\n  },\n  {\n    name: 'Facebook',\n    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',\n  },\n  {\n    name: 'LinkedIn',\n    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',\n  },\n  {\n    name: 'Twitter',\n    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',\n  },\n];\n\nconst Marquee3D = () => {\n  return (\n    <div className='relative flex h-full w-96 mx-auto flex-col items-center justify-center gap-4 overflow-hidden rounded-lg dark:bg-neutral-800 bg-neutral-50 px-10'>\n      <div className='flex flex-row gap-4 perspective-near'>\n        <Marquee\n          className='h-96 justify-center overflow-hidden [--duration:60s] [--gap:1rem]'\n          vertical\n          style={{\n            transform:\n              'translateX(0px) translateY(0px) translateZ(-50px) rotateX(0deg) rotateY(-20deg) rotateZ(10deg) scale(1.5)',\n          }}\n        >\n          {logos.map((data) => (\n            <img\n              key={data.name}\n              src={data.img}\n              alt={data.name}\n              className='mx-auto h-full w-3/4 cursor-pointer rounded-xl border border-neutral-300 transition-all duration-300 hover:ring-1 hover:ring-neutral-300'\n            />\n          ))}\n        </Marquee>\n      </div>\n\n      <div className='pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-linear-to-r from-white dark:from-neutral-900'></div>\n      <div className='pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-linear-to-l from-white dark:from-neutral-900'></div>\n    </div>\n  );\n};\n\nexport default Marquee3D;\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/marquee.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\n\ninterface MarqueeProps {\n  className?: string;\n  reverse?: boolean;\n  pauseOnHover?: boolean;\n  children?: React.ReactNode;\n  vertical?: boolean;\n  repeat?: number;\n  [key: string]: any;\n}\n\nexport function Marquee({\n  className,\n  reverse,\n  pauseOnHover = false,\n  children,\n  vertical = false,\n  repeat = 4,\n  ...props\n}: MarqueeProps) {\n  return (\n    <div\n      {...props}\n      className={cn(\n        'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] gap-(--gap)',\n        {\n          'flex-row': !vertical,\n          'flex-col': vertical,\n        },\n        className\n      )}\n    >\n      {Array(repeat)\n        .fill(0)\n        .map((_, i) => (\n          <div\n            key={i}\n            className={cn('flex shrink-0 justify-around gap-(--gap)', {\n              'animate-marquee flex-row': !vertical && !reverse,\n              'animate-marquee-vertical flex-col': vertical && !reverse,\n              'animate-marquee-reverse flex-row': !vertical && reverse,\n              'animate-marquee-vertical-reverse flex-col': vertical && reverse,\n              'group-hover:[animation-play-state:paused]': pauseOnHover,\n            })}\n          >\n            {children}\n          </div>\n        ))}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}