From 06a87381d57bf1622b76477ca7eee0fb211412fd Mon Sep 17 00:00:00 2001
From: Gavin McDonald <gavinmcdoh@gmail.com>
Date: Mon, 16 Jun 2025 14:05:34 -0400
Subject: [PATCH] Tilt them cards

---
 components/Card.tsx     |  7 +++---
 components/TiltCard.tsx | 48 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 components/TiltCard.tsx

diff --git a/components/Card.tsx b/components/Card.tsx
index e6978d0..cbbf34d 100644
--- a/components/Card.tsx
+++ b/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>
 	);
 }
diff --git a/components/TiltCard.tsx b/components/TiltCard.tsx
new file mode 100644
index 0000000..8c16b54
--- /dev/null
+++ b/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>
+	);
+}