xlibs-components/dist/components/magicui/border-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 { motion } from "motion/react";
import { useEffect, useId, useState } from "react";
import { cn } from '../../lib/utils.js';
export const BorderBeam = ({ className, duration = 4, size = 100, color = "#3b82f6", delay = 0, borderWidth = 2, borderRadius = 8, }) => {
    const id = useId();
    const [isVisible, setIsVisible] = useState(false);
    useEffect(() => {
        const timer = setTimeout(() => {
            setIsVisible(true);
        }, delay);
        return () => clearTimeout(timer);
    }, [delay]);
    return (_jsx("div", { className: cn("absolute inset-0 pointer-events-none overflow-hidden", className), style: {
            borderRadius: `${borderRadius}px`,
            zIndex: 10,
        }, children: _jsxs("svg", { className: "absolute inset-0 w-full h-full", style: {
                borderRadius: `${borderRadius}px`,
            }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: `gradient-${id}`, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: "transparent" }), _jsx("stop", { offset: "50%", stopColor: color }), _jsx("stop", { offset: "100%", stopColor: "transparent" })] }) }), _jsx(motion.rect, { x: "0", y: "0", width: "100%", height: borderWidth, fill: `url(#gradient-${id})`, initial: { x: "-100%" }, animate: { x: "100%" }, transition: {
                        duration: duration,
                        repeat: Infinity,
                        delay: 0,
                        ease: "linear",
                    } }), _jsx(motion.rect, { x: `calc(100% - ${borderWidth}px)`, y: "0", width: borderWidth, height: "100%", fill: `url(#gradient-${id})`, initial: { y: "-100%" }, animate: { y: "100%" }, transition: {
                        duration: duration,
                        repeat: Infinity,
                        delay: duration * 0.25,
                        ease: "linear",
                    } }), _jsx(motion.rect, { x: "0", y: `calc(100% - ${borderWidth}px)`, width: "100%", height: borderWidth, fill: `url(#gradient-${id})`, initial: { x: "100%" }, animate: { x: "-100%" }, transition: {
                        duration: duration,
                        repeat: Infinity,
                        delay: duration * 0.5,
                        ease: "linear",
                    } }), _jsx(motion.rect, { x: "0", y: "0", width: borderWidth, height: "100%", fill: `url(#gradient-${id})`, initial: { y: "100%" }, animate: { y: "-100%" }, transition: {
                        duration: duration,
                        repeat: Infinity,
                        delay: duration * 0.75,
                        ease: "linear",
                    } })] }) }));
};