Initial commit

src/components/background/floatingGradientBackground/FloatingGradientBackground.css

@@ -0,0 +1,102 @@
+.floating-gradient-background-container {
+  --circle-size: 80%;
+  --circle-size-small: 60%;
+  --blending: hard-light;
+}
+
+.floating-gradient-background-circle-one {
+  background: radial-gradient(circle at center, var(--color-background-accent) 0, rgba(255, 255, 255, 0) 50%) no-repeat;
+  mix-blend-mode: var(--blending);
+  width: var(--circle-size);
+  height: var(--circle-size);
+  top: calc(50% - var(--circle-size-small) / 2);
+  left: calc(50% - var(--circle-size-small) / 2);
+  transform-origin: center center;
+  animation: moveVertical 20s ease infinite;
+}
+
+.floating-gradient-background-circle-two {
+  background: radial-gradient(circle at center, var(--color-accent) 0, rgba(255, 255, 255, 0) 50%) no-repeat;
+  mix-blend-mode: var(--blending);
+  width: var(--circle-size);
+  height: var(--circle-size);
+  top: calc(50% - var(--circle-size-small) / 2);
+  left: calc(50% - var(--circle-size-small) / 2);
+  transform-origin: calc(50% - 400px);
+  animation: moveInCircle 20s reverse infinite;
+}
+
+.floating-gradient-background-circle-three {
+  background: radial-gradient(circle at center, var(--color-primary-cta) 0, rgba(255, 255, 255, 0) 50%) no-repeat;
+  mix-blend-mode: var(--blending);
+  width: var(--circle-size-small);
+  height: var(--circle-size-small);
+  top: calc(50% - var(--circle-size) / 2 + 200px);
+  left: calc(50% - var(--circle-size) / 2 - 500px);
+  transform-origin: calc(50% + 400px);
+  animation: moveInCircle 30s linear infinite;
+}
+
+.floating-gradient-background-circle-four {
+  background: radial-gradient(circle at center, var(--color-background-accent) 0, rgba(255, 255, 255, 0) 50%) no-repeat;
+  mix-blend-mode: var(--blending);
+  width: var(--circle-size-small);
+  height: var(--circle-size-small);
+  top: calc(50% - var(--circle-size) / 2);
+  left: calc(50% - var(--circle-size) / 2);
+  transform-origin: calc(50% - 200px);
+  animation: moveHorizontal 30s ease infinite;
+}
+
+.floating-gradient-background-circle-five {
+  background: radial-gradient(circle at center, var(--color-primary-cta) 0, rgba(255, 255, 255, 0) 50%) no-repeat;
+  mix-blend-mode: var(--blending);
+  width: calc(var(--circle-size-small) * 2);
+  height: calc(var(--circle-size-small) * 2);
+  top: calc(50% - var(--circle-size));
+  left: calc(50% - var(--circle-size));
+  transform-origin: calc(50% - 800px) calc(50% + 200px);
+  animation: moveInCircle 20s ease infinite;
+}
+
+@keyframes moveInCircle {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes moveVertical {
+  0% {
+    transform: translateY(-50%);
+  }
+
+  50% {
+    transform: translateY(50%);
+  }
+
+  100% {
+    transform: translateY(-50%);
+  }
+}
+
+@keyframes moveHorizontal {
+  0% {
+    transform: translateX(-50%) translateY(-10%);
+  }
+
+  50% {
+    transform: translateX(50%) translateY(10%);
+  }
+
+  100% {
+    transform: translateX(-50%) translateY(-10%);
+  }
+}

src/components/background/floatingGradientBackground/FloatingGradientBackground.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { memo } from "react";
+import { cls } from "@/lib/utils";
+import "./FloatingGradientBackground.css";
+
+interface FloatingGradientBackgroundProps {
+  className?: string;
+}
+
+const FloatingGradientBackground = ({
+  className = "",
+}: FloatingGradientBackgroundProps) => {
+  return (
+    <div
+      className={cls(
+        "fixed top-0 bottom-0 left-0 right-0 w-full h-full z-0 pointer-events-none blur-[40px]",
+        "[mask-image:linear-gradient(to_bottom,transparent,#010101_20%,#010101_80%,transparent)]",
+        "[mask-composite:intersect]",
+        "[-webkit-mask-image:linear-gradient(to_bottom,transparent,#010101_20%,#010101_80%,transparent)]",
+        "[-webkit-mask-composite:destination-in]",
+        "floating-gradient-background-container",
+        className
+      )}
+      aria-hidden="true"
+    >
+      <div className="absolute opacity-[0.075] floating-gradient-background-circle-one" />
+      <div className="absolute opacity-[0.125] floating-gradient-background-circle-two" />
+      <div className="absolute opacity-[0.125] floating-gradient-background-circle-three" />
+      <div className="absolute opacity-[0.15] floating-gradient-background-circle-four" />
+      <div className="absolute opacity-[0.075] floating-gradient-background-circle-five" />
+    </div>
+  );
+};
+
+FloatingGradientBackground.displayName = "FloatingGradientBackground";
+
+export default memo(FloatingGradientBackground);