@hua-labs/motion-core 2.2.2 → 2.3.0

package/dist/index.d.ts

@@ -1,1089 +0,0 @@
-import * as react from 'react';
-import { CSSProperties, RefObject } from 'react';
-
-/**
- * HUA Motion Core - 의존성 제로 모션 엔진
- *
- * 순수 JavaScript로 구현된 고성능 모션 엔진
- * GPU 가속, 레이어 분리, 성능 최적화 포함
- */
-interface MotionFrame {
-    progress: number;
-    properties: {
-        opacity?: number;
-        transform?: string;
-        scale?: number;
-        translateX?: number;
-        translateY?: number;
-        rotate?: number;
-        rotateX?: number;
-        rotateY?: number;
-        rotateZ?: number;
-        skewX?: number;
-        skewY?: number;
-    };
-}
-interface MotionOptions {
-    duration: number;
-    easing: (t: number) => number;
-    delay?: number;
-    direction?: 'forward' | 'reverse' | 'alternate';
-    iterations?: number;
-    fill?: 'none' | 'forwards' | 'backwards' | 'both';
-    onStart?: () => void;
-    onUpdate?: (progress: number) => void;
-    onComplete?: () => void;
-    onCancel?: () => void;
-}
-interface Motion {
-    id: string;
-    element: HTMLElement;
-    isRunning: boolean;
-    isPaused: boolean;
-    currentProgress: number;
-    startTime: number;
-    pauseTime: number;
-    options: MotionOptions;
-}
-declare class MotionEngine {
-    private motions;
-    private isRunning;
-    private animationFrameId;
-    /**
-     * 모션 시작
-     */
-    motion(element: HTMLElement, motionFrames: MotionFrame[], options: MotionOptions): Promise<string>;
-    /**
-     * 모션 중지
-     */
-    stop(motionId: string): void;
-    /**
-     * 모션 일시정지
-     */
-    pause(motionId: string): void;
-    /**
-     * 모션 재개
-     */
-    resume(motionId: string): void;
-    /**
-     * 모든 모션 중지
-     */
-    stopAll(): void;
-    /**
-     * 모션 상태 확인
-     */
-    getMotion(motionId: string): Motion | undefined;
-    /**
-     * 실행 중인 모션 수
-     */
-    getActiveMotionCount(): number;
-    /**
-     * 애니메이션 루프 시작
-     */
-    private startAnimationLoop;
-    /**
-     * 애니메이션 루프 중지
-     */
-    private stopAnimationLoop;
-    /**
-     * 메인 애니메이션 루프
-     */
-    private animate;
-    /**
-     * 모션 프레임 적용
-     */
-    private applyMotionFrame;
-    /**
-     * GPU 가속 활성화
-     */
-    private enableGPUAcceleration;
-    /**
-     * 레이어 분리
-     */
-    private createLayer;
-    /**
-     * 고유 모션 ID 생성
-     */
-    private generateMotionId;
-    /**
-     * 정리
-     */
-    destroy(): void;
-}
-declare const motionEngine: MotionEngine;
-
-/**
- * HUA Motion Core - 전환 효과 시스템
- *
- * CSS Motion API를 활용한 고성능 전환 효과들
- * GPU 가속 및 레이어 분리 최적화 포함
- */
-
-type TransitionType = 'fade' | 'slide' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'scale' | 'flip' | 'morph' | 'cube' | 'zoom';
-interface TransitionOptions extends Omit<MotionOptions, 'easing'> {
-    type: TransitionType;
-    easing?: (t: number) => number;
-    distance?: number;
-    scale?: number;
-    perspective?: number;
-    onTransitionStart?: () => void;
-    onTransitionComplete?: () => void;
-}
-declare class TransitionEffects {
-    private static instance;
-    private activeTransitions;
-    static getInstance(): TransitionEffects;
-    /**
-     * 페이드 인/아웃 전환
-     */
-    fade(element: HTMLElement, options: Omit<TransitionOptions, 'type'>): Promise<void>;
-    /**
-     * 슬라이드 전환
-     */
-    slide(element: HTMLElement, options: Omit<TransitionOptions, 'type'>): Promise<void>;
-    /**
-     * 스케일 전환
-     */
-    scale(element: HTMLElement, options: Omit<TransitionOptions, 'type'>): Promise<void>;
-    /**
-     * 플립 전환 (3D 회전)
-     */
-    flip(element: HTMLElement, options: Omit<TransitionOptions, 'type'>): Promise<void>;
-    /**
-     * 큐브 전환 (3D 큐브 회전)
-     */
-    cube(element: HTMLElement, options: Omit<TransitionOptions, 'type'>): Promise<void>;
-    /**
-     * 모프 전환 (복합 변형)
-     */
-    morph(element: HTMLElement, options: Omit<TransitionOptions, 'type'>): Promise<void>;
-    /**
-     * 전환 중지
-     */
-    stopTransition(transitionId: string): void;
-    /**
-     * 모든 전환 중지
-     */
-    stopAllTransitions(): void;
-    /**
-     * 활성 전환 수 확인
-     */
-    getActiveTransitionCount(): number;
-    /**
-     * GPU 가속 활성화
-     */
-    private enableGPUAcceleration;
-    /**
-     * 기본 이징 함수
-     */
-    private getDefaultEasing;
-    /**
-     * 고유 전환 ID 생성
-     */
-    private generateTransitionId;
-    /**
-     * 정리
-     */
-    destroy(): void;
-}
-declare const transitionEffects: TransitionEffects;
-
-/**
- * HUA Motion Core - 성능 최적화 시스템
- *
- * GPU 가속, 레이어 관리, 메모리 최적화를 위한 유틸리티들
- * 브라우저별 최적화 전략 포함
- */
-interface PerformanceOptimizerMetrics {
-    fps: number;
-    memoryUsage?: number;
-    gpuTime?: number;
-    cpuTime?: number;
-    layerCount: number;
-    activeMotions: number;
-}
-interface OptimizationConfig {
-    enableGPUAcceleration: boolean;
-    enableLayerSeparation: boolean;
-    enableMemoryOptimization: boolean;
-    targetFPS: number;
-    maxLayerCount: number;
-    memoryThreshold: number;
-}
-declare class PerformanceOptimizer {
-    private static instance;
-    private config;
-    private performanceObserver;
-    private metrics;
-    private layerRegistry;
-    private isMonitoring;
-    constructor();
-    static getInstance(): PerformanceOptimizer;
-    /**
-     * 성능 모니터링 초기화
-     */
-    private initializePerformanceMonitoring;
-    /**
-     * 성능 메트릭 업데이트
-     */
-    private updatePerformanceMetrics;
-    /**
-     * FPS 계산
-     */
-    private calculateFPS;
-    /**
-     * GPU 가속 활성화
-     */
-    enableGPUAcceleration(element: HTMLElement): void;
-    /**
-     * 레이어 분리 및 최적화
-     */
-    createOptimizedLayer(element: HTMLElement): void;
-    /**
-     * 레이어 등록
-     */
-    private registerLayer;
-    /**
-     * 레이어 제거
-     */
-    removeLayer(element: HTMLElement): void;
-    /**
-     * 레이어 수 제한 체크
-     */
-    private checkLayerLimit;
-    /**
-     * 오래된 레이어 정리
-     */
-    private cleanupOldLayers;
-    /**
-     * 메모리 사용량 체크
-     */
-    private checkMemoryUsage;
-    /**
-     * 메모리 정리
-     */
-    private cleanupMemory;
-    /**
-     * 성능 최적화 설정 업데이트
-     */
-    updateConfig(newConfig: Partial<OptimizationConfig>): void;
-    /**
-     * 모든 GPU 가속 비활성화
-     */
-    private disableAllGPUAcceleration;
-    /**
-     * 모든 레이어 비활성화
-     */
-    private disableAllLayers;
-    /**
-     * 성능 메트릭 가져오기
-     */
-    getMetrics(): PerformanceOptimizerMetrics;
-    /**
-     * 성능 모니터링 시작
-     */
-    startMonitoring(): void;
-    /**
-     * 성능 모니터링 중지
-     */
-    stopMonitoring(): void;
-    /**
-     * 메트릭 업데이트
-     */
-    private updateMetrics;
-    /**
-     * 성능 리포트 생성
-     */
-    generateReport(): string;
-    /**
-     * 바이트 단위 포맷팅
-     */
-    private formatBytes;
-    /**
-     * 성능 최적화 권장사항
-     */
-    getOptimizationRecommendations(): string[];
-    /**
-     * 정리
-     */
-    destroy(): void;
-    private lastFrameTime?;
-    private monitoringInterval?;
-}
-declare const performanceOptimizer: PerformanceOptimizer;
-
-type MotionElement = HTMLDivElement | HTMLSpanElement | HTMLButtonElement | HTMLHeadingElement | HTMLParagraphElement | HTMLImageElement;
-type MotionStyle = CSSProperties & {
-    '--motion-delay'?: string;
-    '--motion-duration'?: string;
-    '--motion-easing'?: string;
-    '--motion-progress'?: string;
-};
-interface BaseMotionOptions {
-    /** 모션 시작 지연 시간 (ms) */
-    delay?: number;
-    /** 모션 지속 시간 (ms) */
-    duration?: number;
-    /** Intersection Observer 임계값 (0-1) */
-    threshold?: number;
-    /** 한 번만 트리거할지 여부 */
-    triggerOnce?: boolean;
-    /** 이징 함수명 */
-    easing?: string;
-    /** 자동 시작 여부 */
-    autoStart?: boolean;
-    /** 모션 완료 시 콜백 */
-    onComplete?: () => void;
-    /** 모션 시작 시 콜백 */
-    onStart?: () => void;
-    /** 모션 중단 시 콜백 */
-    onStop?: () => void;
-    /** 모션 리셋 시 콜백 */
-    onReset?: () => void;
-}
-interface BaseMotionReturn<T extends MotionElement = HTMLDivElement> {
-    /** DOM 요소 참조 (React 19 호환) */
-    ref: React.RefObject<T | null>;
-    /** 요소가 화면에 보이는지 여부 */
-    isVisible: boolean;
-    /** 모션이 진행 중인지 여부 */
-    isAnimating: boolean;
-    /** 적용할 CSS 스타일 (React 19 호환) - useFadeIn 등에서는 항상 반환됨 */
-    style: MotionStyle;
-    /** 적용할 CSS 클래스명 */
-    className?: string;
-    /** 모션 진행률 (0-1) - useFadeIn 등에서는 항상 반환됨 */
-    progress: number;
-    /** 모션 시작 함수 - useFadeIn 등에서는 항상 반환됨 */
-    start: () => void;
-    /** 모션 리셋 함수 - useFadeIn 등에서는 항상 반환됨 */
-    reset: () => void;
-    /** 모션 중단 함수 - useFadeIn 등에서는 항상 반환됨 */
-    stop: () => void;
-    /** 모션 일시정지 함수 - 일부 훅에서만 제공 */
-    pause?: () => void;
-    /** 모션 재개 함수 - 일부 훅에서만 제공 */
-    resume?: () => void;
-}
-interface InteractionReturn<T extends MotionElement = HTMLDivElement> extends BaseMotionReturn<T> {
-    /** 가시성 토글 함수 */
-    toggle?: () => void;
-    /** 표시 함수 */
-    show?: () => void;
-    /** 숨김 함수 */
-    hide?: () => void;
-}
-interface FadeInOptions extends BaseMotionOptions {
-    /** 초기 투명도 */
-    initialOpacity?: number;
-    /** 목표 투명도 */
-    targetOpacity?: number;
-}
-interface SlideOptions extends BaseMotionOptions {
-    /** 슬라이드 방향 */
-    direction?: 'up' | 'down' | 'left' | 'right';
-    /** 슬라이드 거리 (px) */
-    distance?: number;
-}
-interface ScaleOptions extends BaseMotionOptions {
-    /** 초기 스케일 */
-    initialScale?: number;
-    /** 목표 스케일 */
-    targetScale?: number;
-}
-interface BounceOptions extends BaseMotionOptions {
-    /** 바운스 강도 */
-    intensity?: number;
-    /** 바운스 횟수 */
-    bounces?: number;
-}
-interface PulseOptions extends BaseMotionOptions {
-    /** 펄스 강도 */
-    intensity?: number;
-    /** 반복 횟수 (-1 = 무한) */
-    repeatCount?: number;
-    /** 반복 간격 (ms) */
-    repeatDelay?: number;
-}
-interface SpringOptions extends BaseMotionOptions {
-    /** 스프링 질량 */
-    mass?: number;
-    /** 스프링 강성 */
-    stiffness?: number;
-    /** 스프링 감쇠 */
-    damping?: number;
-    /** 정지 임계값 */
-    restDelta?: number;
-    /** 정지 속도 */
-    restSpeed?: number;
-}
-interface GestureOptions$1 extends BaseMotionOptions {
-    /** 호버 제스처 활성화 */
-    hover?: boolean;
-    /** 드래그 제스처 활성화 */
-    drag?: boolean;
-    /** 핀치 제스처 활성화 */
-    pinch?: boolean;
-    /** 스와이프 제스처 활성화 */
-    swipe?: boolean;
-    /** 틸트 제스처 활성화 */
-    tilt?: boolean;
-}
-type MotionDirection$1 = 'up' | 'down' | 'left' | 'right';
-type MotionEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'bounce' | 'elastic';
-type MotionTrigger = 'scroll' | 'click' | 'hover' | 'focus' | 'auto';
-type MotionCallback = () => void;
-type MotionProgressCallback = (progress: number) => void;
-type MotionStateCallback<T extends MotionElement = HTMLDivElement> = (state: BaseMotionReturn<T>) => void;
-interface PerformanceMetrics {
-    /** 모션 시작 시간 */
-    startTime: number;
-    /** 모션 종료 시간 */
-    endTime?: number;
-    /** 총 지속 시간 */
-    duration: number;
-    /** FPS */
-    fps: number;
-    /** 메모리 사용량 */
-    memoryUsage?: number;
-}
-interface MotionConfig {
-    /** 성능 모니터링 활성화 */
-    enablePerformanceMonitoring?: boolean;
-    /** 디버그 모드 활성화 */
-    debug?: boolean;
-    /** 로그 레벨 */
-    logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
-}
-interface InViewOptions {
-    /** Intersection Observer 임계값 */
-    threshold?: number | number[];
-    /** 루트 마진 */
-    rootMargin?: string;
-    /** 한 번만 트리거할지 여부 */
-    triggerOnce?: boolean;
-    /** 초기 가시성 상태 */
-    initialInView?: boolean;
-}
-interface InViewReturn<T extends HTMLElement = HTMLDivElement> {
-    /** DOM 요소 참조 */
-    ref: RefObject<T | null>;
-    /** 요소가 화면에 보이는지 여부 */
-    inView: boolean;
-    /** IntersectionObserver 엔트리 */
-    entry: IntersectionObserverEntry | null;
-}
-interface MouseOptions {
-    /** 타겟 요소 참조 */
-    targetRef?: RefObject<HTMLElement | null>;
-    /** 스로틀 시간 (ms) */
-    throttle?: number;
-}
-interface MouseReturn {
-    /** 마우스 X 좌표 (viewport 기준) */
-    x: number;
-    /** 마우스 Y 좌표 (viewport 기준) */
-    y: number;
-    /** 요소 내 상대 X 좌표 (0-1) */
-    elementX: number;
-    /** 요소 내 상대 Y 좌표 (0-1) */
-    elementY: number;
-    /** 마우스가 타겟 위에 있는지 여부 */
-    isOver: boolean;
-}
-interface ReducedMotionReturn {
-    /** 사용자가 모션 감소를 선호하는지 여부 */
-    prefersReducedMotion: boolean;
-}
-interface WindowSizeOptions {
-    /** 디바운스 시간 (ms) */
-    debounce?: number;
-    /** 초기 너비 */
-    initialWidth?: number;
-    /** 초기 높이 */
-    initialHeight?: number;
-}
-interface WindowSizeReturn {
-    /** 윈도우 너비 */
-    width: number;
-    /** 윈도우 높이 */
-    height: number;
-    /** 마운트 여부 (SSR 대응) */
-    isMounted: boolean;
-}
-type ScrollRevealMotionType = 'fadeIn' | 'slideUp' | 'slideLeft' | 'slideRight' | 'scaleIn' | 'bounceIn';
-interface ScrollRevealOptions extends BaseMotionOptions {
-    /** 루트 마진 */
-    rootMargin?: string;
-    /** 모션 타입 */
-    motionType?: ScrollRevealMotionType;
-}
-interface GradientOptions extends BaseMotionOptions {
-    /** 그라디언트 색상 배열 */
-    colors?: string[];
-    /** 그라디언트 방향 */
-    direction?: 'horizontal' | 'vertical' | 'diagonal';
-    /** 그라디언트 크기 (%) */
-    size?: number;
-}
-interface ToggleMotionOptions extends BaseMotionOptions {
-}
-interface RepeatOptions extends BaseMotionOptions {
-    /** 반복 효과 타입 */
-    type?: 'pulse' | 'bounce' | 'wave' | 'fade';
-    /** 효과 강도 */
-    intensity?: number;
-}
-interface HoverMotionOptions extends BaseMotionOptions {
-    /** 호버 시 스케일 */
-    hoverScale?: number;
-    /** 호버 시 Y 오프셋 (px) */
-    hoverY?: number;
-    /** 호버 시 투명도 */
-    hoverOpacity?: number;
-}
-
-type PageType = 'home' | 'dashboard' | 'product' | 'blog';
-type MotionType$1 = 'hero' | 'title' | 'button' | 'card' | 'text' | 'image';
-type EntranceType = 'fadeIn' | 'slideUp' | 'slideLeft' | 'slideRight' | 'scaleIn' | 'bounceIn';
-interface PageMotionElement {
-    type: MotionType$1;
-    entrance?: EntranceType;
-    hover?: boolean;
-    click?: boolean;
-    delay?: number;
-    duration?: number;
-    threshold?: number;
-}
-interface PageMotionsConfig {
-    [elementId: string]: PageMotionElement;
-}
-interface MotionState$1 {
-    internalVisibility: boolean;
-    triggeredVisibility: boolean;
-    finalVisibility: boolean;
-    opacity: number;
-    translateY: number;
-    translateX: number;
-    scale: number;
-    rotation: number;
-    isHovered: boolean;
-    isClicked: boolean;
-    isAnimating: boolean;
-}
-interface PageMotionRef<T extends HTMLElement = HTMLElement> {
-    ref: React.RefObject<T | null>;
-    style: React.CSSProperties;
-    isVisible: boolean;
-    isHovered: boolean;
-    isClicked: boolean;
-}
-interface MotionPreset {
-    entrance: EntranceType;
-    delay: number;
-    duration: number;
-    hover: boolean;
-    click: boolean;
-}
-interface PresetConfig {
-    [key: string]: MotionPreset;
-}
-interface SpringConfig {
-    mass?: number;
-    stiffness?: number;
-    damping?: number;
-    restDelta?: number;
-    restSpeed?: number;
-}
-interface GestureConfig {
-    hover?: boolean;
-    drag?: boolean;
-    pinch?: boolean;
-    swipe?: boolean;
-    tilt?: boolean;
-}
-interface OrchestrationConfig {
-    sequence?: 'sequential' | 'parallel' | 'stagger';
-    staggerDelay?: number;
-    staggerDuration?: number;
-}
-
-/**
- * 1단계 API: 프리셋 기반 페이지 모션 (기존 방식)
- *
- * 사용법:
- * ```typescript
- * const motions = useSimplePageMotion('home')
- * ```
- *
- * 지원하는 페이지 타입:
- * - 'home': 홈페이지
- * - 'dashboard': 대시보드
- * - 'product': 제품 페이지
- * - 'blog': 블로그
- */
-declare function useSimplePageMotion(pageType: PageType): Record<string, PageMotionRef<HTMLElement>>;
-
-/**
- * 2단계 API: 페이지 레벨 모션 관리 (상태 관리자 버전)
- *
- * 사용법:
- * ```typescript
- * const motions = usePageMotions({
- *   hero: { type: 'hero' },
- *   title: { type: 'title' },
- *   button: { type: 'button', hover: true, click: true }
- * })
- * ```
- */
-declare function usePageMotions(config: PageMotionsConfig): {
-    reset: () => void;
-};
-
-type MotionType = 'fadeIn' | 'slideUp' | 'slideLeft' | 'slideRight' | 'scaleIn' | 'bounceIn';
-type ElementType = 'hero' | 'title' | 'button' | 'card' | 'text' | 'image';
-interface SmartMotionOptions {
-    type?: ElementType;
-    entrance?: MotionType;
-    hover?: boolean;
-    click?: boolean;
-    delay?: number;
-    duration?: number;
-    threshold?: number;
-    autoLanguageSync?: boolean;
-}
-/**
- * 3단계 API: 개별 요소 모션
- *
- * 사용법:
- * ```typescript
- * const heroRef = useSmartMotion({ type: 'hero' })
- * const titleRef = useSmartMotion({ type: 'title' })
- * const buttonRef = useSmartMotion({ type: 'button' })
- * ```
- */
-declare function useSmartMotion<T extends HTMLElement = HTMLDivElement>(options?: SmartMotionOptions): {
-    ref: React.RefObject<T | null>;
-    style: React.CSSProperties;
-    isVisible: boolean;
-    isHovered: boolean;
-    isClicked: boolean;
-};
-
-/**
- * @hua-labs/motion-core - useUnifiedMotion
- *
- * 통합 Motion Hook - 단일 타입으로 여러 모션 효과 중 하나를 선택
- * 내부에서 선택된 type에 맞는 로직만 실행 (6개 훅 동시 호출 제거)
- */
-
-interface UseUnifiedMotionOptions extends Omit<BaseMotionOptions, 'autoStart'> {
-    /** Motion type to use */
-    type: EntranceType;
-    /** Auto start animation @default true */
-    autoStart?: boolean;
-    /** Slide distance (px) for slide types @default 50 */
-    distance?: number;
-}
-declare function useUnifiedMotion<T extends MotionElement = HTMLDivElement>(options: UseUnifiedMotionOptions): BaseMotionReturn<T>;
-
-declare function useFadeIn<T extends MotionElement = HTMLDivElement>(options?: FadeInOptions): BaseMotionReturn<T>;
-
-declare function useSlideUp<T extends MotionElement = HTMLDivElement>(options?: SlideOptions): BaseMotionReturn<T>;
-
-/**
- * useSlideLeft - 오른쪽에서 왼쪽으로 슬라이드하며 나타나는 애니메이션 훅
- *
- * useSlideUp의 wrapper로, direction: 'left'를 기본값으로 사용합니다.
- * IntersectionObserver를 통해 뷰포트 진입 시 자동으로 애니메이션이 시작됩니다.
- *
- * @example
- * ```tsx
- * const slideLeft = useSlideLeft({ duration: 700, distance: 50 });
- *
- * return (
- *   <div ref={slideLeft.ref} style={slideLeft.style}>
- *     Content slides in from right
- *   </div>
- * );
- * ```
- */
-declare function useSlideLeft<T extends MotionElement = HTMLDivElement>(options?: Omit<SlideOptions, 'direction'>): BaseMotionReturn<T>;
-
-/**
- * useSlideRight - 왼쪽에서 오른쪽으로 슬라이드하며 나타나는 애니메이션 훅
- *
- * useSlideUp의 wrapper로, direction: 'right'를 기본값으로 사용합니다.
- * IntersectionObserver를 통해 뷰포트 진입 시 자동으로 애니메이션이 시작됩니다.
- *
- * @example
- * ```tsx
- * const slideRight = useSlideRight({ duration: 700, distance: 50 });
- *
- * return (
- *   <div ref={slideRight.ref} style={slideRight.style}>
- *     Content slides in from left
- *   </div>
- * );
- * ```
- */
-declare function useSlideRight<T extends MotionElement = HTMLDivElement>(options?: Omit<SlideOptions, 'direction'>): BaseMotionReturn<T>;
-
-declare function useScaleIn<T extends MotionElement = HTMLDivElement>(options?: ScaleOptions): BaseMotionReturn<T>;
-
-declare function useBounceIn<T extends MotionElement = HTMLDivElement>(options?: BounceOptions): BaseMotionReturn<T>;
-
-declare function usePulse<T extends MotionElement = HTMLDivElement>(options?: PulseOptions): BaseMotionReturn<T>;
-
-interface SpringMotionOptions extends SpringOptions {
-    /** 시작 값 */
-    from: number;
-    /** 목표 값 */
-    to: number;
-    /** 활성화 여부 */
-    enabled?: boolean;
-}
-declare function useSpringMotion<T extends MotionElement = HTMLDivElement>(options: SpringMotionOptions): BaseMotionReturn<T> & {
-    value: number;
-    velocity: number;
-};
-
-declare function useGradient<T extends MotionElement = HTMLDivElement>(options?: GradientOptions): BaseMotionReturn<T>;
-
-declare function useHoverMotion<T extends MotionElement = HTMLDivElement>(options?: HoverMotionOptions): BaseMotionReturn<T> & {
-    isHovered: boolean;
-};
-
-interface ClickToggleOptions {
-    initialState?: boolean;
-    toggleOnClick?: boolean;
-    toggleOnDoubleClick?: boolean;
-    toggleOnRightClick?: boolean;
-    toggleOnEnter?: boolean;
-    toggleOnSpace?: boolean;
-    autoReset?: boolean;
-    resetDelay?: number;
-    preventDefault?: boolean;
-    stopPropagation?: boolean;
-    showOnMount?: boolean;
-}
-interface ClickToggleReturn {
-    isActive: boolean;
-    mounted: boolean;
-    toggle: () => void;
-    activate: () => void;
-    deactivate: () => void;
-    reset: () => void;
-    clickHandlers: {
-        onClick?: (event: React.MouseEvent) => void;
-        onDoubleClick?: (event: React.MouseEvent) => void;
-        onContextMenu?: (event: React.MouseEvent) => void;
-        onKeyDown?: (event: React.KeyboardEvent) => void;
-    };
-}
-declare function useClickToggle(options?: ClickToggleOptions): ClickToggleReturn;
-
-interface FocusToggleOptions {
-    initialState?: boolean;
-    toggleOnFocus?: boolean;
-    toggleOnBlur?: boolean;
-    toggleOnFocusIn?: boolean;
-    toggleOnFocusOut?: boolean;
-    autoReset?: boolean;
-    resetDelay?: number;
-    preventDefault?: boolean;
-    stopPropagation?: boolean;
-    showOnMount?: boolean;
-}
-interface FocusToggleReturn {
-    isActive: boolean;
-    mounted: boolean;
-    toggle: () => void;
-    activate: () => void;
-    deactivate: () => void;
-    reset: () => void;
-    focusHandlers: {
-        onFocus?: (event: React.FocusEvent) => void;
-        onBlur?: (event: React.FocusEvent) => void;
-        onFocusIn?: (event: React.FocusEvent) => void;
-        onFocusOut?: (event: React.FocusEvent) => void;
-    };
-    ref: React.RefObject<HTMLElement | null>;
-}
-declare function useFocusToggle(options?: FocusToggleOptions): FocusToggleReturn;
-
-declare function useScrollReveal<T extends MotionElement = HTMLDivElement>(options?: ScrollRevealOptions): BaseMotionReturn<T>;
-
-interface ScrollProgressOptions {
-    target?: number;
-    offset?: number;
-    showOnMount?: boolean;
-}
-declare function useScrollProgress(options?: ScrollProgressOptions): {
-    progress: number;
-    mounted: boolean;
-};
-
-type MotionState = 'idle' | 'playing' | 'paused' | 'completed' | 'error';
-type MotionDirection = 'forward' | 'reverse' | 'alternate';
-interface MotionStateOptions {
-    initialState?: MotionState;
-    autoStart?: boolean;
-    loop?: boolean;
-    direction?: MotionDirection;
-    duration?: number;
-    delay?: number;
-    showOnMount?: boolean;
-}
-interface MotionStateReturn {
-    state: MotionState;
-    direction: MotionDirection;
-    progress: number;
-    elapsed: number;
-    remaining: number;
-    mounted: boolean;
-    play: () => void;
-    pause: () => void;
-    stop: () => void;
-    reset: () => void;
-    reverse: () => void;
-    seek: (progress: number) => void;
-    setState: (newState: MotionState) => void;
-}
-declare function useMotionState(options?: MotionStateOptions): MotionStateReturn;
-
-declare function useRepeat<T extends MotionElement = HTMLDivElement>(options?: RepeatOptions): BaseMotionReturn<T> & {
-    isAnimating: boolean;
-};
-
-declare function useToggleMotion<T extends MotionElement = HTMLDivElement>(options?: ToggleMotionOptions): InteractionReturn<T>;
-
-/**
- * useSlideDown - 아래에서 위로 슬라이드하며 나타나는 애니메이션 훅
- *
- * useSlideUp의 wrapper로, direction: 'down'을 기본값으로 사용합니다.
- * IntersectionObserver를 통해 뷰포트 진입 시 자동으로 애니메이션이 시작됩니다.
- *
- * @example
- * ```tsx
- * const slideDown = useSlideDown({ duration: 700, distance: 50 });
- *
- * return (
- *   <div ref={slideDown.ref} style={slideDown.style}>
- *     Content slides down into view
- *   </div>
- * );
- * ```
- */
-declare function useSlideDown<T extends MotionElement = HTMLDivElement>(options?: Omit<SlideOptions, 'direction'>): BaseMotionReturn<T>;
-
-/**
- * useInView - 요소의 뷰포트 가시성 감지 훅
- * Viewport visibility detection hook
- *
- * @description
- * Intersection Observer를 사용하여 요소가 뷰포트에 보이는지 감지.
- * 스크롤 애니메이션, 레이지 로딩 등에 활용.
- * Detects whether an element is visible in the viewport using Intersection Observer.
- * Useful for scroll animations, lazy loading, etc.
- *
- * @example
- * ```tsx
- * const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true })
- *
- * return (
- *   <div ref={ref} style={{ opacity: inView ? 1 : 0 }}>
- *     {inView ? 'Visible!' : 'Not visible'}
- *   </div>
- * )
- * ```
- */
-declare function useInView<T extends HTMLElement = HTMLDivElement>(options?: InViewOptions): InViewReturn<T>;
-
-/**
- * useMouse - 마우스 위치 추적 훅
- * Mouse position tracking hook
- *
- * @description
- * 마우스 위치를 실시간으로 추적. 커서 따라다니는 효과,
- * 마우스 기반 인터랙션 등에 활용.
- * Tracks mouse position in real-time. Useful for cursor-following effects
- * and mouse-based interactions.
- *
- * @example
- * ```tsx
- * const { x, y, elementX, elementY } = useMouse()
- *
- * return (
- *   <div style={{
- *     '--mouse-x': elementX,
- *     '--mouse-y': elementY
- *   }}>
- *     Mouse: {x}, {y}
- *   </div>
- * )
- * ```
- */
-declare function useMouse(options?: MouseOptions): MouseReturn;
-
-/**
- * useReducedMotion - 모션 감소 설정 감지 훅
- * Reduced motion preference detection hook
- *
- * @description
- * 사용자의 prefers-reduced-motion 설정을 감지.
- * 접근성을 위해 모션을 줄이거나 비활성화할 때 사용.
- * Detects user's prefers-reduced-motion setting.
- * Used to reduce or disable motion for accessibility.
- *
- * @example
- * ```tsx
- * const { prefersReducedMotion } = useReducedMotion()
- *
- * return (
- *   <motion.div
- *     animate={prefersReducedMotion ? {} : { scale: [1, 1.1, 1] }}
- *     transition={{ duration: prefersReducedMotion ? 0 : 0.3 }}
- *   >
- *     Accessible Motion
- *   </motion.div>
- * )
- * ```
- */
-declare function useReducedMotion(): ReducedMotionReturn;
-
-/**
- * useWindowSize - 윈도우 크기 추적 훅
- * Window size tracking hook
- *
- * @description
- * 브라우저 윈도우 크기 변경을 감지.
- * 반응형 레이아웃, 리사이즈 기반 애니메이션 등에 활용.
- * Detects browser window size changes.
- * Useful for responsive layouts and resize-based animations.
- *
- * @example
- * ```tsx
- * const { width, height, isMounted } = useWindowSize({ debounce: 100 })
- *
- * return (
- *   <div>
- *     {isMounted ? `${width} x ${height}` : 'Loading...'}
- *   </div>
- * )
- * ```
- */
-declare function useWindowSize(options?: WindowSizeOptions): WindowSizeReturn;
-
-interface GestureOptions {
-    enabled?: boolean;
-    threshold?: number;
-    timeout?: number;
-    swipeThreshold?: number;
-    swipeVelocity?: number;
-    swipeDirections?: ('up' | 'down' | 'left' | 'right')[];
-    pinchThreshold?: number;
-    minScale?: number;
-    maxScale?: number;
-    rotateThreshold?: number;
-    panThreshold?: number;
-    onSwipe?: (direction: 'up' | 'down' | 'left' | 'right', distance: number, velocity: number) => void;
-    onPinch?: (scale: number, delta: number) => void;
-    onRotate?: (angle: number, delta: number) => void;
-    onPan?: (deltaX: number, deltaY: number, totalX: number, totalY: number) => void;
-    onTap?: (x: number, y: number) => void;
-    onDoubleTap?: (x: number, y: number) => void;
-    onLongPress?: (x: number, y: number) => void;
-    onStart?: (x: number, y: number) => void;
-    onMove?: (x: number, y: number) => void;
-    onEnd?: (x: number, y: number) => void;
-}
-interface GestureReturn {
-    isActive: boolean;
-    gesture: string | null;
-    scale: number;
-    rotation: number;
-    deltaX: number;
-    deltaY: number;
-    distance: number;
-    velocity: number;
-    start: () => void;
-    stop: () => void;
-    reset: () => void;
-    onTouchStart: (e: React.TouchEvent | TouchEvent) => void;
-    onTouchMove: (e: React.TouchEvent | TouchEvent) => void;
-    onTouchEnd: (e: React.TouchEvent | TouchEvent) => void;
-    onMouseDown: (e: React.MouseEvent | MouseEvent) => void;
-    onMouseMove: (e: React.MouseEvent | MouseEvent) => void;
-    onMouseUp: (e: React.MouseEvent | MouseEvent) => void;
-}
-declare function useGesture(options?: GestureOptions): GestureReturn;
-
-interface GestureMotionOptions {
-    gestureType: 'hover' | 'drag' | 'pinch' | 'swipe' | 'tilt';
-    duration?: number;
-    easing?: string;
-    sensitivity?: number;
-    enabled?: boolean;
-    onGestureStart?: () => void;
-    onGestureEnd?: () => void;
-}
-interface GestureState {
-    isActive: boolean;
-    x: number;
-    y: number;
-    deltaX: number;
-    deltaY: number;
-    scale: number;
-    rotation: number;
-}
-declare function useGestureMotion(options: GestureMotionOptions): {
-    ref: react.RefObject<HTMLElement | null>;
-    gestureState: GestureState;
-    motionStyle: react.CSSProperties;
-    isActive: boolean;
-};
-
-declare const MOTION_PRESETS: PresetConfig;
-declare const PAGE_MOTIONS: Record<PageType, PageMotionsConfig>;
-/**
- * 프리셋과 커스텀 설정을 병합
- */
-declare function mergeWithPreset(preset: MotionPreset, custom?: Partial<MotionPreset>): MotionPreset;
-/**
- * 페이지 타입으로 프리셋 가져오기
- */
-declare function getPagePreset(pageType: PageType): PageMotionsConfig;
-/**
- * 모션 타입으로 기본 프리셋 가져오기
- */
-declare function getMotionPreset(type: string): MotionPreset;
-
-type EasingFunction = (t: number) => number;
-declare const linear: EasingFunction;
-declare const easeIn: EasingFunction;
-declare const easeOut: EasingFunction;
-declare const easeInOut: EasingFunction;
-declare const easeInQuad: EasingFunction;
-declare const easeOutQuad: EasingFunction;
-declare const easeInOutQuad: EasingFunction;
-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';
-declare function isValidEasing(easingName: string): boolean;
-declare function getEasing(easingName: unknown): EasingFunction;
-declare function applyEasing(t: number, easingName: string | EasingFunction): number;
-declare function safeApplyEasing(t: number, easingName: unknown): number;
-declare function getAvailableEasings(): string[];
-declare function isEasingFunction(value: any): value is EasingFunction;
-declare const easingPresets: {
-    readonly default: "easeOut";
-    readonly smooth: "easeInOutCubic";
-    readonly fast: "easeOutQuad";
-    readonly slow: "easeInOutSine";
-    readonly bouncy: "easeOutBounce";
-    readonly elastic: "easeOutElastic";
-    readonly fade: "easeInOut";
-    readonly scale: "easeOutBack";
-};
-declare function getPresetEasing(preset: keyof typeof easingPresets): EasingFunction;
-
-export { type BaseMotionOptions, type BaseMotionReturn, type BounceOptions, type EasingFunction, type EasingType, type EntranceType, type FadeInOptions, type GestureConfig, type GestureOptions$1 as GestureOptions, type GradientOptions, type HoverMotionOptions, type InViewOptions, type InViewReturn, type InteractionReturn, MOTION_PRESETS, type Motion, type MotionCallback, type MotionConfig, type MotionDirection$1 as MotionDirection, type MotionEasing, type MotionElement, MotionEngine, type MotionFrame, type MotionOptions, type MotionPreset, type MotionProgressCallback, type MotionState$1 as MotionState, type MotionStateCallback, type MotionTrigger, type MotionType$1 as MotionType, type MouseOptions, type MouseReturn, type OptimizationConfig, type OrchestrationConfig, PAGE_MOTIONS, type PageMotionElement, type PageMotionRef, type PageMotionsConfig, type PageType, type PerformanceMetrics, PerformanceOptimizer, type PerformanceOptimizerMetrics, type PresetConfig, type PulseOptions, type ReducedMotionReturn, type RepeatOptions, type ScaleOptions, type ScrollRevealMotionType, type ScrollRevealOptions, type SlideOptions, type SpringConfig, type SpringOptions, type ToggleMotionOptions, TransitionEffects, type TransitionOptions, type TransitionType, type UseUnifiedMotionOptions, type WindowSizeOptions, type WindowSizeReturn, applyEasing, easeIn, easeInOut, easeInOutQuad, easeInQuad, easeOut, easeOutQuad, easingPresets, getAvailableEasings, getEasing, getMotionPreset, getPagePreset, getPresetEasing, isEasingFunction, isValidEasing, linear, mergeWithPreset, motionEngine, performanceOptimizer, safeApplyEasing, transitionEffects, useBounceIn, useClickToggle, useFadeIn, useFocusToggle, useGesture, useGestureMotion, useGradient, useHoverMotion, useInView, useMotionState, useMouse, usePageMotions, usePulse, useReducedMotion, useRepeat, useScaleIn, useScrollProgress, useScrollReveal, useSimplePageMotion, useSlideDown, useSlideLeft, useSlideRight, useSlideUp, useSmartMotion, useSpringMotion, useToggleMotion, useUnifiedMotion, useWindowSize };