import { useEffect } from 'react'; import { useSharedValue, withDelay, withSpring, withTiming, runOnJS, } from 'react-native-reanimated'; interface AnimationSequenceConfig { scoreDuration?: number; confettiDelay?: number; rankDelay?: number; comboDelay?: number; } export const useAnimationSequence = ( { scoreDuration = 2500, confettiDelay = 0, rankDelay = 200, comboDelay = 600, }: AnimationSequenceConfig = {}, onConfettiTrigger?: () => void ) => { // 0 to 1 for score const scoreProgress = useSharedValue(0); // 0 to 1 for rank reveal const rankRevealProgress = useSharedValue(0); // 0 to 1 for combo badge const comboScale = useSharedValue(0); useEffect(() => { // 1. Start score counter scoreProgress.value = withTiming(1, { duration: scoreDuration }, (finished) => { 'worklet'; if (finished && onConfettiTrigger) { runOnJS(onConfettiTrigger)(); } }); // 2. Rank Reveal (after score + rankDelay) rankRevealProgress.value = withDelay( scoreDuration + rankDelay, withTiming(1, { duration: 600 }) ); // 3. Combo Badge (after rank + comboDelay) comboScale.value = withDelay( scoreDuration + rankDelay + comboDelay, withSpring(1, { damping: 10, stiffness: 80 }) ); }, []); return { scoreProgress, rankRevealProgress, comboScale, }; };