3D Book Tilt

"use client";
import { useCallback, useRef } from "react";

export default function Book3DTilt({ imageSrc, title, subtitle }) {
  const cardRef = useRef<HTMLDivElement>(null);

  const handleMouseMove = useCallback((e: React.MouseEvent) => {
    const el = cardRef.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width - 0.5;
    const y = (e.clientY - rect.top) / rect.height - 0.5;

    const rotateX = -y * 14;
    const rotateY = x * 20;
    el.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;

    const shadowX = -x * 40;
    const shadowY = -y * 40;
    el.style.boxShadow = `${shadowX}px ${shadowY}px 60px rgba(0,0,0,0.8)`;
  }, []);

  return (
    <div ref={cardRef} onMouseMove={handleMouseMove}
      style={{ transformStyle: "preserve-3d", transition: "transform 0.1s, box-shadow 0.3s" }}>
      <img src={imageSrc} />
      <div>{title}</div>
      <p>{subtitle}</p>
    </div>
  );
}