"use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, useTransform, useScroll, useVelocity, useSpring, } from "motion/react"; 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="border-netural-200 ml-[27px] flex h-4 w-4 items-center justify-center rounded-full border shadow-sm" > 0 ? "white" : "#10b981", borderColor: scrollYProgress.get() > 0 ? "white" : "#059669", }} className="h-2 w-2 rounded-full border border-neutral-300 bg-white" />

{children}

); };

Tracing Beam

Instalação

Dependências