优化鼠标跟随元素性能，添加防抖和GPU加速

src/app/page.tsx

@@ -23,11 +23,23 @@ export default function Home() {
   const [isHovered, setIsHovered] = useState(false);
 
   useEffect(() => {
+    // 添加防抖处理，减少状态更新频率
+    let timeoutId: NodeJS.Timeout;
+    
     const handleMouseMove = (e: MouseEvent) => {
-      setMousePosition({ x: e.clientX, y: e.clientY });
+      // 使用防抖，每16ms更新一次（约60fps）
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        setMousePosition({ x: e.clientX, y: e.clientY });
+      }, 16);
     };
+    
     window.addEventListener('mousemove', handleMouseMove);
-    return () => window.removeEventListener('mousemove', handleMouseMove);
+    
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      clearTimeout(timeoutId);
+    };
   }, []);
 
   const features = [
@@ -71,11 +83,10 @@ export default function Home() {
         <div className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-orange-400/20 to-amber-400/20 rounded-full blur-3xl animate-pulse"></div>
         <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-gradient-to-tr from-pink-400/20 to-orange-400/20 rounded-full blur-3xl animate-pulse delay-1000"></div>
         <div 
-          className="absolute w-32 h-32 bg-gradient-to-r from-orange-400/30 to-amber-400/30 rounded-full blur-2xl transition-all duration-300 ease-out"
+          className="absolute w-32 h-32 bg-gradient-to-r from-orange-400/30 to-amber-400/30 rounded-full blur-2xl transition-all duration-150 ease-out will-change-transform"
           style={{
-            left: mousePosition.x - 64,
+            // 使用transform而非top/left，利用GPU加速
-            top: mousePosition.y - 64,
+            transform: `translate(${mousePosition.x - 64}px, ${mousePosition.y - 64}px) scale(${isHovered ? 1.5 : 1})`
-            transform: isHovered ? 'scale(1.5)' : 'scale(1)'
           }}
         />
       </div>