| import React from 'react'; |
| import { motion } from 'framer-motion'; |
|
|
| export const Background: React.FC = () => { |
| return ( |
| <div className="fixed inset-0 z-0 overflow-hidden bg-[#09090b]"> |
| {/* Deep Space Base */} |
| <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-zinc-900 via-[#09090b] to-[#09090b]" /> |
| |
| {/* Animated Orbs */} |
| <motion.div |
| animate={{ |
| scale: [1, 1.2, 1], |
| opacity: [0.3, 0.5, 0.3], |
| x: [0, 100, 0], |
| y: [0, -50, 0], |
| }} |
| transition={{ |
| duration: 20, |
| repeat: Infinity, |
| ease: "easeInOut", |
| }} |
| className="absolute top-[-10%] left-[-10%] w-[50vw] h-[50vw] bg-cyan-500/20 rounded-full blur-[100px]" |
| /> |
| |
| <motion.div |
| animate={{ |
| scale: [1, 1.1, 1], |
| opacity: [0.2, 0.4, 0.2], |
| x: [0, -100, 0], |
| y: [0, 100, 0], |
| }} |
| transition={{ |
| duration: 25, |
| repeat: Infinity, |
| ease: "easeInOut", |
| delay: 2, |
| }} |
| className="absolute bottom-[-10%] right-[-10%] w-[60vw] h-[60vw] bg-blue-600/10 rounded-full blur-[120px]" |
| /> |
| |
| <motion.div |
| animate={{ |
| scale: [1, 1.3, 1], |
| opacity: [0.1, 0.3, 0.1], |
| }} |
| transition={{ |
| duration: 18, |
| repeat: Infinity, |
| ease: "easeInOut", |
| delay: 5, |
| }} |
| className="absolute top-[40%] left-[40%] w-[30vw] h-[30vw] bg-purple-500/10 rounded-full blur-[90px]" |
| /> |
| |
| {/* Grid Pattern Overlay */} |
| <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 brightness-100 contrast-150 mix-blend-overlay"></div> |
| |
| {/* Subtle Grid */} |
| <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div> |
| </div> |
| ); |
| }; |
|
|
