"use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, useTransform, useScroll, useVelocity, useSpring, } from "framer-motion"; import { cn } from "@/lib/utils"; export const TracingBeam = ({ children, className, }: { children: React.ReactNode; className?: string; }) => { const ref = useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"], }); const contentRef = useRef(null); const [svgHeight, setSvgHeight] = useState(0); useEffect(() => { if (contentRef.current) { setSvgHeight(contentRef.current.offsetHeight); } }, []); const y1 = useSpring( useTransform(scrollYProgress, [0, 0.8], [50, svgHeight]), { stiffness: 500, damping: 90, } ); const y2 = useSpring( useTransform(scrollYProgress, [0, 1], [50, svgHeight - 200]), { stiffness: 500, damping: 90, } ); return (

0 ? "none" : "rgba(0, 0, 0, 0.24) 0px 3px 8px", }} className="ml-[27px] h-4 w-4 rounded-full border border-netural-200 shadow-sm flex items-center justify-center" > 0 ? "white" : "rgb(34 197 94)", // emerald-500 borderColor: scrollYProgress.get() > 0 ? "white" : "rgb(22 163 74)", // emerald-600 }} className="h-2 w-2 rounded-full border border-neutral-300 bg-white" />

{children}

); };