src/components/stars.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { CSSProperties, useEffect, useState } from "react";
+import { CSSProperties, HTMLAttributes, useEffect, useState } from "react";
 
 type Props = {
   count: number;
@@ -24,6 +24,8 @@ const Stars = ({ count }: Props) => {
       background: `radial-gradient(circle, ${randomRgba(0.6)} 0%, ${randomRgba(0)} 100%)`,
       width: radius,
       height: radius,
+      transform: "translate(-50%)",
+      animation: "spinner 5s linear infinite"
     };
     if (key) {
       style = {
@@ -57,14 +59,14 @@ const Stars = ({ count }: Props) => {
           height: containerRadius,
           animation: `${animation} ${duration}s linear infinite`
         }}
-        className="absolute z-10 max-w-full max-h-full">
+        className="absolute">
         {star()}
       </div>
     )
   }
 
   return (
-    <div className="absolute w-screen h-screen overflow-hidden">
+    <div>
       {Array.from({ length: count }).map((_it, i) => {
         return i % 4 === 0 ? spinningStar(i) : star(i)
       })}