From e116a7dd159fde15788dd7bd680cf55bcd9faa97 Mon Sep 17 00:00:00 2001
From: Eric <eric.fennis@gmail.com>
Date: Sat, 31 Oct 2026 12:52:35 +0100
Subject: [PATCH] Fix reduce motion sponsor page

---
 docs/.vitepress/theme/components/base/PageTabs.vue        | 2 +-
 .../theme/components/sponsor/SponsorHeroAnimation.vue     | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/.vitepress/theme/components/base/PageTabs.vue b/docs/.vitepress/theme/components/base/PageTabs.vue
index 8276ceb12..be3fe7de7 100644
--- a/docs/.vitepress/theme/components/base/PageTabs.vue
+++ b/docs/.vitepress/theme/components/base/PageTabs.vue
@@ -7,7 +7,7 @@
 </script>
 
 <template>
-  <TabGroup>
+  <TabGroup as="div">
     <TabList class="tab-list">
       <template v-for="(tab, index) in props.tabs" :key="index">
         <Tab :id="`tab-${index}`" class="tab">{{ tab }}</Tab>
diff --git a/docs/.vitepress/theme/components/sponsor/SponsorHeroAnimation.vue b/docs/.vitepress/theme/components/sponsor/SponsorHeroAnimation.vue
index 5927eb2ba..145513c4b 100644
--- a/docs/.vitepress/theme/components/sponsor/SponsorHeroAnimation.vue
+++ b/docs/.vitepress/theme/components/sponsor/SponsorHeroAnimation.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { motion, type Options as MotionOptions } from 'motion-v';
+import { useMediaQuery } from '@vueuse/core';
 
 // motion-v re-exports framer-motion's `Variants`, which doesn't match the `variants` prop of its components
 type Variants = MotionOptions['variants'];
@@ -64,14 +65,13 @@ const onAnimationComplete = (variant: unknown) => {
 
 // Only rendered on the client, so reduced motion is known before the first frame
 const mounted = ref(false);
-const reducedMotion = ref(false);
+const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
 
 onMounted(() => {
-  reducedMotion.value = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   if (reducedMotion.value) {
     drawAnimation.value = 'exit';
-    showHandles.value = false;
   }
+
   mounted.value = true;
 });
 
@@ -152,7 +152,7 @@ const initial = <T,>(value: T) => (reducedMotion.value ? false : value);
       <motion.path
         :d="HEART_PATH"
         stroke-width="2"
-        :style="{ stroke: 'var(--vp-c-gray-1)' }"
+        :style="{ stroke: reducedMotion? 'var(--vp-c-brand)' : 'var(--vp-c-gray-1)' }"
         :initial="initial('hidden')"
         :animate="drawAnimation"
         :variants="draw"