Merge pull request #70 from ComputerSocietyVITC/stars

revamp: revamped stars background
ComputerSocietyVITC · Aug 15, 2024 · d32a6d7 · d32a6d7
2 parents 4b84d60 + 27a588d
commit d32a6d7
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 4 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import Footer from "../components/footer/Footer";
 import type { Metadata } from "next";
 import "./globals.css";
-import "./stars.css";
+import Stars from "@/components/stars/stars";
 import { FloatingNav } from "@/components/navbar/FloatingNav";
 
 export const metadata: Metadata = {
@@ -40,9 +40,7 @@ export default function RootLayout({
   return (
     <html lang="en" className="scroll-smooth overflow-x-hidden bg-black">
       <body className="bg-[url('/bg.svg')] bg-cover">
-        <div id="stars"></div>
-        <div id="stars-2"></div>
-        <div id="stars-3"></div>
+        <Stars starCount={130} />
         <FloatingNav navItems={navItems} />
         {children}
         <Footer />

diff --git a/src/components/stars/stars.module.css b/src/components/stars/stars.module.css
@@ -0,0 +1,25 @@
+@keyframes starAnimation {
+  from {
+    transform: translateY(100vh);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-100vh);
+    opacity: 0;
+  }
+}
+
+.stars {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: 0; /* Behind all content */
+  overflow: hidden;
+}
+
+.star {
+  position: absolute;
+  background-color: white;
+  border-radius: 50%;
+  animation: starAnimation linear infinite;
+}
diff --git a/src/components/stars/stars.tsx b/src/components/stars/stars.tsx
@@ -0,0 +1,37 @@
+"use client";
+import { useEffect } from "react";
+import styles from "./stars.module.css";
+
+interface StarsProps {
+  starCount?: number;
+}
+
+const Stars: React.FC<StarsProps> = ({ starCount = 50 }) => {
+  useEffect(() => {
+    const starsContainer = document.getElementById("stars-container");
+
+    if (starsContainer) {
+      for (let i = 0; i < starCount; i++) {
+        const star = document.createElement("div");
+        star.className = styles.star;
+
+        const size = `${Math.random() * 2 + 1}px`;
+        star.style.width = size;
+        star.style.height = size;
+
+        star.style.left = `${Math.random() * 100}%`;
+        star.style.top = `${Math.random() * 100}vh`;
+
+        // Random animation duration between 20 and 40s
+        star.style.animationDuration = `${Math.random() * 20 + 20}s`;
+
+        star.style.animationDelay = "0s";
+        starsContainer.appendChild(star);
+      }
+    }
+  }, [starCount]);
+
+  return <div id="stars-container" className={styles.stars}></div>;
+};
+
+export default Stars;