diff --git a/src/components/cardStack/hooks/useCardAnimation.ts b/src/components/cardStack/hooks/useCardAnimation.ts
index cfc6de5..8b888d1 100644
--- a/src/components/cardStack/hooks/useCardAnimation.ts
+++ b/src/components/cardStack/hooks/useCardAnimation.ts
@@ -1,17 +1,15 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-
-interface UseCardAnimationReturn {
-  isActive: boolean;
-  isMobile: boolean;
-  itemRefs: React.RefObject<HTMLElement>[];
-}
+import { UseCardAnimationReturn } from '@/components/cardStack/types';
 
 export function useCardAnimation(): UseCardAnimationReturn {
   const [isActive, setIsActive] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
-  const itemRefs = useRef<(HTMLElement | null)[]>([]);
+  const itemRefsArray = useRef<(HTMLElement | null)[]>([]);
+  const containerRef = useRef<HTMLElement>(null);
+  const perspectiveRef = useRef<HTMLElement>(null);
+  const bottomContentRef = useRef<HTMLElement>(null);
 
   useEffect(() => {
     const checkMobile = () => {
@@ -22,9 +20,16 @@ export function useCardAnimation(): UseCardAnimationReturn {
     return () => window.removeEventListener('resize', checkMobile);
   }, []);
 
+  const itemRefs = itemRefsArray.current.map((el) => ({
+    current: el,
+  })) as React.RefObject<HTMLElement>[];
+
   return {
     isActive,
     isMobile,
-    itemRefs: itemRefs.current.map((el) => ({ current: el })) as React.RefObject<HTMLElement>[],
+    itemRefs,
+    containerRef,
+    perspectiveRef,
+    bottomContentRef,
   };
 }