@hua-labs/motion-core 2.3.0 → 2.4.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.
package/dist/index.d.mts CHANGED
@@ -1,494 +1,9 @@
1
+ import { P as PageType, a as PageMotionRef, b as PageMotionsConfig, B as BaseMotionOptions, E as EntranceType, M as MotionElement, c as BaseMotionReturn, F as FadeInOptions, d as EntranceMotionReturn, S as SlideOptions, e as ScaleOptions, f as BounceOptions, g as PulseOptions, h as SpringOptions, G as GradientOptions, H as HoverMotionOptions, i as ScrollRevealOptions, R as RepeatOptions, T as ToggleMotionOptions, I as InteractionReturn, j as InViewOptions, k as InViewReturn, l as MouseOptions, m as MouseReturn, n as ReducedMotionReturn, W as WindowSizeOptions, o as WindowSizeReturn, p as ScrollRevealMotionType } from './springPhysics-BZVRi9PQ.mjs';
2
+ export { A as AutoMotionReturn, q as BuiltInProfileName, D as DeepPartial, r as EasingFunction, s as EasingType, t as GestureConfig, u as GestureOptions, v as MOTION_PRESETS, w as MotionCallback, x as MotionConfig, y as MotionDirection, z as MotionEasing, C as MotionEngine, J as MotionFrame, K as MotionInstance, L as MotionOptions, N as MotionPreset, O as MotionProfile, Q as MotionProfileBase, U as MotionProfileEntrance, V as MotionProfileInteraction, X as MotionProfileProvider, Y as MotionProfileProviderProps, Z as MotionProfileSpring, _ as MotionProfileStagger, $ as MotionProgressCallback, a0 as MotionState, a1 as MotionStateCallback, a2 as MotionTrigger, a3 as MotionType, a4 as ObserverReturn, a5 as OrchestrationConfig, a6 as PAGE_MOTIONS, a7 as PageMotionElement, a8 as PerformanceMetrics, a9 as PresetConfig, aa as ReducedMotionStrategy, ab as SequenceOrchestrationConfig, ac as SpringConfig, ad as SpringPhysicsConfig, ae as SpringResult, af as StyleMotionReturn, ag as ToggleMotionReturn, ah as TransitionEffects, ai as TransitionOptions, aj as TransitionType, ak as applyEasing, al as calculateSpring, am as easeIn, an as easeInOut, ao as easeInOutQuad, ap as easeInQuad, aq as easeOut, ar as easeOutQuad, as as easingPresets, at as getAvailableEasings, au as getEasing, av as getMotionPreset, aw as getPagePreset, ax as getPresetEasing, ay as hua, az as isEasingFunction, aA as isValidEasing, aB as linear, aC as mergeProfileOverrides, aD as mergeWithPreset, aE as motionEngine, aF as neutral, aG as resolveProfile, aH as safeApplyEasing, aI as transitionEffects, aJ as useMotionProfile } from './springPhysics-BZVRi9PQ.mjs';
1
3
  import * as react from 'react';
2
4
  import react__default, { CSSProperties, RefObject } from 'react';
3
5
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
6
 
5
- /**
6
- * HUA Motion Core - 의존성 제로 모션 엔진
7
- *
8
- * 순수 JavaScript로 구현된 고성능 모션 엔진
9
- * GPU 가속, 레이어 분리, 성능 최적화 포함
10
- */
11
- interface MotionFrame {
12
- progress: number;
13
- properties: {
14
- opacity?: number;
15
- transform?: string;
16
- scale?: number;
17
- translateX?: number;
18
- translateY?: number;
19
- rotate?: number;
20
- rotateX?: number;
21
- rotateY?: number;
22
- rotateZ?: number;
23
- skewX?: number;
24
- skewY?: number;
25
- };
26
- }
27
- interface MotionOptions {
28
- duration: number;
29
- easing: (t: number) => number;
30
- delay?: number;
31
- direction?: 'forward' | 'reverse' | 'alternate';
32
- iterations?: number;
33
- fill?: 'none' | 'forwards' | 'backwards' | 'both';
34
- onStart?: () => void;
35
- onUpdate?: (progress: number) => void;
36
- onComplete?: () => void;
37
- onCancel?: () => void;
38
- }
39
- interface Motion$1 {
40
- id: string;
41
- element: HTMLElement;
42
- isRunning: boolean;
43
- isPaused: boolean;
44
- currentProgress: number;
45
- startTime: number;
46
- pauseTime: number;
47
- options: MotionOptions;
48
- }
49
- declare class MotionEngine {
50
- private motions;
51
- private isRunning;
52
- private animationFrameId;
53
- /**
54
- * 모션 시작
55
- */
56
- motion(element: HTMLElement, motionFrames: MotionFrame[], options: MotionOptions): Promise<string>;
57
- /**
58
- * 모션 중지
59
- */
60
- stop(motionId: string): void;
61
- /**
62
- * 모션 일시정지
63
- */
64
- pause(motionId: string): void;
65
- /**
66
- * 모션 재개
67
- */
68
- resume(motionId: string): void;
69
- /**
70
- * 모든 모션 중지
71
- */
72
- stopAll(): void;
73
- /**
74
- * 모션 상태 확인
75
- */
76
- getMotion(motionId: string): Motion$1 | undefined;
77
- /**
78
- * 실행 중인 모션 수
79
- */
80
- getActiveMotionCount(): number;
81
- /**
82
- * 애니메이션 루프 시작
83
- */
84
- private startAnimationLoop;
85
- /**
86
- * 애니메이션 루프 중지
87
- */
88
- private stopAnimationLoop;
89
- /**
90
- * 메인 애니메이션 루프
91
- */
92
- private animate;
93
- /**
94
- * 모션 프레임 적용
95
- */
96
- private applyMotionFrame;
97
- /**
98
- * GPU 가속 활성화
99
- */
100
- private enableGPUAcceleration;
101
- /**
102
- * 레이어 분리
103
- */
104
- private createLayer;
105
- /**
106
- * 고유 모션 ID 생성
107
- */
108
- private generateMotionId;
109
- /**
110
- * 정리
111
- */
112
- destroy(): void;
113
- }
114
- declare const motionEngine: MotionEngine;
115
-
116
- /**
117
- * HUA Motion Core - 전환 효과 시스템
118
- *
119
- * CSS Motion API를 활용한 고성능 전환 효과들
120
- * GPU 가속 및 레이어 분리 최적화 포함
121
- */
122
-
123
- type TransitionType = 'fade' | 'slide' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'scale' | 'flip' | 'morph' | 'cube' | 'zoom';
124
- interface TransitionOptions extends Omit<MotionOptions, 'easing'> {
125
- type: TransitionType;
126
- easing?: (t: number) => number;
127
- distance?: number;
128
- scale?: number;
129
- perspective?: number;
130
- onTransitionStart?: () => void;
131
- onTransitionComplete?: () => void;
132
- }
133
- declare class TransitionEffects {
134
- private static instance;
135
- private activeTransitions;
136
- static getInstance(): TransitionEffects;
137
- /**
138
- * 공통 전환 실행 헬퍼
139
- */
140
- private executeTransition;
141
- /**
142
- * 페이드 인/아웃 전환
143
- */
144
- fade(element: HTMLElement, options: Omit<TransitionOptions, 'type'>): Promise<void>;
145
- /**
146
- * 슬라이드 전환
147
- */
148
- slide(element: HTMLElement, options: Omit<TransitionOptions, 'type'>): Promise<void>;
149
- /**
150
- * 스케일 전환
151
- */
152
- scale(element: HTMLElement, options: Omit<TransitionOptions, 'type'>): Promise<void>;
153
- /**
154
- * 플립 전환 (3D 회전)
155
- */
156
- flip(element: HTMLElement, options: Omit<TransitionOptions, 'type'>): Promise<void>;
157
- /**
158
- * 큐브 전환 (3D 큐브 회전)
159
- */
160
- cube(element: HTMLElement, options: Omit<TransitionOptions, 'type'>): Promise<void>;
161
- /**
162
- * 모프 전환 (복합 변형)
163
- */
164
- morph(element: HTMLElement, options: Omit<TransitionOptions, 'type'>): Promise<void>;
165
- /**
166
- * 전환 중지
167
- */
168
- stopTransition(transitionId: string): void;
169
- /**
170
- * 모든 전환 중지
171
- */
172
- stopAllTransitions(): void;
173
- /**
174
- * 활성 전환 수 확인
175
- */
176
- getActiveTransitionCount(): number;
177
- /**
178
- * GPU 가속 활성화
179
- */
180
- private enableGPUAcceleration;
181
- /**
182
- * 기본 이징 함수
183
- */
184
- private getDefaultEasing;
185
- /**
186
- * 고유 전환 ID 생성
187
- */
188
- private generateTransitionId;
189
- /**
190
- * 정리
191
- */
192
- destroy(): void;
193
- }
194
- declare const transitionEffects: TransitionEffects;
195
-
196
- type MotionElement = HTMLDivElement | HTMLSpanElement | HTMLButtonElement | HTMLHeadingElement | HTMLParagraphElement | HTMLImageElement;
197
- type MotionStyle = CSSProperties & {
198
- '--motion-delay'?: string;
199
- '--motion-duration'?: string;
200
- '--motion-easing'?: string;
201
- '--motion-progress'?: string;
202
- };
203
- interface BaseMotionOptions {
204
- /** 모션 시작 지연 시간 (ms) */
205
- delay?: number;
206
- /** 모션 지속 시간 (ms) */
207
- duration?: number;
208
- /** Intersection Observer 임계값 (0-1) */
209
- threshold?: number;
210
- /** 한 번만 트리거할지 여부 */
211
- triggerOnce?: boolean;
212
- /** 이징 함수명 */
213
- easing?: string;
214
- /** 자동 시작 여부 */
215
- autoStart?: boolean;
216
- /** 모션 완료 시 콜백 */
217
- onComplete?: () => void;
218
- /** 모션 시작 시 콜백 */
219
- onStart?: () => void;
220
- /** 모션 중단 시 콜백 */
221
- onStop?: () => void;
222
- /** 모션 리셋 시 콜백 */
223
- onReset?: () => void;
224
- }
225
- interface BaseMotionReturn<T extends MotionElement = HTMLDivElement> {
226
- /** DOM 요소 참조 (React 19 호환) */
227
- ref: React.RefObject<T | null>;
228
- /** 요소가 화면에 보이는지 여부 */
229
- isVisible: boolean;
230
- /** 모션이 진행 중인지 여부 */
231
- isAnimating: boolean;
232
- /** 적용할 CSS 스타일 (React 19 호환) - useFadeIn 등에서는 항상 반환됨 */
233
- style: MotionStyle;
234
- /** 적용할 CSS 클래스명 */
235
- className?: string;
236
- /** 모션 진행률 (0-1) - useFadeIn 등에서는 항상 반환됨 */
237
- progress: number;
238
- /** 모션 시작 함수 - useFadeIn 등에서는 항상 반환됨 */
239
- start: () => void;
240
- /** 모션 리셋 함수 - useFadeIn 등에서는 항상 반환됨 */
241
- reset: () => void;
242
- /** 모션 중단 함수 - useFadeIn 등에서는 항상 반환됨 */
243
- stop: () => void;
244
- /** 모션 일시정지 함수 - 일부 훅에서만 제공 */
245
- pause?: () => void;
246
- /** 모션 재개 함수 - 일부 훅에서만 제공 */
247
- resume?: () => void;
248
- }
249
- interface InteractionReturn<T extends MotionElement = HTMLDivElement> extends BaseMotionReturn<T> {
250
- /** 가시성 토글 함수 */
251
- toggle?: () => void;
252
- /** 표시 함수 */
253
- show?: () => void;
254
- /** 숨김 함수 */
255
- hide?: () => void;
256
- }
257
- interface FadeInOptions extends BaseMotionOptions {
258
- /** 초기 투명도 */
259
- initialOpacity?: number;
260
- /** 목표 투명도 */
261
- targetOpacity?: number;
262
- }
263
- interface SlideOptions extends BaseMotionOptions {
264
- /** 슬라이드 방향 */
265
- direction?: 'up' | 'down' | 'left' | 'right';
266
- /** 슬라이드 거리 (px) */
267
- distance?: number;
268
- }
269
- interface ScaleOptions extends BaseMotionOptions {
270
- /** 초기 스케일 */
271
- initialScale?: number;
272
- /** 목표 스케일 */
273
- targetScale?: number;
274
- }
275
- interface BounceOptions extends BaseMotionOptions {
276
- /** 바운스 강도 */
277
- intensity?: number;
278
- /** 바운스 횟수 */
279
- bounces?: number;
280
- }
281
- interface PulseOptions extends BaseMotionOptions {
282
- /** 펄스 강도 */
283
- intensity?: number;
284
- /** 반복 횟수 (-1 = 무한) */
285
- repeatCount?: number;
286
- /** 반복 간격 (ms) */
287
- repeatDelay?: number;
288
- }
289
- interface SpringOptions extends BaseMotionOptions {
290
- /** 스프링 질량 */
291
- mass?: number;
292
- /** 스프링 강성 */
293
- stiffness?: number;
294
- /** 스프링 감쇠 */
295
- damping?: number;
296
- /** 정지 임계값 */
297
- restDelta?: number;
298
- /** 정지 속도 */
299
- restSpeed?: number;
300
- }
301
- interface GestureOptions$1 extends BaseMotionOptions {
302
- /** 호버 제스처 활성화 */
303
- hover?: boolean;
304
- /** 드래그 제스처 활성화 */
305
- drag?: boolean;
306
- /** 핀치 제스처 활성화 */
307
- pinch?: boolean;
308
- /** 스와이프 제스처 활성화 */
309
- swipe?: boolean;
310
- /** 틸트 제스처 활성화 */
311
- tilt?: boolean;
312
- }
313
- type MotionDirection$1 = 'up' | 'down' | 'left' | 'right';
314
- type MotionEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'bounce' | 'elastic';
315
- type MotionTrigger = 'scroll' | 'click' | 'hover' | 'focus' | 'auto';
316
- type MotionCallback = () => void;
317
- type MotionProgressCallback = (progress: number) => void;
318
- type MotionStateCallback<T extends MotionElement = HTMLDivElement> = (state: BaseMotionReturn<T>) => void;
319
- interface PerformanceMetrics {
320
- /** 모션 시작 시간 */
321
- startTime: number;
322
- /** 모션 종료 시간 */
323
- endTime?: number;
324
- /** 총 지속 시간 */
325
- duration: number;
326
- /** FPS */
327
- fps: number;
328
- /** 메모리 사용량 */
329
- memoryUsage?: number;
330
- }
331
- interface MotionConfig {
332
- /** 성능 모니터링 활성화 */
333
- enablePerformanceMonitoring?: boolean;
334
- /** 디버그 모드 활성화 */
335
- debug?: boolean;
336
- /** 로그 레벨 */
337
- logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
338
- }
339
- interface InViewOptions {
340
- /** Intersection Observer 임계값 */
341
- threshold?: number | number[];
342
- /** 루트 마진 */
343
- rootMargin?: string;
344
- /** 한 번만 트리거할지 여부 */
345
- triggerOnce?: boolean;
346
- /** 초기 가시성 상태 */
347
- initialInView?: boolean;
348
- }
349
- interface InViewReturn<T extends HTMLElement = HTMLDivElement> {
350
- /** DOM 요소 참조 */
351
- ref: RefObject<T | null>;
352
- /** 요소가 화면에 보이는지 여부 */
353
- inView: boolean;
354
- /** IntersectionObserver 엔트리 */
355
- entry: IntersectionObserverEntry | null;
356
- }
357
- interface MouseOptions {
358
- /** 타겟 요소 참조 */
359
- targetRef?: RefObject<HTMLElement | null>;
360
- /** 스로틀 시간 (ms) */
361
- throttle?: number;
362
- }
363
- interface MouseReturn {
364
- /** 마우스 X 좌표 (viewport 기준) */
365
- x: number;
366
- /** 마우스 Y 좌표 (viewport 기준) */
367
- y: number;
368
- /** 요소 내 상대 X 좌표 (0-1) */
369
- elementX: number;
370
- /** 요소 내 상대 Y 좌표 (0-1) */
371
- elementY: number;
372
- /** 마우스가 타겟 위에 있는지 여부 */
373
- isOver: boolean;
374
- }
375
- interface ReducedMotionReturn {
376
- /** 사용자가 모션 감소를 선호하는지 여부 */
377
- prefersReducedMotion: boolean;
378
- }
379
- interface WindowSizeOptions {
380
- /** 디바운스 시간 (ms) */
381
- debounce?: number;
382
- /** 초기 너비 */
383
- initialWidth?: number;
384
- /** 초기 높이 */
385
- initialHeight?: number;
386
- }
387
- interface WindowSizeReturn {
388
- /** 윈도우 너비 */
389
- width: number;
390
- /** 윈도우 높이 */
391
- height: number;
392
- /** 마운트 여부 (SSR 대응) */
393
- isMounted: boolean;
394
- }
395
- type ScrollRevealMotionType = 'fadeIn' | 'slideUp' | 'slideLeft' | 'slideRight' | 'scaleIn' | 'bounceIn';
396
- interface ScrollRevealOptions extends BaseMotionOptions {
397
- /** 루트 마진 */
398
- rootMargin?: string;
399
- /** 모션 타입 */
400
- motionType?: ScrollRevealMotionType;
401
- }
402
- interface GradientOptions extends BaseMotionOptions {
403
- /** 그라디언트 색상 배열 */
404
- colors?: string[];
405
- /** 그라디언트 방향 */
406
- direction?: 'horizontal' | 'vertical' | 'diagonal';
407
- /** 그라디언트 크기 (%) */
408
- size?: number;
409
- }
410
- interface ToggleMotionOptions extends BaseMotionOptions {
411
- }
412
- interface RepeatOptions extends BaseMotionOptions {
413
- /** 반복 효과 타입 */
414
- type?: 'pulse' | 'bounce' | 'wave' | 'fade';
415
- /** 효과 강도 */
416
- intensity?: number;
417
- }
418
- interface HoverMotionOptions extends BaseMotionOptions {
419
- /** 호버 시 스케일 */
420
- hoverScale?: number;
421
- /** 호버 시 Y 오프셋 (px) */
422
- hoverY?: number;
423
- /** 호버 시 투명도 */
424
- hoverOpacity?: number;
425
- }
426
-
427
- type PageType = 'home' | 'dashboard' | 'product' | 'blog';
428
- type MotionType$1 = 'hero' | 'title' | 'button' | 'card' | 'text' | 'image';
429
- type EntranceType = 'fadeIn' | 'slideUp' | 'slideLeft' | 'slideRight' | 'scaleIn' | 'bounceIn';
430
- interface PageMotionElement {
431
- type: MotionType$1;
432
- entrance?: EntranceType;
433
- hover?: boolean;
434
- click?: boolean;
435
- delay?: number;
436
- duration?: number;
437
- threshold?: number;
438
- }
439
- interface PageMotionsConfig {
440
- [elementId: string]: PageMotionElement;
441
- }
442
- interface MotionState$1 {
443
- internalVisibility: boolean;
444
- triggeredVisibility: boolean;
445
- finalVisibility: boolean;
446
- opacity: number;
447
- translateY: number;
448
- translateX: number;
449
- scale: number;
450
- rotation: number;
451
- isHovered: boolean;
452
- isClicked: boolean;
453
- isAnimating: boolean;
454
- }
455
- interface PageMotionRef<T extends HTMLElement = HTMLElement> {
456
- ref: React.RefObject<T | null>;
457
- style: React.CSSProperties;
458
- isVisible: boolean;
459
- isHovered: boolean;
460
- isClicked: boolean;
461
- }
462
- interface MotionPreset {
463
- entrance: EntranceType;
464
- delay: number;
465
- duration: number;
466
- hover: boolean;
467
- click: boolean;
468
- }
469
- interface PresetConfig {
470
- [key: string]: MotionPreset;
471
- }
472
- interface SpringConfig$1 {
473
- mass?: number;
474
- stiffness?: number;
475
- damping?: number;
476
- restDelta?: number;
477
- restSpeed?: number;
478
- }
479
- interface GestureConfig {
480
- hover?: boolean;
481
- drag?: boolean;
482
- pinch?: boolean;
483
- swipe?: boolean;
484
- tilt?: boolean;
485
- }
486
- interface OrchestrationConfig {
487
- sequence?: 'sequential' | 'parallel' | 'stagger';
488
- staggerDelay?: number;
489
- staggerDuration?: number;
490
- }
491
-
492
7
  /**
493
8
  * 1단계 API: 프리셋 기반 페이지 모션 (기존 방식)
494
9
  *
@@ -584,9 +99,9 @@ interface UseUnifiedMotionOptions extends Omit<BaseMotionOptions, 'autoStart'> {
584
99
  }
585
100
  declare function useUnifiedMotion<T extends MotionElement = HTMLDivElement>(options: UseUnifiedMotionOptions): BaseMotionReturn<T>;
586
101
 
587
- declare function useFadeIn<T extends MotionElement = HTMLDivElement>(options?: FadeInOptions): BaseMotionReturn<T>;
102
+ declare function useFadeIn<T extends MotionElement = HTMLDivElement>(options?: FadeInOptions): EntranceMotionReturn<T>;
588
103
 
589
- declare function useSlideUp<T extends MotionElement = HTMLDivElement>(options?: SlideOptions): BaseMotionReturn<T>;
104
+ declare function useSlideUp<T extends MotionElement = HTMLDivElement>(options?: SlideOptions): EntranceMotionReturn<T>;
590
105
 
591
106
  /**
592
107
  * useSlideLeft - 오른쪽에서 왼쪽으로 슬라이드하며 나타나는 애니메이션 훅
@@ -605,7 +120,7 @@ declare function useSlideUp<T extends MotionElement = HTMLDivElement>(options?:
605
120
  * );
606
121
  * ```
607
122
  */
608
- declare function useSlideLeft<T extends MotionElement = HTMLDivElement>(options?: Omit<SlideOptions, 'direction'>): BaseMotionReturn<T>;
123
+ declare function useSlideLeft<T extends MotionElement = HTMLDivElement>(options?: Omit<SlideOptions, "direction">): EntranceMotionReturn<T>;
609
124
 
610
125
  /**
611
126
  * useSlideRight - 왼쪽에서 오른쪽으로 슬라이드하며 나타나는 애니메이션 훅
@@ -624,11 +139,11 @@ declare function useSlideLeft<T extends MotionElement = HTMLDivElement>(options?
624
139
  * );
625
140
  * ```
626
141
  */
627
- declare function useSlideRight<T extends MotionElement = HTMLDivElement>(options?: Omit<SlideOptions, 'direction'>): BaseMotionReturn<T>;
142
+ declare function useSlideRight<T extends MotionElement = HTMLDivElement>(options?: Omit<SlideOptions, "direction">): EntranceMotionReturn<T>;
628
143
 
629
- declare function useScaleIn<T extends MotionElement = HTMLDivElement>(options?: ScaleOptions): BaseMotionReturn<T>;
144
+ declare function useScaleIn<T extends MotionElement = HTMLDivElement>(options?: ScaleOptions): EntranceMotionReturn<T>;
630
145
 
631
- declare function useBounceIn<T extends MotionElement = HTMLDivElement>(options?: BounceOptions): BaseMotionReturn<T>;
146
+ declare function useBounceIn<T extends MotionElement = HTMLDivElement>(options?: BounceOptions): EntranceMotionReturn<T>;
632
147
 
633
148
  declare function usePulse<T extends MotionElement = HTMLDivElement>(options?: PulseOptions): BaseMotionReturn<T>;
634
149
 
@@ -772,7 +287,7 @@ declare function useToggleMotion<T extends MotionElement = HTMLDivElement>(optio
772
287
  * );
773
288
  * ```
774
289
  */
775
- declare function useSlideDown<T extends MotionElement = HTMLDivElement>(options?: Omit<SlideOptions, 'direction'>): BaseMotionReturn<T>;
290
+ declare function useSlideDown<T extends MotionElement = HTMLDivElement>(options?: Omit<SlideOptions, "direction">): EntranceMotionReturn<T>;
776
291
 
777
292
  /**
778
293
  * useInView - 요소의 뷰포트 가시성 감지 훅
@@ -833,9 +348,11 @@ declare function useMouse(options?: MouseOptions): MouseReturn;
833
348
  * Detects user's prefers-reduced-motion setting.
834
349
  * Used to reduce or disable motion for accessibility.
835
350
  *
351
+ * @returns {boolean} 모션 감소 선호 여부 / Whether reduced motion is preferred
352
+ *
836
353
  * @example
837
354
  * ```tsx
838
- * const { prefersReducedMotion } = useReducedMotion()
355
+ * const prefersReducedMotion = useReducedMotion()
839
356
  *
840
357
  * return (
841
358
  * <motion.div
@@ -847,7 +364,19 @@ declare function useMouse(options?: MouseOptions): MouseReturn;
847
364
  * )
848
365
  * ```
849
366
  */
850
- declare function useReducedMotion(): ReducedMotionReturn;
367
+ declare function useReducedMotion(): boolean;
368
+ /**
369
+ * useReducedMotionObject - 객체 형태 반환 (backwards compat)
370
+ * Returns `{ prefersReducedMotion: boolean }` for backwards compatibility.
371
+ *
372
+ * @deprecated Use `useReducedMotion()` which returns `boolean` directly.
373
+ *
374
+ * @example
375
+ * ```tsx
376
+ * const { prefersReducedMotion } = useReducedMotionObject()
377
+ * ```
378
+ */
379
+ declare function useReducedMotionObject(): ReducedMotionReturn;
851
380
 
852
381
  /**
853
382
  * useWindowSize - 윈도우 크기 추적 훅
@@ -1318,150 +847,6 @@ interface ElementProgressReturn<T extends HTMLElement = HTMLElement> {
1318
847
  */
1319
848
  declare function useElementProgress<T extends HTMLElement = HTMLElement>(options?: ElementProgressOptions): ElementProgressReturn<T>;
1320
849
 
1321
- declare const MOTION_PRESETS: PresetConfig;
1322
- declare const PAGE_MOTIONS: Record<PageType, PageMotionsConfig>;
1323
- /**
1324
- * 프리셋과 커스텀 설정을 병합
1325
- */
1326
- declare function mergeWithPreset(preset: MotionPreset, custom?: Partial<MotionPreset>): MotionPreset;
1327
- /**
1328
- * 페이지 타입으로 프리셋 가져오기
1329
- */
1330
- declare function getPagePreset(pageType: PageType): PageMotionsConfig;
1331
- /**
1332
- * 모션 타입으로 기본 프리셋 가져오기
1333
- */
1334
- declare function getMotionPreset(type: string): MotionPreset;
1335
-
1336
- /** 프로필 전체의 기본 모션 디폴트 */
1337
- interface MotionProfileBase {
1338
- /** 기본 duration (ms) */
1339
- duration: number;
1340
- /** 기본 easing (CSS 또는 named preset) */
1341
- easing: string;
1342
- /** IntersectionObserver 임계값 */
1343
- threshold: number;
1344
- /** 한 번만 트리거할지 여부 */
1345
- triggerOnce: boolean;
1346
- }
1347
- /** 입장 애니메이션 디폴트 */
1348
- interface MotionProfileEntrance {
1349
- slide: {
1350
- /** 슬라이드 거리 (px) */
1351
- distance: number;
1352
- /** 슬라이드 전용 이징 */
1353
- easing: string;
1354
- };
1355
- fade: {
1356
- /** 초기 투명도 */
1357
- initialOpacity: number;
1358
- };
1359
- scale: {
1360
- /** 초기 스케일 (useScrollReveal/useStagger용, 0.95 등 미세 변화) */
1361
- from: number;
1362
- };
1363
- bounce: {
1364
- /** 바운스 강도 */
1365
- intensity: number;
1366
- /** 바운스 전용 이징 */
1367
- easing: string;
1368
- };
1369
- }
1370
- /** 스태거 디폴트 */
1371
- interface MotionProfileStagger {
1372
- /** 아이템 간 딜레이 (ms) */
1373
- perItem: number;
1374
- /** 첫 아이템 전 딜레이 (ms) */
1375
- baseDelay: number;
1376
- }
1377
- /** 인터랙션 디폴트 */
1378
- interface MotionProfileInteraction {
1379
- hover: {
1380
- /** 호버 시 스케일 */
1381
- scale: number;
1382
- /** 호버 시 Y 오프셋 (px) */
1383
- y: number;
1384
- /** 호버 duration (ms) */
1385
- duration: number;
1386
- /** 호버 이징 */
1387
- easing: string;
1388
- };
1389
- }
1390
- /** 스프링 물리 디폴트 */
1391
- interface MotionProfileSpring {
1392
- /** 질량 */
1393
- mass: number;
1394
- /** 강성 */
1395
- stiffness: number;
1396
- /** 감쇠 */
1397
- damping: number;
1398
- /** 정지 임계값 */
1399
- restDelta: number;
1400
- /** 정지 속도 */
1401
- restSpeed: number;
1402
- }
1403
- /** reduced motion 전략 */
1404
- type ReducedMotionStrategy = 'skip' | 'fade-only' | 'minimal';
1405
- /** 전체 Motion Profile */
1406
- interface MotionProfile {
1407
- /** 프로필 이름 */
1408
- name: string;
1409
- /** 공통 디폴트 */
1410
- base: MotionProfileBase;
1411
- /** 입장 애니메이션 */
1412
- entrance: MotionProfileEntrance;
1413
- /** 스태거 */
1414
- stagger: MotionProfileStagger;
1415
- /** 인터랙션 */
1416
- interaction: MotionProfileInteraction;
1417
- /** 스프링 물리 */
1418
- spring: MotionProfileSpring;
1419
- /** reduced motion 전략 */
1420
- reducedMotion: ReducedMotionStrategy;
1421
- }
1422
- /** 내장 프로필 이름 */
1423
- type BuiltInProfileName = 'neutral' | 'hua';
1424
- /** DeepPartial 유틸리티 */
1425
- type DeepPartial<T> = {
1426
- [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
1427
- };
1428
-
1429
- /**
1430
- * neutral 프로필 — 기존 하드코딩 디폴트와 동일.
1431
- * Provider 없을 때 fallback으로 사용되므로 하위 호환 100% 보장.
1432
- */
1433
- declare const neutral: MotionProfile;
1434
-
1435
- /**
1436
- * HUA 프로필 — 스르륵 쫀뜩한 브랜드 시그니처.
1437
- *
1438
- * 특징:
1439
- * - CSS ease-out 기반이되 끝에 미세한 오버슈트 (1.04~1.06)
1440
- * - 도착점을 살짝 지나쳤다가 돌아오는 탄성
1441
- * - 바운스 없이 쫀뜩 (높은 감쇠 + 높은 강성)
1442
- * - neutral보다 짧은 duration, 좁은 distance → 더 정교한 느낌
1443
- */
1444
- declare const hua: MotionProfile;
1445
-
1446
- interface MotionProfileProviderProps {
1447
- /** 내장 프로필 이름 또는 커스텀 프로필 객체 */
1448
- profile?: BuiltInProfileName | MotionProfile;
1449
- /** 선택한 프로필 위에 부분 오버라이드 */
1450
- overrides?: DeepPartial<MotionProfile>;
1451
- children: React.ReactNode;
1452
- }
1453
- declare function MotionProfileProvider({ profile, overrides, children, }: MotionProfileProviderProps): react.FunctionComponentElement<react.ProviderProps<MotionProfile>>;
1454
- /**
1455
- * 현재 프로필을 가져옴.
1456
- * Provider 밖에서 호출 시 neutral 프로필 반환 (하위 호환).
1457
- */
1458
- declare function useMotionProfile(): MotionProfile;
1459
-
1460
- /** 이름 또는 객체에서 프로필 resolve */
1461
- declare function resolveProfile(profile: BuiltInProfileName | MotionProfile): MotionProfile;
1462
- /** 프로필에 오버라이드를 깊은 병합 */
1463
- declare function mergeProfileOverrides(base: MotionProfile, overrides: DeepPartial<MotionProfile>): MotionProfile;
1464
-
1465
850
  /**
1466
851
  * Shared IntersectionObserver Pool
1467
852
  *
@@ -1499,57 +884,522 @@ declare function observeElement(element: Element, callback: EntryCallback, optio
1499
884
  rootMargin?: string;
1500
885
  }, once?: boolean): () => void;
1501
886
 
1502
- type EasingFunction = (t: number) => number;
1503
- declare const linear: EasingFunction;
1504
- declare const easeIn: EasingFunction;
1505
- declare const easeOut: EasingFunction;
1506
- declare const easeInOut: EasingFunction;
1507
- declare const easeInQuad: EasingFunction;
1508
- declare const easeOutQuad: EasingFunction;
1509
- declare const easeInOutQuad: EasingFunction;
1510
- type EasingType = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' | 'easeInQuart' | 'easeOutQuart' | 'easeInOutQuart' | 'easeInQuint' | 'easeOutQuint' | 'easeInOutQuint' | 'easeInSine' | 'easeOutSine' | 'easeInOutSine' | 'easeInExpo' | 'easeOutExpo' | 'easeInOutExpo' | 'easeInCirc' | 'easeOutCirc' | 'easeInOutCirc' | 'easeInBounce' | 'easeOutBounce' | 'easeInOutBounce' | 'easeInBack' | 'easeOutBack' | 'easeInOutBack' | 'easeInElastic' | 'easeOutElastic' | 'easeInOutElastic' | 'pulse' | 'pulseSmooth' | 'skeletonWave' | 'blink';
1511
- declare function isValidEasing(easingName: string): boolean;
1512
- declare function getEasing(easingName: unknown): EasingFunction;
1513
- declare function applyEasing(t: number, easingName: string | EasingFunction): number;
1514
- declare function safeApplyEasing(t: number, easingName: unknown): number;
1515
- declare function getAvailableEasings(): string[];
1516
- declare function isEasingFunction(value: any): value is EasingFunction;
1517
- declare const easingPresets: {
1518
- readonly default: "easeOut";
1519
- readonly smooth: "easeInOutCubic";
1520
- readonly fast: "easeOutQuad";
1521
- readonly slow: "easeInOutSine";
1522
- readonly bouncy: "easeOutBounce";
1523
- readonly elastic: "easeOutElastic";
1524
- readonly fade: "easeInOut";
1525
- readonly scale: "easeOutBack";
887
+ interface AutoFadeConfig {
888
+ initialOpacity?: number;
889
+ targetOpacity?: number;
890
+ duration?: number;
891
+ delay?: number;
892
+ repeat?: boolean;
893
+ repeatDelay?: number;
894
+ repeatCount?: number;
895
+ ease?: "linear" | "ease-in" | "ease-out" | "ease-in-out";
896
+ autoStart?: boolean;
897
+ onComplete?: () => void;
898
+ onRepeat?: (count: number) => void;
899
+ showOnMount?: boolean;
900
+ }
901
+ interface AutoFadeReturn {
902
+ opacity: number;
903
+ isAnimating: boolean;
904
+ isVisible: boolean;
905
+ mounted: boolean;
906
+ start: () => void;
907
+ stop: () => void;
908
+ reset: () => void;
909
+ fadeIn: () => void;
910
+ fadeOut: () => void;
911
+ toggle: () => void;
912
+ }
913
+ declare function useAutoFade(options?: AutoFadeConfig): AutoFadeReturn;
914
+
915
+ interface AutoPlayConfig {
916
+ interval?: number;
917
+ delay?: number;
918
+ repeat?: number | "infinite";
919
+ autoStart?: boolean;
920
+ pauseOnHover?: boolean;
921
+ pauseOnBlur?: boolean;
922
+ showOnMount?: boolean;
923
+ }
924
+ declare function useAutoPlay(options?: AutoPlayConfig): {
925
+ isPlaying: boolean;
926
+ isPaused: boolean;
927
+ currentStep: number;
928
+ mounted: boolean;
929
+ start: () => void;
930
+ stop: () => void;
931
+ pause: () => void;
932
+ resume: () => void;
933
+ next: () => void;
934
+ previous: () => void;
935
+ goTo: (step: number) => void;
936
+ };
937
+
938
+ interface AutoScaleConfig {
939
+ initialScale?: number;
940
+ targetScale?: number;
941
+ duration?: number;
942
+ delay?: number;
943
+ repeat?: boolean;
944
+ repeatDelay?: number;
945
+ repeatCount?: number;
946
+ ease?: "linear" | "ease-in" | "ease-out" | "ease-in-out" | "bounce" | "elastic";
947
+ autoStart?: boolean;
948
+ onComplete?: () => void;
949
+ onRepeat?: (count: number) => void;
950
+ showOnMount?: boolean;
951
+ centerTransform?: boolean;
952
+ }
953
+ interface AutoScaleReturn {
954
+ scale: number;
955
+ isAnimating: boolean;
956
+ isVisible: boolean;
957
+ mounted: boolean;
958
+ start: () => void;
959
+ stop: () => void;
960
+ reset: () => void;
961
+ scaleIn: () => void;
962
+ scaleOut: () => void;
963
+ toggle: () => void;
964
+ }
965
+ declare function useAutoScale(options?: AutoScaleConfig): AutoScaleReturn;
966
+
967
+ type SlideDirection = "left" | "right" | "up" | "down" | "left-up" | "left-down" | "right-up" | "right-down";
968
+ interface AutoSlideConfig {
969
+ direction?: SlideDirection;
970
+ distance?: number;
971
+ initialPosition?: {
972
+ x: number;
973
+ y: number;
974
+ };
975
+ targetPosition?: {
976
+ x: number;
977
+ y: number;
978
+ };
979
+ duration?: number;
980
+ delay?: number;
981
+ repeat?: boolean;
982
+ repeatDelay?: number;
983
+ repeatCount?: number;
984
+ ease?: "linear" | "ease-in" | "ease-out" | "ease-in-out";
985
+ autoStart?: boolean;
986
+ onComplete?: () => void;
987
+ onRepeat?: (count: number) => void;
988
+ showOnMount?: boolean;
989
+ }
990
+ interface AutoSlideReturn {
991
+ position: {
992
+ x: number;
993
+ y: number;
994
+ };
995
+ isAnimating: boolean;
996
+ isVisible: boolean;
997
+ mounted: boolean;
998
+ start: () => void;
999
+ stop: () => void;
1000
+ reset: () => void;
1001
+ slideIn: () => void;
1002
+ slideOut: () => void;
1003
+ toggle: () => void;
1004
+ }
1005
+ declare function useAutoSlide(options?: AutoSlideConfig): AutoSlideReturn;
1006
+
1007
+ interface MotionStep$1 {
1008
+ id: string;
1009
+ motion: () => void;
1010
+ delay?: number;
1011
+ duration?: number;
1012
+ onComplete?: () => void;
1013
+ }
1014
+ interface MotionOrchestraOptions {
1015
+ mode?: "sequential" | "parallel" | "stagger";
1016
+ staggerDelay?: number;
1017
+ autoStart?: boolean;
1018
+ loop?: boolean;
1019
+ onComplete?: () => void;
1020
+ }
1021
+ declare function useMotionOrchestra(options?: MotionOrchestraOptions): {
1022
+ addMotion: (step: MotionStep$1) => void;
1023
+ removeMotion: (id: string) => void;
1024
+ play: () => void;
1025
+ stop: () => void;
1026
+ pause: () => void;
1027
+ resume: () => void;
1028
+ isPlaying: boolean;
1029
+ currentStep: number;
1030
+ completedSteps: Set<string>;
1031
+ totalSteps: number;
1032
+ };
1033
+
1034
+ interface MotionStep {
1035
+ id: string;
1036
+ duration: number;
1037
+ delay?: number;
1038
+ ease?: "linear" | "ease-in" | "ease-out" | "ease-in-out" | "bounce" | "elastic";
1039
+ onStart?: () => void;
1040
+ onUpdate?: (progress: number) => void;
1041
+ onComplete?: () => void;
1042
+ onError?: (error: Error) => void;
1043
+ }
1044
+ interface OrchestrationConfig {
1045
+ autoStart?: boolean;
1046
+ loop?: boolean;
1047
+ loopCount?: number;
1048
+ loopDelay?: number;
1049
+ timeline?: MotionStep[];
1050
+ duration?: number;
1051
+ speed?: number;
1052
+ reverse?: boolean;
1053
+ onStart?: () => void;
1054
+ onComplete?: () => void;
1055
+ onLoop?: (count: number) => void;
1056
+ onError?: (error: Error) => void;
1057
+ onProgress?: (progress: number) => void;
1058
+ onStepStart?: (stepId: string) => void;
1059
+ onStepComplete?: (stepId: string) => void;
1060
+ }
1061
+ interface OrchestrationReturn {
1062
+ isPlaying: boolean;
1063
+ isPaused: boolean;
1064
+ currentTime: number;
1065
+ progress: number;
1066
+ currentStep: string | null;
1067
+ loopCount: number;
1068
+ error: string | null;
1069
+ play: () => void;
1070
+ pause: () => void;
1071
+ stop: () => void;
1072
+ reset: () => void;
1073
+ seek: (time: number) => void;
1074
+ setSpeed: (speed: number) => void;
1075
+ reverse: () => void;
1076
+ addStep: (step: MotionStep) => void;
1077
+ removeStep: (stepId: string) => void;
1078
+ updateStep: (stepId: string, updates: Partial<MotionStep>) => void;
1079
+ reorderSteps: (stepIds: string[]) => void;
1080
+ getStepProgress: (stepId: string) => number;
1081
+ getStepTime: (stepId: string) => number;
1082
+ getTotalDuration: () => number;
1083
+ }
1084
+ declare function useOrchestration(options?: OrchestrationConfig): OrchestrationReturn;
1085
+
1086
+ /** The subset of BaseMotionReturn that useSequence actually consumes. */
1087
+ type SequenceMotionResult = Pick<BaseMotionReturn<MotionElement>, "start" | "stop" | "reset" | "ref"> & {
1088
+ pause?: () => void;
1089
+ resume?: () => void;
1090
+ };
1091
+ interface SequenceConfig {
1092
+ autoStart?: boolean;
1093
+ loop?: boolean;
1094
+ }
1095
+ /** @deprecated Use useOrchestration or useMotionOrchestra instead. */
1096
+ interface SequenceItem {
1097
+ hook: () => SequenceMotionResult;
1098
+ delay?: number;
1099
+ }
1100
+ /** @deprecated Use useOrchestration or useMotionOrchestra instead. */
1101
+ declare function useSequence(sequence: SequenceItem[], options?: SequenceConfig): {
1102
+ start: () => void;
1103
+ stop: () => void;
1104
+ pause: () => void;
1105
+ resume: () => void;
1106
+ reset: () => void;
1107
+ isPlaying: boolean;
1108
+ currentIndex: number;
1109
+ totalMotions: number;
1110
+ ref: react.RefObject<MotionElement | null>;
1111
+ };
1112
+
1113
+ interface LayoutMotionConfig {
1114
+ from: {
1115
+ width?: number | string;
1116
+ height?: number | string;
1117
+ flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
1118
+ justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
1119
+ alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
1120
+ gap?: number | string;
1121
+ gridTemplateColumns?: string;
1122
+ gridTemplateRows?: string;
1123
+ gridGap?: number | string;
1124
+ };
1125
+ to: {
1126
+ width?: number | string;
1127
+ height?: number | string;
1128
+ flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
1129
+ justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
1130
+ alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
1131
+ gap?: number | string;
1132
+ gridTemplateColumns?: string;
1133
+ gridTemplateRows?: string;
1134
+ gridGap?: number | string;
1135
+ };
1136
+ duration?: number;
1137
+ easing?: string;
1138
+ autoStart?: boolean;
1139
+ onComplete?: () => void;
1140
+ }
1141
+ interface LayoutState {
1142
+ isAnimating: boolean;
1143
+ progress: number;
1144
+ currentStyle: React.CSSProperties;
1145
+ }
1146
+ declare function useLayoutMotion(config: LayoutMotionConfig): {
1147
+ ref: react.RefObject<HTMLDivElement | null>;
1148
+ state: LayoutState;
1149
+ start: () => void;
1150
+ stop: () => void;
1151
+ reset: () => void;
1152
+ };
1153
+ declare function createLayoutTransition(from: LayoutMotionConfig["from"], to: LayoutMotionConfig["to"], options?: Partial<LayoutMotionConfig>): {
1154
+ from: {
1155
+ width?: number | string;
1156
+ height?: number | string;
1157
+ flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
1158
+ justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
1159
+ alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
1160
+ gap?: number | string;
1161
+ gridTemplateColumns?: string;
1162
+ gridTemplateRows?: string;
1163
+ gridGap?: number | string;
1164
+ };
1165
+ to: {
1166
+ width?: number | string;
1167
+ height?: number | string;
1168
+ flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
1169
+ justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
1170
+ alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
1171
+ gap?: number | string;
1172
+ gridTemplateColumns?: string;
1173
+ gridTemplateRows?: string;
1174
+ gridGap?: number | string;
1175
+ };
1176
+ duration: number;
1177
+ easing: string;
1178
+ autoStart: boolean;
1179
+ onComplete: (() => void) | undefined;
1180
+ };
1181
+
1182
+ interface KeyboardToggleConfig {
1183
+ initialState?: boolean;
1184
+ keys?: string[];
1185
+ keyCode?: number;
1186
+ keyCombo?: string[];
1187
+ toggleOnKeyDown?: boolean;
1188
+ toggleOnKeyUp?: boolean;
1189
+ toggleOnKeyPress?: boolean;
1190
+ autoReset?: boolean;
1191
+ resetDelay?: number;
1192
+ preventDefault?: boolean;
1193
+ stopPropagation?: boolean;
1194
+ requireFocus?: boolean;
1195
+ showOnMount?: boolean;
1196
+ }
1197
+ interface KeyboardToggleReturn {
1198
+ isActive: boolean;
1199
+ mounted: boolean;
1200
+ toggle: () => void;
1201
+ activate: () => void;
1202
+ deactivate: () => void;
1203
+ reset: () => void;
1204
+ keyboardHandlers: {
1205
+ onKeyDown?: (event: React.KeyboardEvent) => void;
1206
+ onKeyUp?: (event: React.KeyboardEvent) => void;
1207
+ onKeyPress?: (event: React.KeyboardEvent) => void;
1208
+ };
1209
+ ref: React.RefObject<HTMLElement | null>;
1210
+ }
1211
+ declare function useKeyboardToggle(options?: KeyboardToggleConfig): KeyboardToggleReturn;
1212
+
1213
+ type ScrollDirection = "up" | "down" | "idle";
1214
+ interface ScrollDirectionConfig {
1215
+ threshold?: number;
1216
+ idleDelay?: number;
1217
+ showOnMount?: boolean;
1218
+ }
1219
+ declare function useScrollDirection(options?: ScrollDirectionConfig): {
1220
+ direction: ScrollDirection;
1221
+ mounted: boolean;
1222
+ };
1223
+
1224
+ interface StickyToggleConfig {
1225
+ offset?: number;
1226
+ behavior?: "smooth" | "auto";
1227
+ showOnMount?: boolean;
1228
+ }
1229
+ declare function useStickyToggle(options?: StickyToggleConfig): {
1230
+ isSticky: boolean;
1231
+ mounted: boolean;
1232
+ };
1233
+
1234
+ interface InteractiveConfig {
1235
+ hoverScale?: number;
1236
+ clickScale?: number;
1237
+ duration?: number;
1238
+ }
1239
+ interface InteractiveState {
1240
+ scale: number;
1241
+ isHovered: boolean;
1242
+ isClicked: boolean;
1243
+ }
1244
+ declare function useInteractive(config?: InteractiveConfig): {
1245
+ ref: (element: HTMLDivElement | null) => void;
1246
+ scale: number;
1247
+ isHovered: boolean;
1248
+ isClicked: boolean;
1249
+ handleMouseEnter: () => void;
1250
+ handleMouseLeave: () => void;
1251
+ handleMouseDown: () => void;
1252
+ handleMouseUp: () => void;
1253
+ };
1254
+
1255
+ interface PerformanceMonitorConfig {
1256
+ threshold?: number;
1257
+ onPerformanceIssue?: (fps: number) => void;
1258
+ }
1259
+ interface PerformanceMonitorState {
1260
+ fps: number;
1261
+ isLowPerformance: boolean;
1262
+ frameCount: number;
1263
+ }
1264
+ declare function usePerformanceMonitor(config?: PerformanceMonitorConfig): {
1265
+ ref: (element: HTMLDivElement | null) => void;
1266
+ fps: number;
1267
+ isLowPerformance: boolean;
1268
+ frameCount: number;
1526
1269
  };
1527
- declare function getPresetEasing(preset: keyof typeof easingPresets): EasingFunction;
1528
1270
 
1271
+ interface LanguageConfig {
1272
+ motionType: "fadeIn" | "slideUp" | "slideLeft" | "slideRight" | "scaleIn" | "bounceIn";
1273
+ duration?: number;
1274
+ delay?: number;
1275
+ threshold?: number;
1276
+ pauseOnLanguageChange?: boolean;
1277
+ restartOnLanguageChange?: boolean;
1278
+ currentLanguage?: string;
1279
+ }
1280
+ declare function useLanguageAwareMotion(options: LanguageConfig): {
1281
+ ref: react.RefObject<HTMLElement | null>;
1282
+ isVisible: boolean;
1283
+ isPaused: boolean;
1284
+ style: {
1285
+ opacity: number;
1286
+ transform: string;
1287
+ transition: string;
1288
+ } | {
1289
+ opacity: number;
1290
+ transition: string;
1291
+ transform?: undefined;
1292
+ };
1293
+ pauseMotion: () => void;
1294
+ resumeMotion: () => void;
1295
+ restartMotion: () => void;
1296
+ currentLanguage: string;
1297
+ };
1298
+
1299
+ interface GameLoopConfig {
1300
+ fps?: number;
1301
+ autoStart?: boolean;
1302
+ maxFPS?: number;
1303
+ minFPS?: number;
1304
+ showOnMount?: boolean;
1305
+ }
1306
+ interface GameState {
1307
+ isRunning: boolean;
1308
+ fps: number;
1309
+ deltaTime: number;
1310
+ elapsedTime: number;
1311
+ frameCount: number;
1312
+ mounted: boolean;
1313
+ }
1314
+ interface GameLoopReturn {
1315
+ isRunning: boolean;
1316
+ fps: number;
1317
+ deltaTime: number;
1318
+ elapsedTime: number;
1319
+ frameCount: number;
1320
+ mounted: boolean;
1321
+ start: () => void;
1322
+ stop: () => void;
1323
+ pause: () => void;
1324
+ resume: () => void;
1325
+ reset: () => void;
1326
+ onUpdate: (callback: (deltaTime: number, elapsedTime: number) => void) => void;
1327
+ onRender: (callback: (deltaTime: number, elapsedTime: number) => void) => void;
1328
+ }
1329
+ declare function useGameLoop(options?: GameLoopConfig): GameLoopReturn;
1330
+
1331
+ interface AutoMotionConfig {
1332
+ duration?: number;
1333
+ delay?: number;
1334
+ autoStart?: boolean;
1335
+ easing?: string;
1336
+ type?: "fade" | "slide" | "scale" | "rotate";
1337
+ }
1338
+ interface MotionConfig {
1339
+ duration?: number;
1340
+ delay?: number;
1341
+ autoStart?: boolean;
1342
+ easing?: string;
1343
+ type?: "fade" | "slide" | "scale" | "rotate";
1344
+ }
1345
+ interface MotionFromToConfig {
1346
+ from: Record<string, any>;
1347
+ to: Record<string, any>;
1348
+ duration?: number;
1349
+ delay?: number;
1350
+ autoStart?: boolean;
1351
+ ease?: string;
1352
+ }
1353
+ declare function useMotion(configOrFrom?: MotionConfig | Record<string, any>, to?: Record<string, any>, options?: {
1354
+ duration?: number;
1355
+ delay?: number;
1356
+ autoStart?: boolean;
1357
+ ease?: string;
1358
+ }): {
1359
+ ref: (element: HTMLDivElement | null) => void;
1360
+ style: react__default.CSSProperties;
1361
+ transform: string;
1362
+ opacity: number;
1363
+ backgroundColor: string | undefined;
1364
+ isAnimating: boolean;
1365
+ start: () => void;
1366
+ stop: () => void;
1367
+ reset: () => void;
1368
+ };
1369
+
1370
+ interface ViewportToggleConfig {
1371
+ threshold?: number;
1372
+ rootMargin?: string;
1373
+ trigger?: "enter" | "exit" | "both";
1374
+ once?: boolean;
1375
+ showOnMount?: boolean;
1376
+ }
1529
1377
  /**
1530
- * Spring physics calculation (Hooke's Law + damping)
1531
- *
1532
- * Pure function no side effects, fully testable.
1378
+ * IntersectionObserver를 사용해 뷰포트 진입/이탈을 감지하는 훅.
1379
+ * (구 hua-pro의 useVisibilityToggle — animation lifecycle 기반의
1380
+ * motion-core useVisibilityToggle과 충돌을 피해 이름을 변경함)
1533
1381
  */
1534
- interface SpringConfig {
1535
- stiffness: number;
1536
- damping: number;
1537
- mass: number;
1538
- }
1539
- interface SpringResult {
1540
- value: number;
1541
- velocity: number;
1382
+ declare function useViewportToggle(options?: ViewportToggleConfig): {
1383
+ ref: react.RefObject<HTMLElement | null>;
1384
+ isVisible: boolean;
1385
+ mounted: boolean;
1386
+ };
1387
+
1388
+ interface ScrollPositionToggleConfig {
1389
+ threshold?: number;
1390
+ showOnMount?: boolean;
1391
+ smooth?: boolean;
1542
1392
  }
1543
1393
  /**
1544
- * Calculate one step of a damped spring simulation.
1545
- *
1546
- * @param currentValue Current position
1547
- * @param currentVelocity Current velocity
1548
- * @param targetValue Equilibrium (target) position
1549
- * @param deltaTime Time step in seconds
1550
- * @param config Spring parameters (stiffness, damping, mass)
1394
+ * window.pageYOffset 기준 스크롤 위치 임계값에 따라 가시성을 토글하는 훅.
1395
+ * (구 hua-pro의 useScrollToggle — animation lifecycle 기반의
1396
+ * motion-core useScrollToggle과 충돌을 피해 이름을 변경함)
1551
1397
  */
1552
- declare function calculateSpring(currentValue: number, currentVelocity: number, targetValue: number, deltaTime: number, config: SpringConfig): SpringResult;
1398
+ declare function useScrollPositionToggle(options?: ScrollPositionToggleConfig): {
1399
+ isVisible: boolean;
1400
+ scrollToTop: () => void;
1401
+ mounted: boolean;
1402
+ };
1553
1403
 
1554
1404
  type MotionAs = 'div' | 'span' | 'section' | 'article' | 'header' | 'footer' | 'main' | 'nav';
1555
1405
  interface MotionProps extends react__default.HTMLAttributes<HTMLElement> {
@@ -1584,6 +1434,108 @@ interface MotionProps extends react__default.HTMLAttributes<HTMLElement> {
1584
1434
  */
1585
1435
  declare function Motion({ as: Component, type, effects, scroll, delay, duration, children, className, style: userStyle, ...rest }: MotionProps): react_jsx_runtime.JSX.Element;
1586
1436
 
1437
+ interface CountUpOptions {
1438
+ /** 목표 숫자 */
1439
+ end: number;
1440
+ /** 숫자 뒤에 붙는 접미사 (%, +, 명 등) */
1441
+ suffix?: string;
1442
+ /** 애니메이션 지속 시간 (ms) */
1443
+ duration?: number;
1444
+ /** 시작 지연 시간 (ms) */
1445
+ delay?: number;
1446
+ /** 애니메이션 활성화 여부 (true가 되면 시작, 한 번만 실행) */
1447
+ active?: boolean;
1448
+ }
1449
+ interface CountUpReturn {
1450
+ /** 현재 숫자 값 */
1451
+ value: number;
1452
+ /** 접미사 포함 표시 문자열 */
1453
+ display: string;
1454
+ }
1455
+ /**
1456
+ * useCountUp — 숫자 카운트업 애니메이션
1457
+ *
1458
+ * 통계, 대시보드, 메트릭 수치 강조에 적합.
1459
+ * ease-out cubic 이징으로 자연스러운 감속 효과.
1460
+ *
1461
+ * @example
1462
+ * ```tsx
1463
+ * const { display } = useCountUp({ end: 1200, suffix: '+', active: isInView })
1464
+ * return <span>{display}</span>
1465
+ * ```
1466
+ */
1467
+ declare function useCountUp(options: CountUpOptions): CountUpReturn;
1468
+
1469
+ interface ClipRevealOptions {
1470
+ /** 시작 지연 시간 (ms) */
1471
+ delay?: number;
1472
+ /** 애니메이션 지속 시간 (ms) */
1473
+ duration?: number;
1474
+ /** CSS 이징 함수 */
1475
+ easing?: string;
1476
+ /** 애니메이션 활성화 여부 (true가 되면 시작, 한 번만 실행) */
1477
+ active?: boolean;
1478
+ }
1479
+ interface ClipRevealReturn {
1480
+ /** overflow:hidden 컨테이너에 적용할 스타일 */
1481
+ containerStyle: CSSProperties;
1482
+ /** 슬라이딩 텍스트에 적용할 스타일 */
1483
+ textStyle: CSSProperties;
1484
+ /** 등장 완료 여부 */
1485
+ isVisible: boolean;
1486
+ }
1487
+ /**
1488
+ * useClipReveal — overflow clip으로 텍스트가 아래→위로 등장
1489
+ *
1490
+ * 커버 타이틀, 히어로 헤드라인, 큰 문구에 적합.
1491
+ * 컨테이너에 overflow:hidden을 적용하고, 내부 텍스트가 translateY로 올라옴.
1492
+ *
1493
+ * @example
1494
+ * ```tsx
1495
+ * const { containerStyle, textStyle } = useClipReveal({ delay: 200, active: isInView })
1496
+ * return (
1497
+ * <span style={containerStyle}>
1498
+ * <span style={textStyle}>Hello World</span>
1499
+ * </span>
1500
+ * )
1501
+ * ```
1502
+ */
1503
+ declare function useClipReveal(options?: ClipRevealOptions): ClipRevealReturn;
1504
+
1505
+ interface BlurInOptions {
1506
+ /** 시작 지연 시간 (ms) */
1507
+ delay?: number;
1508
+ /** 애니메이션 지속 시간 (ms) */
1509
+ duration?: number;
1510
+ /** 초기 블러 강도 (px) */
1511
+ blurAmount?: number;
1512
+ /** 초기 스케일 (0~1) */
1513
+ scale?: number;
1514
+ /** CSS 이징 함수 */
1515
+ easing?: string;
1516
+ /** 애니메이션 활성화 여부 (true가 되면 시작, 한 번만 실행) */
1517
+ active?: boolean;
1518
+ }
1519
+ interface BlurInReturn {
1520
+ /** 요소에 적용할 스타일 */
1521
+ style: CSSProperties;
1522
+ /** 등장 완료 여부 */
1523
+ isVisible: boolean;
1524
+ }
1525
+ /**
1526
+ * useBlurIn — 블러에서 선명하게 + 스케일 등장
1527
+ *
1528
+ * 인용구, 임팩트 문구, 핵심 메시지에 적합.
1529
+ * blur + scale + opacity 세 가지가 동시에 전환됨.
1530
+ *
1531
+ * @example
1532
+ * ```tsx
1533
+ * const { style } = useBlurIn({ blurAmount: 12, scale: 0.95, active: isInView })
1534
+ * return <blockquote style={style}>Deep insight here</blockquote>
1535
+ * ```
1536
+ */
1537
+ declare function useBlurIn(options?: BlurInOptions): BlurInReturn;
1538
+
1587
1539
  interface UseStaggerOptions {
1588
1540
  /** 자식 아이템 개수 */
1589
1541
  count: number;
@@ -1624,4 +1576,4 @@ interface UseStaggerReturn {
1624
1576
  */
1625
1577
  declare function useStagger(options: UseStaggerOptions): UseStaggerReturn;
1626
1578
 
1627
- export { type BaseMotionOptions, type BaseMotionReturn, type BounceOptions, type BuiltInProfileName, type ButtonEffectOptions, type CardListOptions, type CustomCursorOptions, type CustomCursorReturn, type DeepPartial, type EasingFunction, type EasingType, type ElementProgressOptions, type ElementProgressReturn, type EntranceType, type FadeInOptions, type GestureConfig, type GestureOptions$1 as GestureOptions, type GradientOptions, type HoverMotionOptions, type InViewOptions, type InViewReturn, type InteractionReturn, type LoadingSpinnerOptions, MOTION_PRESETS, type MagneticCursorOptions, type MagneticCursorReturn, Motion, type MotionCallback, type MotionConfig, type MotionDirection$1 as MotionDirection, type MotionEasing, type MotionEffects, type MotionElement, MotionEngine, type MotionFrame, type Motion$1 as MotionInstance, type MotionOptions, type MotionPreset, type MotionProfile, type MotionProfileBase, type MotionProfileEntrance, type MotionProfileInteraction, MotionProfileProvider, type MotionProfileProviderProps, type MotionProfileSpring, type MotionProfileStagger, type MotionProgressCallback, type MotionProps, type MotionState$1 as MotionState, type MotionStateCallback, type MotionTrigger, type MotionType$1 as MotionType, type MouseOptions, type MouseReturn, type NavigationOptions, type OrchestrationConfig, PAGE_MOTIONS, type PageMotionElement, type PageMotionRef, type PageMotionsConfig, type PageType, type PerformanceMetrics, type PresetConfig, type PulseOptions, type ReducedMotionReturn, type ReducedMotionStrategy, type RepeatOptions, type ScaleOptions, type ScrollRevealMotionType, type ScrollRevealOptions, type ScrollToggleOptions, type SkeletonOptions, type SlideOptions, type SmoothScrollOptions, type SmoothScrollReturn, type SpringConfig$1 as SpringConfig, type SpringOptions, type SpringConfig as SpringPhysicsConfig, type SpringResult, type ToggleMotionOptions, TransitionEffects, type TransitionOptions, type TransitionType, type TypewriterOptions, type TypewriterReturn, type UseStaggerOptions, type UseStaggerReturn, type UseUnifiedMotionOptions, type VisibilityToggleOptions, type WindowSizeOptions, type WindowSizeReturn, applyEasing, calculateSpring, easeIn, easeInOut, easeInOutQuad, easeInQuad, easeOut, easeOutQuad, easingPresets, getAvailableEasings, getEasing, getMotionPreset, getPagePreset, getPresetEasing, hua, isEasingFunction, isValidEasing, linear, mergeProfileOverrides, mergeWithPreset, motionEngine, neutral, observeElement, resolveProfile, safeApplyEasing, transitionEffects, useBounceIn, useButtonEffect, useCardList, useClickToggle, useCustomCursor, useElementProgress, useFadeIn, useFocusToggle, useGesture, useGestureMotion, useGradient, useHoverMotion, useInView, useLoadingSpinner, useMagneticCursor, useMotionProfile, useMotionState, useMouse, useNavigation, usePageMotions, usePulse, useReducedMotion, useRepeat, useScaleIn, useScrollProgress, useScrollReveal, useScrollToggle, useSimplePageMotion, useSkeleton, useSlideDown, useSlideLeft, useSlideRight, useSlideUp, useSmartMotion, useSmoothScroll, useSpringMotion, useStagger, useToggleMotion, useTypewriter, useUnifiedMotion, useVisibilityToggle, useWindowSize };
1579
+ export { type AutoFadeConfig, type AutoMotionConfig, type AutoPlayConfig, type AutoScaleConfig, type AutoSlideConfig, BaseMotionOptions, BaseMotionReturn, type BlurInOptions, type BlurInReturn, BounceOptions, type ButtonEffectOptions, type CardListOptions, type ClipRevealOptions, type ClipRevealReturn, type CountUpOptions, type CountUpReturn, type CustomCursorOptions, type CustomCursorReturn, type ElementProgressOptions, type ElementProgressReturn, EntranceMotionReturn, EntranceType, FadeInOptions, type GameLoopConfig, type GameState, GradientOptions, HoverMotionOptions, InViewOptions, InViewReturn, InteractionReturn, type InteractiveConfig, type InteractiveState, type KeyboardToggleConfig, type LanguageConfig, type LayoutMotionConfig, type LayoutState, type LoadingSpinnerOptions, type MagneticCursorOptions, type MagneticCursorReturn, Motion, type MotionEffects, MotionElement, type MotionFromToConfig, type MotionProps, MouseOptions, MouseReturn, type NavigationOptions, PageMotionRef, PageMotionsConfig, PageType, type PerformanceMonitorConfig, type PerformanceMonitorState, PulseOptions, ReducedMotionReturn, RepeatOptions, ScaleOptions, type ScrollDirectionConfig, type ScrollPositionToggleConfig, ScrollRevealMotionType, ScrollRevealOptions, type ScrollToggleOptions, type SequenceConfig, type SkeletonOptions, SlideOptions, type SmoothScrollOptions, type SmoothScrollReturn, SpringOptions, type StickyToggleConfig, ToggleMotionOptions, type TypewriterOptions, type TypewriterReturn, type MotionConfig as UseMotionConfig, type OrchestrationConfig as UseOrchestrationConfig, type UseStaggerOptions, type UseStaggerReturn, type UseUnifiedMotionOptions, type ViewportToggleConfig, type VisibilityToggleOptions, WindowSizeOptions, WindowSizeReturn, createLayoutTransition, observeElement, useAutoFade, useAutoPlay, useAutoScale, useAutoSlide, useBlurIn, useBounceIn, useButtonEffect, useCardList, useClickToggle, useClipReveal, useCountUp, useCustomCursor, useElementProgress, useFadeIn, useFocusToggle, useGameLoop, useGesture, useGestureMotion, useGradient, useHoverMotion, useInView, useInteractive, useKeyboardToggle, useLanguageAwareMotion, useLayoutMotion, useLoadingSpinner, useMagneticCursor, useMotion, useMotionOrchestra, useMotionState, useMouse, useNavigation, useOrchestration, usePageMotions, usePerformanceMonitor, usePulse, useReducedMotion, useReducedMotionObject, useRepeat, useScaleIn, useScrollDirection, useScrollPositionToggle, useScrollProgress, useScrollReveal, useScrollToggle, useSequence, useSimplePageMotion, useSkeleton, useSlideDown, useSlideLeft, useSlideRight, useSlideUp, useSmartMotion, useSmoothScroll, useSpringMotion, useStagger, useStickyToggle, useToggleMotion, useTypewriter, useUnifiedMotion, useViewportToggle, useVisibilityToggle, useWindowSize };