improve orbiting item's performance on the landing page (#451)

Co-authored-by: Moamal Alaa <moamalalaapro1@gmail.com>
Co-authored-by: Copilot <copilot@github.com>

Author: 3 people

app/(main)/_landing/stats-bento.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { type CSSProperties, useEffect, useState } from "react";
 
 import AnimatedBorderTrail from "@/animata/container/animated-border-trail";
 import Marquee from "@/animata/container/marquee";
@@ -87,52 +87,42 @@ function OrbitItem({
   duration: number;
   children: React.ReactNode;
 }) {
-  const startAngle = Math.round((index / total) * 360);
-  const [angle, setAngle] = useState(startAngle);
-  const [mounted, setMounted] = useState(false);
+  const delay = (duration / total) * index * -1;
 
-  useEffect(() => {
-    setMounted(true);
-    const id = setInterval(() => setAngle((a) => (a + 1) % 360), duration);
-    return () => clearInterval(id);
-  }, [duration]);
-
-  const rad = (angle * Math.PI) / 180;
-  const x = 35 * Math.cos(rad);
-  const y = 15 * Math.sin(rad);
-  const tilt = (-30 * Math.PI) / 180;
-  const xT = x * Math.cos(tilt) - y * Math.sin(tilt);
-  const yT = x * Math.sin(tilt) + y * Math.cos(tilt);
-  const depth = (Math.sin(rad) + 1) / 2;
-
-  // Round to 2 decimals to prevent hydration mismatch
-  const left = Math.round((50 + xT) * 100) / 100;
-  const top = Math.round((50 + yT) * 100) / 100;
-  const scale = Math.round((0.7 + depth * 0.5) * 100) / 100;
-  const op = Math.round((0.35 + depth * 0.65) * 100) / 100;
+  const orbitContainerStyle: CSSProperties = {
+    top: "50%",
+    left: "50%",
+    animation: `
+          orbit-move ${duration}s linear infinite,
+          orbit-indexes ${duration}s linear infinite
+        `,
+    animationDelay: `${delay}s, ${delay}s`,
+    transformStyle: "preserve-3d",
+  };
+  const itemCorrectionStyle: CSSProperties = {
+    animation: `counter-rotate ${duration}s linear infinite`,
+    animationDelay: `${delay}s`,
+    backfaceVisibility: "hidden",
+  };
 
   return (
-    <div
-      className="absolute flex h-8 w-8 items-center justify-center rounded-full border border-border bg-[hsl(var(--surface-card))] sm:h-10 sm:w-10"
-      style={{
-        left: `${left}%`,
-        top: `${top}%`,
-        transform: `translate(-50%, -50%) scale(${scale})`,
-        zIndex: Math.round(depth * 10),
-        opacity: op,
-      }}
-    >
-      {children}
+    <div className="absolute" style={orbitContainerStyle}>
+      <div
+        className="flex h-8 w-8 items-center justify-center rounded-full border border-border bg-[hsl(var(--surface-card))] sm:h-10 sm:w-10"
+        style={itemCorrectionStyle}
+      >
+        {children}
+      </div>
     </div>
   );
 }
 
 function FrameworkOrbit() {
   return (
     <div className="relative flex h-40 w-full items-center justify-center overflow-hidden rounded-xl border border-border bg-[hsl(var(--surface-alt))] sm:h-48">
-      <Icons.logo className="z-10 h-8 w-8 rounded-full bg-linear-to-br from-violet-500 to-indigo-600 p-1.5 shadow-lg sm:h-10 sm:w-10 sm:p-2" />
+      <Icons.logo className="relative z-10 h-8 w-8 rounded-full bg-linear-to-br from-violet-500 to-indigo-600 p-1.5 shadow-lg sm:h-10 sm:w-10 sm:p-2" />
       {frameworkItems.map((item, i) => (
-        <OrbitItem key={item.key} index={i} total={frameworkItems.length} duration={35}>
+        <OrbitItem key={item.key} index={i} total={frameworkItems.length} duration={12}>
           {item.icon}
         </OrbitItem>
       ))}

styles/globals.css

@@ -563,3 +563,53 @@
 [style*="opacity: 1"] > .scroll-file {
   @apply text-blue-300 dark:text-blue-500;
 }
+
+@layer utilities {
+  @keyframes orbit-move {
+    from {
+      transform: translate(-50%, -50%) rotateY(-40deg) rotateX(70deg) rotateZ(0deg)
+        translateX(100px);
+    }
+    to {
+      transform: translate(-50%, -50%) rotateY(-40deg) rotateX(70deg) rotateZ(360deg)
+        translateX(100px);
+    }
+  }
+
+  @keyframes counter-rotate {
+    0% {
+      transform: rotateZ(0deg) rotateX(-70deg) rotateY(40deg) scale(1);
+      opacity: 1;
+    }
+    25% {
+      transform: rotateZ(-90deg) rotateX(-70deg) rotateY(40deg) scale(1.2);
+      opacity: 1;
+    }
+    50% {
+      transform: rotateZ(-180deg) rotateX(-70deg) rotateY(40deg) scale(0.8);
+      opacity: 0.3;
+    }
+    75% {
+      transform: rotateZ(-270deg) rotateX(-70deg) rotateY(40deg) scale(0.8);
+      opacity: 0.3;
+    }
+    100% {
+      transform: rotateZ(-360deg) rotateX(-70deg) rotateY(40deg) scale(1);
+      opacity: 1;
+    }
+  }
+}
+
+@layer utilities {
+  @keyframes orbit-indexes {
+    0%,
+    25%,
+    100% {
+      z-index: 11;
+    }
+    50%,
+    99% {
+      z-index: 9;
+    }
+  }
+}