56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
|
|
export function CosmicBackground() {
|
|
const cosmosRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const co = cosmosRef.current;
|
|
if (!co) return;
|
|
|
|
// Stars
|
|
const starColors = ["rgba(var(--v5-primary-rgb),.8)", "rgba(var(--v5-cyan-rgb),.7)", "rgba(var(--v5-pink-rgb),.7)"];
|
|
for (let i = 0; i < 150; i++) {
|
|
const s = document.createElement("div");
|
|
s.className = "star" + (Math.random() > 0.83 ? " c" : "");
|
|
if (s.classList.contains("c"))
|
|
s.style.setProperty("--sc", starColors[(Math.random() * 3) | 0]);
|
|
s.style.left = Math.random() * 100 + "%";
|
|
s.style.top = Math.random() * 100 + "%";
|
|
s.style.setProperty("--d", 2 + Math.random() * 5 + "s");
|
|
s.style.setProperty("--dl", Math.random() * 5 + "s");
|
|
s.style.setProperty("--mo", (0.3 + Math.random() * 0.7).toString());
|
|
co.appendChild(s);
|
|
}
|
|
|
|
// Particles
|
|
const particleColors = ["var(--v5-primary)", "var(--v5-cyan)", "var(--v5-pink)"];
|
|
for (let i = 0; i < 20; i++) {
|
|
const p = document.createElement("div");
|
|
p.className = "particle";
|
|
p.style.left = Math.random() * 100 + "%";
|
|
p.style.setProperty("--sz", 2 + Math.random() * 4 + "px");
|
|
p.style.setProperty("--pc", particleColors[(Math.random() * 3) | 0]);
|
|
p.style.setProperty("--fd", 7 + Math.random() * 12 + "s");
|
|
p.style.setProperty("--fdl", Math.random() * 10 + "s");
|
|
co.appendChild(p);
|
|
}
|
|
|
|
return () => {
|
|
co.querySelectorAll(".star, .particle").forEach((el) => el.remove());
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div ref={cosmosRef} className="v5-cosmos">
|
|
<div className="neb neb-1" />
|
|
<div className="neb neb-2" />
|
|
<div className="neb neb-3" />
|
|
<div className="neb neb-4" />
|
|
<div className="shooting-star" style={{ top: "12%", left: "70%" }} />
|
|
<div className="shooting-star" style={{ top: "35%", left: "55%" }} />
|
|
</div>
|
|
);
|
|
}
|