untilt

components/TiltCard.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useAppContext } from '@/app/AppContext';
 import type { Tilt } from '@/types';
 
@@ -14,6 +14,7 @@ export default function TiltCard({
 	className?: string;
 }) {
 	const cardRef = useRef<HTMLDivElement>(null);
+	const [untilt, setUntilt] = useState(false);
 	const {
 		gameData,
 		settings: { tilt, remoteTilt },
@@ -45,15 +46,23 @@ export default function TiltCard({
 				);
 
 			if (count && (totalX || totalY)) {
+				setUntilt(false);
 				card.style.transform = `rotateX(${totalX / count}deg) rotateY(${totalY / count}deg)`;
 			} else {
-				card.style.transform = ZERO_ROTATION;
+				setUntilt(true);
 			}
 		} else if (card.style.transform !== ZERO_ROTATION) {
-			card.style.transform = ZERO_ROTATION;
+			setUntilt(true);
 		}
 	}, [tilt, localTilts, gameData]);
 
+	useEffect(() => {
+		const card = cardRef.current;
+		if (!card || !untilt) return;
+
+		card.style.transform = ZERO_ROTATION;
+	}, [untilt]);
+
 	const handleMouseMove = (e: React.MouseEvent) => {
 		const card = cardRef.current;
 		if (!card) return;
@@ -83,7 +92,11 @@ export default function TiltCard({
 			onMouseMove={tilt ? handleMouseMove : undefined}
 			onMouseLeave={handleMouseLeave}
 		>
-			<div ref={cardRef} className={`h-full w-full transition-transform duration-0`}>
+			<div
+				ref={cardRef}
+				onAnimationEnd={() => setUntilt(false)}
+				className={`h-full w-full transition-transform ${untilt ? 'duration-500' : 'duration-0'}`}
+			>
 				{children}
 			</div>
 		</div>