23 lines
926 B
TypeScript
23 lines
926 B
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
|
|
export function AmbientBackground() {
|
|
const dots = Array.from({ length: 14 }, (_, i) => i);
|
|
return (
|
|
<div className="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_10%,rgba(34,211,238,.14),transparent_38%),radial-gradient(circle_at_80%_0%,rgba(167,139,250,.16),transparent_42%)]" />
|
|
{dots.map((i) => (
|
|
<motion.span
|
|
key={i}
|
|
initial={{ opacity: 0.2, y: i * 30 }}
|
|
animate={{ opacity: [0.2, 0.45, 0.2], y: [i * 30, i * 30 - 18, i * 30] }}
|
|
transition={{ repeat: Infinity, duration: 6 + (i % 4), ease: "easeInOut", delay: i * 0.2 }}
|
|
className="absolute h-1.5 w-1.5 rounded-full bg-cyan-200/70 blur-[1px]"
|
|
style={{ left: `${8 + i * 6.3}%`, top: `${12 + (i % 6) * 12}%` }}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|