3D Tilt Card

"use client";

import { Layers } from "lucide-react";
import { useRef } from "react";

export function TiltCard() {
  const ref = useRef<HTMLDivElement>(null);

  return (
    <div style={{ perspective: "700px" }}>
      <div
        ref={ref}
        onPointerMove={(e) => {
          const el = ref.current;
          if (!el) return;
          const r = el.getBoundingClientRect();
          const dx = (e.clientX - (r.left + r.width / 2)) / r.width;
          const dy = (e.clientY - (r.top + r.height / 2)) / r.height;
          el.style.transform =
            "rotateY(" + (dx * 14).toFixed(1) + "deg) rotateX(" + (-dy * 14).toFixed(1) + "deg)";
        }}
        onPointerLeave={() => {
          if (ref.current) ref.current.style.transform = "";
        }}
        className="w-64 rounded-2xl border border-neutral-800 bg-neutral-900 p-6 shadow-xl transition-transform duration-200 ease-out"
        style={{ transformStyle: "preserve-3d" }}
      >
        <Layers className="size-5 text-amber-400" />
        <h3 className="mt-3 text-sm font-semibold text-neutral-50">3D Tilt</h3>
        <p className="mt-1 text-xs text-neutral-400">
          The card leans toward your cursor in perspective.
        </p>
      </div>
    </div>
  );
}