app router

src/app/components/Background.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+
+export const Background = () => {
+	return (
+		<div className="fixed inset-0 w-screen h-screen overflow-hidden z-[-1] flex justify-center items-center">
+			<motion.div
+				className="absolute w-[800px] h-[800px] bg-gradient-to-r from-pink-500 to-purple-500 rounded-full blur-3xl"
+				style={{ willChange: "transform, opacity" }}
+				animate={{
+					scale: [1.5, 1.2, 1, 1.2, 1.5],
+					x: [0, 200, 0, -200, 0],
+					y: [0, -80, 150, -150, 0],
+					opacity: [0.6, 1, 0.6],
+				}}
+				transition={{
+					duration: 18,
+					repeat: Number.POSITIVE_INFINITY,
+					ease: "easeInOut",
+				}}
+			/>
+
+			<motion.div
+				className="absolute w-[800px] h-[800px] bg-gradient-to-r from-blue-400 to-red-500 rounded-full blur-3xl"
+				style={{ willChange: "transform, opacity" }}
+				animate={{
+					scale: [1, 1.3, 1.5, 1.3, 1],
+					x: [-150, 150, -150, 150, -150],
+					y: [180, -180, 180, -180, 180],
+					opacity: [0.6, 1, 0.6],
+				}}
+				transition={{
+					duration: 22,
+					repeat: Number.POSITIVE_INFINITY,
+					ease: "easeInOut",
+				}}
+			/>
+		</div>
+	);
+};