Glass Morph Card

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5 
6interface GlassMorphCardProps extends React.HTMLAttributes<HTMLDivElement> {
7  children: React.ReactNode
8  intensity?: number
9  glowColor?: "cyan" | "purple" | "blue" | "pink" | "green"
10  disabled?: boolean
11}
12 
13const glowColors = {
14  cyan: "from-cyan-500/40 to-blue-500/40",
15  purple: "from-purple-500/40 to-pink-500/40",
16  blue: "from-blue-500/40 to-indigo-500/40",
17  pink: "from-pink-500/40 to-rose-500/40",
18  green: "from-emerald-500/40 to-teal-500/40",
19}
20 
21const GlassMorphCard = React.forwardRef<HTMLDivElement, GlassMorphCardProps>(
22  ({ className, children, intensity = 15, glowColor = "cyan", disabled = false, ...props }, ref) => {
23    const cardRef = React.useRef<HTMLDivElement>(null)
24    const [transform, setTransform] = React.useState({ rotateX: 0, rotateY: 0 })
25    const [lightPosition, setLightPosition] = React.useState({ x: 50, y: 50 })
26    const [isHovered, setIsHovered] = React.useState(false)
27 
28    const handleMouseMove = React.useCallback(
29      (e: React.MouseEvent<HTMLDivElement>) => {
30        if (disabled || !cardRef.current) return
31 
32        const rect = cardRef.current.getBoundingClientRect()
33        const x = e.clientX - rect.left
34        const y = e.clientY - rect.top
35        const centerX = rect.width / 2
36        const centerY = rect.height / 2
37 
38        const rotateX = ((y - centerY) / centerY) * -intensity
39        const rotateY = ((x - centerX) / centerX) * intensity
40 
41        setTransform({ rotateX, rotateY })
42        setLightPosition({
43          x: (x / rect.width) * 100,
44          y: (y / rect.height) * 100,
45        })
46      },
47      [intensity, disabled],
48    )
49 
50    const handleMouseLeave = React.useCallback(() => {
51      setTransform({ rotateX: 0, rotateY: 0 })
52      setLightPosition({ x: 50, y: 50 })
53      setIsHovered(false)
54    }, [])
55 
56    const handleMouseEnter = React.useCallback(() => {
57      setIsHovered(true)
58    }, [])
59 
60    return (
61      <div ref={ref} className={cn("relative", className)} style={{ perspective: "1000px" }} {...props}>
62        {/* Glow effect */}
63        <div
64          className={cn(
65            "absolute -inset-2 rounded-2xl bg-linear-to-r blur-xl transition-opacity duration-300",
66            glowColors[glowColor],
67            isHovered ? "opacity-80" : "opacity-40",
68          )}
69        />
70 
71        {/* Card container */}
72        <div
73          ref={cardRef}
74          onMouseMove={handleMouseMove}
75// … truncated