@hua-labs/motion-core 2.0.0

package/dist/hooks/useFadeIn.js

@@ -0,0 +1,133 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+/**
+ * 요소가 화면에 나타날 때 페이드인 효과를 적용합니다
+ *
+ * @example
+ * ```tsx
+ * const { ref, style } = useFadeIn({
+ *   delay: 200,        // 지연 시간
+ *   duration: 700,     // 지속 시간
+ *   triggerOnce: true  // 한 번만 실행
+ * })
+ *
+ * return <div ref={ref} style={style}>페이드인 효과</div>
+ * ```
+ */
+export function useFadeIn(options = {}) {
+    const { delay = 0, duration = 700, threshold = 0.1, triggerOnce = true, easing = 'ease-out', autoStart = true, initialOpacity = 0, targetOpacity = 1, onComplete, onStart, onStop, onReset } = options;
+    const ref = useRef(null);
+    const [isVisible, setIsVisible] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const observerRef = useRef(null);
+    const motionRef = useRef(null);
+    const timeoutRef = useRef(null);
+    // 모션 시작 함수
+    const start = useCallback(() => {
+        if (isAnimating)
+            return;
+        setIsAnimating(true);
+        setProgress(0);
+        onStart?.();
+        // 지연 시간 적용
+        if (delay > 0) {
+            timeoutRef.current = window.setTimeout(() => {
+                setIsVisible(true);
+                setProgress(1);
+                setIsAnimating(false);
+                onComplete?.();
+            }, delay);
+        }
+        else {
+            setIsVisible(true);
+            setProgress(1);
+            setIsAnimating(false);
+            onComplete?.();
+        }
+    }, [delay, isAnimating, onStart, onComplete]);
+    // 모션 중단 함수
+    const stop = useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        if (motionRef.current) {
+            cancelAnimationFrame(motionRef.current);
+            motionRef.current = null;
+        }
+        setIsAnimating(false);
+        onStop?.();
+    }, [onStop]);
+    // 모션 리셋 함수
+    const reset = useCallback(() => {
+        stop();
+        setIsVisible(false);
+        setProgress(0);
+        onReset?.();
+    }, [stop, onReset]);
+    // 모션 일시정지 함수
+    const pause = useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setIsAnimating(false);
+    }, []);
+    // 모션 재개 함수
+    const resume = useCallback(() => {
+        if (!isVisible && !isAnimating) {
+            start();
+        }
+    }, [isVisible, isAnimating, start]);
+    // Intersection Observer 설정
+    useEffect(() => {
+        if (!ref.current || !autoStart)
+            return;
+        observerRef.current = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    start();
+                    if (triggerOnce) {
+                        observerRef.current?.disconnect();
+                    }
+                }
+            });
+        }, { threshold });
+        observerRef.current.observe(ref.current);
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+        };
+    }, [autoStart, threshold, triggerOnce, start]);
+    // 컴포넌트 언마운트 시 정리
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            if (motionRef.current) {
+                cancelAnimationFrame(motionRef.current);
+            }
+        };
+    }, []);
+    // 스타일 계산
+    const style = {
+        opacity: isVisible ? targetOpacity : initialOpacity,
+        transition: `opacity ${duration}ms ${easing}`,
+        willChange: 'opacity'
+    };
+    return {
+        ref,
+        isVisible,
+        isAnimating,
+        style,
+        progress,
+        start,
+        stop,
+        reset,
+        pause,
+        resume
+    };
+}
+//# sourceMappingURL=useFadeIn.js.map

package/dist/hooks/useFadeIn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFadeIn.js","sourceRoot":"","sources":["../../src/hooks/useFadeIn.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useFocusToggle.d.ts

@@ -0,0 +1,15 @@
+import { BaseMotionOptions, InteractionReturn, MotionElement } from '../types';
+export interface FocusToggleOptions extends BaseMotionOptions {
+    focusScale?: number;
+    focusOpacity?: number;
+    focusRotate?: number;
+    focusTranslateY?: number;
+    focusTranslateX?: number;
+    initialScale?: number;
+    initialOpacity?: number;
+    initialRotate?: number;
+    initialTranslateY?: number;
+    initialTranslateX?: number;
+}
+export declare function useFocusToggle<T extends MotionElement = HTMLDivElement>(options?: FocusToggleOptions): InteractionReturn<T>;
+//# sourceMappingURL=useFocusToggle.d.ts.map

package/dist/hooks/useFocusToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusToggle.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusToggle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE9E,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EACrE,OAAO,GAAE,kBAAuB,GAC/B,iBAAiB,CAAC,CAAC,CAAC,CA6HtB"}

package/dist/hooks/useFocusToggle.js

@@ -0,0 +1,99 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+export function useFocusToggle(options = {}) {
+    const { duration = 300, easing = 'ease-out', focusScale = 1.02, focusOpacity = 1, focusRotate = 0, focusTranslateY = 0, focusTranslateX = 0, initialScale = 1, initialOpacity = 1, initialRotate = 0, initialTranslateY = 0, initialTranslateX = 0, onComplete, onStart, onStop, onReset } = options;
+    const ref = useRef(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [progress, setProgress] = useState(0);
+    // 포커스 시작
+    const handleFocus = useCallback(() => {
+        setIsFocused(true);
+        setIsAnimating(true);
+        setProgress(0);
+        onStart?.();
+        // 애니메이션 완료 시
+        setTimeout(() => {
+            setIsAnimating(false);
+            setProgress(1);
+            onComplete?.();
+        }, duration);
+    }, [duration, onStart, onComplete]);
+    // 포커스 종료
+    const handleBlur = useCallback(() => {
+        setIsFocused(false);
+        setIsAnimating(true);
+        setProgress(1);
+        // 애니메이션 완료 시
+        setTimeout(() => {
+            setIsAnimating(false);
+            setProgress(0);
+        }, duration);
+    }, [duration]);
+    // 모션 시작 함수 (프로그래매틱 제어용)
+    const start = useCallback(() => {
+        handleFocus();
+    }, [handleFocus]);
+    // 모션 중단 함수
+    const stop = useCallback(() => {
+        setIsAnimating(false);
+        onStop?.();
+    }, [onStop]);
+    // 모션 리셋 함수
+    const reset = useCallback(() => {
+        setIsFocused(false);
+        setIsAnimating(false);
+        setProgress(0);
+        onReset?.();
+    }, [onReset]);
+    // 모션 일시정지 함수
+    const pause = useCallback(() => {
+        setIsAnimating(false);
+    }, []);
+    // 모션 재개 함수
+    const resume = useCallback(() => {
+        if (isFocused) {
+            setIsAnimating(true);
+        }
+    }, [isFocused]);
+    // 이벤트 리스너 설정
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        element.addEventListener('focus', handleFocus);
+        element.addEventListener('blur', handleBlur);
+        return () => {
+            element.removeEventListener('focus', handleFocus);
+            element.removeEventListener('blur', handleBlur);
+        };
+    }, [handleFocus, handleBlur]);
+    // 스타일 계산
+    const style = {
+        transform: `
+      scale(${isFocused ? focusScale : initialScale})
+      rotate(${isFocused ? focusRotate : initialRotate}deg)
+      translate(${isFocused ? focusTranslateX : initialTranslateX}px, ${isFocused ? focusTranslateY : initialTranslateY}px)
+    `,
+        opacity: isFocused ? focusOpacity : initialOpacity,
+        transition: `all ${duration}ms ${easing}`,
+        willChange: 'transform, opacity'
+    };
+    return {
+        ref,
+        isVisible: isFocused,
+        isAnimating,
+        style,
+        progress,
+        start,
+        stop,
+        reset,
+        pause,
+        resume,
+        // 새로운 직관적 API 추가
+        focus: handleFocus,
+        blur: handleBlur,
+        // 상태 속성 추가
+        isFocused
+    };
+}
+//# sourceMappingURL=useFocusToggle.js.map

package/dist/hooks/useFocusToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusToggle.js","sourceRoot":"","sources":["../../src/hooks/useFocusToggle.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useGradient.d.ts

@@ -0,0 +1,25 @@
+import { BaseMotionOptions, BaseMotionReturn, MotionElement } from '../types';
+export interface GradientOptions extends BaseMotionOptions {
+    colors: string[];
+    direction?: 'to-right' | 'to-left' | 'to-bottom' | 'to-top' | 'to-bottom-right' | 'to-bottom-left' | 'to-top-right' | 'to-top-left';
+    gradientType?: 'linear' | 'radial';
+    startPosition?: number;
+    endPosition?: number;
+    animateColors?: boolean;
+    animateDirection?: boolean;
+    animatePosition?: boolean;
+    colorTransitionDuration?: number;
+    directionTransitionDuration?: number;
+    positionTransitionDuration?: number;
+    autoStart?: boolean;
+}
+export declare function useGradient<T extends MotionElement = HTMLDivElement>(options: GradientOptions): BaseMotionReturn<T> & {
+    currentColors: string[];
+    currentDirection: string;
+    currentStartPosition: number;
+    currentEndPosition: number;
+    setColors: (colors: string[]) => void;
+    setDirection: (direction: 'to-right' | 'to-left' | 'to-bottom' | 'to-top' | 'to-bottom-right' | 'to-bottom-left' | 'to-top-right' | 'to-top-left') => void;
+    setPositions: (start: number, end: number) => void;
+};
+//# sourceMappingURL=useGradient.d.ts.map

package/dist/hooks/useGradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGradient.d.ts","sourceRoot":"","sources":["../../src/hooks/useGradient.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE7E,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,SAAS,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,cAAc,GAAG,aAAa,CAAA;IACnI,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,2BAA2B,CAAC,EAAE,MAAM,CAAA;IACpC,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EAClE,OAAO,EAAE,eAAe,GACvB,gBAAgB,CAAC,CAAC,CAAC,GAAG;IACvB,aAAa,EAAE,MAAM,EAAE,CAAA;IACvB,gBAAgB,EAAE,MAAM,CAAA;IACxB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,kBAAkB,EAAE,MAAM,CAAA;IAC1B,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACrC,YAAY,EAAE,CAAC,SAAS,EAAE,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,cAAc,GAAG,aAAa,KAAK,IAAI,CAAA;IAC1J,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CACnD,CAkLA"}

package/dist/hooks/useGradient.js

@@ -0,0 +1,144 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+export function useGradient(options) {
+    const { duration = 1000, easing = 'ease-in-out', colors, direction = 'to-right', gradientType = 'linear', startPosition = 0, endPosition = 100, animateColors = true, animateDirection = false, animatePosition = false, colorTransitionDuration = 1000, directionTransitionDuration = 500, positionTransitionDuration = 800, autoStart = true, onComplete, onStart, onStop, onReset } = options;
+    const ref = useRef(null);
+    const [isVisible, setIsVisible] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const [currentColors, setCurrentColors] = useState(colors);
+    const [currentDirection, setCurrentDirection] = useState(direction);
+    const [currentStartPosition, setCurrentStartPosition] = useState(startPosition);
+    const [currentEndPosition, setCurrentEndPosition] = useState(endPosition);
+    // 색상 변경 함수
+    const setColors = useCallback((newColors) => {
+        if (!animateColors) {
+            setCurrentColors(newColors);
+            return;
+        }
+        setIsAnimating(true);
+        setProgress(0);
+        onStart?.();
+        setTimeout(() => {
+            setCurrentColors(newColors);
+            setIsAnimating(false);
+            setProgress(1);
+            onComplete?.();
+        }, colorTransitionDuration);
+    }, [animateColors, colorTransitionDuration, onStart, onComplete]);
+    // 방향 변경 함수
+    const setDirection = useCallback((newDirection) => {
+        if (!animateDirection) {
+            setCurrentDirection(newDirection);
+            return;
+        }
+        setIsAnimating(true);
+        setProgress(0);
+        onStart?.();
+        setTimeout(() => {
+            setCurrentDirection(newDirection);
+            setIsAnimating(false);
+            setProgress(1);
+            onComplete?.();
+        }, directionTransitionDuration);
+    }, [animateDirection, directionTransitionDuration, onStart, onComplete]);
+    // 위치 변경 함수
+    const setPositions = useCallback((start, end) => {
+        if (!animatePosition) {
+            setCurrentStartPosition(start);
+            setCurrentEndPosition(end);
+            return;
+        }
+        setIsAnimating(true);
+        setProgress(0);
+        onStart?.();
+        setTimeout(() => {
+            setCurrentStartPosition(start);
+            setCurrentEndPosition(end);
+            setIsAnimating(false);
+            setProgress(1);
+            onComplete?.();
+        }, positionTransitionDuration);
+    }, [animatePosition, positionTransitionDuration, onStart, onComplete]);
+    // 모션 시작 함수
+    const start = useCallback(() => {
+        if (!isVisible) {
+            setIsVisible(true);
+            setIsAnimating(true);
+            setProgress(0);
+            onStart?.();
+            setTimeout(() => {
+                setIsAnimating(false);
+                setProgress(1);
+                onComplete?.();
+            }, duration);
+        }
+    }, [isVisible, duration, onStart, onComplete]);
+    // 모션 중단 함수
+    const stop = useCallback(() => {
+        setIsAnimating(false);
+        onStop?.();
+    }, [onStop]);
+    // 모션 리셋 함수
+    const reset = useCallback(() => {
+        setIsVisible(false);
+        setIsAnimating(false);
+        setProgress(0);
+        setCurrentColors(colors);
+        setCurrentDirection(direction);
+        setCurrentStartPosition(startPosition);
+        setCurrentEndPosition(endPosition);
+        onReset?.();
+    }, [colors, direction, startPosition, endPosition, onReset]);
+    // 모션 일시정지 함수
+    const pause = useCallback(() => {
+        setIsAnimating(false);
+    }, []);
+    // 모션 재개 함수
+    const resume = useCallback(() => {
+        if (isVisible) {
+            setIsAnimating(true);
+        }
+    }, [isVisible]);
+    // 자동 시작
+    useEffect(() => {
+        if (autoStart) {
+            start();
+        }
+    }, [autoStart, start]);
+    // 그라데이션 스타일 생성
+    const getGradientStyle = () => {
+        let background;
+        if (gradientType === 'radial') {
+            background = `radial-gradient(circle at ${currentStartPosition}% ${currentEndPosition}%, ${currentColors.join(', ')})`;
+        }
+        else {
+            background = `linear-gradient(${currentDirection}, ${currentColors.join(', ')})`;
+        }
+        return {
+            background,
+            transition: `all ${duration}ms ${easing}`,
+            willChange: 'background'
+        };
+    };
+    const style = getGradientStyle();
+    return {
+        ref,
+        isVisible,
+        isAnimating,
+        style,
+        progress,
+        start,
+        stop,
+        reset,
+        pause,
+        resume,
+        currentColors,
+        currentDirection,
+        currentStartPosition,
+        currentEndPosition,
+        setColors,
+        setDirection,
+        setPositions
+    };
+}
+//# sourceMappingURL=useGradient.js.map

package/dist/hooks/useGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGradient.js","sourceRoot":"","sources":["../../src/hooks/useGradient.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useHoverMotion.d.ts

@@ -0,0 +1,15 @@
+import { BaseMotionOptions, InteractionReturn, MotionElement } from '../types';
+export interface HoverMotionOptions extends BaseMotionOptions {
+    hoverScale?: number;
+    hoverOpacity?: number;
+    hoverRotate?: number;
+    hoverTranslateY?: number;
+    hoverTranslateX?: number;
+    initialScale?: number;
+    initialOpacity?: number;
+    initialRotate?: number;
+    initialTranslateY?: number;
+    initialTranslateX?: number;
+}
+export declare function useHoverMotion<T extends MotionElement = HTMLDivElement>(options?: HoverMotionOptions): InteractionReturn<T>;
+//# sourceMappingURL=useHoverMotion.d.ts.map

package/dist/hooks/useHoverMotion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHoverMotion.d.ts","sourceRoot":"","sources":["../../src/hooks/useHoverMotion.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE9E,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EACrE,OAAO,GAAE,kBAAuB,GAC/B,iBAAiB,CAAC,CAAC,CAAC,CA4HtB"}

package/dist/hooks/useHoverMotion.js

@@ -0,0 +1,99 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+export function useHoverMotion(options = {}) {
+    const { duration = 300, easing = 'ease-out', hoverScale = 1.05, hoverOpacity = 1, hoverRotate = 0, hoverTranslateY = 0, hoverTranslateX = 0, initialScale = 1, initialOpacity = 1, initialRotate = 0, initialTranslateY = 0, initialTranslateX = 0, onComplete, onStart, onStop, onReset } = options;
+    const ref = useRef(null);
+    const [isHovered, setIsHovered] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [progress, setProgress] = useState(0);
+    // 호버 시작
+    const handleMouseEnter = useCallback(() => {
+        setIsHovered(true);
+        setIsAnimating(true);
+        setProgress(0);
+        onStart?.();
+        // 애니메이션 완료 시
+        setTimeout(() => {
+            setIsAnimating(false);
+            setProgress(1);
+            onComplete?.();
+        }, duration);
+    }, [duration, onStart, onComplete]);
+    // 호버 종료
+    const handleMouseLeave = useCallback(() => {
+        setIsHovered(false);
+        setIsAnimating(true);
+        setProgress(1);
+        // 애니메이션 완료 시
+        setTimeout(() => {
+            setIsAnimating(false);
+            setProgress(0);
+        }, duration);
+    }, [duration]);
+    // 모션 시작 함수 (프로그래매틱 제어용)
+    const start = useCallback(() => {
+        handleMouseEnter();
+    }, [handleMouseEnter]);
+    // 모션 중단 함수
+    const stop = useCallback(() => {
+        setIsAnimating(false);
+        onStop?.();
+    }, [onStop]);
+    // 모션 리셋 함수
+    const reset = useCallback(() => {
+        setIsHovered(false);
+        setIsAnimating(false);
+        setProgress(0);
+        onReset?.();
+    }, [onReset]);
+    // 모션 일시정지 함수
+    const pause = useCallback(() => {
+        setIsAnimating(false);
+    }, []);
+    // 모션 재개 함수
+    const resume = useCallback(() => {
+        if (isHovered) {
+            setIsAnimating(true);
+        }
+    }, [isHovered]);
+    // 이벤트 리스너 설정
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        element.addEventListener('mouseenter', handleMouseEnter);
+        element.addEventListener('mouseleave', handleMouseLeave);
+        return () => {
+            element.removeEventListener('mouseenter', handleMouseEnter);
+            element.removeEventListener('mouseleave', handleMouseLeave);
+        };
+    }, [handleMouseEnter, handleMouseLeave]);
+    // 스타일 계산
+    const style = {
+        transform: `
+      scale(${isHovered ? hoverScale : initialScale})
+      rotate(${isHovered ? hoverRotate : initialRotate}deg)
+      translate(${isHovered ? hoverTranslateX : initialTranslateX}px, ${isHovered ? hoverTranslateY : initialTranslateY}px)
+    `,
+        opacity: isHovered ? hoverOpacity : initialOpacity,
+        transition: `all ${duration}ms ${easing}`,
+        willChange: 'transform, opacity'
+    };
+    return {
+        ref,
+        isVisible: isHovered,
+        isAnimating,
+        style,
+        progress,
+        start,
+        stop,
+        reset,
+        pause,
+        resume,
+        // 새로운 직관적 API 추가
+        hover: handleMouseEnter,
+        leave: handleMouseLeave,
+        // 상태 속성 추가
+        isHovered
+    };
+}
+//# sourceMappingURL=useHoverMotion.js.map

package/dist/hooks/useHoverMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHoverMotion.js","sourceRoot":"","sources":["../../src/hooks/useHoverMotion.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useLoadingSpinner.d.ts

@@ -0,0 +1,30 @@
+import { BaseMotionOptions, BaseMotionReturn, MotionElement } from '../types';
+export interface LoadingSpinnerOptions extends BaseMotionOptions {
+    type?: 'rotate' | 'pulse' | 'bounce' | 'wave' | 'dots' | 'bars' | 'custom';
+    rotationSpeed?: number;
+    pulseSpeed?: number;
+    bounceHeight?: number;
+    waveCount?: number;
+    dotCount?: number;
+    barCount?: number;
+    color?: string;
+    backgroundColor?: string;
+    size?: number;
+    thickness?: number;
+    autoStart?: boolean;
+    infinite?: boolean;
+}
+export declare function useLoadingSpinner<T extends MotionElement = HTMLDivElement>(options?: LoadingSpinnerOptions): BaseMotionReturn<T> & {
+    isLoading: boolean;
+    spinnerType: string;
+    rotationAngle: number;
+    pulseScale: number;
+    bounceOffset: number;
+    waveProgress: number;
+    dotProgress: number;
+    barProgress: number;
+    startLoading: () => void;
+    stopLoading: () => void;
+    setLoadingState: (loading: boolean) => void;
+};
+//# sourceMappingURL=useLoadingSpinner.d.ts.map

package/dist/hooks/useLoadingSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoadingSpinner.d.ts","sourceRoot":"","sources":["../../src/hooks/useLoadingSpinner.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE7E,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;IAE9D,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;IAG1E,aAAa,CAAC,EAAE,MAAM,CAAA;IAGtB,UAAU,CAAC,EAAE,MAAM,CAAA;IAGnB,YAAY,CAAC,EAAE,MAAM,CAAA;IAGrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAGlB,QAAQ,CAAC,EAAE,MAAM,CAAA;IAGjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IAGjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,MAAM,CAAA;IAGxB,IAAI,CAAC,EAAE,MAAM,CAAA;IAGb,SAAS,CAAC,EAAE,MAAM,CAAA;IAGlB,SAAS,CAAC,EAAE,OAAO,CAAA;IAGnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EACxE,OAAO,GAAE,qBAA0B,GAClC,gBAAgB,CAAC,CAAC,CAAC,GAAG;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,MAAM,CAAA;IACrB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC5C,CAyUA"}