42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
"use client";
|
|
import { motion } from "framer-motion";
|
|
import { useState } from "react";
|
|
import { Star } from "@/types/space"
|
|
|
|
export default function Starfield() {
|
|
const [stars] = useState<Star[]>(() =>
|
|
Array.from({ length: 80 }).map((_, i) => ({
|
|
id: i,
|
|
left: `${Math.random() * 100}%`,
|
|
top: `${Math.random() * 100}%`,
|
|
size: Math.random() * 2 + 1,
|
|
duration: 2 + Math.random() * 3,
|
|
delay: Math.random() * 5,
|
|
}))
|
|
);
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[-1] bg-[#01030F] overflow-hidden">
|
|
{/* <div className="fixed inset-0 z-[-1] bg-[#020617] overflow-hidden"> */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,_rgba(30,58,138,0.2)_0%,_transparent_50%)]" />
|
|
{stars.map((star) => (
|
|
<motion.div
|
|
key={star.id}
|
|
className="absolute bg-white rounded-full shadow-[0_0_5px_white]"
|
|
style={{
|
|
top: star.top,
|
|
left: star.left,
|
|
width: star.size,
|
|
height: star.size,
|
|
}}
|
|
animate={{ opacity: [0.2, 0.8, 0.2] }}
|
|
transition={{
|
|
duration: star.duration,
|
|
repeat: Infinity,
|
|
delay: star.delay,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
} |