"use client"; import { motion } from "framer-motion"; import { useRef, useState, useCallback } from "react"; export const GlassButton = ({ children = "Launch", size = "md", }: { children?: string; size?: "sm" | "md" | "lg"; }) => { const ref = useRef(null); const [pos, setPos] = useState({ x: 0, y: 0 }); const [hovered, setHovered] = useState(false); const track = useCallback((e: React.MouseEvent) => { if (!ref.current) return; const r = ref.current.getBoundingClientRect(); setPos({ x: ((e.clientX - r.left) / r.width - 0.5) * 2, y: ((e.clientY - r.top) / r.height - 0.5) * 2, }); }, []); const leave = useCallback(() => { setHovered(false); setPos({ x: 0, y: 0 }); }, []); const sizeMap = { sm: "h-10 px-6 text-xs gap-1.5", md: "h-12 px-8 text-sm gap-2", lg: "h-14 px-10 text-base gap-2.5", }; return ( setHovered(true)} onMouseLeave={leave} animate={{ x: pos.x * 4, y: pos.y * 4 }} whileTap={{ scale: 0.94 }} transition={{ type: "spring", stiffness: 300, damping: 20, mass: 0.4 }} className={"group relative overflow-hidden rounded-2xl font-semibold tracking-tight text-white " + sizeMap[size]} style={{ perspective: "600px" }} > {children} ); };

Soft Magnetic Button