Card Hover Effect

3d x tilt

Card with 3D perspective tilt on mouse hover. From Aceternity.

cardhover3dtiltaceternity

3D Card

Hover over this card to see the 3D tilt effect in action.

Code

card-hover.tsx

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

export function Card3D({ children }: { children: React.ReactNode }) {
  const [rotate, setRotate] = useState({ x: 0, y: 0 });
  const ref = useRef<HTMLDivElement>(null);
  function move(e: React.MouseEvent) {
    const r = ref.current!.getBoundingClientRect();
    setRotate({
      x: ((e.clientY - r.top) / r.height - 0.5) * -30,
      y: ((e.clientX - r.left) / r.width - 0.5) * 30
    });
  }
  return (
    <div style={{ perspective: "800px" }}>
      <div ref={ref} onMouseMove={move} onMouseLeave={() => setRotate({ x: 0, y: 0 })}
        className="rounded-xl border border-border bg-card p-6 shadow-lg transition-transform duration-200 ease-out"
        style={{ transform: `rotateX(${rotate.x}deg) rotateY(${rotate.y}deg)` }}>
        {children}
      </div>
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Card Hover Effect component and wire it to my accent.”