Add interactive cursor-tracking gradient animation to hero section

Author: TonsOfFun

docs/.vitepress/theme/components/CursorGradient.vue

@@ -0,0 +1,79 @@
+<template>
+  <div ref="gradientContainer" class="cursor-gradient-container"></div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const gradientContainer = ref<HTMLElement>()
+
+let mouseX = 0
+let mouseY = 0
+let currentX = 0
+let currentY = 0
+let animationFrame: number
+
+const lerp = (start: number, end: number, factor: number) => {
+  return start + (end - start) * factor
+}
+
+const updateGradient = () => {
+  // Smooth interpolation for fluid movement
+  currentX = lerp(currentX, mouseX, 0.1)
+  currentY = lerp(currentY, mouseY, 0.1)
+  
+  // Update CSS custom properties
+  document.documentElement.style.setProperty('--cursor-x', `${currentX}%`)
+  document.documentElement.style.setProperty('--cursor-y', `${currentY}%`)
+  
+  animationFrame = requestAnimationFrame(updateGradient)
+}
+
+const handleMouseMove = (e: MouseEvent) => {
+  // Calculate mouse position as percentage
+  mouseX = (e.clientX / window.innerWidth) * 100
+  mouseY = (e.clientY / window.innerHeight) * 100
+}
+
+onMounted(() => {
+  // Set initial position to center
+  mouseX = 50
+  mouseY = 50
+  currentX = 50
+  currentY = 50
+  
+  // Start animation loop
+  updateGradient()
+  
+  // Add mouse move listener
+  window.addEventListener('mousemove', handleMouseMove)
+  
+  // Add touch support for mobile
+  window.addEventListener('touchmove', (e) => {
+    if (e.touches.length > 0) {
+      const touch = e.touches[0]
+      mouseX = (touch.clientX / window.innerWidth) * 100
+      mouseY = (touch.clientY / window.innerHeight) * 100
+    }
+  })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', handleMouseMove)
+  if (animationFrame) {
+    cancelAnimationFrame(animationFrame)
+  }
+})
+</script>
+
+<style scoped>
+.cursor-gradient-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: -1;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -5,6 +5,7 @@ import DefaultTheme from 'vitepress/theme'
 import './style.css'
 import 'virtual:group-icons.css'
 import FeatureCards from './components/FeatureCards.vue'
+import CursorGradient from './components/CursorGradient.vue'
 import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
 
 export default {
@@ -13,11 +14,13 @@ export default {
     return h(DefaultTheme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
       // 'nav-bar-content-after': () => h(GitHubStars)
+      'layout-top': () => h(CursorGradient)
     })
   },
   enhanceApp({ app, router, siteData }) {
     // Register components globally if needed
     app.component('FeatureCards', FeatureCards)
+    app.component('CursorGradient', CursorGradient)
     enhanceAppWithTabs(app)
   }
 } satisfies Theme

docs/.vitepress/theme/style.css

@@ -91,17 +91,26 @@
  * -------------------------------------------------------------------------- */
 
 :root {
+  /* Cursor tracking variables */
+  --cursor-x: 50%;
+  --cursor-y: 50%;
+  
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background:  -webkit-linear-gradient(
-    120deg,
-    rgb(250, 52, 59) 30%,
-    rgb(255, 249, 245)
+  --vp-home-hero-name-background: radial-gradient(
+    circle at var(--cursor-x) var(--cursor-y),
+    rgb(255, 249, 245) 0%,
+    rgb(255, 100, 100) 20%,
+    rgb(250, 52, 59) 40%,
+    rgb(255, 100, 100) 60%,
+    rgb(250, 52, 59) 100%
   );
 
-  --vp-home-hero-image-background-image: linear-gradient(
-    -45deg,
-    rgb(250, 52, 59) 50%,
-    rgb(255, 249, 245) 50%
+  --vp-home-hero-image-background-image: radial-gradient(
+    circle at var(--cursor-x) var(--cursor-y),
+    rgb(255, 249, 245) 0%,
+    rgb(255, 100, 100) 30%,
+    rgb(250, 52, 59) 60%,
+    rgb(255, 100, 100) 100%
   );
   --vp-home-hero-image-filter: blur(44px);
 }
@@ -182,3 +191,28 @@
   border-top-left-radius: 0 !important;
   border-top-right-radius: 0 !important;
 }
+
+/**
+ * Hero Cursor Tracking
+ * -------------------------------------------------------------------------- */
+
+.VPHero .name {
+  background: var(--vp-home-hero-name-background);
+  -webkit-background-clip: text;
+  background-clip: text;
+  transition: background 0.3s ease;
+}
+
+.VPHero .image-bg {
+  background: var(--vp-home-hero-image-background-image);
+  transition: background 0.3s ease;
+}
+
+/* Add hover effect for enhanced interactivity */
+.VPHero:hover .name {
+  filter: brightness(1.1);
+}
+
+.VPHero:hover .image-bg {
+  filter: var(--vp-home-hero-image-filter) brightness(1.05);
+}