{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-beam-bidirectional",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/animated-beam/bidirectional.tsx",
      "content": "'use client';\n\nimport { AnimatedBeam, Icons } from '@/components/ui/animated-beam';\nimport { cn } from '@/lib/utils';\nimport type React from 'react';\nimport { forwardRef, useRef } from 'react';\n\nconst Circle = forwardRef<HTMLDivElement, { className?: string; children?: React.ReactNode }>(\n  ({ className, children }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',\n          className\n        )}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default function AnimatedBeamBidirectional() {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const div1Ref = useRef<HTMLDivElement>(null);\n  const div2Ref = useRef<HTMLDivElement>(null);\n\n  return (\n    <div\n      className='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      ref={containerRef}\n    >\n      <div className='flex h-full w-full flex-col items-stretch justify-between gap-10'>\n        <div className='flex flex-row justify-between'>\n          <Circle ref={div1Ref}>\n            <Icons.user />\n          </Circle>\n          <Circle className='p-2' ref={div2Ref}>\n            <Icons.claude />\n          </Circle>\n        </div>\n      </div>\n\n      <AnimatedBeam\n        containerRef={containerRef}\n        fromRef={div1Ref}\n        toRef={div2Ref}\n        startYOffset={10}\n        endYOffset={10}\n        curvature={-20}\n        dotted\n      />\n      <AnimatedBeam\n        containerRef={containerRef}\n        fromRef={div1Ref}\n        toRef={div2Ref}\n        startYOffset={-10}\n        endYOffset={-10}\n        curvature={20}\n        reverse\n        dotted\n        gradientStartColor='#CC9B7A'\n        gradientStopColor='#f5c7a8'\n      />\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}