feat: add magnetic hover effect to Button component

Extend ButtonProps with HTMLMotionProps, add mouse event handlers for subtle magnetic pull using springs, and update hover animations for enhanced interactivity. This creates a more engaging user experience with smooth, weak magnetic attraction on mouse movement.

Author: teycir

app/components/Button.tsx

@@ -1,41 +1,80 @@
 'use client';
 
-interface ButtonProps {
+import { motion, useMotionValue, useSpring, HTMLMotionProps } from 'framer-motion';
+import { useRef } from 'react';
+
+interface ButtonProps extends HTMLMotionProps<"button"> {
   children: React.ReactNode;
-  onClick?: () => void;
   variant?: 'primary' | 'secondary' | 'danger';
-  disabled?: boolean;
-  type?: 'button' | 'submit';
-  className?: string;
 }
 
-import { motion } from 'framer-motion';
-
 export function Button({
   children,
-  onClick,
   variant = 'primary',
-  disabled = false,
-  type = 'button',
   className = '',
+  ...props
 }: ButtonProps) {
-  // Base classes provided by globals.css .cyber-button
-  // We can add variant-specific overrides if needed, but the main style is consistent
+  const ref = useRef<HTMLButtonElement>(null);
+
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  // Smooth springs for magnetic effect - weak strength
+  const springConfig = { damping: 15, stiffness: 150, mass: 0.1 };
+  const springX = useSpring(x, springConfig);
+  const springY = useSpring(y, springConfig);
+
+  /* Cache rect on mouse enter to avoid layout thrashing */
+  const rectRef = useRef<DOMRect | null>(null);
+
+  const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
+    rectRef.current = e.currentTarget.getBoundingClientRect();
+  };
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (props.disabled) return;
+    const { clientX, clientY } = e;
+
+    // Use cached rect if available, fallback to getBoundingClientRect if not
+    const rect = rectRef.current || e.currentTarget.getBoundingClientRect();
+    const { left, top, width, height } = rect;
+    const centerX = left + width / 2;
+    const centerY = top + height / 2;
+
+    // Weak magnetic pull
+    // Divide distance by 8 to limit movement max to ~10px typically
+    const distanceX = clientX - centerX;
+    const distanceY = clientY - centerY;
+
+    x.set(distanceX / 8);
+    y.set(distanceY / 8);
+  };
+
+  const handleMouseLeave = () => {
+    x.set(0);
+    y.set(0);
+  };
 
   const variantStyles = {
-    primary: '', // Standard cyber-button
-    secondary: 'bg-transparent border-neon-green/30 hover:bg-neon-green/10', // Override for secondary
+    primary: '',
+    secondary: 'bg-transparent border-neon-green/30 hover:bg-neon-green/10',
     danger: 'border-red-500 text-red-500 hover:bg-red-500/10 hover:text-red-500 hover:shadow-[0_0_20px_rgba(239,68,68,0.4)]',
   };
 
   return (
     <motion.button
-      type={type}
-      onClick={onClick}
-      disabled={disabled}
-      whileHover={!disabled ? { scale: 1.02 } : {}}
-      whileTap={!disabled ? { scale: 0.98 } : {}}
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      style={{ x: springX, y: springY }}
+      whileHover={!props.disabled ? {
+        scale: 1.02,
+        boxShadow: '0 0 15px rgba(0, 255, 65, 0.3)'
+      } : {}}
+      whileTap={!props.disabled ? { scale: 0.98 } : {}}
       className={`cyber-button ${variantStyles[variant]} ${className}`}
+      {...props}
     >
       {children}
     </motion.button>

app/components/Card.tsx

@@ -1,27 +1,61 @@
-'use client';
-
-import { motion } from 'framer-motion';
+import { motion, useMotionTemplate, useMotionValue } from 'framer-motion';
+import React, { MouseEvent } from 'react';
 
 interface CardProps {
     children: React.ReactNode;
     className?: string;
     title?: string;
 }
 
-export function Card({ children, className = '', title }: CardProps) {
+export function Card({ children, className = '', title }: Readonly<CardProps>) {
+    const mouseX = useMotionValue(0);
+    const mouseY = useMotionValue(0);
+
+    /* Cache rect on mouse enter to avoid layout thrashing */
+    // Using a ref to store the rect
+    const rectRef = React.useRef<DOMRect | null>(null);
+
+    function handleMouseEnter({ currentTarget }: MouseEvent) {
+        rectRef.current = currentTarget.getBoundingClientRect();
+    }
+
+    function handleMouseMove({ currentTarget, clientX, clientY }: MouseEvent) {
+        const rect = rectRef.current || currentTarget.getBoundingClientRect();
+        const { left, top } = rect;
+        mouseX.set(clientX - left);
+        mouseY.set(clientY - top);
+    }
+
     return (
         <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
+            whileHover={{ y: -4, transition: { duration: 0.2 } }}
             transition={{ duration: 0.5 }}
-            className={`cyber-card p-6 ${className}`}
+            onMouseMove={handleMouseMove}
+            onMouseEnter={handleMouseEnter}
+            className={`cyber-card p-6 group relative ${className}`}
         >
-            {title && (
-                <div className="mb-4 border-b border-neon-green/20 pb-2">
-                    <h3 className="text-neon-green font-mono font-bold uppercase tracking-wider">{title}</h3>
-                </div>
-            )}
-            {children}
+            <motion.div
+                className="pointer-events-none absolute -inset-px rounded-xl opacity-0 transition duration-300 group-hover:opacity-100"
+                style={{
+                    background: useMotionTemplate`
+            radial-gradient(
+              650px circle at ${mouseX}px ${mouseY}px,
+              rgba(0, 255, 65, 0.15),
+              transparent 80%
+            )
+          `
+                }}
+            />
+            <div className="relative h-full">
+                {title && (
+                    <div className="mb-4 border-b border-neon-green/20 pb-2">
+                        <h3 className="text-neon-green font-mono font-bold uppercase tracking-wider">{title}</h3>
+                    </div>
+                )}
+                {children}
+            </div>
         </motion.div>
     );
 }