@hua-labs/motion-core 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (130) hide show
  1. package/README.md +16 -19
  2. package/dist/.tsbuildinfo +1 -1
  3. package/dist/core/MotionEngine.d.ts +111 -0
  4. package/dist/core/MotionEngine.d.ts.map +1 -0
  5. package/dist/core/MotionEngine.js +206 -0
  6. package/dist/core/MotionEngine.js.map +1 -0
  7. package/dist/core/PerformanceOptimizer.d.ts +124 -0
  8. package/dist/core/PerformanceOptimizer.d.ts.map +1 -0
  9. package/dist/core/PerformanceOptimizer.js +334 -0
  10. package/dist/core/PerformanceOptimizer.js.map +1 -0
  11. package/dist/core/TransitionEffects.d.ts +76 -0
  12. package/dist/core/TransitionEffects.d.ts.map +1 -0
  13. package/dist/core/TransitionEffects.js +321 -0
  14. package/dist/core/TransitionEffects.js.map +1 -0
  15. package/dist/hooks/useBounceIn.d.ts +11 -2
  16. package/dist/hooks/useBounceIn.d.ts.map +1 -1
  17. package/dist/hooks/useBounceIn.js +48 -114
  18. package/dist/hooks/useBounceIn.js.map +1 -1
  19. package/dist/hooks/useClickToggle.d.ts +28 -13
  20. package/dist/hooks/useClickToggle.d.ts.map +1 -1
  21. package/dist/hooks/useClickToggle.js +125 -90
  22. package/dist/hooks/useClickToggle.js.map +1 -1
  23. package/dist/hooks/useFadeIn.d.ts +0 -14
  24. package/dist/hooks/useFadeIn.d.ts.map +1 -1
  25. package/dist/hooks/useFadeIn.js +17 -43
  26. package/dist/hooks/useFadeIn.js.map +1 -1
  27. package/dist/hooks/useFocusToggle.d.ts +28 -13
  28. package/dist/hooks/useFocusToggle.d.ts.map +1 -1
  29. package/dist/hooks/useFocusToggle.js +125 -87
  30. package/dist/hooks/useFocusToggle.js.map +1 -1
  31. package/dist/hooks/useGesture.d.ts +45 -0
  32. package/dist/hooks/useGesture.d.ts.map +1 -0
  33. package/dist/hooks/useGesture.js +274 -0
  34. package/dist/hooks/useGesture.js.map +1 -0
  35. package/dist/hooks/useGestureMotion.d.ts +26 -0
  36. package/dist/hooks/useGestureMotion.d.ts.map +1 -0
  37. package/dist/hooks/useGestureMotion.js +167 -0
  38. package/dist/hooks/useGestureMotion.js.map +1 -0
  39. package/dist/hooks/useGradient.d.ts +10 -21
  40. package/dist/hooks/useGradient.d.ts.map +1 -1
  41. package/dist/hooks/useGradient.js +70 -127
  42. package/dist/hooks/useGradient.js.map +1 -1
  43. package/dist/hooks/useHoverMotion.d.ts +4 -14
  44. package/dist/hooks/useHoverMotion.d.ts.map +1 -1
  45. package/dist/hooks/useHoverMotion.js +31 -82
  46. package/dist/hooks/useHoverMotion.js.map +1 -1
  47. package/dist/hooks/useMotionState.d.ts +27 -24
  48. package/dist/hooks/useMotionState.d.ts.map +1 -1
  49. package/dist/hooks/useMotionState.js +186 -103
  50. package/dist/hooks/useMotionState.js.map +1 -1
  51. package/dist/hooks/usePageMotions.d.ts +17 -0
  52. package/dist/hooks/usePageMotions.d.ts.map +1 -0
  53. package/dist/hooks/usePageMotions.js +352 -0
  54. package/dist/hooks/usePageMotions.js.map +1 -0
  55. package/dist/hooks/usePulse.d.ts +8 -1
  56. package/dist/hooks/usePulse.d.ts.map +1 -1
  57. package/dist/hooks/usePulse.js +75 -101
  58. package/dist/hooks/usePulse.js.map +1 -1
  59. package/dist/hooks/useRepeat.d.ts +17 -22
  60. package/dist/hooks/useRepeat.d.ts.map +1 -1
  61. package/dist/hooks/useRepeat.js +48 -162
  62. package/dist/hooks/useRepeat.js.map +1 -1
  63. package/dist/hooks/useScaleIn.d.ts +12 -2
  64. package/dist/hooks/useScaleIn.d.ts.map +1 -1
  65. package/dist/hooks/useScaleIn.js +46 -85
  66. package/dist/hooks/useScaleIn.js.map +1 -1
  67. package/dist/hooks/useScrollProgress.d.ts +8 -18
  68. package/dist/hooks/useScrollProgress.d.ts.map +1 -1
  69. package/dist/hooks/useScrollProgress.js +28 -130
  70. package/dist/hooks/useScrollProgress.js.map +1 -1
  71. package/dist/hooks/useScrollReveal.d.ts +12 -15
  72. package/dist/hooks/useScrollReveal.d.ts.map +1 -1
  73. package/dist/hooks/useScrollReveal.js +93 -72
  74. package/dist/hooks/useScrollReveal.js.map +1 -1
  75. package/dist/hooks/useSimplePageMotion.d.ts +29 -0
  76. package/dist/hooks/useSimplePageMotion.d.ts.map +1 -0
  77. package/dist/hooks/useSimplePageMotion.js +145 -0
  78. package/dist/hooks/useSimplePageMotion.js.map +1 -0
  79. package/dist/hooks/useSlideLeft.d.ts +12 -2
  80. package/dist/hooks/useSlideLeft.d.ts.map +1 -1
  81. package/dist/hooks/useSlideLeft.js +46 -85
  82. package/dist/hooks/useSlideLeft.js.map +1 -1
  83. package/dist/hooks/useSlideRight.d.ts +12 -2
  84. package/dist/hooks/useSlideRight.d.ts.map +1 -1
  85. package/dist/hooks/useSlideRight.js +46 -85
  86. package/dist/hooks/useSlideRight.js.map +1 -1
  87. package/dist/hooks/useSlideUp.d.ts.map +1 -1
  88. package/dist/hooks/useSlideUp.js +40 -29
  89. package/dist/hooks/useSlideUp.js.map +1 -1
  90. package/dist/hooks/useSmartMotion.d.ts +31 -0
  91. package/dist/hooks/useSmartMotion.d.ts.map +1 -0
  92. package/dist/hooks/useSmartMotion.js +257 -0
  93. package/dist/hooks/useSmartMotion.js.map +1 -0
  94. package/dist/hooks/useSpringMotion.d.ts +14 -24
  95. package/dist/hooks/useSpringMotion.d.ts.map +1 -1
  96. package/dist/hooks/useSpringMotion.js +109 -161
  97. package/dist/hooks/useSpringMotion.js.map +1 -1
  98. package/dist/hooks/useToggleMotion.d.ts +16 -0
  99. package/dist/hooks/useToggleMotion.d.ts.map +1 -0
  100. package/dist/hooks/useToggleMotion.js +53 -0
  101. package/dist/hooks/useToggleMotion.js.map +1 -0
  102. package/dist/hooks/useUnifiedMotion.d.ts +51 -0
  103. package/dist/hooks/useUnifiedMotion.d.ts.map +1 -0
  104. package/dist/hooks/useUnifiedMotion.js +106 -0
  105. package/dist/hooks/useUnifiedMotion.js.map +1 -0
  106. package/dist/index.d.ts +14 -10
  107. package/dist/index.d.ts.map +1 -1
  108. package/dist/index.js +37 -17
  109. package/dist/index.js.map +1 -1
  110. package/dist/managers/MotionStateManager.d.ts +63 -0
  111. package/dist/managers/MotionStateManager.d.ts.map +1 -0
  112. package/dist/managers/MotionStateManager.js +159 -0
  113. package/dist/managers/MotionStateManager.js.map +1 -0
  114. package/dist/presets/index.d.ts +16 -0
  115. package/dist/presets/index.d.ts.map +1 -0
  116. package/dist/presets/index.js +120 -0
  117. package/dist/presets/index.js.map +1 -0
  118. package/dist/types/common.d.ts +155 -0
  119. package/dist/types/common.d.ts.map +1 -0
  120. package/dist/types/common.js +5 -0
  121. package/dist/types/common.js.map +1 -0
  122. package/dist/types/index.d.ts +63 -95
  123. package/dist/types/index.d.ts.map +1 -1
  124. package/dist/types/index.js +2 -2
  125. package/dist/types/index.js.map +1 -1
  126. package/dist/utils/easing.d.ts +80 -26
  127. package/dist/utils/easing.d.ts.map +1 -1
  128. package/dist/utils/easing.js +202 -67
  129. package/dist/utils/easing.js.map +1 -1
  130. package/package.json +15 -15
@@ -1 +1 @@
1
- {"version":3,"file":"useSlideLeft.d.ts","sourceRoot":"","sources":["../../src/hooks/useSlideLeft.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAExE,wBAAgB,YAAY,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EACnE,OAAO,GAAE,YAAiB,GACzB,gBAAgB,CAAC,CAAC,CAAC,CAoIrB"}
1
+ {"version":3,"file":"useSlideLeft.d.ts","sourceRoot":"","sources":["../../src/hooks/useSlideLeft.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE1D,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,wBAAgB,YAAY,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EACnE,OAAO,GAAE,gBAAqB,GAC7B,gBAAgB,CAAC,CAAC,CAAC,GAAG;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;CAChB,CAqFA"}
@@ -1,111 +1,72 @@
1
- import { useRef, useState, useEffect, useCallback } from 'react';
1
+ import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
2
2
  export function useSlideLeft(options = {}) {
3
- const { delay = 0, duration = 700, threshold = 0.1, triggerOnce = true, easing = 'ease-out', autoStart = true, distance = 50, onComplete, onStart, onStop, onReset } = options;
3
+ const { distance = 100, duration = 1000, delay = 0, autoStart = true, easing = 'ease-out' } = options;
4
4
  const ref = useRef(null);
5
- const [isVisible, setIsVisible] = useState(false);
5
+ const [translateX, setTranslateX] = useState(autoStart ? distance : 0);
6
+ const [opacity, setOpacity] = useState(autoStart ? 0 : 1);
6
7
  const [isAnimating, setIsAnimating] = useState(false);
7
- const [progress, setProgress] = useState(0);
8
- const observerRef = useRef(null);
9
- const timeoutRef = useRef(null);
10
- // 모션 시작 함수
8
+ const [isVisible, setIsVisible] = useState(autoStart ? false : true);
9
+ const [progress, setProgress] = useState(autoStart ? 0 : 1);
11
10
  const start = useCallback(() => {
12
- if (isAnimating)
13
- return;
14
11
  setIsAnimating(true);
12
+ setTranslateX(distance);
13
+ setOpacity(0);
15
14
  setProgress(0);
16
- onStart?.();
17
- // 지연 시간 적용
18
- if (delay > 0) {
19
- timeoutRef.current = window.setTimeout(() => {
20
- setIsVisible(true);
21
- setProgress(1);
22
- setIsAnimating(false);
23
- onComplete?.();
24
- }, delay);
25
- }
26
- else {
27
- setIsVisible(true);
15
+ setTimeout(() => {
28
16
  setProgress(1);
17
+ setTranslateX(0);
18
+ setOpacity(1);
19
+ setIsVisible(true);
29
20
  setIsAnimating(false);
30
- onComplete?.();
31
- }
32
- }, [delay, isAnimating, onStart, onComplete]);
33
- // 모션 중단 함수
34
- const stop = useCallback(() => {
35
- if (timeoutRef.current) {
36
- clearTimeout(timeoutRef.current);
37
- timeoutRef.current = null;
38
- }
39
- setIsAnimating(false);
40
- onStop?.();
41
- }, [onStop]);
42
- // 모션 리셋 함수
21
+ }, delay);
22
+ }, [distance, delay]);
43
23
  const reset = useCallback(() => {
44
- stop();
45
- setIsVisible(false);
24
+ // 즉시 초기 상태로 복원 (모션 없이)
25
+ setTranslateX(distance);
26
+ setOpacity(0);
46
27
  setProgress(0);
47
- onReset?.();
48
- }, [stop, onReset]);
49
- // 모션 일시정지 함수
50
- const pause = useCallback(() => {
51
- if (timeoutRef.current) {
52
- clearTimeout(timeoutRef.current);
53
- timeoutRef.current = null;
28
+ setIsVisible(false);
29
+ setIsAnimating(false);
30
+ // DOM 요소가 있다면 즉시 스타일 적용
31
+ if (ref.current) {
32
+ const element = ref.current;
33
+ element.style.transition = 'none';
34
+ element.style.opacity = '0';
35
+ element.style.transform = `translateX(${distance}px)`;
36
+ // 다음 프레임에서 transition 복원
37
+ requestAnimationFrame(() => {
38
+ element.style.transition = '';
39
+ });
54
40
  }
41
+ }, [distance]);
42
+ const stop = useCallback(() => {
55
43
  setIsAnimating(false);
56
44
  }, []);
57
- // 모션 재개 함수
58
- const resume = useCallback(() => {
59
- if (!isVisible && !isAnimating) {
45
+ useEffect(() => {
46
+ if (autoStart) {
60
47
  start();
61
48
  }
62
- }, [isVisible, isAnimating, start]);
63
- // Intersection Observer 설정
64
- useEffect(() => {
65
- if (!ref.current || !autoStart)
66
- return;
67
- observerRef.current = new IntersectionObserver((entries) => {
68
- entries.forEach((entry) => {
69
- if (entry.isIntersecting) {
70
- start();
71
- if (triggerOnce) {
72
- observerRef.current?.disconnect();
73
- }
74
- }
75
- });
76
- }, { threshold });
77
- observerRef.current.observe(ref.current);
78
- return () => {
79
- if (observerRef.current) {
80
- observerRef.current.disconnect();
81
- }
82
- };
83
- }, [autoStart, threshold, triggerOnce, start]);
84
- // 컴포넌트 언마운트 시 정리
85
- useEffect(() => {
86
- return () => {
87
- if (timeoutRef.current) {
88
- clearTimeout(timeoutRef.current);
89
- }
90
- };
91
- }, []);
92
- // 스타일 계산
93
- const style = {
94
- transform: `translateX(${isVisible ? 0 : distance}px)`,
95
- transition: `transform ${duration}ms ${easing}`,
96
- willChange: 'transform'
97
- };
49
+ }, [autoStart, start]);
50
+ // 스타일 계산 - 메모이제이션으로 불필요한 리렌더링 방지
51
+ const style = useMemo(() => ({
52
+ transform: `translateX(${translateX}px)`,
53
+ opacity,
54
+ transition: `all ${duration}ms ${easing}`,
55
+ '--motion-delay': `${delay}ms`,
56
+ '--motion-duration': `${duration}ms`,
57
+ '--motion-easing': easing
58
+ }), [translateX, opacity, duration, easing, delay]);
98
59
  return {
99
60
  ref,
61
+ translateX,
62
+ opacity,
100
63
  isVisible,
101
64
  isAnimating,
102
65
  style,
103
66
  progress,
104
67
  start,
105
- stop,
106
68
  reset,
107
- pause,
108
- resume
69
+ stop
109
70
  };
110
71
  }
111
72
  //# sourceMappingURL=useSlideLeft.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useSlideLeft.js","sourceRoot":"","sources":["../../src/hooks/useSlideLeft.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useSlideLeft.js","sourceRoot":"","sources":["../../src/hooks/useSlideLeft.ts"],"names":[],"mappings":"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"}
@@ -1,3 +1,13 @@
1
- import { SlideOptions, BaseMotionReturn, MotionElement } from '../types';
2
- export declare function useSlideRight<T extends MotionElement = HTMLDivElement>(options?: SlideOptions): BaseMotionReturn<T>;
1
+ import { BaseMotionReturn, MotionElement } from '../types';
2
+ export interface SlideRightOptions {
3
+ distance?: number;
4
+ duration?: number;
5
+ delay?: number;
6
+ autoStart?: boolean;
7
+ easing?: string;
8
+ }
9
+ export declare function useSlideRight<T extends MotionElement = HTMLDivElement>(options?: SlideRightOptions): BaseMotionReturn<T> & {
10
+ translateX: number;
11
+ opacity: number;
12
+ };
3
13
  //# sourceMappingURL=useSlideRight.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useSlideRight.d.ts","sourceRoot":"","sources":["../../src/hooks/useSlideRight.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAExE,wBAAgB,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EACpE,OAAO,GAAE,YAAiB,GACzB,gBAAgB,CAAC,CAAC,CAAC,CAoIrB"}
1
+ {"version":3,"file":"useSlideRight.d.ts","sourceRoot":"","sources":["../../src/hooks/useSlideRight.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE1D,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EACpE,OAAO,GAAE,iBAAsB,GAC9B,gBAAgB,CAAC,CAAC,CAAC,GAAG;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;CAChB,CAqFA"}
@@ -1,111 +1,72 @@
1
- import { useRef, useState, useEffect, useCallback } from 'react';
1
+ import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
2
2
  export function useSlideRight(options = {}) {
3
- const { delay = 0, duration = 700, threshold = 0.1, triggerOnce = true, easing = 'ease-out', autoStart = true, distance = 50, onComplete, onStart, onStop, onReset } = options;
3
+ const { distance = 100, duration = 1000, delay = 0, autoStart = true, easing = 'ease-out' } = options;
4
4
  const ref = useRef(null);
5
- const [isVisible, setIsVisible] = useState(false);
5
+ const [translateX, setTranslateX] = useState(autoStart ? -distance : 0);
6
+ const [opacity, setOpacity] = useState(autoStart ? 0 : 1);
6
7
  const [isAnimating, setIsAnimating] = useState(false);
7
- const [progress, setProgress] = useState(0);
8
- const observerRef = useRef(null);
9
- const timeoutRef = useRef(null);
10
- // 모션 시작 함수
8
+ const [isVisible, setIsVisible] = useState(autoStart ? false : true);
9
+ const [progress, setProgress] = useState(autoStart ? 0 : 1);
11
10
  const start = useCallback(() => {
12
- if (isAnimating)
13
- return;
14
11
  setIsAnimating(true);
12
+ setTranslateX(-distance);
13
+ setOpacity(0);
15
14
  setProgress(0);
16
- onStart?.();
17
- // 지연 시간 적용
18
- if (delay > 0) {
19
- timeoutRef.current = window.setTimeout(() => {
20
- setIsVisible(true);
21
- setProgress(1);
22
- setIsAnimating(false);
23
- onComplete?.();
24
- }, delay);
25
- }
26
- else {
27
- setIsVisible(true);
15
+ setTimeout(() => {
28
16
  setProgress(1);
17
+ setTranslateX(0);
18
+ setOpacity(1);
19
+ setIsVisible(true);
29
20
  setIsAnimating(false);
30
- onComplete?.();
31
- }
32
- }, [delay, isAnimating, onStart, onComplete]);
33
- // 모션 중단 함수
34
- const stop = useCallback(() => {
35
- if (timeoutRef.current) {
36
- clearTimeout(timeoutRef.current);
37
- timeoutRef.current = null;
38
- }
39
- setIsAnimating(false);
40
- onStop?.();
41
- }, [onStop]);
42
- // 모션 리셋 함수
21
+ }, delay);
22
+ }, [distance, delay]);
43
23
  const reset = useCallback(() => {
44
- stop();
45
- setIsVisible(false);
24
+ // 즉시 초기 상태로 복원 (모션 없이)
25
+ setTranslateX(-distance);
26
+ setOpacity(0);
46
27
  setProgress(0);
47
- onReset?.();
48
- }, [stop, onReset]);
49
- // 모션 일시정지 함수
50
- const pause = useCallback(() => {
51
- if (timeoutRef.current) {
52
- clearTimeout(timeoutRef.current);
53
- timeoutRef.current = null;
28
+ setIsVisible(false);
29
+ setIsAnimating(false);
30
+ // DOM 요소가 있다면 즉시 스타일 적용
31
+ if (ref.current) {
32
+ const element = ref.current;
33
+ element.style.transition = 'none';
34
+ element.style.opacity = '0';
35
+ element.style.transform = `translateX(${-distance}px)`;
36
+ // 다음 프레임에서 transition 복원
37
+ requestAnimationFrame(() => {
38
+ element.style.transition = '';
39
+ });
54
40
  }
41
+ }, [distance]);
42
+ const stop = useCallback(() => {
55
43
  setIsAnimating(false);
56
44
  }, []);
57
- // 모션 재개 함수
58
- const resume = useCallback(() => {
59
- if (!isVisible && !isAnimating) {
45
+ useEffect(() => {
46
+ if (autoStart) {
60
47
  start();
61
48
  }
62
- }, [isVisible, isAnimating, start]);
63
- // Intersection Observer 설정
64
- useEffect(() => {
65
- if (!ref.current || !autoStart)
66
- return;
67
- observerRef.current = new IntersectionObserver((entries) => {
68
- entries.forEach((entry) => {
69
- if (entry.isIntersecting) {
70
- start();
71
- if (triggerOnce) {
72
- observerRef.current?.disconnect();
73
- }
74
- }
75
- });
76
- }, { threshold });
77
- observerRef.current.observe(ref.current);
78
- return () => {
79
- if (observerRef.current) {
80
- observerRef.current.disconnect();
81
- }
82
- };
83
- }, [autoStart, threshold, triggerOnce, start]);
84
- // 컴포넌트 언마운트 시 정리
85
- useEffect(() => {
86
- return () => {
87
- if (timeoutRef.current) {
88
- clearTimeout(timeoutRef.current);
89
- }
90
- };
91
- }, []);
92
- // 스타일 계산
93
- const style = {
94
- transform: `translateX(${isVisible ? 0 : -distance}px)`,
95
- transition: `transform ${duration}ms ${easing}`,
96
- willChange: 'transform'
97
- };
49
+ }, [autoStart, start]);
50
+ // 스타일 계산 - 메모이제이션으로 불필요한 리렌더링 방지
51
+ const style = useMemo(() => ({
52
+ transform: `translateX(${translateX}px)`,
53
+ opacity,
54
+ transition: `all ${duration}ms ${easing}`,
55
+ '--motion-delay': `${delay}ms`,
56
+ '--motion-duration': `${duration}ms`,
57
+ '--motion-easing': easing
58
+ }), [translateX, opacity, duration, easing, delay]);
98
59
  return {
99
60
  ref,
61
+ translateX,
62
+ opacity,
100
63
  isVisible,
101
64
  isAnimating,
102
65
  style,
103
66
  progress,
104
67
  start,
105
- stop,
106
68
  reset,
107
- pause,
108
- resume
69
+ stop
109
70
  };
110
71
  }
111
72
  //# sourceMappingURL=useSlideRight.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useSlideRight.js","sourceRoot":"","sources":["../../src/hooks/useSlideRight.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useSlideRight.js","sourceRoot":"","sources":["../../src/hooks/useSlideRight.ts"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"useSlideUp.d.ts","sourceRoot":"","sources":["../../src/hooks/useSlideUp.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAExE,wBAAgB,UAAU,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EACjE,OAAO,GAAE,YAAiB,GACzB,gBAAgB,CAAC,CAAC,CAAC,CAoIrB"}
1
+ {"version":3,"file":"useSlideUp.d.ts","sourceRoot":"","sources":["../../src/hooks/useSlideUp.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAExE,wBAAgB,UAAU,CAAC,CAAC,SAAS,aAAa,GAAG,cAAc,EACjE,OAAO,GAAE,YAAiB,GACzB,gBAAgB,CAAC,CAAC,CAAC,CAoJrB"}
@@ -1,12 +1,27 @@
1
- import { useRef, useState, useEffect, useCallback } from 'react';
1
+ import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
2
2
  export function useSlideUp(options = {}) {
3
- const { delay = 0, duration = 700, threshold = 0.1, triggerOnce = true, easing = 'ease-out', autoStart = true, distance = 50, onComplete, onStart, onStop, onReset } = options;
3
+ const { delay = 0, duration = 700, threshold = 0.1, triggerOnce = true, easing = 'ease-out', autoStart = true, direction = 'up', distance = 50, onComplete, onStart, onStop, onReset } = options;
4
4
  const ref = useRef(null);
5
5
  const [isVisible, setIsVisible] = useState(false);
6
6
  const [isAnimating, setIsAnimating] = useState(false);
7
7
  const [progress, setProgress] = useState(0);
8
8
  const observerRef = useRef(null);
9
9
  const timeoutRef = useRef(null);
10
+ // 방향에 따른 초기 위치 계산
11
+ const getInitialTransform = useCallback(() => {
12
+ switch (direction) {
13
+ case 'up':
14
+ return `translateY(${distance}px)`;
15
+ case 'down':
16
+ return `translateY(-${distance}px)`;
17
+ case 'left':
18
+ return `translateX(${distance}px)`;
19
+ case 'right':
20
+ return `translateX(-${distance}px)`;
21
+ default:
22
+ return `translateY(${distance}px)`;
23
+ }
24
+ }, [direction, distance]);
10
25
  // 모션 시작 함수
11
26
  const start = useCallback(() => {
12
27
  if (isAnimating)
@@ -46,20 +61,6 @@ export function useSlideUp(options = {}) {
46
61
  setProgress(0);
47
62
  onReset?.();
48
63
  }, [stop, onReset]);
49
- // 모션 일시정지 함수
50
- const pause = useCallback(() => {
51
- if (timeoutRef.current) {
52
- clearTimeout(timeoutRef.current);
53
- timeoutRef.current = null;
54
- }
55
- setIsAnimating(false);
56
- }, []);
57
- // 모션 재개 함수
58
- const resume = useCallback(() => {
59
- if (!isVisible && !isAnimating) {
60
- start();
61
- }
62
- }, [isVisible, isAnimating, start]);
63
64
  // Intersection Observer 설정
64
65
  useEffect(() => {
65
66
  if (!ref.current || !autoStart)
@@ -81,20 +82,32 @@ export function useSlideUp(options = {}) {
81
82
  }
82
83
  };
83
84
  }, [autoStart, threshold, triggerOnce, start]);
85
+ // 자동 시작이 비활성화된 경우 수동 시작
86
+ useEffect(() => {
87
+ if (!autoStart) {
88
+ start();
89
+ }
90
+ }, [autoStart, start]);
84
91
  // 컴포넌트 언마운트 시 정리
85
92
  useEffect(() => {
86
93
  return () => {
87
- if (timeoutRef.current) {
88
- clearTimeout(timeoutRef.current);
89
- }
94
+ stop();
90
95
  };
91
- }, []);
92
- // 스타일 계산
93
- const style = {
94
- transform: `translateY(${isVisible ? 0 : distance}px)`,
95
- transition: `transform ${duration}ms ${easing}`,
96
- willChange: 'transform'
97
- };
96
+ }, [stop]);
97
+ // 초기 transform 값 메모이제이션
98
+ const initialTransform = useMemo(() => getInitialTransform(), [direction, distance]);
99
+ // 스타일 계산 (React 19 호환) - 메모이제이션으로 불필요한 리렌더링 방지
100
+ const style = useMemo(() => ({
101
+ opacity: isVisible ? 1 : 0,
102
+ transform: isVisible ? 'translateY(0)' : initialTransform,
103
+ transition: `opacity ${duration}ms ${easing}, transform ${duration}ms ${easing}`,
104
+ '--motion-delay': `${delay}ms`,
105
+ '--motion-duration': `${duration}ms`,
106
+ '--motion-easing': easing,
107
+ '--motion-progress': `${progress}`,
108
+ '--motion-direction': direction,
109
+ '--motion-distance': `${distance}px`
110
+ }), [isVisible, initialTransform, duration, easing, delay, progress, direction, distance]);
98
111
  return {
99
112
  ref,
100
113
  isVisible,
@@ -103,9 +116,7 @@ export function useSlideUp(options = {}) {
103
116
  progress,
104
117
  start,
105
118
  stop,
106
- reset,
107
- pause,
108
- resume
119
+ reset
109
120
  };
110
121
  }
111
122
  //# sourceMappingURL=useSlideUp.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useSlideUp.js","sourceRoot":"","sources":["../../src/hooks/useSlideUp.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useSlideUp.js","sourceRoot":"","sources":["../../src/hooks/useSlideUp.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,31 @@
1
+ type MotionType = 'fadeIn' | 'slideUp' | 'slideLeft' | 'slideRight' | 'scaleIn' | 'bounceIn';
2
+ type ElementType = 'hero' | 'title' | 'button' | 'card' | 'text' | 'image';
3
+ interface SmartMotionOptions {
4
+ type?: ElementType;
5
+ entrance?: MotionType;
6
+ hover?: boolean;
7
+ click?: boolean;
8
+ delay?: number;
9
+ duration?: number;
10
+ threshold?: number;
11
+ autoLanguageSync?: boolean;
12
+ }
13
+ /**
14
+ * 3단계 API: 개별 요소 모션
15
+ *
16
+ * 사용법:
17
+ * ```typescript
18
+ * const heroRef = useSmartMotion({ type: 'hero' })
19
+ * const titleRef = useSmartMotion({ type: 'title' })
20
+ * const buttonRef = useSmartMotion({ type: 'button' })
21
+ * ```
22
+ */
23
+ export declare function useSmartMotion<T extends HTMLElement = HTMLDivElement>(options?: SmartMotionOptions): {
24
+ ref: React.RefObject<T | null>;
25
+ style: React.CSSProperties;
26
+ isVisible: boolean;
27
+ isHovered: boolean;
28
+ isClicked: boolean;
29
+ };
30
+ export {};
31
+ //# sourceMappingURL=useSmartMotion.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useSmartMotion.d.ts","sourceRoot":"","sources":["../../src/hooks/useSmartMotion.ts"],"names":[],"mappings":"AAEA,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,YAAY,GAAG,SAAS,GAAG,UAAU,CAAA;AAC5F,KAAK,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;AAE1E,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,QAAQ,CAAC,EAAE,UAAU,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAYD;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EAAE,OAAO,GAAE,kBAAuB,GAAG;IACxG,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAC/B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;CACpB,CAkSA"}