From e520f76a66ae1c88cad99558da34821947cfb538 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 4 Nov 2026 10:45:37 +0000
Subject: [PATCH] Grow homepage hero handles out of their vertex

Scaling each handle group from its bounding-box centre made the handles
fly in from the middle of the logo. Draw each handle line outward from its
anchor point instead and pop its tip in once the line is drawn.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G9u8FisF4fZjfoV441qmFB
---
 .../home/HomeHeroIconsAnimation.vue           | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/docs/.vitepress/theme/components/home/HomeHeroIconsAnimation.vue b/docs/.vitepress/theme/components/home/HomeHeroIconsAnimation.vue
index 6224e2eb4..2c049400a 100644
--- a/docs/.vitepress/theme/components/home/HomeHeroIconsAnimation.vue
+++ b/docs/.vitepress/theme/components/home/HomeHeroIconsAnimation.vue
@@ -357,25 +357,31 @@ const logoStroke = (isOuter: boolean) =>
           :animate="{ opacity: showHandles ? 1 : 0 }"
           :transition="{ duration: 0.6 }"
         >
-          <motion.g
+          <!-- Each handle draws out of its vertex, then its tip pops in -->
+          <g
             v-for="group in HANDLE_GROUPS"
             :key="group.delay"
-            :initial="initial({ opacity: 0, scale: 0.2 })"
-            :animate="{ opacity: 1, scale: 1 }"
-            :transition="{ delay: group.delay, duration: 0.3 }"
           >
             <template
               v-for="[x1, y1, x2, y2] in group.segments"
               :key="`${x2},${y2}`"
             >
-              <path :d="`M${x1} ${y1} ${x2} ${y2}`" />
-              <circle
+              <motion.path
+                :d="`M${x1} ${y1} ${x2} ${y2}`"
+                :initial="initial({ pathLength: 0, opacity: 0 })"
+                :animate="{ pathLength: 1, opacity: 1 }"
+                :transition="{ delay: group.delay, duration: 0.3 }"
+              />
+              <motion.circle
                 :cx="x2"
                 :cy="y2"
                 r="0.25"
+                :initial="initial({ opacity: 0, scale: 0 })"
+                :animate="{ opacity: 1, scale: 1 }"
+                :transition="{ delay: group.delay + 0.2, duration: 0.2 }"
               />
             </template>
-          </motion.g>
+          </g>
         </motion.g>
       </motion.svg>
     </div>