{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-beam-multiple-output",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/animated-beam/multiple-output.tsx",
      "content": "'use client';\n\nimport { AnimatedBeam, Circle, Icons } from '@/components/ui/animated-beam';\nimport { cn } from '@/lib/utils';\nimport React, { forwardRef, useRef } from 'react';\n\nexport default function AnimatedBeamMultipleOutput({ className }: { className?: string }) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const div1Ref = useRef<HTMLDivElement>(null);\n  const div2Ref = useRef<HTMLDivElement>(null);\n  const div3Ref = useRef<HTMLDivElement>(null);\n  const div4Ref = useRef<HTMLDivElement>(null);\n  const div5Ref = useRef<HTMLDivElement>(null);\n  const div6Ref = useRef<HTMLDivElement>(null);\n  const div7Ref = useRef<HTMLDivElement>(null);\n\n  return (\n    <div\n      className={cn(\n        'relative flex w-full max-w-[500px] mx-auto items-center justify-center overflow-hidden rounded-lg border dark:bg-neutral-800 bg-neutral-50 lg:p-10 sm:p-4 p-2 md:shadow-xl',\n        className\n      )}\n      ref={containerRef}\n    >\n      <div className='flex h-full w-full flex-row items-stretch justify-between gap-10'>\n        <div className='flex flex-col justify-center'>\n          <Circle ref={div7Ref}>\n            <Icons.user />\n          </Circle>\n        </div>\n        <div className='flex flex-col justify-center'>\n          <Circle ref={div6Ref} className='h-16 w-16'>\n            <Icons.logo />\n          </Circle>\n        </div>\n        <div className='flex flex-col justify-center gap-2'>\n          <Circle ref={div1Ref}>\n            <Icons.typescript />\n          </Circle>\n          <Circle className='p-2' ref={div2Ref}>\n            <Icons.tailwindcss />\n          </Circle>\n          <Circle className='p-2' ref={div3Ref}>\n            <Icons.nextjs />\n          </Circle>\n          <Circle className='p-2' ref={div4Ref}>\n            <Icons.reactjs />\n          </Circle>\n          <Circle className='p-2' ref={div5Ref}>\n            <Icons.framer />\n          </Circle>\n        </div>\n      </div>\n\n      {/* AnimatedBeams */}\n      <AnimatedBeam containerRef={containerRef} fromRef={div1Ref} toRef={div6Ref} duration={3} />\n      <AnimatedBeam containerRef={containerRef} fromRef={div2Ref} toRef={div6Ref} duration={3} />\n      <AnimatedBeam containerRef={containerRef} fromRef={div3Ref} toRef={div6Ref} duration={3} />\n      <AnimatedBeam containerRef={containerRef} fromRef={div4Ref} toRef={div6Ref} duration={3} />\n      <AnimatedBeam containerRef={containerRef} fromRef={div5Ref} toRef={div6Ref} duration={3} />\n      <AnimatedBeam containerRef={containerRef} fromRef={div6Ref} toRef={div7Ref} duration={3} />\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}