"use client"; import * as React from "react"; import { motion, HTMLMotionProps } from "framer-motion"; // --- Utility function (works with or without @/lib/utils) --- function cn(...classes: (string | undefined | null | false)[]) { return classes.filter(Boolean).join(" "); } // --- Component Props Definition --- export interface TactileButtonProps extends Omit, "children"> { children?: React.ReactNode; showIndicator?: boolean; indicatorColor?: "blue" | "green" | "amber" | "red" | "slate"; size?: "sm" | "default" | "lg"; fullWidth?: boolean; className?: string; } // --- Framer Spring Animation Physics --- const springTransition = { type: "spring" as const, bounce: 0.45, duration: 0.55, }; /** * TactileButton - A 3D skeuomorphic liquid glass tactile button component * Recreated from Framer with realistic rocker switch tilt & spring physics. */ export const TactileButton = React.forwardRef< HTMLButtonElement, TactileButtonProps >( ( { className, children = "Get Started", showIndicator = true, indicatorColor = "blue", size = "default", fullWidth = false, onClick, ...props }, ref ) => { const [isPressed, setIsPressed] = React.useState(false); const [isHovered, setIsHovered] = React.useState(false); // Responsive size configurations const sizeConfig = { sm: { container: "min-h-[44px] min-w-[130px]", base: "inset-[3px] rounded-[13px]", box: "px-3.5 py-1.5 text-sm sm:text-base gap-2 rounded-[12px]", indicator: "w-2.5 h-2.5", text: "text-sm sm:text-base leading-tight", pressedY: -8, pressedX: 2, rotate: -7.5, }, default: { container: "min-h-[52px] sm:min-h-[60px] min-w-[150px] sm:min-w-[176px]", base: "inset-[4px] rounded-[15px]", box: "px-4 sm:px-[22px] pt-[6px] sm:pt-[7px] pb-[10px] sm:pb-[13px] text-base sm:text-[19px] md:text-[20px] gap-2.5 sm:gap-[12px] rounded-[15px]", indicator: "w-2.5 h-2.5 sm:w-[12px] sm:h-[12px]", text: "text-base sm:text-[19px] md:text-[20px] leading-snug sm:leading-[31px]", pressedY: -12, pressedX: 3, rotate: -8.5, }, lg: { container: "min-h-[60px] sm:min-h-[72px] min-w-[180px] sm:min-w-[210px]", base: "inset-[5px] rounded-[18px]", box: "px-5 sm:px-7 pt-2 sm:pt-3 pb-3 sm:pb-4 text-lg sm:text-[22px] md:text-[24px] gap-3 sm:gap-3.5 rounded-[17px]", indicator: "w-3 h-3 sm:w-[14px] sm:h-[14px]", text: "text-lg sm:text-[22px] md:text-[24px] leading-snug sm:leading-[36px]", pressedY: -15, pressedX: 4, rotate: -8.8, }, }[size]; return (

{/* Recessed Socket Well (Framer "Button Base") */} {/* 3D Liquid Glass Plunger Cap (Framer "Button Box") */} setIsPressed(true)} onMouseUp={() => setIsPressed(false)} onMouseLeave={() => { setIsPressed(false); setIsHovered(false); }} onTouchStart={() => setIsPressed(true)} onTouchEnd={() => setIsPressed(false)} onTouchCancel={() => setIsPressed(false)} onHoverStart={() => setIsHovered(true)} onHoverEnd={() => setIsHovered(false)} onClick={onClick} className={cn( "relative z-10 flex items-center justify-center outline-none cursor-pointer overflow-hidden", "bg-gradient-to-b from-white/95 via-white/85 to-white/90 backdrop-blur-xl border border-white/60", "focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2", fullWidth ? "w-full" : "w-auto", sizeConfig.box )} initial={false} animate={{ // Tilt physics matching physical rocker switch depression rotate: isPressed ? sizeConfig.rotate : 0, y: isPressed ? sizeConfig.pressedY : isHovered ? -2 : 0, x: isPressed ? sizeConfig.pressedX : 0, boxShadow: isPressed ? "rgba(0, 0, 0, 0.22) -2px -6px 1px 0px inset, rgba(255, 255, 255, 0.9) 0.5px 1.5px 2px 0px inset, rgba(0, 0, 0, 0.15) 0px -1px 1px 0px inset, rgba(0, 0, 0, 0.12) 9px 10px 13px 0px, rgba(0, 0, 0, 0.04) 35px 38px 21px 0px, rgba(255, 255, 255, 0.6) 0px 1px 0px 0px inset" : isHovered ? "rgba(0, 0, 0, 0.20) -2px -7px 1px 0px inset, rgba(255, 255, 255, 0.95) 0.5px 2px 2px 0px inset, rgba(0, 0, 0, 0.15) 0px -1px 1px 0px inset, rgba(0, 0, 0, 0.12) 2px 3px 8px 0px, rgba(0, 0, 0, 0.10) 9px 12px 15px 0px, rgba(0, 0, 0, 0.06) 20px 24px 20px 0px, rgba(0, 0, 0, 0.02) 35px 38px 22px 0px, rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset" : "rgba(0, 0, 0, 0.20) -2px -6px 1px 0px inset, rgba(255, 255, 255, 0.9) 0.5px 1.5px 1px 0px inset, rgba(0, 0, 0, 0.15) 0px -1px 1px 0px inset, rgba(0, 0, 0, 0.10) 2px 2px 7px 0px, rgba(0, 0, 0, 0.09) 9px 10px 13px 0px, rgba(0, 0, 0, 0.05) 20px 22px 18px 0px, rgba(0, 0, 0, 0.01) 35px 38px 21px 0px, rgba(0, 0, 0, 0) 55px 60px 23px 0px, rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset", }} transition={springTransition} {...props} > {/* Glass Specular Reflection Sheen */} ); } ); TactileButton.displayName = "TactileButton"; export default function TactileButtonDemo() { return (

Get Started

); }