improve orbiting item's performance on the landing page

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>
       ))}

components/site-footer.tsx

@@ -5,17 +5,41 @@ import { usePathname } from "next/navigation";
 
 import NewsletterSection from "@/app/(main)/_landing/newsletter";
 import { Icons } from "@/components/icons";
+import { docsConfig } from "@/config/docs";
+import { getFooterCategories } from "@/lib/docs";
 import { cn } from "@/lib/utils";
 
 export function SiteFooter() {
+  const footerCategories: { title: string; href: string }[] = getFooterCategories(
+    docsConfig.sidebarNav,
+  );
   const pathname = usePathname();
+
   return (
     <footer
       className={cn("container flex flex-col justify-between pb-12 pt-4 md:pb-16 md:pt-6", {
         "border-t border-t-border": pathname === "/",
       })}
     >
       <NewsletterSection />
+
+      <nav aria-label="Footer Navigation" className="mx-auto mt-16 w-full max-w-6xl">
+        <div className="grid grid-cols-2 gap-x-4 gap-y-2 md:grid-cols-4 lg:grid-cols-5">
+          {footerCategories.map(({ href, title }) => (
+            <Link
+              href={href}
+              key={title}
+              className={cn(
+                "text-sm text-muted-foreground",
+                "hover:text-foreground focus:text-foreground px-4 py-2",
+              )}
+            >
+              {title}
+            </Link>
+          ))}
+        </div>
+      </nav>
+
       <div className="group mx-auto mt-16 w-fit">
         <div className="flex gap-1">
           <div className="flex gap-1">

lib/docs.ts

@@ -0,0 +1,13 @@
+import type { SidebarNavItem } from "@/types";
+
+export function getFooterCategories(
+  navItems: SidebarNavItem[],
+  excludedTitles: string[] = ["Getting Started", "Contributing"],
+) {
+  return navItems
+    .filter((nav) => !excludedTitles.includes(nav.title))
+    .map((cat) => ({
+      title: cat.title,
+      href: cat.items?.[0]?.href ?? "/docs",
+    }));
+}

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;
+    }
+  }
+}