background-gradient

1import { cn } from "@/lib/utils";
2import React from "react";
3import { motion } from "motion/react";
4 
5export const BackgroundGradient = ({
6  children,
7  className,
8  containerClassName,
9  animate = true,
10}: {
11  children?: React.ReactNode;
12  className?: string;
13  containerClassName?: string;
14  animate?: boolean;
15}) => {
16  const variants = {
17    initial: {
18      backgroundPosition: "0 50%",
19    },
20    animate: {
21      backgroundPosition: ["0, 50%", "100% 50%", "0 50%"],
22    },
23  };
24  return (
25    <div className={cn("relative p-[4px] group", containerClassName)}>
26      <motion.div
27        variants={animate ? variants : undefined}
28        initial={animate ? "initial" : undefined}
29        animate={animate ? "animate" : undefined}
30        transition={
31          animate
32            ? {
33                duration: 5,
34                repeat: Infinity,
35                repeatType: "reverse",
36              }
37            : undefined
38        }
39        style={{
40          backgroundSize: animate ? "400% 400%" : undefined,
41        }}
42        className={cn(
43          "absolute inset-0 rounded-3xl z-[1] opacity-60 group-hover:opacity-100 blur-xl  transition duration-500 will-change-transform",
44          " 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)]"
45        )}
46      />
47      <motion.div
48        variants={animate ? variants : undefined}
49        initial={animate ? "initial" : undefined}
50        animate={animate ? "animate" : undefined}
51        transition={
52          animate
53            ? {
54                duration: 5,
55                repeat: Infinity,
56                repeatType: "reverse",
57              }
58            : undefined
59        }
60        style={{
61          backgroundSize: animate ? "400% 400%" : undefined,
62        }}
63        className={cn(
64          "absolute inset-0 rounded-3xl z-[1] will-change-transform",
65          "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)]"
66        )}
67      />
68 
69      <div className={cn("relative z-10", className)}>{children}</div>
70    </div>
71  );
72};