Gradient Flow

1import React from "react";
2import { motion } from "motion/react";
3 
4interface GradientFlowProps {
5  children: React.ReactNode;
6  duration?: number;
7  colors?: string[];
8  className?: string;
9  fullWidth?: boolean;
10  radialOverlay?: boolean;
11  blurAmount?: string;
12}
13 
14const GradientFlow: React.FC<GradientFlowProps> = ({
15  children,
16  duration = 20,
17  colors = ["#6366f1", "#2563eb", "#7c3aed", "#db2777"],
18  className = "",
19  fullWidth = false,
20  radialOverlay = true,
21  blurAmount = "10px",
22}) => {
23  const gradientString = `linear-gradient(135deg, ${colors.join(", ")})`;
24  const radialGradient =
25    "radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%)";
26 
27  return (
28    <div
29      className={`relative overflow-hidden ${
30        fullWidth ? "h-full w-full" : ""
31      } ${className}`}
32    >
33      <motion.div
34        className="absolute inset-0"
35        style={{
36          backgroundImage: gradientString,
37          backgroundSize: "400% 400%",
38          filter: `blur(${blurAmount})`,
39        }}
40        animate={{
41          backgroundPosition: ["0% 0%", "100% 100%", "0% 0%"],
42        }}
43        transition={{
44          duration: duration,
45          repeat: Infinity,
46          ease: "easeInOut",
47        }}
48      />
49      {radialOverlay && (
50        <div
51          className="absolute inset-0"
52          style={{
53            backgroundImage: radialGradient,
54            mixBlendMode: "overlay",
55          }}
56        />
57      )}
58      <div className="relative z-10 flex h-full w-full items-center justify-center backdrop-blur-sm">
59        {children}
60      </div>
61    </div>
62  );
63};
64 
65export default GradientFlow;