Update src/components/cardStack/hooks/useDepth3DAnimation.ts

src/components/cardStack/hooks/useDepth3DAnimation.ts

@@ -1,38 +1,14 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef } from "react";
 
-interface Depth3DTransform {
-  transform: string;
-  opacity: number;
-  zIndex: number;
-}
-
-const useDepth3DAnimation = (
-  totalItems: number,
-  activeIndex: number
-): Depth3DTransform[] => {
-  const [transforms, setTransforms] = useState<Depth3DTransform[]>([]);
+function useDepth3DAnimation() {
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const newTransforms: Depth3DTransform[] = Array.from(
-      { length: totalItems },
-      (_, i) => {
-        const distance = (i - activeIndex + totalItems) % totalItems;
-        const scale = Math.max(0.85, 1 - distance * 0.05);
-        const yOffset = distance * 20;
-        const opacity = distance === 0 ? 1 : Math.max(0.3, 1 - distance * 0.2);
+    // Initialize 3D animation
+  }, []);
 
-        return {
-          transform: `translateY(${yOffset}px) scale(${scale})`,
-          opacity,
-          zIndex: totalItems - distance,
-        };
-      }
-    );
-
-    setTransforms(newTransforms);
-  }, [activeIndex, totalItems]);
-
-  return transforms;
-};
+  return containerRef;
+}
 
+export { useDepth3DAnimation };
 export default useDepth3DAnimation;