Gradient Background

import { cn } from "@/lib/utils";
import React from "react";
 
/**
 * Renders a gradient background component.
 *
 * @param {string} [props.gradientBg1="255, 105, 180"] - The first gradient background color in RGB (Hot Pink).
 * @param {string} [props.gradientBg2="102, 230, 102"] - The second gradient background color in RGB (Lime Green).
 * @param {string} [props.gradientColor1="30, 144, 255"] - The first gradient color in RGB (Dodger Blue).
 * @param {string} [props.gradientColor2="255, 105, 180"] - The second gradient color in RGB (Hot Pink).
 * @param {string} [props.gradientColor3="147, 112, 219"] - The third gradient color in RGB (Purple).
 * @param {string} [props.gradientColor4="255, 215, 0"] - The fourth gradient color in RGB (Gold).
 * @param {string} [props.gradientColor5="255, 69, 0"] - The fifth gradient color in RGB (Red-Orange).
 */
export function GradientBackground({
  gradientBg1 = "255, 105, 180", // Default to Hot Pink
  gradientBg2 = "102, 230, 102", // Default to Lime Green
  gradientColor1 = "30, 144, 255", // Dodger Blue
  gradientColor2 = "255, 105, 180", // Hot Pink
  gradientColor3 = "147, 112, 219", // Purple
  gradientColor4 = "255, 215, 0", // Gold
  gradientColor5 = "255, 69, 0", // Red-Orange
}) {
  const cssProperties = {
    "--gradient-bg1": gradientBg1,
    "--gradient-bg2": gradientBg2,
    "--gradient-color1": gradientColor1,
    "--gradient-color2": gradientColor2,
    "--gradient-color3": gradientColor3,
    "--gradient-color4": gradientColor4,
    "--gradient-color5": gradientColor5,
    "--circle-size": "80%",
  } as React.CSSProperties;
 
  return (
    <div className="absolute inset-0 h-full w-full" style={cssProperties}>
      <div
        className={cn(
          "w-full h-full overflow-hidden",
          "bg-[linear-gradient(135deg,_rgb(var(--gradient-bg1)),_rgb(var(--gradient-bg2)))]"
        )}
      >
        <svg xmlns="http://www.w3.org/2000/svg" className="hidden">
          <defs>
            <filter id="goo">
              <feGaussianBlur
                in="SourceGraphic"
                stdDeviation="10"
                result="blur"
              />
              <feColorMatrix
                in="blur"
                mode="matrix"
                values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8"
                result="goo"
              />
              <feBlend in="SourceGraphic" in2="goo" />
            </filter>
          </defs>
        </svg>
        <div
          className="w-full h-full"
          style={{ filter: "url(#goo) blur(40px)" }}
        >
          <div
            className={cn(
              "absolute z-0 opacity-100",
              "w-[var(--circle-size)] h-[var(--circle-size)]",
              "top-[calc(50% - var(--circle-size) / 2)] left-[calc(50% - var(--circle-size) / 2)]",
              "mix-blend-hard-light",
              "origin-center",
              "bg-[radial-gradient(circle_at_center,_rgba(var(--gradient-color1),_0.8)_0%,_rgba(var(--gradient-color1),_0)_50%)]",
              "animate-moveVertical"
            )}
          />
          <div
            className={cn(
              "absolute z-0 opacity-100",
              "w-[var(--circle-size)] h-[var(--circle-size)]",
              "top-[calc(50% - var(--circle-size) / 2)] left-[calc(50% - var(--circle-size) / 2)]",
              "mix-blend-hard-light",
              "origin-[calc(50%_-_400px)]",
              "bg-[radial-gradient(circle_at_center,_rgba(var(--gradient-color2),_0.8)_0%,_rgba(var(--gradient-color2),_0)_50%)]",
              "animate-moveInCircleReverse"
            )}
          />
          <div
            className={cn(
              "absolute z-0 opacity-100",
              "w-[var(--circle-size)] h-[var(--circle-size)]",
              "top-[calc(50% - var(--circle-size) / 2 + 200px)] left-[calc(50% - var(--circle-size) / 2 - 500px)]",
              "mix-blend-hard-light",
              "origin-[calc(50%_+_400px)]",
              "bg-[radial-gradient(circle_at_center,_rgba(var(--gradient-color3),_0.8)_0%,_rgba(var(--gradient-color3),_0)_50%)]",
              "animate-moveInCircle"
            )}
          />
          <div
            className={cn(
              "absolute z-0 opacity-70",
              "w-[var(--circle-size)] h-[var(--circle-size)]",
              "top-[calc(50% - var(--circle-size) / 2)] left-[calc(50% - var(--circle-size) / 2)]",
              "mix-blend-hard-light",
              "origin-[calc(50%_-_200px)]",
              "bg-[radial-gradient(circle_at_center,_rgba(var(--gradient-color4),_0.8)_0%,_rgba(var(--gradient-color4),_0)_50%)]",
              "animate-moveHorizontal"
            )}
          />
          <div
            className={cn(
              "absolute z-0 opacity-100",
              "w-[calc(var(--circle-size)_*_2)] h-[calc(var(--circle-size)_*_2)]",
              "top-[calc(50% - var(--circle-size))] left-[calc(50% - var(--circle-size))]",
              "mix-blend-hard-light",
              "origin-[calc(50%_-_800px)_calc(50%_+_200px)]",
              "bg-[radial-gradient(circle_at_center,_rgba(var(--gradient-color5),_0.8)_0%,_rgba(var(--gradient-color5),_0)_50%)]",
              "animate-moveDiagonal"
            )}
          />
        </div>
      </div>
    </div>
  );
}