Function ThreeDCard

components/3d-card.tsx:29–218

({
  children,
  className = "",
  innerId,
  maxRotation = 10,
  glowOpacity = 0.2,
  shadowBlur = 30,
  parallaxOffset = 40,
  transitionDuration = "0.6s",
  backgroundImage = null,
  enableGlow = true,
  enableShadow = true,
  enableParallax = true,
  hoverPadding = 12,
  trackOnWindow = false,
}: ThreeDCardProps)

  innerId,
  maxRotation = 10,
  glowOpacity = 0.2,
  shadowBlur = 30,
  parallaxOffset = 40,
  transitionDuration = "0.6s",
  backgroundImage = null,
  enableGlow = true,
  enableShadow = true,
  enableParallax = true,
  hoverPadding = 12,
  trackOnWindow = false,
}: ThreeDCardProps) {
  const cardRef = useRef<HTMLDivElement>(null);

  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
  const [transform, setTransform] = useState({
    glowX: 50,
    glowY: 50,
    isHovered: false,
    rotateX: 0,
    rotateY: 0,
    shadowX: 0,
    shadowY: 20,
  });

  useEffect(() => {
    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
    const syncPreference = () => setPrefersReducedMotion(media.matches);

    syncPreference();
    media.addEventListener("change", syncPreference);
    return () => media.removeEventListener("change", syncPreference);
  }, []);

  const handleMouseMove = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      if (prefersReducedMotion || trackOnWindow) {
        return;
      }
      if (!cardRef.current) {
        return;
      }

      const rect = cardRef.current.getBoundingClientRect();
      const { width, height, left, top } = rect;

      // Mouse events are attached to a padded "hit area" wrapper to avoid
      // enter/leave jitter when the card tilts away from the cursor.
      // Clamp so motion in the padding doesn't create extreme rotations.
      const mouseX = Math.min(width, Math.max(0, e.clientX - left));
      const mouseY = Math.min(height, Math.max(0, e.clientY - top));

      const xPct = mouseX / width - 0.5;
      const yPct = mouseY / height - 0.5;

      const newRotateX = yPct * -1 * maxRotation;
      const newRotateY = xPct * maxRotation;

      setTransform((prev) => ({