diff --git a/src/components/cardStack/hooks/useCardAnimation.ts b/src/components/cardStack/hooks/useCardAnimation.ts index 2e28fc9..45ac588 100644 --- a/src/components/cardStack/hooks/useCardAnimation.ts +++ b/src/components/cardStack/hooks/useCardAnimation.ts @@ -1,37 +1,33 @@ -import { useEffect, useState } from "react"; +import { RefObject, useCallback, useRef } from 'react'; -interface UseCardAnimationProps { - containerRef: React.RefObject; - cardsOffset?: number; - scaleFactor?: number; - rotationFactor?: number; - animationDuration?: number; +export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'; +export type BentoAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; +export type CardAnimationTypeWith3D = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'; + +export interface UseCardAnimationProps { + itemRefs?: RefObject[]; + containerRef?: RefObject; + perspectiveRef?: RefObject; + bottomContentRef?: RefObject; } -interface AnimationState { - transform: string; -} +export const useCardAnimation = ( + props: UseCardAnimationProps +) => { + const refs = useRef<{ transform: string }>({ + transform: 'none', + }); -export const useCardAnimation = ({ - containerRef, - cardsOffset = 10, - scaleFactor = 0.08, - rotationFactor = 5, - animationDuration = 500, -}: UseCardAnimationProps) => { - const [transform, setTransform] = useState(""); + const updateAnimation = useCallback(() => { + // Animation logic here + }, []); - useEffect(() => { - const container = containerRef.current; - if (!container) return; - - const calculateDepth = (index: number, total: number): number => { - return index; - }; - - // Animation logic can be added here - setTransform(""); - }, [containerRef, cardsOffset, scaleFactor, rotationFactor, animationDuration]); - - return { transform }; + return { + ...refs.current, + itemRefs: props.itemRefs, + containerRef: props.containerRef, + perspectiveRef: props.perspectiveRef, + bottomContentRef: props.bottomContentRef, + updateAnimation, + }; };