"use client"; import { motion } from "framer-motion"; import { useRef, useState, useCallback } from "react"; export const PremiumButton = ({ children = "Get Started", variant = "primary", size = "md", }: { children?: string; variant?: "primary" | "secondary" | "ghost"; size?: "sm" | "md" | "lg"; }) => { const ref = useRef(null); const [position, setPosition] = useState({ x: 0, y: 0 }); const [hovered, setHovered] = useState(false); const handleMouse = useCallback((e: React.MouseEvent) => { if (!ref.current) return; const rect = ref.current.getBoundingClientRect(); const x = (e.clientX - rect.left - rect.width / 2) / 8; const y = (e.clientY - rect.top - rect.height / 2) / 8; setPosition({ x, y }); }, []); const handleEnter = useCallback(() => setHovered(true), []); const handleLeave = useCallback(() => { setHovered(false); setPosition({ x: 0, y: 0 }); }, []); const sizeClasses = { sm: "h-9 px-5 text-xs gap-1.5", md: "h-11 px-7 text-sm gap-2", lg: "h-13 px-9 text-base gap-2.5", }; return ( {/* Shimmer sweep */} {/* Glow ring */} {variant === "primary" && ( )} {/* Bottom edge light */} {variant === "primary" && ( )} {/* Content */} {children} ); };

Magnetic Button