+{"name":"3d-button","description":"Interactive 3D button with depth effects","dependencies":["motion","three"],"files":[{"name":"3d-button.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst button3DVariants = cva(\n [\n \"relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium\",\n \"transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n \"disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none\",\n \"transform-gpu will-change-transform active:scale-95\",\n \"before:absolute before:inset-0 before:rounded-md before:transition-all before:duration-150\",\n \"after:absolute after:inset-0 after:rounded-md after:transition-all after:duration-150\",\n ],\n {\n variants: {\n variant: {\n default: [\n \"bg-primary text-primary-foreground shadow-md hover:bg-primary/90\",\n \"before:bg-gradient-to-t before:from-primary/80 before:to-primary before:translate-y-1 before:shadow-lg\",\n \"hover:before:translate-y-0.5 active:before:translate-y-0\",\n \"after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0\",\n \"hover:after:opacity-100\",\n ],\n destructive: [\n \"bg-destructive text-destructive-foreground shadow-md hover:bg-destructive/90\",\n \"before:bg-gradient-to-t before:from-destructive/80 before:to-destructive before:translate-y-1 before:shadow-lg\",\n \"hover:before:translate-y-0.5 active:before:translate-y-0\",\n \"after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0\",\n \"hover:after:opacity-100\",\n ],\n outline: [\n \"border border-input bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground\",\n \"before:bg-gradient-to-t before:from-muted/50 before:to-background before:translate-y-1 before:border before:border-input\",\n \"hover:before:translate-y-0.5 active:before:translate-y-0\",\n \"after:bg-gradient-to-b after:from-white/10 after:to-transparent after:opacity-0\",\n \"hover:after:opacity-100\",\n ],\n secondary: [\n \"bg-secondary text-secondary-foreground shadow-md hover:bg-secondary/80\",\n \"before:bg-gradient-to-t before:from-secondary/80 before:to-secondary before:translate-y-1 before:shadow-lg\",\n \"hover:before:translate-y-0.5 active:before:translate-y-0\",\n \"after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0\",\n \"hover:after:opacity-100\",\n ],\n ghost: [\n \"text-foreground hover:bg-accent hover:text-accent-foreground\",\n \"before:bg-gradient-to-t before:from-accent/30 before:to-accent/10 before:translate-y-1 before:opacity-0\",\n \"hover:before:opacity-100 hover:before:translate-y-0.5 active:before:translate-y-0\",\n \"after:bg-gradient-to-b after:from-white/10 after:to-transparent after:opacity-0\",\n \"hover:after:opacity-50\",\n ],\n link: [\n \"text-primary underline-offset-4 hover:underline\",\n \"before:hidden after:hidden\",\n ],\n neon: [\n \"bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg\",\n \"before:bg-gradient-to-t before:from-purple-600 before:to-pink-600 before:translate-y-1 before:shadow-lg\",\n \"hover:before:translate-y-0.5 active:before:translate-y-0\",\n \"after:bg-gradient-to-b after:from-white/30 after:to-transparent after:opacity-0\",\n \"hover:after:opacity-100\",\n \"hover:shadow-purple-500/25 hover:shadow-2xl\",\n ],\n glass: [\n \"bg-white/10 backdrop-blur-md border border-white/20 text-foreground shadow-lg\",\n \"before:bg-gradient-to-t before:from-white/5 before:to-white/20 before:translate-y-1 before:backdrop-blur-md before:border before:border-white/20\",\n \"hover:before:translate-y-0.5 active:before:translate-y-0\",\n \"after:bg-gradient-to-b after:from-white/30 after:to-transparent after:opacity-0\",\n \"hover:after:opacity-100\",\n ],\n gradient: [\n \"bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white shadow-lg\",\n \"before:bg-gradient-to-t before:from-blue-600 before:via-purple-600 before:to-pink-600 before:translate-y-1 before:shadow-lg\",\n \"hover:before:translate-y-0.5 active:before:translate-y-0\",\n \"after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0\",\n \"hover:after:opacity-100\",\n \"hover:bg-gradient-to-r hover:from-blue-400 hover:via-purple-400 hover:to-pink-400\",\n ],\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n xl: \"h-12 rounded-lg px-10 text-base\",\n icon: \"h-10 w-10\",\n },\n depth: {\n none: \"before:translate-y-0\",\n sm: \"before:translate-y-0.5 hover:before:translate-y-0 active:before:translate-y-0\",\n default:\n \"before:translate-y-1 hover:before:translate-y-0.5 active:before:translate-y-0\",\n lg: \"before:translate-y-1.5 hover:before:translate-y-0.5 active:before:translate-y-0\",\n xl: \"before:translate-y-2 hover:before:translate-y-1 active:before:translate-y-0\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n depth: \"default\",\n },\n }\n)\n\ninterface Button3DProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof button3DVariants> {\n asChild?: boolean\n tiltOnHover?: boolean\n glowIntensity?: number\n shadowColor?: string\n pressAnimation?: boolean\n}\n\nconst Button3D = React.forwardRef<HTMLButtonElement, Button3DProps>(\n (\n {\n className,\n variant,\n size,\n depth,\n tiltOnHover = false,\n glowIntensity = 0,\n shadowColor,\n pressAnimation = true,\n children,\n onMouseEnter,\n onMouseLeave,\n onMouseMove,\n onMouseDown,\n onMouseUp,\n style,\n ...props\n },\n ref\n ) => {\n const buttonRef = React.useRef<HTMLButtonElement>(null)\n const [isHovered, setIsHovered] = React.useState(false)\n const [isPressed, setIsPressed] = React.useState(false)\n const [tiltTransform, setTiltTransform] = React.useState({ x: 0, y: 0 })\n\n const updateTilt = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!tiltOnHover || !buttonRef.current) return\n\n const rect = buttonRef.current.getBoundingClientRect()\n const centerX = rect.left + rect.width / 2\n const centerY = rect.top + rect.height / 2\n\n const deltaX = (e.clientX - centerX) / (rect.width / 2)\n const deltaY = (e.clientY - centerY) / (rect.height / 2)\n\n setTiltTransform({\n x: deltaY * -10, // Inverted for more natural feel\n y: deltaX * 10,\n })\n },\n [tiltOnHover]\n )\n\n const resetTilt = React.useCallback(() => {\n setTiltTransform({ x: 0, y: 0 })\n }, [])\n\n const handleMouseEnter = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n setIsHovered(true)\n onMouseEnter?.(e)\n },\n [onMouseEnter]\n )\n\n const handleMouseLeave = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n setIsHovered(false)\n resetTilt()\n onMouseLeave?.(e)\n },\n [onMouseLeave, resetTilt]\n )\n\n const handleMouseMove = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n if (tiltOnHover) {\n updateTilt(e)\n }\n onMouseMove?.(e)\n },\n [onMouseMove, tiltOnHover, updateTilt]\n )\n\n const handleMouseDown = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n if (pressAnimation) {\n setIsPressed(true)\n }\n onMouseDown?.(e)\n },\n [onMouseDown, pressAnimation]\n )\n\n const handleMouseUp = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n setIsPressed(false)\n onMouseUp?.(e)\n },\n [onMouseUp]\n )\n\n React.useImperativeHandle(ref, () => buttonRef.current!)\n\n const buttonStyle: React.CSSProperties = {\n ...style,\n transform: tiltOnHover\n ? `perspective(1000px) rotateX(${tiltTransform.x}deg) rotateY(${tiltTransform.y}deg) ${isPressed ? \"translateY(1px)\" : \"\"}`\n : isPressed\n ? \"translateY(1px)\"\n : undefined,\n filter:\n glowIntensity > 0\n ? `drop-shadow(0 0 ${glowIntensity * 4}px ${shadowColor || \"currentColor\"})`\n : undefined,\n transition: \"all 150ms cubic-bezier(0.4, 0, 0.2, 1)\",\n }\n\n return (\n <button\n ref={buttonRef}\n className={cn(button3DVariants({ variant, size, depth }), className)}\n style={buttonStyle}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onMouseMove={handleMouseMove}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n {...props}\n >\n <span className=\"relative z-10 flex items-center justify-center gap-2\">\n {children}\n </span>\n </button>\n )\n }\n)\nButton3D.displayName = \"Button3D\"\n\n// Preset button variants for common use cases\nconst Button3DPreset = {\n Hero: React.forwardRef<\n HTMLButtonElement,\n Omit<Button3DProps, \"variant\" | \"size\" | \"depth\">\n >((props, ref) => (\n <Button3D\n ref={ref}\n variant=\"gradient\"\n size=\"xl\"\n depth=\"lg\"\n tiltOnHover\n glowIntensity={2}\n {...props}\n />\n )),\n\n CTA: React.forwardRef<\n HTMLButtonElement,\n Omit<Button3DProps, \"variant\" | \"size\" | \"depth\">\n >((props, ref) => (\n <Button3D\n ref={ref}\n variant=\"neon\"\n size=\"lg\"\n depth=\"default\"\n tiltOnHover\n glowIntensity={1}\n {...props}\n />\n )),\n\n Glass: React.forwardRef<\n HTMLButtonElement,\n Omit<Button3DProps, \"variant\" | \"size\" | \"depth\">\n >((props, ref) => (\n <Button3D\n ref={ref}\n variant=\"glass\"\n size=\"default\"\n depth=\"sm\"\n tiltOnHover\n {...props}\n />\n )),\n\n Minimal: React.forwardRef<\n HTMLButtonElement,\n Omit<Button3DProps, \"variant\" | \"size\" | \"depth\">\n >((props, ref) => (\n <Button3D ref={ref} variant=\"ghost\" size=\"default\" depth=\"sm\" {...props} />\n )),\n\n Danger: React.forwardRef<\n HTMLButtonElement,\n Omit<Button3DProps, \"variant\" | \"size\" | \"depth\">\n >((props, ref) => (\n <Button3D\n ref={ref}\n variant=\"destructive\"\n size=\"default\"\n depth=\"default\"\n shadowColor=\"rgb(239 68 68)\"\n {...props}\n />\n )),\n}\n\n// Assign display names\nButton3DPreset.Hero.displayName = \"Button3DPreset.Hero\"\nButton3DPreset.CTA.displayName = \"Button3DPreset.CTA\"\nButton3DPreset.Glass.displayName = \"Button3DPreset.Glass\"\nButton3DPreset.Minimal.displayName = \"Button3DPreset.Minimal\"\nButton3DPreset.Danger.displayName = \"Button3DPreset.Danger\"\n\n// Loading button with 3D spinner\nconst Button3DLoading = React.forwardRef<\n HTMLButtonElement,\n Button3DProps & { loading?: boolean }\n>(({ loading = false, children, disabled, ...props }, ref) => {\n return (\n <Button3D ref={ref} disabled={disabled || loading} {...props}>\n {loading && (\n <div className=\"animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent\" />\n )}\n {!loading && children}\n </Button3D>\n )\n})\nButton3DLoading.displayName = \"Button3DLoading\"\n\nexport {\n Button3D,\n Button3DPreset,\n Button3DLoading,\n button3DVariants,\n type Button3DProps,\n}\n"}],"type":"components:3d"}
0 commit comments