@hua-labs/motion-core 2.0.0 → 2.0.1

package/dist/hooks/useSmartMotion.js

@@ -0,0 +1,257 @@
+import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+/**
+ * 3단계 API: 개별 요소 모션
+ *
+ * 사용법:
+ * ```typescript
+ * const heroRef = useSmartMotion({ type: 'hero' })
+ * const titleRef = useSmartMotion({ type: 'title' })
+ * const buttonRef = useSmartMotion({ type: 'button' })
+ * ```
+ */
+export function useSmartMotion(options = {}) {
+    const { type = 'text', entrance: customEntrance, hover: customHover, click: customClick, delay: customDelay, duration: customDuration, threshold = 0.1, autoLanguageSync = false } = options;
+    // 프리셋 설정
+    const getPresetConfig = useCallback(() => {
+        const presets = {
+            hero: { entrance: 'fadeIn', delay: 200, duration: 800, hover: false, click: false },
+            title: { entrance: 'slideUp', delay: 400, duration: 700, hover: false, click: false },
+            button: { entrance: 'scaleIn', delay: 600, duration: 300, hover: true, click: true },
+            card: { entrance: 'slideUp', delay: 800, duration: 500, hover: true, click: false },
+            text: { entrance: 'fadeIn', delay: 200, duration: 600, hover: false, click: false },
+            image: { entrance: 'scaleIn', delay: 400, duration: 600, hover: true, click: false }
+        };
+        return presets[type] || presets.text;
+    }, [type]);
+    const preset = getPresetConfig();
+    // 프리셋과 커스텀 옵션 병합
+    const entrance = customEntrance || preset.entrance;
+    const hover = customHover !== undefined ? customHover : preset.hover;
+    const click = customClick !== undefined ? customClick : preset.click;
+    const delay = customDelay !== undefined ? customDelay : preset.delay;
+    const duration = customDuration !== undefined ? customDuration : preset.duration;
+    const elementRef = useRef(null);
+    // 초기 모션 값 계산
+    const getInitialMotionValues = () => {
+        const initialState = {
+            isVisible: false,
+            isHovered: false,
+            isClicked: false,
+            opacity: 0,
+            translateY: 0,
+            translateX: 0,
+            scale: 1
+        };
+        // 초기 상태에 맞는 모션 값 설정
+        switch (entrance) {
+            case 'fadeIn':
+                initialState.opacity = 0;
+                break;
+            case 'slideUp':
+                initialState.opacity = 0;
+                initialState.translateY = 20;
+                break;
+            case 'slideLeft':
+                initialState.opacity = 0;
+                initialState.translateX = -20;
+                break;
+            case 'slideRight':
+                initialState.opacity = 0;
+                initialState.translateX = 20;
+                break;
+            case 'scaleIn':
+                initialState.opacity = 0;
+                initialState.scale = 0.8;
+                break;
+            case 'bounceIn':
+                initialState.opacity = 0;
+                initialState.scale = 0.5;
+                break;
+        }
+        return initialState;
+    };
+    const [state, setState] = useState(() => {
+        const initialValues = getInitialMotionValues();
+        // threshold가 0이면 즉시 visible로 설정
+        if (threshold === 0) {
+            initialValues.isVisible = true;
+            initialValues.opacity = 1;
+            initialValues.translateY = 0;
+            initialValues.translateX = 0;
+            initialValues.scale = 1;
+        }
+        return initialValues;
+    });
+    // 모션 값 계산
+    const calculateMotionValues = useCallback((currentState) => {
+        const { isVisible, isHovered, isClicked } = currentState;
+        let opacity = 0;
+        let translateY = 0;
+        let translateX = 0;
+        let scale = 1;
+        // 진입 모션
+        if (isVisible) {
+            opacity = 1;
+            switch (entrance) {
+                case 'fadeIn':
+                    // 기본값 유지
+                    break;
+                case 'slideUp':
+                    translateY = 0;
+                    break;
+                case 'slideLeft':
+                    translateX = 0;
+                    break;
+                case 'slideRight':
+                    translateX = 0;
+                    break;
+                case 'scaleIn':
+                    scale = 1;
+                    break;
+                case 'bounceIn':
+                    scale = 1;
+                    break;
+            }
+        }
+        else {
+            // 초기 상태
+            switch (entrance) {
+                case 'fadeIn':
+                    opacity = 0;
+                    break;
+                case 'slideUp':
+                    opacity = 0;
+                    translateY = 20;
+                    break;
+                case 'slideLeft':
+                    opacity = 0;
+                    translateX = -20;
+                    break;
+                case 'slideRight':
+                    opacity = 0;
+                    translateX = 20;
+                    break;
+                case 'scaleIn':
+                    opacity = 0;
+                    scale = 0.8;
+                    break;
+                case 'bounceIn':
+                    opacity = 0;
+                    scale = 0.5;
+                    break;
+            }
+        }
+        // 호버 효과
+        if (hover && isHovered) {
+            scale *= 1.1; // 더 큰 확대
+            translateY -= 5; // 더 큰 이동
+        }
+        // 클릭 효과
+        if (click && isClicked) {
+            scale *= 0.85; // 더 큰 축소
+            translateY += 3; // 더 큰 이동
+        }
+        return { opacity, translateY, translateX, scale };
+    }, [entrance, hover, click]);
+    // Intersection Observer
+    useEffect(() => {
+        if (!elementRef.current)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    setTimeout(() => {
+                        setState(prev => ({ ...prev, isVisible: true }));
+                    }, delay);
+                }
+            });
+        }, { threshold });
+        observer.observe(elementRef.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, [delay, threshold]);
+    // 호버 이벤트
+    useEffect(() => {
+        if (!hover || !elementRef.current)
+            return;
+        const element = elementRef.current;
+        const handleMouseEnter = () => {
+            setState(prev => ({ ...prev, isHovered: true }));
+        };
+        const handleMouseLeave = () => {
+            setState(prev => ({ ...prev, isHovered: false }));
+        };
+        element.addEventListener('mouseenter', handleMouseEnter);
+        element.addEventListener('mouseleave', handleMouseLeave);
+        return () => {
+            element.removeEventListener('mouseenter', handleMouseEnter);
+            element.removeEventListener('mouseleave', handleMouseLeave);
+        };
+    }, [hover]);
+    // 클릭 이벤트
+    useEffect(() => {
+        if (!click || !elementRef.current)
+            return;
+        const element = elementRef.current;
+        const handleClick = () => {
+            setState(prev => ({ ...prev, isClicked: true }));
+            setTimeout(() => {
+                setState(prev => ({ ...prev, isClicked: false }));
+            }, 300); // 더 긴 지속시간
+        };
+        element.addEventListener('click', handleClick);
+        return () => {
+            element.removeEventListener('click', handleClick);
+        };
+    }, [click]);
+    // 상태 변경 시 모션 값 업데이트 (무한 루프 방지)
+    useEffect(() => {
+        setState(prev => {
+            const { opacity, translateY, translateX, scale } = calculateMotionValues(prev);
+            // 값이 실제로 변경되었을 때만 업데이트 (불필요한 리렌더링 방지)
+            if (prev.opacity === opacity &&
+                prev.translateY === translateY &&
+                prev.translateX === translateX &&
+                prev.scale === scale) {
+                return prev; // 변경 없으면 이전 상태 반환
+            }
+            return { ...prev, opacity, translateY, translateX, scale };
+        });
+    }, [state.isVisible, state.isHovered, state.isClicked, calculateMotionValues]);
+    // 언어 변경 감지 (간단한 버전)
+    useEffect(() => {
+        if (!autoLanguageSync)
+            return;
+        const handleLanguageChange = () => {
+            // 언어 변경 시 모션 재시작
+            setState(prev => ({ ...prev, isVisible: false }));
+            setTimeout(() => {
+                setState(prev => ({ ...prev, isVisible: true }));
+            }, 100);
+        };
+        // 간단한 언어 변경 감지 (실제로는 i18n 훅과 연동 필요)
+        window.addEventListener('storage', handleLanguageChange);
+        return () => {
+            window.removeEventListener('storage', handleLanguageChange);
+        };
+    }, [autoLanguageSync]);
+    // 스타일 메모이제이션으로 불필요한 리렌더링 방지
+    const motionStyle = useMemo(() => ({
+        opacity: state.opacity,
+        transform: `translate(${state.translateX}px, ${state.translateY}px) scale(${state.scale})`,
+        transition: `all ${duration}ms ease-out`,
+        // CSS transition과 충돌 방지
+        pointerEvents: 'auto',
+        // 강제로 스타일 적용
+        willChange: 'transform, opacity'
+    }), [state.opacity, state.translateX, state.translateY, state.scale, duration]);
+    return {
+        ref: elementRef,
+        style: motionStyle,
+        isVisible: state.isVisible,
+        isHovered: state.isHovered,
+        isClicked: state.isClicked
+    };
+}
+//# sourceMappingURL=useSmartMotion.js.map

package/dist/hooks/useSmartMotion.js.map

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

package/dist/hooks/useSpringMotion.d.ts

@@ -1,32 +1,22 @@
-import { BaseMotionOptions, BaseMotionReturn, MotionElement } from '../types';
-export interface SpringOptions extends BaseMotionOptions {
+import { BaseMotionReturn, MotionElement } from '../types';
+interface SpringConfig {
+    mass?: number;
     stiffness?: number;
     damping?: number;
-    mass?: number;
     restDelta?: number;
     restSpeed?: number;
-    initialScale?: number;
-    initialOpacity?: number;
-    initialRotate?: number;
-    initialTranslateY?: number;
-    initialTranslateX?: number;
-    targetScale?: number;
-    targetOpacity?: number;
-    targetRotate?: number;
-    targetTranslateY?: number;
-    targetTranslateX?: number;
+}
+interface SpringMotionOptions {
+    from: number;
+    to: number;
+    config?: SpringConfig;
+    onComplete?: () => void;
+    enabled?: boolean;
     autoStart?: boolean;
 }
-export declare function useSpringMotion<T extends MotionElement = HTMLDivElement>(options?: SpringOptions): BaseMotionReturn<T> & {
-    stiffness: number;
-    damping: number;
-    mass: number;
-    velocity: {
-        scale: number;
-        opacity: number;
-        rotate: number;
-        translateY: number;
-        translateX: number;
-    };
+export declare function useSpringMotion<T extends MotionElement = HTMLDivElement>(options: SpringMotionOptions): BaseMotionReturn<T> & {
+    value: number;
+    velocity: number;
 };
+export {};
 //# sourceMappingURL=useSpringMotion.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useSpringMotion.d.ts","sourceRoot":"","sources":["../../src/hooks/useSpringMotion.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE7E,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,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;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,wBAAgB,eAAe,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EACtE,OAAO,GAAE,aAAkB,GAC1B,gBAAgB,CAAC,CAAC,CAAC,GAAG;IACvB,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAA;CACrG,CAiOA"}
+{"version":3,"file":"useSpringMotion.d.ts","sourceRoot":"","sources":["../../src/hooks/useSpringMotion.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE1D,UAAU,YAAY;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,wBAAgB,eAAe,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EACtE,OAAO,EAAE,mBAAmB,GAC3B,gBAAgB,CAAC,CAAC,CAAC,GAAG;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;CACjB,CAsKA"}

package/dist/hooks/useSpringMotion.js

@@ -1,185 +1,133 @@
-import { useRef, useState, useEffect, useCallback } from 'react';
-export function useSpringMotion(options = {}) {
-    const { duration = 1000, easing = 'ease-out', stiffness = 100, damping = 10, mass = 1, restDelta = 0.01, restSpeed = 0.01, initialScale = 0, initialOpacity = 0, initialRotate = 0, initialTranslateY = 0, initialTranslateX = 0, targetScale = 1, targetOpacity = 1, targetRotate = 0, targetTranslateY = 0, targetTranslateX = 0, autoStart = true, onComplete, onStart, onStop, onReset } = options;
+import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+export function useSpringMotion(options) {
+    const { from, to, config = {
+        mass: 1,
+        stiffness: 100,
+        damping: 10,
+        restDelta: 0.01,
+        restSpeed: 0.01
+    }, onComplete, enabled = true, autoStart = false } = options;
     const ref = useRef(null);
-    const [isVisible, setIsVisible] = useState(false);
-    const [isAnimating, setIsAnimating] = useState(false);
-    const [progress, setProgress] = useState(0);
-    // 현재 위치와 속도
-    const [currentScale, setCurrentScale] = useState(initialScale);
-    const [currentOpacity, setCurrentOpacity] = useState(initialOpacity);
-    const [currentRotate, setCurrentRotate] = useState(initialRotate);
-    const [currentTranslateY, setCurrentTranslateY] = useState(initialTranslateY);
-    const [currentTranslateX, setCurrentTranslateX] = useState(initialTranslateX);
-    // velocity를 useRef로 변경하여 의존성 배열 문제 해결
-    const velocityRef = useRef({
-        scale: 0,
-        opacity: 0,
-        rotate: 0,
-        translateY: 0,
-        translateX: 0
+    const [springState, setSpringState] = useState({
+        value: from,
+        velocity: 0,
+        isAnimating: false
     });
-    // 스프링 애니메이션 루프
-    const springAnimation = useCallback(() => {
-        if (!isAnimating)
+    const [isVisible, setIsVisible] = useState(true);
+    const [progress, setProgress] = useState(0);
+    const motionRef = useRef(null);
+    const lastTimeRef = useRef(0);
+    // 스프링 물리 계산
+    const calculateSpring = useCallback((currentValue, currentVelocity, targetValue, deltaTime) => {
+        const { mass = 1, stiffness = 100, damping = 10 } = config;
+        // 스프링 힘 계산 (Hooke's Law)
+        const displacement = currentValue - targetValue;
+        const springForce = -stiffness * displacement;
+        // 댐핑 힘 계산
+        const dampingForce = -damping * currentVelocity;
+        // 총 힘
+        const totalForce = springForce + dampingForce;
+        // 가속도 (F = ma)
+        const acceleration = totalForce / mass;
+        // 새로운 속도
+        const newVelocity = currentVelocity + acceleration * deltaTime;
+        // 새로운 위치
+        const newValue = currentValue + newVelocity * deltaTime;
+        return { value: newValue, velocity: newVelocity };
+    }, [config]);
+    // 모션 루프
+    const animate = useCallback((currentTime) => {
+        if (!enabled || !springState.isAnimating)
             return;
-        const animate = () => {
-            if (!isAnimating)
-                return;
-            // 스프링 물리 계산
-            const scaleForce = (targetScale - currentScale) * stiffness;
-            const opacityForce = (targetOpacity - currentOpacity) * stiffness;
-            const rotateForce = (targetRotate - currentRotate) * stiffness;
-            const translateYForce = (targetTranslateY - currentTranslateY) * stiffness;
-            const translateXForce = (targetTranslateX - currentTranslateX) * stiffness;
-            // 가속도 계산 (F = ma)
-            const scaleAcceleration = scaleForce / mass;
-            const opacityAcceleration = opacityForce / mass;
-            const rotateAcceleration = rotateForce / mass;
-            const translateYAcceleration = translateYForce / mass;
-            const translateXAcceleration = translateXForce / mass;
-            // 속도 업데이트 (v = v0 + at)
-            const newVelocity = {
-                scale: velocityRef.current.scale + scaleAcceleration,
-                opacity: velocityRef.current.opacity + opacityAcceleration,
-                rotate: velocityRef.current.rotate + rotateAcceleration,
-                translateY: velocityRef.current.translateY + translateYAcceleration,
-                translateX: velocityRef.current.translateX + translateXAcceleration
-            };
-            // 감쇠 적용
-            newVelocity.scale *= (1 - damping / 100);
-            newVelocity.opacity *= (1 - damping / 100);
-            newVelocity.rotate *= (1 - damping / 100);
-            newVelocity.translateY *= (1 - damping / 100);
-            newVelocity.translateX *= (1 - damping / 100);
-            // velocityRef 업데이트
-            velocityRef.current = newVelocity;
-            // 위치 업데이트 (x = x0 + vt)
-            const newScale = currentScale + newVelocity.scale;
-            const newOpacity = currentOpacity + newVelocity.opacity;
-            const newRotate = currentRotate + newVelocity.rotate;
-            const newTranslateY = currentTranslateY + newVelocity.translateY;
-            const newTranslateX = currentTranslateX + newVelocity.translateX;
-            setCurrentScale(newScale);
-            setCurrentOpacity(newOpacity);
-            setCurrentRotate(newRotate);
-            setCurrentTranslateY(newTranslateY);
-            setCurrentTranslateX(newTranslateX);
-            // 진행률 계산
-            const totalDistance = Math.abs(targetScale - initialScale) +
-                Math.abs(targetOpacity - initialOpacity) +
-                Math.abs(targetRotate - initialRotate) +
-                Math.abs(targetTranslateY - initialTranslateY) +
-                Math.abs(targetTranslateX - initialTranslateX);
-            const currentDistance = Math.abs(newScale - initialScale) +
-                Math.abs(newOpacity - initialOpacity) +
-                Math.abs(newRotate - initialRotate) +
-                Math.abs(newTranslateY - initialTranslateY) +
-                Math.abs(newTranslateX - initialTranslateX);
-            const newProgress = totalDistance > 0 ? currentDistance / totalDistance : 0;
-            setProgress(Math.min(newProgress, 1));
-            // 정지 조건 확인
-            const isAtRest = Math.abs(newVelocity.scale) < restSpeed &&
-                Math.abs(newVelocity.opacity) < restSpeed &&
-                Math.abs(newVelocity.rotate) < restSpeed &&
-                Math.abs(newVelocity.translateY) < restSpeed &&
-                Math.abs(newVelocity.translateX) < restSpeed &&
-                Math.abs(targetScale - newScale) < restDelta &&
-                Math.abs(targetOpacity - newOpacity) < restDelta &&
-                Math.abs(targetRotate - newRotate) < restDelta &&
-                Math.abs(targetTranslateY - newTranslateY) < restDelta &&
-                Math.abs(targetTranslateX - newTranslateX) < restDelta;
-            if (isAtRest) {
-                // 목표값으로 정확히 설정
-                setCurrentScale(targetScale);
-                setCurrentOpacity(targetOpacity);
-                setCurrentRotate(targetRotate);
-                setCurrentTranslateY(targetTranslateY);
-                setCurrentTranslateX(targetTranslateX);
-                setProgress(1);
-                setIsAnimating(false);
-                onComplete?.();
-            }
-            else {
-                requestAnimationFrame(animate);
-            }
-        };
-        requestAnimationFrame(animate);
-    }, [isAnimating, currentScale, currentOpacity, currentRotate, currentTranslateY, currentTranslateX,
-        targetScale, targetOpacity, targetRotate, targetTranslateY, targetTranslateX,
-        stiffness, damping, mass, restSpeed, restDelta, onComplete]);
-    // 모션 시작 함수 - 조건 로직 개선
+        const deltaTime = Math.min(currentTime - lastTimeRef.current, 16) / 1000; // 60fps 제한
+        lastTimeRef.current = currentTime;
+        const { value, velocity } = calculateSpring(springState.value, springState.velocity, to, deltaTime);
+        // 진행률 계산
+        const range = Math.abs(to - from);
+        const currentProgress = range > 0 ? Math.min(Math.abs(value - from) / range, 1) : 1;
+        setProgress(currentProgress);
+        // 정지 조건 확인
+        const isAtRest = Math.abs(value - to) < (config.restDelta || 0.01) && Math.abs(velocity) < (config.restSpeed || 0.01);
+        if (isAtRest) {
+            setSpringState({
+                value: to,
+                velocity: 0,
+                isAnimating: false
+            });
+            setProgress(1);
+            onComplete?.();
+            return;
+        }
+        setSpringState({
+            value,
+            velocity,
+            isAnimating: true
+        });
+        motionRef.current = requestAnimationFrame(animate);
+    }, [enabled, springState.isAnimating, to, config, onComplete, calculateSpring]);
+    // 모션 시작
     const start = useCallback(() => {
-        // 이미 애니메이션 중이거나 보이는 상태라면 무시
-        if (isAnimating)
+        if (springState.isAnimating)
             return;
-        setIsVisible(true);
-        setIsAnimating(true);
-        setProgress(0);
-        onStart?.();
-        springAnimation();
-    }, [isAnimating, onStart, springAnimation]);
-    // 모션 중단 함수
+        setSpringState(prev => ({
+            ...prev,
+            isAnimating: true
+        }));
+        lastTimeRef.current = performance.now();
+        motionRef.current = requestAnimationFrame(animate);
+    }, [springState.isAnimating, animate]);
+    // 모션 정지
     const stop = useCallback(() => {
-        setIsAnimating(false);
-        onStop?.();
-    }, [onStop]);
-    // 모션 리셋 함수
+        if (motionRef.current) {
+            cancelAnimationFrame(motionRef.current);
+            motionRef.current = null;
+        }
+        setSpringState(prev => ({
+            ...prev,
+            isAnimating: false
+        }));
+    }, []);
+    // 모션 리셋
     const reset = useCallback(() => {
-        setIsVisible(false);
-        setIsAnimating(false);
+        stop();
+        setSpringState({
+            value: from,
+            velocity: 0,
+            isAnimating: false
+        });
         setProgress(0);
-        setCurrentScale(initialScale);
-        setCurrentOpacity(initialOpacity);
-        setCurrentRotate(initialRotate);
-        setCurrentTranslateY(initialTranslateY);
-        setCurrentTranslateX(initialTranslateX);
-        // velocityRef 초기화
-        velocityRef.current = { scale: 0, opacity: 0, rotate: 0, translateY: 0, translateX: 0 };
-        onReset?.();
-    }, [initialScale, initialOpacity, initialRotate, initialTranslateY, initialTranslateX, onReset]);
-    // 모션 일시정지 함수
-    const pause = useCallback(() => {
-        setIsAnimating(false);
-    }, []);
-    // 모션 재개 함수
-    const resume = useCallback(() => {
-        if (isVisible && !isAnimating) {
-            setIsAnimating(true);
-            springAnimation();
-        }
-    }, [isVisible, isAnimating, springAnimation]);
+        motionRef.current = null;
+    }, [from, stop]);
     // 자동 시작
     useEffect(() => {
         if (autoStart) {
             start();
         }
     }, [autoStart, start]);
-    // 스프링 스타일 계산
-    const style = {
-        transform: `
-      scale(${currentScale})
-      rotate(${currentRotate}deg)
-      translate(${currentTranslateX}px, ${currentTranslateY}px)
-    `,
-        opacity: currentOpacity,
-        willChange: 'transform, opacity'
-    };
+    // 컴포넌트 언마운트 시 정리
+    useEffect(() => {
+        return () => {
+            if (motionRef.current) {
+                cancelAnimationFrame(motionRef.current);
+            }
+        };
+    }, []);
+    // 스타일 계산
+    const style = useMemo(() => ({
+        '--motion-progress': `${progress}`,
+        '--motion-value': `${springState.value}`
+    }), [progress, springState.value]);
     return {
         ref,
         isVisible,
-        isAnimating,
+        isAnimating: springState.isAnimating,
         style,
         progress,
+        value: springState.value,
+        velocity: springState.velocity,
         start,
         stop,
-        reset,
-        pause,
-        resume,
-        stiffness,
-        damping,
-        mass,
-        velocity: velocityRef.current // 현재 velocity 값 반환
+        reset
     };
 }
 //# sourceMappingURL=useSpringMotion.js.map