{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "animated-beam", "dependencies": [], "devDependencies": [], "registryDependencies": [], "files": [ { "path": "./components/ui/animated-beam.tsx", "content": "'use client';\n\nimport { cn } from '@/lib/utils';\nimport { motion } from 'motion/react';\nimport { type RefObject, forwardRef, useEffect, useId, useState } from 'react';\n\nexport const Icons = {\n user: () => (\n \n \n \n \n ),\n claude: () => (\n \n \n \n \n \n \n \n \n \n \n \n ),\n framer: () => (\n \n \n \n \n \n \n \n \n \n ),\n logo: () => (\n \n \n \n ),\n typescript: () => (\n \n \n \n \n ),\n nextjs: () => (\n \n \n \n \n ),\n tailwindcss: () => (\n \n \n \n \n \n \n \n \n \n ),\n gsap: () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ),\n reactjs: () => (\n \n \n \n \n \n \n ),\n};\n\nexport interface AnimatedBeamProps {\n className?: string;\n containerRef: RefObject; // Container ref\n fromRef: RefObject;\n toRef: RefObject;\n curvature?: number;\n reverse?: boolean;\n pathColor?: string;\n pathWidth?: number;\n pathOpacity?: number;\n gradientStartColor?: string;\n gradientStopColor?: string;\n delay?: number;\n duration?: number;\n startXOffset?: number;\n startYOffset?: number;\n endXOffset?: number;\n endYOffset?: number;\n dotted?: boolean;\n dotSpacing?: number;\n}\n\nconst AnimatedBeam: React.FC = ({\n className,\n containerRef,\n fromRef,\n toRef,\n curvature = 0,\n reverse = false, // Include the reverse prop\n duration = Math.random() * 3 + 4,\n delay = 0,\n pathColor = 'gray',\n pathWidth = 2,\n pathOpacity = 0.2,\n gradientStartColor = '#4d40ff',\n gradientStopColor = '#4043ff',\n startXOffset = 0,\n startYOffset = 0,\n endXOffset = 0,\n endYOffset = 0,\n dotted = false,\n dotSpacing = 6,\n}) => {\n const id = useId();\n const [pathD, setPathD] = useState('');\n\n const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 });\n const strokeDasharray = dotted ? `${dotSpacing} ${dotSpacing}` : 'none';\n // Calculate the gradient coordinates based on the reverse prop\n const gradientCoordinates = reverse\n ? {\n x1: ['90%', '-10%'],\n x2: ['100%', '0%'],\n y1: ['0%', '0%'],\n y2: ['0%', '0%'],\n }\n : {\n x1: ['10%', '110%'],\n x2: ['0%', '100%'],\n y1: ['0%', '0%'],\n y2: ['0%', '0%'],\n };\n\n useEffect(() => {\n const updatePath = () => {\n if (containerRef.current && fromRef.current && toRef.current) {\n const containerRect = containerRef.current.getBoundingClientRect();\n const rectA = fromRef.current.getBoundingClientRect();\n const rectB = toRef.current.getBoundingClientRect();\n\n const svgWidth = containerRect.width;\n const svgHeight = containerRect.height;\n setSvgDimensions({ width: svgWidth, height: svgHeight });\n\n const startX = rectA.left - containerRect.left + rectA.width / 2 + startXOffset;\n const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;\n const endX = rectB.left - containerRect.left + rectB.width / 2 + endXOffset;\n const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;\n\n const controlY = startY - curvature;\n const d = `M ${startX},${startY} Q ${(startX + endX) / 2},${controlY} ${endX},${endY}`;\n setPathD(d);\n }\n };\n\n // Initialize ResizeObserver\n const resizeObserver = new ResizeObserver((entries) => {\n // For all entries, recalculate the path\n for (const entry of entries) {\n updatePath();\n }\n });\n\n // Observe the container element\n if (containerRef.current) {\n resizeObserver.observe(containerRef.current);\n }\n\n // Call the updatePath initially to set the initial path\n updatePath();\n\n // Clean up the observer on component unmount\n return () => {\n resizeObserver.disconnect();\n };\n }, [containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset]);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n// Add this line after your component definition\nAnimatedBeam.displayName = 'AnimatedBeam';\n\n// Then export the component\nexport { AnimatedBeam };\n\nconst Circle = forwardRef(\n ({ className, children }, ref) => {\n return (\n \n {children}\n \n );\n }\n);\nCircle.displayName = 'Circle';\n\n// Then export the Circle component\nexport { Circle };\n", "type": "registry:component" } ], "type": "registry:component" }