4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:Tb0e1,'use client'; import { cn } from '@/lib/utils'; import { motion } from 'motion/react'; import { type RefObject, forwardRef, useEffect, useId, useState } from 'react'; export const Icons = { user: () => ( ), claude: () => ( ), framer: () => ( ), logo: () => ( ), typescript: () => ( ), nextjs: () => ( ), tailwindcss: () => ( ), gsap: () => ( ), reactjs: () => ( ), }; export interface AnimatedBeamProps { className?: string; containerRef: RefObject; // Container ref fromRef: RefObject; toRef: RefObject; curvature?: number; reverse?: boolean; pathColor?: string; pathWidth?: number; pathOpacity?: number; gradientStartColor?: string; gradientStopColor?: string; delay?: number; duration?: number; startXOffset?: number; startYOffset?: number; endXOffset?: number; endYOffset?: number; dotted?: boolean; dotSpacing?: number; } const AnimatedBeam: React.FC = ({ className, containerRef, fromRef, toRef, curvature = 0, reverse = false, // Include the reverse prop duration = Math.random() * 3 + 4, delay = 0, pathColor = 'gray', pathWidth = 2, pathOpacity = 0.2, gradientStartColor = '#4d40ff', gradientStopColor = '#4043ff', startXOffset = 0, startYOffset = 0, endXOffset = 0, endYOffset = 0, dotted = false, dotSpacing = 6, }) => { const id = useId(); const [pathD, setPathD] = useState(''); const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 }); const strokeDasharray = dotted ? `${dotSpacing} ${dotSpacing}` : 'none'; // Calculate the gradient coordinates based on the reverse prop const gradientCoordinates = reverse ? { x1: ['90%', '-10%'], x2: ['100%', '0%'], y1: ['0%', '0%'], y2: ['0%', '0%'], } : { x1: ['10%', '110%'], x2: ['0%', '100%'], y1: ['0%', '0%'], y2: ['0%', '0%'], }; useEffect(() => { const updatePath = () => { if (containerRef.current && fromRef.current && toRef.current) { const containerRect = containerRef.current.getBoundingClientRect(); const rectA = fromRef.current.getBoundingClientRect(); const rectB = toRef.current.getBoundingClientRect(); const svgWidth = containerRect.width; const svgHeight = containerRect.height; setSvgDimensions({ width: svgWidth, height: svgHeight }); const startX = rectA.left - containerRect.left + rectA.width / 2 + startXOffset; const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset; const endX = rectB.left - containerRect.left + rectB.width / 2 + endXOffset; const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset; const controlY = startY - curvature; const d = `M ${startX},${startY} Q ${(startX + endX) / 2},${controlY} ${endX},${endY}`; setPathD(d); } }; // Initialize ResizeObserver const resizeObserver = new ResizeObserver((entries) => { // For all entries, recalculate the path for (const entry of entries) { updatePath(); } }); // Observe the container element if (containerRef.current) { resizeObserver.observe(containerRef.current); } // Call the updatePath initially to set the initial path updatePath(); // Clean up the observer on component unmount return () => { resizeObserver.disconnect(); }; }, [containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset]); return ( ); }; // Add this line after your component definition AnimatedBeam.displayName = 'AnimatedBeam'; // Then export the component export { AnimatedBeam }; const Circle = forwardRef( ({ className, children }, ref) => { return (

{children}

); } ); Circle.displayName = 'Circle'; // Then export the Circle component export { Circle }; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"./components/ui/animated-beam.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]