Tilt Card with Glare for React

"use client";

import {
  motion,
  useMotionValue,
  useTransform,
} from "framer-motion";
import { useCallback, useRef } from "react";
import { cn } from "@/lib/utils";

interface TiltCardGlareProps {
  children: React.ReactNode;
  className?: string;
  glareClassName?: string;
  glareColor?: string;
  maxTilt?: number;
  perspective?: number;
  glareOpacity?: number;
  glareIntensity?: number;
}

export function TiltCardGlare({
  children,
  className,
  glareClassName,
  glareColor = "rgba(255,255,255,0.8)",
  maxTilt = 12,
  perspective = 800,
  glareOpacity = 0.4,
  glareIntensity = 50,
}: TiltCardGlareProps) {
  const ref = useRef<HTMLDivElement>(null);
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const rotateX = useTransform(
    y,
    [-0.5, 0.5],
    [maxTilt, -maxTilt],
  );
  const rotateY = useTransform(
    x,
    [-0.5, 0.5],
    [-maxTilt, maxTilt],
  );
  const glareX = useTransform(
    x,
    [-0.5, 0.5],
    [-glareIntensity, glareIntensity],
  );
  const glareY = useTransform(
    y,
    [-0.5, 0.5],
    [-glareIntensity, glareIntensity],
  );

  const handleMouse = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      const rect = ref.current?.getBoundingClientRect();
      if (!rect) {
        return;
      }
      const cx = rect.left + rect.width / 2;
      const cy = rect.top + rect.height / 2;
      x.set((e.clientX - cx) / (rect.width / 2));
      y.set((e.clientY - cy) / (rect.height / 2));
    },
    [x, y],
  );

  const handleMouseLeave = useCallback(() => {
    x.set(0);
    y.set(0);
  }, [x, y]);

  return (
    <motion.div
      ref={ref}
      onMouseMove={handleMouse}
      onMouseLeave={handleMouseLeave}
      style={{
        rotateX,
        rotateY,
        transformPerspective: perspective,
      }}
      className={cn("relative overflow-hidden", className)}
    >
      <motion.div
        className={cn(
          "pointer-events-none absolute inset-0",
          glareClassName,
        )}
        style={{
          background: `radial-gradient(circle at 50% 50%, ${glareColor} 0%, transparent 50%)`,
          opacity: glareOpacity,
          x: glareX,
          y: glareY,
        }}
      />
      {children}
    </motion.div>
  );
}