Tilt them cards

components/Card.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import TiltCard from '@/components/TiltCard';
 import ToolTip from '@/components/ToolTip';
 import StackTheDeck from '@/components/StackTheDeck';
 import tarokkaCards from '@/constants/tarokkaCards';
@@ -57,8 +58,8 @@ export default function Card({
 
 	return (
 		<ToolTip content={tooltip || getTooltip()}>
-			<div
-				className={`relative h-[21vh] w-[15vh] perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10 ${dm ? 'cursor-pointer' : ''} `}
+			<TiltCard
+				className={`h-[21vh] w-[15vh] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${dm ? 'cursor-pointer' : ''} `}
 				onClick={handleClick}
 			>
 				<div
@@ -96,7 +97,7 @@ export default function Card({
 						/>
 					</div>
 				</div>
-			</div>
+			</TiltCard>
 		</ToolTip>
 	);
 }

components/TiltCard.tsx

@@ -0,0 +1,48 @@
+import { useRef } from 'react';
+
+export default function TiltCard({
+	children,
+	className = '',
+	onClick = () => {},
+}: {
+	children: React.ReactNode;
+	className?: string;
+	onClick: (event: React.MouseEvent) => void;
+}) {
+	const cardRef = useRef<HTMLDivElement>(null);
+
+	const handleMouseMove = (e: React.MouseEvent) => {
+		const card = cardRef.current;
+		if (!card) return;
+
+		const rect = card.getBoundingClientRect();
+		const x = e.clientX - rect.left;
+		const y = e.clientY - rect.top;
+		const centerX = rect.width / 2;
+		const centerY = rect.height / 2;
+
+		const rotateX = ((y - centerY) / centerY) * -20;
+		const rotateY = ((x - centerX) / centerX) * 20;
+
+		card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+	};
+
+	const handleMouseLeave = () => {
+		const card = cardRef.current;
+		if (!card) return;
+		card.style.transform = `rotateX(0deg) rotateY(0deg)`;
+	};
+
+	return (
+		<div
+			className={`${className}`}
+			onMouseMove={handleMouseMove}
+			onMouseLeave={handleMouseLeave}
+			onClick={onClick}
+		>
+			<div ref={cardRef} className={`h-full w-full transition-transform duration-0`}>
+				{children}
+			</div>
+		</div>
+	);
+}