xlibs-components/dist/components/aceternity/tracing-beam.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import { motion, useTransform, useScroll, useSpring, } from "framer-motion";
import { cn } from '../../lib/utils.js';
export const TracingBeam = ({ children, className, }) => {
    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 (_jsxs(motion.div, { ref: ref, className: cn("relative mx-auto h-full w-full max-w-4xl", className), children: [_jsxs("div", { className: "absolute top-3 -left-4 md:-left-20", children: [_jsx(motion.div, { transition: {
                            duration: 0.2,
                            delay: 0.5,
                        }, animate: {
                            boxShadow: scrollYProgress.get() > 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", children: _jsx(motion.div, { transition: {
                                duration: 0.2,
                                delay: 0.5,
                            }, animate: {
                                backgroundColor: scrollYProgress.get() > 0 ? "white" : "#10b981",
                                borderColor: scrollYProgress.get() > 0 ? "white" : "#059669",
                            }, className: "h-2 w-2 rounded-full border border-neutral-300 bg-white" }) }), _jsxs("svg", { viewBox: `0 0 20 ${svgHeight}`, width: "20", height: svgHeight, className: "ml-4 block", "aria-hidden": "true", children: [_jsx(motion.path, { d: `M 1 0V -36 l 18 24 V ${svgHeight * 0.8} l -18 24V ${svgHeight}`, fill: "none", stroke: "#9091A0", strokeOpacity: "0.16", transition: {
                                    duration: 10,
                                } }), _jsx(motion.path, { d: `M 1 0V -36 l 18 24 V ${svgHeight * 0.8} l -18 24V ${svgHeight}`, fill: "none", stroke: "url(#gradient)", strokeWidth: "1.25", className: "motion-reduce:hidden", transition: {
                                    duration: 10,
                                } }), _jsx("defs", { children: _jsxs(motion.linearGradient, { id: "gradient", gradientUnits: "userSpaceOnUse", x1: "0", x2: "0", y1: y1, y2: y2, children: [_jsx("stop", { stopColor: "#18CCFC", stopOpacity: "0" }), _jsx("stop", { stopColor: "#18CCFC" }), _jsx("stop", { offset: "0.325", stopColor: "#6344F5" }), _jsx("stop", { offset: "1", stopColor: "#AE48FF", stopOpacity: "0" })] }) })] })] }), _jsx("div", { ref: contentRef, children: children })] }));
};