"use client";

import * as React from "react";
import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
import { cn } from "@/lib/utils";

interface AnimatedCardHoverProps {
  children?: React.ReactNode;
  className?: string;
  /**
   * Maximum tilt angle in degrees
   * @default 10
   */
  tiltAmount?: number;
  /**
   * Enable glare effect on hover
   * @default true
   */
  glare?: boolean;
  /**
   * Glare opacity (0-1)
   * @default 0.15
   */
  glareOpacity?: number;
  /**
   * Spring stiffness for tilt animation
   * @default 300
   */
  stiffness?: number;
  /**
   * Spring damping for tilt animation
   * @default 30
   */
  damping?: number;
  /**
   * Scale on hover
   * @default 1.02
   */
  hoverScale?: number;
}

function AnimatedCardHover({
  children,
  className,
  tiltAmount = 10,
  glare = true,
  glareOpacity = 0.15,
  stiffness = 300,
  damping = 30,
  hoverScale = 1.02,
}: AnimatedCardHoverProps) {
  const ref = React.useRef<HTMLDivElement>(null);

  const x = useMotionValue(0);
  const y = useMotionValue(0);

  const springConfig = { stiffness, damping };
  const rotateX = useSpring(
    useTransform(y, [-0.5, 0.5], [tiltAmount, -tiltAmount]),
    springConfig
  );
  const rotateY = useSpring(
    useTransform(x, [-0.5, 0.5], [-tiltAmount, tiltAmount]),
    springConfig
  );

  const glareX = useTransform(x, [-0.5, 0.5], [0, 100]);
  const glareY = useTransform(y, [-0.5, 0.5], [0, 100]);

  const glareBackground = useTransform(
    [glareX, glareY],
    ([gx, gy]) =>
      `radial-gradient(circle at ${gx}% ${gy}%, rgb(var(--foreground) / ${glareOpacity}), transparent 50%)`
  );

  const handleMouseMove = React.useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      if (!ref.current) return;

      const rect = ref.current.getBoundingClientRect();
      const normalizedX = (e.clientX - rect.left) / rect.width - 0.5;
      const normalizedY = (e.clientY - rect.top) / rect.height - 0.5;

      x.set(normalizedX);
      y.set(normalizedY);
    },
    [x, y]
  );

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

  return (
    <motion.div
      ref={ref}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      style={{
        rotateX,
        rotateY,
        transformStyle: "preserve-3d",
        transformPerspective: 1000,
      }}
      whileHover={{ scale: hoverScale }}
      transition={{ scale: { duration: 0.2 } }}
      className={cn(
        "relative overflow-hidden rounded-xl border border-border bg-card p-6 text-card-foreground",
        className
      )}
    >
      {/* Content layer with slight z-offset for depth */}
      <div style={{ transform: "translateZ(20px)", transformStyle: "preserve-3d" }}>
        {children}
      </div>

      {/* Glare effect */}
      {glare && (
        <motion.div
          className="pointer-events-none absolute inset-0 rounded-xl"
          style={{
            background: glareBackground,
          }}
        />
      )}
    </motion.div>
  );
}

export { AnimatedCardHover };
Animated Card Hover

Dependencies

Files

Installation
