spinning animations

src/app/globals.css

@@ -9,6 +9,18 @@
 }
 
 @layer utilities {
+  @keyframes spinner {
+    100% {
+      transform: rotate(360deg)
+    }
+  }
+
+  @keyframes spinner-reverse {
+    100% {
+      transform: rotate(-360deg)
+    }
+  }
+
   .gradient {
     @apply bg-gradient-to-br from-slate-950 via-red-700 to-yellow-400;
   }

src/components/stars.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { CSSProperties, HTMLAttributes, useEffect, useState } from "react";
 
 type Props = {
   count: number;
@@ -18,23 +18,57 @@ const Stars = ({ count }: Props) => {
     return `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, ${alpha})`
   }
 
+  const star = (key?: number) => {
+    const radius = `${Math.random() * 7}px`
+    let style: CSSProperties = {
+      background: `radial-gradient(circle, ${randomRgba(1)} 0%, ${randomRgba(0)} 100%)`,
+      width: radius,
+      height: radius,
+      transform: "translate(-50%)",
+      animation: "spinner 5s linear infinite"
+    };
+    if (key) {
+      style = {
+        ...style,
+        left: Math.random() * width,
+        top: Math.random() * height
+      }
+    }
+    return (
+      <div
+        key={key}
+        style={style}
+        className="absolute z-10">
+      </div>
+    )
+  }
+
+  const spinningStar = (key: number) => {
+    const r = .1 + Math.random() * 1337
+    const containerRadius = `${r}px`
+    const duration = Math.floor(r) / 100;
+    const x = Math.random() * width, y = Math.random() * height;
+    const animation = Math.random() > .5 ? "spinner" : "spinner-reverse"
+    return (
+      <div
+        key={key}
+        style={{
+          left: x,
+          top: y,
+          width: containerRadius,
+          height: containerRadius,
+          animation: `${animation} ${duration}s linear infinite`
+        }}
+        className="absolute">
+        {star()}
+      </div>
+    )
+  }
+
   return (
     <div>
       {Array.from({ length: count }).map((_it, i) => {
-        const radius = `${Math.random() * 7}px`
-        return (
-          <div
-            key={i}
-            style={{
-              left: Math.random() * width,
-              top: Math.random() * height,
-              background: `radial-gradient(circle, ${randomRgba(1)} 0%, ${randomRgba(0)} 100%)`,
-              width: radius,
-              height: radius
-            }}
-            className="absolute z-10">
-          </div>
-        )
+        return i % 4 === 0 ? spinningStar(i) : star(i)
       })}
     </div>
   );