43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
const blobs = [
|
|
{
|
|
className: 'w-[600px] h-[600px] top-[-200px] right-[-100px]',
|
|
gradient: 'rgba(139, 92, 246, 0.3)',
|
|
},
|
|
{
|
|
className: 'w-[500px] h-[500px] top-[800px] left-[-150px]',
|
|
gradient: 'rgba(99, 102, 241, 0.25)',
|
|
},
|
|
{
|
|
className: 'w-[400px] h-[400px] top-[1600px] right-[-100px]',
|
|
gradient: 'rgba(236, 72, 153, 0.2)',
|
|
},
|
|
{
|
|
className: 'w-[550px] h-[550px] top-[2400px] left-[-200px]',
|
|
gradient: 'rgba(34, 211, 238, 0.15)',
|
|
},
|
|
{
|
|
className: 'w-[450px] h-[450px] top-[3200px] right-[-150px]',
|
|
gradient: 'rgba(139, 92, 246, 0.25)',
|
|
},
|
|
{
|
|
className: 'w-[500px] h-[500px] top-[4000px] left-[-100px]',
|
|
gradient: 'rgba(99, 102, 241, 0.2)',
|
|
},
|
|
];
|
|
|
|
export function BackgroundBlobs() {
|
|
return (
|
|
<>
|
|
{blobs.map((blob, i) => (
|
|
<div
|
|
key={i}
|
|
className={`absolute rounded-full blur-[80px] opacity-40 pointer-events-none ${blob.className}`}
|
|
style={{ background: `radial-gradient(circle, ${blob.gradient} 0%, transparent 70%)` }}
|
|
/>
|
|
))}
|
|
</>
|
|
);
|
|
}
|