throttle mouse events

components/TiltCard.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
 import { useAppContext } from '@/app/AppContext';
+import throttle from '@/tools/throttle';
+
+import { thirtyFPS } from '@/constants/time';
 import type { Tilt } from '@/types';
 
 const ZERO_ROTATION = 'rotateX(0deg) rotateY(0deg)';
@@ -90,7 +93,7 @@ export default function TiltCard({
 		sheen.style.opacity = '0';
 	}, [untilt]);
 
-	const handleMouseMove = (e: React.MouseEvent) => {
+	const handleMouseMove = throttle((e: React.MouseEvent) => {
 		const card = cardRef.current;
 		if (!card) return;
 
@@ -107,7 +110,7 @@ export default function TiltCard({
 		newTilt[cardIndex] = { rotateX, rotateY };
 
 		setTilt(newTilt);
-	};
+	}, thirtyFPS);
 
 	const handleMouseLeave = () => {
 		setTilt([]);