File size: 2,229 Bytes
44ec4f2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 'use client'
import { motion } from 'framer-motion'
export function GradientBackground() {
return (
<div className="fixed inset-0 -z-10 overflow-hidden">
<motion.div
className="absolute top-0 left-0 w-[800px] h-[800px] rounded-full blur-3xl opacity-60"
style={{
background: 'radial-gradient(circle, oklch(0.95 0.15 95) 0%, transparent 70%)',
}}
animate={{
x: [0, 100, 0],
y: [0, -50, 0],
scale: [1, 1.1, 1],
}}
transition={{
duration: 20,
repeat: Infinity,
ease: 'easeInOut',
}}
/>
<motion.div
className="absolute top-1/4 right-0 w-[1000px] h-[1000px] rounded-full blur-3xl opacity-50"
style={{
background: 'radial-gradient(circle, oklch(0.92 0.14 110) 0%, transparent 70%)',
}}
animate={{
x: [0, -150, 0],
y: [0, 100, 0],
scale: [1, 1.15, 1],
}}
transition={{
duration: 25,
repeat: Infinity,
ease: 'easeInOut',
}}
/>
<motion.div
className="absolute bottom-0 left-1/3 w-[900px] h-[900px] rounded-full blur-3xl opacity-40"
style={{
background: 'radial-gradient(circle, oklch(0.85 0.12 75) 0%, transparent 70%)',
}}
animate={{
x: [0, 80, 0],
y: [0, -80, 0],
scale: [1, 1.2, 1],
}}
transition={{
duration: 30,
repeat: Infinity,
ease: 'easeInOut',
}}
/>
<div
className="absolute inset-0 bg-gradient-to-br from-background/60 via-transparent to-background/40"
/>
</div>
)
}
|