From ae28c0b0ca41f90112dba8c2b0827a1124758f45 Mon Sep 17 00:00:00 2001
From: SandObserver <260779319+SandObserver@users.noreply.github.com>
Date: Wed, 7 Oct 2026 21:29:48 -0400
Subject: [PATCH] Animate the landing page header logo on hover

---
 src/pages/index.astro | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4229cbd..be0bec3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -99,7 +99,12 @@ const schema = {
 <div class="wrap">
   <nav class="nav">
     <div class="brand">
-      <img src="/img/stackyard-wordmark-dark-4680834d.svg" alt="Stackyard" width="125" height="28">
+      <svg class="mark" viewBox="146.35 105.5 772.15 816.5" width="26" height="28" aria-hidden="true" focusable="false">
+        <defs><clipPath id="brand-orbit"><polygon points="512,512 -3000,-1515.65 -3000,-3000 4000,-3000 4000,4000 512,4000"/></clipPath></defs>
+        <g clip-path="url(#brand-orbit)"><path class="orbit" fill="#00D2E0" d="M512 105.5A406.5 406.5 0 0 1 864.04 715.25A75.5 75.5 0 0 1 733.27 639.75A255.5 255.5 0 0 0 512 256.5A75.5 75.5 0 0 1 512 105.5Z"/></g>
+        <path fill="#F2F2F7" d="M551.5 443.58L264.85 278.08A79 79 0 0 0 185.85 414.92L472.5 580.42A79 79 0 0 0 551.5 443.58ZM472.5 443.58L185.85 609.08A79 79 0 0 0 264.85 745.92L551.5 580.42A79 79 0 0 0 472.5 443.58ZM433 512L433 843A79 79 0 0 0 591 843L591 512A79 79 0 0 0 433 512Z"/>
+      </svg>
+      <span class="name">Stackyard</span>
     </div>
     <div class="nav-right">
       <a class="pill pill-solid" href="/docs/installation/docker/">Install</a>
@@ -415,6 +420,22 @@ if (!reduced) {
   };
   schedule();
   document.addEventListener('visibilitychange', schedule);
+}
+    </script>
+    <script is:inline>
+{
+  const brand = document.querySelector('.nav .brand');
+  const orbit = brand.querySelector('.orbit');
+  const reduce = matchMedia('(prefers-reduced-motion: reduce)');
+  let run = null;
+  brand.addEventListener('pointerenter', (e) => {
+    if (e.pointerType === 'touch' || run || reduce.matches) return;
+    run = orbit.animate(
+      [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
+      { duration: 1000, easing: 'cubic-bezier(.65,0,.35,1)' }
+    );
+    run.onfinish = run.oncancel = () => (run = null);
+  });
 }
     </script>
   </body>
@@ -454,6 +475,9 @@ if (!reduced) {
     .nav{display:flex;align-items:center;justify-content:space-between;padding:26px 0}
     .brand{display:flex;align-items:center}
     .brand img{width:125px;height:28px;display:block}
+    .nav .brand{gap:12px;min-height:44px;color:var(--label-primary);font-size:24px;font-weight:700;letter-spacing:-0.025em}
+    .nav .brand .mark{width:26.5px;height:28px;display:block;flex:none;overflow:visible}
+    .nav .brand .orbit{transform-box:view-box;transform-origin:512px 512px}
     .nav-right{display:flex;align-items:center;gap:8px}
     .pill{height:40px;padding:0 20px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;position:relative;
       font-size:14px;font-weight:600;letter-spacing:-0.005em}
@@ -691,7 +715,7 @@ if (!reduced) {
       .screen-inner .np-frame{transform:scale(var(--nps,var(--ws,.9)))}
     }
     @media (max-width:374px){
-      .nav .brand img{width:27px;object-fit:cover;object-position:left center}
+      .nav .brand .name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
     }
     @media (max-width:600px){
       .wrap{padding:0 20px}
@@ -699,7 +723,8 @@ if (!reduced) {
       .nav-right{gap:6px}
       .pill{height:40px;padding:0 13px;font-size:13px}
       .pill-ghost:last-child{display:none}
-      .brand span{font-size:17px}
+      .nav .brand{font-size:21px;gap:10px}
+      .nav .brand .mark{width:22.7px;height:24px}
       .hero{padding:26px 0 26px}
       .hero h1{font-size:34px;line-height:1.06}
       .hero p{font-size:15.5px;margin-top:16px}