xlibs-components
Version:
Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications
31 lines (30 loc) • 2.35 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '../../lib/utils.js';
import { motion } from "framer-motion";
export const BackgroundGradient = ({ children, className, containerClassName, animate = true, }) => {
const variants = {
initial: {
backgroundPosition: "0 50%",
},
animate: {
backgroundPosition: ["0, 50%", "100% 50%", "0 50%"],
},
};
return (_jsxs("div", { className: cn("relative p-[4px] group", containerClassName), children: [_jsx(motion.div, { variants: animate ? variants : undefined, initial: animate ? "initial" : undefined, animate: animate ? "animate" : undefined, transition: animate
? {
duration: 5,
repeat: Infinity,
repeatType: "reverse",
}
: undefined, style: {
backgroundSize: animate ? "400% 400%" : undefined,
}, className: cn("absolute inset-0 rounded-3xl z-[1] opacity-60 group-hover:opacity-100 blur-xl transition duration-500 will-change-transform", " bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]") }), _jsx(motion.div, { variants: animate ? variants : undefined, initial: animate ? "initial" : undefined, animate: animate ? "animate" : undefined, transition: animate
? {
duration: 5,
repeat: Infinity,
repeatType: "reverse",
}
: undefined, style: {
backgroundSize: animate ? "400% 400%" : undefined,
}, className: cn("absolute inset-0 rounded-3xl z-[1] will-change-transform", "bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]") }), _jsx("div", { className: cn("relative z-10", className), children: children })] }));
};