optimize animations

package.json

@@ -23,7 +23,6 @@
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "shifty": "^3.0.1",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2",
     "zustand": "^4.4.1"

src/blockpuzzle/components/UnitBlock.tsx

@@ -1,9 +1,7 @@
-import React, { useLayoutEffect, useRef } from "react";
+import React from "react";
 import { Block } from "../types";
 import styles from "./UnitBlock.module.css";
 import { css } from "@stitches/react";
-import { tween } from "shifty";
-import { COLS } from "../constants";
 
 const colors = [
   "null",
@@ -25,38 +23,25 @@ function UnitBlock(props: Block) {
     borderWidth: size / 4,
   });
 
+  const animation = css({
+    transition: "transform 60ms linear",
+    transform: `translate(${x * size}px, ${y * size}px)`,
+  });
+
   const classes = `bg-white 
   rounded 
   aspect-square 
   absolute 
   unit-block 
   z-40
+  top-0
+  left-0
   ${styles.unitBlock} 
   ${colors[color]}
-  ${blockStyle}`;
-
-  const ref = useRef<HTMLDivElement>(null);
-  const prevY = useRef<number>(y);
-  const prevX = useRef<number>(x);
-
-  useLayoutEffect(() => {
-    tween({
-      from: { y: prevY.current * size, x: prevX.current * size },
-      to: { y: y * size, x: x * size },
-      duration: 50,
-      easing: "linear",
-      render: ({ y: y1, x: x1 }) => {
-        ref.current?.style.setProperty("top", `${y1 as number}px`);
-        ref.current?.style.setProperty("left", `${x1 as number}px`);
-      },
-    }).then((p) => {
-      prevY.current = y;
-      prevX.current = x;
-      return p;
-    });
-  }, [x, y, size]);
+  ${blockStyle}
+  ${animation}`;
 
-  return <div ref={ref} className={classes} data-key={`c-${y * COLS + x}`} />;
+  return <div className={classes} />;
 }
 
 export default UnitBlock;

src/blockpuzzle/store.ts

@@ -72,10 +72,10 @@ const store: (callbacks: GameCallbacks) => StateCreator<State & Actions> =
       return spawnBag;
     };
 
-    const limitedMove = throttle((input: GameInput) => get().move(input), 50);
+    const limitedMove = throttle((input: GameInput) => get().move(input), 30);
 
     const limitedDrop = throttle(() => get().drop(), 30);
-    const limitedRotate = throttle(() => get().rotateClockwise(), 100);
+    const limitedRotate = throttle(() => get().rotateClockwise(), 120);
 
     return {
       ...getInitialState(),