@hua-labs/motion-core 2.2.3 → 2.3.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { createContext, useState, useRef, useCallback, useEffect, useMemo, createElement, useContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // src/core/MotionEngine.ts
@@ -195,17 +195,11 @@ var TransitionEffects = class _TransitionEffects {
     return _TransitionEffects.instance;
   }
   /**
-   * 페이드 인/아웃 전환
+   * 공통 전환 실행 헬퍼
    */
-  async fade(element, options) {
+  async executeTransition(element, options, config) {
     const transitionId = this.generateTransitionId();
-    const initialOpacity = parseFloat(getComputedStyle(element).opacity) || 1;
-    const targetOpacity = options.direction === "reverse" ? 0 : 1;
-    if (options.direction === "reverse") {
-      element.style.opacity = initialOpacity.toString();
-    } else {
-      element.style.opacity = "0";
-    }
+    config.setup();
     this.enableGPUAcceleration(element);
     let resolveTransition;
     const completed = new Promise((resolve) => {
@@ -214,19 +208,17 @@ var TransitionEffects = class _TransitionEffects {
     const motionId = await motionEngine.motion(
       element,
       [
-        { progress: 0, properties: { opacity: options.direction === "reverse" ? initialOpacity : 0 } },
-        { progress: 1, properties: { opacity: targetOpacity } }
+        { progress: 0, properties: config.keyframes[0] },
+        { progress: 1, properties: config.keyframes[1] }
       ],
       {
         duration: options.duration,
         easing: options.easing || this.getDefaultEasing(),
         delay: options.delay,
         onStart: options.onTransitionStart,
-        onUpdate: (progress) => {
-          const currentOpacity = options.direction === "reverse" ? initialOpacity * (1 - progress) : targetOpacity * progress;
-          element.style.opacity = currentOpacity.toString();
-        },
+        onUpdate: config.onUpdate,
         onComplete: () => {
+          config.onCleanup();
           options.onTransitionComplete?.();
           this.activeTransitions.delete(transitionId);
           resolveTransition();
@@ -236,224 +228,170 @@ var TransitionEffects = class _TransitionEffects {
     this.activeTransitions.set(transitionId, motionId);
     return completed;
   }
+  /**
+   * 페이드 인/아웃 전환
+   */
+  async fade(element, options) {
+    const initialOpacity = parseFloat(getComputedStyle(element).opacity) || 1;
+    const targetOpacity = options.direction === "reverse" ? 0 : 1;
+    return this.executeTransition(element, options, {
+      setup: () => {
+        if (options.direction === "reverse") {
+          element.style.opacity = initialOpacity.toString();
+        } else {
+          element.style.opacity = "0";
+        }
+      },
+      keyframes: [
+        { opacity: options.direction === "reverse" ? initialOpacity : 0 },
+        { opacity: targetOpacity }
+      ],
+      onUpdate: (progress) => {
+        const currentOpacity = options.direction === "reverse" ? initialOpacity * (1 - progress) : targetOpacity * progress;
+        element.style.opacity = currentOpacity.toString();
+      },
+      onCleanup: () => {
+      }
+    });
+  }
   /**
    * 슬라이드 전환
    */
   async slide(element, options) {
-    const transitionId = this.generateTransitionId();
     const distance = options.distance || 100;
     const initialTransform = getComputedStyle(element).transform;
     const isReverse = options.direction === "reverse";
-    if (!isReverse) {
-      element.style.transform = `translateX(${distance}px)`;
-    }
-    this.enableGPUAcceleration(element);
-    let resolveTransition;
-    const completed = new Promise((resolve) => {
-      resolveTransition = resolve;
-    });
-    const motionId = await motionEngine.motion(
-      element,
-      [
-        { progress: 0, properties: { translateX: isReverse ? 0 : distance } },
-        { progress: 1, properties: { translateX: isReverse ? distance : 0 } }
-      ],
-      {
-        duration: options.duration,
-        easing: options.easing || this.getDefaultEasing(),
-        delay: options.delay,
-        onStart: options.onTransitionStart,
-        onUpdate: (progress) => {
-          const currentTranslateX = isReverse ? distance * progress : distance * (1 - progress);
-          element.style.transform = `translateX(${currentTranslateX}px)`;
-        },
-        onComplete: () => {
-          element.style.transform = initialTransform;
-          options.onTransitionComplete?.();
-          this.activeTransitions.delete(transitionId);
-          resolveTransition();
+    return this.executeTransition(element, options, {
+      setup: () => {
+        if (!isReverse) {
+          element.style.transform = `translateX(${distance}px)`;
         }
+      },
+      keyframes: [
+        { translateX: isReverse ? 0 : distance },
+        { translateX: isReverse ? distance : 0 }
+      ],
+      onUpdate: (progress) => {
+        const currentTranslateX = isReverse ? distance * progress : distance * (1 - progress);
+        element.style.transform = `translateX(${currentTranslateX}px)`;
+      },
+      onCleanup: () => {
+        element.style.transform = initialTransform;
       }
-    );
-    this.activeTransitions.set(transitionId, motionId);
-    return completed;
+    });
   }
   /**
    * 스케일 전환
    */
   async scale(element, options) {
-    const transitionId = this.generateTransitionId();
     const scaleValue = options.scale || 0.8;
     const initialTransform = getComputedStyle(element).transform;
     const isReverse = options.direction === "reverse";
-    if (!isReverse) {
-      element.style.transform = `scale(${scaleValue})`;
-    }
-    this.enableGPUAcceleration(element);
-    let resolveTransition;
-    const completed = new Promise((resolve) => {
-      resolveTransition = resolve;
-    });
-    const motionId = await motionEngine.motion(
-      element,
-      [
-        { progress: 0, properties: { scale: isReverse ? 1 : scaleValue } },
-        { progress: 1, properties: { scale: isReverse ? scaleValue : 1 } }
-      ],
-      {
-        duration: options.duration,
-        easing: options.easing || this.getDefaultEasing(),
-        delay: options.delay,
-        onStart: options.onTransitionStart,
-        onUpdate: (progress) => {
-          const currentScale = isReverse ? 1 - (1 - scaleValue) * progress : scaleValue + (1 - scaleValue) * progress;
-          element.style.transform = `scale(${currentScale})`;
-        },
-        onComplete: () => {
-          element.style.transform = initialTransform;
-          options.onTransitionComplete?.();
-          this.activeTransitions.delete(transitionId);
-          resolveTransition();
+    return this.executeTransition(element, options, {
+      setup: () => {
+        if (!isReverse) {
+          element.style.transform = `scale(${scaleValue})`;
         }
+      },
+      keyframes: [
+        { scale: isReverse ? 1 : scaleValue },
+        { scale: isReverse ? scaleValue : 1 }
+      ],
+      onUpdate: (progress) => {
+        const currentScale = isReverse ? 1 - (1 - scaleValue) * progress : scaleValue + (1 - scaleValue) * progress;
+        element.style.transform = `scale(${currentScale})`;
+      },
+      onCleanup: () => {
+        element.style.transform = initialTransform;
       }
-    );
-    this.activeTransitions.set(transitionId, motionId);
-    return completed;
+    });
   }
   /**
    * 플립 전환 (3D 회전)
    */
   async flip(element, options) {
-    const transitionId = this.generateTransitionId();
     const perspective = options.perspective || 1e3;
     const initialTransform = getComputedStyle(element).transform;
     const isReverse = options.direction === "reverse";
-    element.style.perspective = `${perspective}px`;
-    element.style.transformStyle = "preserve-3d";
-    if (!isReverse) {
-      element.style.transform = `rotateY(90deg)`;
-    }
-    this.enableGPUAcceleration(element);
-    let resolveTransition;
-    const completed = new Promise((resolve) => {
-      resolveTransition = resolve;
-    });
-    const motionId = await motionEngine.motion(
-      element,
-      [
-        { progress: 0, properties: { rotateY: isReverse ? 0 : 90 } },
-        { progress: 1, properties: { rotateY: isReverse ? 90 : 0 } }
-      ],
-      {
-        duration: options.duration,
-        easing: options.easing || this.getDefaultEasing(),
-        delay: options.delay,
-        onStart: options.onTransitionStart,
-        onUpdate: (progress) => {
-          const currentRotateY = isReverse ? 90 * progress : 90 * (1 - progress);
-          element.style.transform = `rotateY(${currentRotateY}deg)`;
-        },
-        onComplete: () => {
-          element.style.transform = initialTransform;
-          element.style.perspective = "";
-          element.style.transformStyle = "";
-          options.onTransitionComplete?.();
-          this.activeTransitions.delete(transitionId);
-          resolveTransition();
+    return this.executeTransition(element, options, {
+      setup: () => {
+        element.style.perspective = `${perspective}px`;
+        element.style.transformStyle = "preserve-3d";
+        if (!isReverse) {
+          element.style.transform = `rotateY(90deg)`;
         }
+      },
+      keyframes: [
+        { rotateY: isReverse ? 0 : 90 },
+        { rotateY: isReverse ? 90 : 0 }
+      ],
+      onUpdate: (progress) => {
+        const currentRotateY = isReverse ? 90 * progress : 90 * (1 - progress);
+        element.style.transform = `rotateY(${currentRotateY}deg)`;
+      },
+      onCleanup: () => {
+        element.style.transform = initialTransform;
+        element.style.perspective = "";
+        element.style.transformStyle = "";
       }
-    );
-    this.activeTransitions.set(transitionId, motionId);
-    return completed;
+    });
   }
   /**
    * 큐브 전환 (3D 큐브 회전)
    */
   async cube(element, options) {
-    const transitionId = this.generateTransitionId();
     const perspective = options.perspective || 1200;
     const initialTransform = getComputedStyle(element).transform;
     const isReverse = options.direction === "reverse";
-    element.style.perspective = `${perspective}px`;
-    element.style.transformStyle = "preserve-3d";
-    if (!isReverse) {
-      element.style.transform = `rotateX(90deg) rotateY(45deg)`;
-    }
-    this.enableGPUAcceleration(element);
-    let resolveTransition;
-    const completed = new Promise((resolve) => {
-      resolveTransition = resolve;
-    });
-    const motionId = await motionEngine.motion(
-      element,
-      [
-        { progress: 0, properties: { rotateX: isReverse ? 0 : 90, rotateY: isReverse ? 0 : 45 } },
-        { progress: 1, properties: { rotateX: isReverse ? 90 : 0, rotateY: isReverse ? 45 : 0 } }
-      ],
-      {
-        duration: options.duration,
-        easing: options.easing || this.getDefaultEasing(),
-        delay: options.delay,
-        onStart: options.onTransitionStart,
-        onUpdate: (progress) => {
-          const currentRotateX = isReverse ? 90 * progress : 90 * (1 - progress);
-          const currentRotateY = isReverse ? 45 * progress : 45 * (1 - progress);
-          element.style.transform = `rotateX(${currentRotateX}deg) rotateY(${currentRotateY}deg)`;
-        },
-        onComplete: () => {
-          element.style.transform = initialTransform;
-          element.style.perspective = "";
-          element.style.transformStyle = "";
-          options.onTransitionComplete?.();
-          this.activeTransitions.delete(transitionId);
-          resolveTransition();
+    return this.executeTransition(element, options, {
+      setup: () => {
+        element.style.perspective = `${perspective}px`;
+        element.style.transformStyle = "preserve-3d";
+        if (!isReverse) {
+          element.style.transform = `rotateX(90deg) rotateY(45deg)`;
         }
+      },
+      keyframes: [
+        { rotateX: isReverse ? 0 : 90, rotateY: isReverse ? 0 : 45 },
+        { rotateX: isReverse ? 90 : 0, rotateY: isReverse ? 45 : 0 }
+      ],
+      onUpdate: (progress) => {
+        const currentRotateX = isReverse ? 90 * progress : 90 * (1 - progress);
+        const currentRotateY = isReverse ? 45 * progress : 45 * (1 - progress);
+        element.style.transform = `rotateX(${currentRotateX}deg) rotateY(${currentRotateY}deg)`;
+      },
+      onCleanup: () => {
+        element.style.transform = initialTransform;
+        element.style.perspective = "";
+        element.style.transformStyle = "";
       }
-    );
-    this.activeTransitions.set(transitionId, motionId);
-    return completed;
+    });
   }
   /**
    * 모프 전환 (복합 변형)
    */
   async morph(element, options) {
-    const transitionId = this.generateTransitionId();
     const initialTransform = getComputedStyle(element).transform;
     const isReverse = options.direction === "reverse";
-    if (!isReverse) {
-      element.style.transform = `scale(0.9) rotate(5deg)`;
-    }
-    this.enableGPUAcceleration(element);
-    let resolveTransition;
-    const completed = new Promise((resolve) => {
-      resolveTransition = resolve;
-    });
-    const motionId = await motionEngine.motion(
-      element,
-      [
-        { progress: 0, properties: { scale: isReverse ? 1 : 0.9, rotate: isReverse ? 0 : 5 } },
-        { progress: 1, properties: { scale: isReverse ? 0.9 : 1, rotate: isReverse ? 5 : 0 } }
-      ],
-      {
-        duration: options.duration,
-        easing: options.easing || this.getDefaultEasing(),
-        delay: options.delay,
-        onStart: options.onTransitionStart,
-        onUpdate: (progress) => {
-          const currentScale = isReverse ? 1 - 0.1 * progress : 0.9 + 0.1 * progress;
-          const currentRotate = isReverse ? 5 * progress : 5 * (1 - progress);
-          element.style.transform = `scale(${currentScale}) rotate(${currentRotate}deg)`;
-        },
-        onComplete: () => {
-          element.style.transform = initialTransform;
-          options.onTransitionComplete?.();
-          this.activeTransitions.delete(transitionId);
-          resolveTransition();
+    return this.executeTransition(element, options, {
+      setup: () => {
+        if (!isReverse) {
+          element.style.transform = `scale(0.9) rotate(5deg)`;
         }
+      },
+      keyframes: [
+        { scale: isReverse ? 1 : 0.9, rotate: isReverse ? 0 : 5 },
+        { scale: isReverse ? 0.9 : 1, rotate: isReverse ? 5 : 0 }
+      ],
+      onUpdate: (progress) => {
+        const currentScale = isReverse ? 1 - 0.1 * progress : 0.9 + 0.1 * progress;
+        const currentRotate = isReverse ? 5 * progress : 5 * (1 - progress);
+        element.style.transform = `scale(${currentScale}) rotate(${currentRotate}deg)`;
+      },
+      onCleanup: () => {
+        element.style.transform = initialTransform;
       }
-    );
-    this.activeTransitions.set(transitionId, motionId);
-    return completed;
+    });
   }
   /**
    * 전환 중지
@@ -515,390 +453,91 @@ var TransitionEffects = class _TransitionEffects {
 };
 var transitionEffects = TransitionEffects.getInstance();
 
-// src/core/PerformanceOptimizer.ts
-var PerformanceOptimizer = class _PerformanceOptimizer {
-  constructor() {
-    this.performanceObserver = null;
-    this.layerRegistry = /* @__PURE__ */ new Set();
-    this.isMonitoring = false;
-    this.config = {
-      enableGPUAcceleration: true,
-      enableLayerSeparation: true,
-      enableMemoryOptimization: true,
-      targetFPS: 60,
-      maxLayerCount: 100,
-      memoryThreshold: 50 * 1024 * 1024
-      // 50MB
-    };
-    this.metrics = {
-      fps: 0,
-      layerCount: 0,
-      activeMotions: 0
-    };
-    this.initializePerformanceMonitoring();
+// src/presets/index.ts
+var MOTION_PRESETS = {
+  hero: {
+    entrance: "fadeIn",
+    delay: 200,
+    duration: 800,
+    hover: false,
+    click: false
+  },
+  title: {
+    entrance: "slideUp",
+    delay: 400,
+    duration: 700,
+    hover: false,
+    click: false
+  },
+  button: {
+    entrance: "scaleIn",
+    delay: 600,
+    duration: 300,
+    hover: true,
+    click: true
+  },
+  card: {
+    entrance: "slideUp",
+    delay: 800,
+    duration: 500,
+    hover: true,
+    click: false
+  },
+  text: {
+    entrance: "fadeIn",
+    delay: 200,
+    duration: 600,
+    hover: false,
+    click: false
+  },
+  image: {
+    entrance: "scaleIn",
+    delay: 400,
+    duration: 600,
+    hover: true,
+    click: false
   }
-  static getInstance() {
-    if (!_PerformanceOptimizer.instance) {
-      _PerformanceOptimizer.instance = new _PerformanceOptimizer();
-    }
-    return _PerformanceOptimizer.instance;
-  }
-  /**
-   * 성능 모니터링 초기화
-   */
-  initializePerformanceMonitoring() {
-    if (typeof PerformanceObserver !== "undefined") {
-      try {
-        this.performanceObserver = new PerformanceObserver((list) => {
-          const entries = list.getEntries();
-          this.updatePerformanceMetrics(entries);
-        });
-        this.performanceObserver.observe({ entryTypes: ["measure", "navigation"] });
-      } catch (error) {
-        if (process.env.NODE_ENV === "development") {
-          console.warn("Performance monitoring not supported:", error);
-        }
-      }
-    }
-  }
-  /**
-   * 성능 메트릭 업데이트
-   */
-  updatePerformanceMetrics(entries) {
-    entries.forEach((entry) => {
-      if (entry.entryType === "measure") {
-        this.calculateFPS();
-      }
-    });
-  }
-  /**
-   * FPS 계산
-   */
-  calculateFPS() {
-    const now = performance.now();
-    const deltaTime = now - (this.lastFrameTime || now);
-    this.lastFrameTime = now;
-    if (deltaTime > 0) {
-      this.metrics.fps = Math.round(1e3 / deltaTime);
-    }
-  }
-  /**
-   * GPU 가속 활성화
-   */
-  enableGPUAcceleration(element) {
-    if (!this.config.enableGPUAcceleration) return;
-    try {
-      element.style.willChange = "transform, opacity";
-      element.style.transform = "translateZ(0)";
-      element.style.backfaceVisibility = "hidden";
-      element.style.transformStyle = "preserve-3d";
-      this.registerLayer(element);
-    } catch (error) {
-      if (process.env.NODE_ENV === "development") {
-        console.warn("GPU acceleration failed:", error);
-      }
-    }
-  }
-  /**
-   * 레이어 분리 및 최적화
-   */
-  createOptimizedLayer(element) {
-    if (!this.config.enableLayerSeparation) return;
-    try {
-      element.style.transform = "translateZ(0)";
-      element.style.backfaceVisibility = "hidden";
-      element.style.perspective = "1000px";
-      this.registerLayer(element);
-      this.checkLayerLimit();
-    } catch (error) {
-      if (process.env.NODE_ENV === "development") {
-        console.warn("Layer optimization failed:", error);
-      }
-    }
-  }
-  /**
-   * 레이어 등록
-   */
-  registerLayer(element) {
-    if (this.layerRegistry.has(element)) return;
-    this.layerRegistry.add(element);
-    this.metrics.layerCount = this.layerRegistry.size;
-    this.checkMemoryUsage();
-  }
-  /**
-   * 레이어 제거
-   */
-  removeLayer(element) {
-    if (this.layerRegistry.has(element)) {
-      this.layerRegistry.delete(element);
-      this.metrics.layerCount = this.layerRegistry.size;
-      element.style.willChange = "auto";
-      element.style.transform = "";
-      element.style.backfaceVisibility = "";
-      element.style.transformStyle = "";
-      element.style.perspective = "";
-    }
-  }
-  /**
-   * 레이어 수 제한 체크
-   */
-  checkLayerLimit() {
-    if (this.metrics.layerCount > this.config.maxLayerCount) {
-      if (process.env.NODE_ENV === "development") {
-        console.warn(`Layer count (${this.metrics.layerCount}) exceeds limit (${this.config.maxLayerCount})`);
-      }
-      this.cleanupOldLayers();
-    }
-  }
-  /**
-   * 오래된 레이어 정리
-   */
-  cleanupOldLayers() {
-    const layersToRemove = Array.from(this.layerRegistry).slice(0, 10);
-    layersToRemove.forEach((layer) => {
-      this.removeLayer(layer);
-    });
-  }
-  /**
-   * 메모리 사용량 체크
-   */
-  checkMemoryUsage() {
-    if (!this.config.enableMemoryOptimization) return;
-    if ("memory" in performance) {
-      const memory = performance.memory;
-      this.metrics.memoryUsage = memory.usedJSHeapSize;
-      if (memory.usedJSHeapSize > this.config.memoryThreshold) {
-        if (process.env.NODE_ENV === "development") {
-          console.warn("Memory usage high, cleaning up...");
-        }
-        this.cleanupMemory();
-      }
-    }
-  }
-  /**
-   * 메모리 정리
-   */
-  cleanupMemory() {
-    if ("gc" in window) {
-      try {
-        window.gc();
-      } catch (error) {
-      }
-    }
-    this.cleanupOldLayers();
-  }
-  /**
-   * 성능 최적화 설정 업데이트
-   */
-  updateConfig(newConfig) {
-    this.config = { ...this.config, ...newConfig };
-    if (!this.config.enableGPUAcceleration) {
-      this.disableAllGPUAcceleration();
-    }
-    if (!this.config.enableLayerSeparation) {
-      this.disableAllLayers();
-    }
-  }
-  /**
-   * 모든 GPU 가속 비활성화
-   */
-  disableAllGPUAcceleration() {
-    this.layerRegistry.forEach((element) => {
-      element.style.willChange = "auto";
-      element.style.transform = "";
-    });
-  }
-  /**
-   * 모든 레이어 비활성화
-   */
-  disableAllLayers() {
-    this.layerRegistry.forEach((element) => {
-      this.removeLayer(element);
-    });
-  }
-  /**
-   * 성능 메트릭 가져오기
-   */
-  getMetrics() {
-    return { ...this.metrics };
-  }
-  /**
-   * 성능 모니터링 시작
-   */
-  startMonitoring() {
-    if (this.isMonitoring) return;
-    this.isMonitoring = true;
-    this.monitoringInterval = setInterval(() => {
-      this.updateMetrics();
-    }, 1e3);
-  }
-  /**
-   * 성능 모니터링 중지
-   */
-  stopMonitoring() {
-    if (!this.isMonitoring) return;
-    this.isMonitoring = false;
-    if (this.monitoringInterval) {
-      clearInterval(this.monitoringInterval);
-      this.monitoringInterval = void 0;
-    }
-  }
-  /**
-   * 메트릭 업데이트
-   */
-  updateMetrics() {
-    if ("memory" in performance) {
-      const memory = performance.memory;
-      this.metrics.memoryUsage = memory.usedJSHeapSize;
-    }
-    this.metrics.layerCount = this.layerRegistry.size;
-  }
-  /**
-   * 성능 리포트 생성
-   */
-  generateReport() {
-    const metrics = this.getMetrics();
-    return `
-=== HUA Motion Performance Report ===
-FPS: ${metrics.fps}
-Active Layers: ${metrics.layerCount}
-Memory Usage: ${this.formatBytes(metrics.memoryUsage || 0)}
-Active Motions: ${metrics.activeMotions}
-GPU Acceleration: ${this.config.enableGPUAcceleration ? "Enabled" : "Disabled"}
-Layer Separation: ${this.config.enableLayerSeparation ? "Enabled" : "Disabled"}
-Memory Optimization: ${this.config.enableMemoryOptimization ? "Enabled" : "Disabled"}
-=====================================
-    `.trim();
-  }
-  /**
-   * 바이트 단위 포맷팅
-   */
-  formatBytes(bytes) {
-    if (bytes === 0) return "0 B";
-    const k = 1024;
-    const sizes = ["B", "KB", "MB", "GB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
-  }
-  /**
-   * 성능 최적화 권장사항
-   */
-  getOptimizationRecommendations() {
-    const recommendations = [];
-    const metrics = this.getMetrics();
-    if (metrics.fps < this.config.targetFPS) {
-      recommendations.push("FPS\uAC00 \uB0AE\uC2B5\uB2C8\uB2E4. GPU \uAC00\uC18D\uC744 \uD65C\uC131\uD654\uD558\uAC70\uB098 \uB808\uC774\uC5B4 \uC218\uB97C \uC904\uC774\uC138\uC694.");
-    }
-    if (metrics.layerCount > this.config.maxLayerCount * 0.8) {
-      recommendations.push("\uB808\uC774\uC5B4 \uC218\uAC00 \uB9CE\uC2B5\uB2C8\uB2E4. \uBD88\uD544\uC694\uD55C \uB808\uC774\uC5B4\uB97C \uC815\uB9AC\uD558\uC138\uC694.");
-    }
-    if (metrics.memoryUsage && metrics.memoryUsage > this.config.memoryThreshold * 0.8) {
-      recommendations.push("\uBA54\uBAA8\uB9AC \uC0AC\uC6A9\uB7C9\uC774 \uB192\uC2B5\uB2C8\uB2E4. \uBA54\uBAA8\uB9AC \uC815\uB9AC\uB97C \uACE0\uB824\uD558\uC138\uC694.");
-    }
-    return recommendations;
-  }
-  /**
-   * 정리
-   */
-  destroy() {
-    this.stopMonitoring();
-    if (this.performanceObserver) {
-      this.performanceObserver.disconnect();
-      this.performanceObserver = null;
-    }
-    this.layerRegistry.forEach((element) => {
-      this.removeLayer(element);
-    });
-    this.layerRegistry.clear();
-  }
-};
-var performanceOptimizer = PerformanceOptimizer.getInstance();
-
-// src/presets/index.ts
-var MOTION_PRESETS = {
-  hero: {
-    entrance: "fadeIn",
-    delay: 200,
-    duration: 800,
-    hover: false,
-    click: false
-  },
-  title: {
-    entrance: "slideUp",
-    delay: 400,
-    duration: 700,
-    hover: false,
-    click: false
-  },
-  button: {
-    entrance: "scaleIn",
-    delay: 600,
-    duration: 300,
-    hover: true,
-    click: true
-  },
-  card: {
-    entrance: "slideUp",
-    delay: 800,
-    duration: 500,
-    hover: true,
-    click: false
-  },
-  text: {
-    entrance: "fadeIn",
-    delay: 200,
-    duration: 600,
-    hover: false,
-    click: false
-  },
-  image: {
-    entrance: "scaleIn",
-    delay: 400,
-    duration: 600,
-    hover: true,
-    click: false
-  }
-};
-var PAGE_MOTIONS = {
-  // 홈페이지
-  home: {
-    hero: { type: "hero" },
-    title: { type: "title" },
-    description: { type: "text" },
-    cta: { type: "button" },
-    feature1: { type: "card" },
-    feature2: { type: "card" },
-    feature3: { type: "card" }
-  },
-  // 대시보드
-  dashboard: {
-    header: { type: "hero" },
-    sidebar: { type: "card", entrance: "slideLeft" },
-    main: { type: "text", entrance: "fadeIn" },
-    card1: { type: "card" },
-    card2: { type: "card" },
-    card3: { type: "card" },
-    chart: { type: "image" }
-  },
-  // 제품 페이지
-  product: {
-    hero: { type: "hero" },
-    title: { type: "title" },
-    image: { type: "image" },
-    description: { type: "text" },
-    price: { type: "text" },
-    buyButton: { type: "button" },
-    features: { type: "card" }
-  },
-  // 블로그
-  blog: {
-    header: { type: "hero" },
-    title: { type: "title" },
-    content: { type: "text" },
-    sidebar: { type: "card", entrance: "slideRight" },
-    related1: { type: "card" },
-    related2: { type: "card" },
-    related3: { type: "card" }
+};
+var PAGE_MOTIONS = {
+  // 홈페이지
+  home: {
+    hero: { type: "hero" },
+    title: { type: "title" },
+    description: { type: "text" },
+    cta: { type: "button" },
+    feature1: { type: "card" },
+    feature2: { type: "card" },
+    feature3: { type: "card" }
+  },
+  // 대시보드
+  dashboard: {
+    header: { type: "hero" },
+    sidebar: { type: "card", entrance: "slideLeft" },
+    main: { type: "text", entrance: "fadeIn" },
+    card1: { type: "card" },
+    card2: { type: "card" },
+    card3: { type: "card" },
+    chart: { type: "image" }
+  },
+  // 제품 페이지
+  product: {
+    hero: { type: "hero" },
+    title: { type: "title" },
+    image: { type: "image" },
+    description: { type: "text" },
+    price: { type: "text" },
+    buyButton: { type: "button" },
+    features: { type: "card" }
+  },
+  // 블로그
+  blog: {
+    header: { type: "hero" },
+    title: { type: "title" },
+    content: { type: "text" },
+    sidebar: { type: "card", entrance: "slideRight" },
+    related1: { type: "card" },
+    related2: { type: "card" },
+    related3: { type: "card" }
   }
 };
 function mergeWithPreset(preset, custom = {}) {
@@ -1660,39 +1299,261 @@ function useSmartMotion(options = {}) {
     isClicked: state.isClicked
   };
 }
-function getInitialStyle(type, distance) {
-  switch (type) {
-    case "slideUp":
-      return { opacity: 0, transform: `translateY(${distance}px)` };
-    case "slideLeft":
-      return { opacity: 0, transform: `translateX(${distance}px)` };
-    case "slideRight":
-      return { opacity: 0, transform: `translateX(-${distance}px)` };
-    case "scaleIn":
-      return { opacity: 0, transform: "scale(0)" };
-    case "bounceIn":
-      return { opacity: 0, transform: "scale(0)" };
-    case "fadeIn":
-    default:
-      return { opacity: 0, transform: "none" };
+
+// src/profiles/neutral.ts
+var neutral = {
+  name: "neutral",
+  base: {
+    duration: 700,
+    easing: "ease-out",
+    threshold: 0.1,
+    triggerOnce: true
+  },
+  entrance: {
+    slide: {
+      distance: 32,
+      easing: "ease-out"
+    },
+    fade: {
+      initialOpacity: 0
+    },
+    scale: {
+      from: 0.95
+    },
+    bounce: {
+      intensity: 0.3,
+      easing: "cubic-bezier(0.34, 1.56, 0.64, 1)"
+    }
+  },
+  stagger: {
+    perItem: 100,
+    baseDelay: 0
+  },
+  interaction: {
+    hover: {
+      scale: 1.05,
+      y: -2,
+      duration: 200,
+      easing: "ease-out"
+    }
+  },
+  spring: {
+    mass: 1,
+    stiffness: 100,
+    damping: 10,
+    restDelta: 0.01,
+    restSpeed: 0.01
+  },
+  reducedMotion: "fade-only"
+};
+
+// src/profiles/hua.ts
+var hua = {
+  name: "hua",
+  base: {
+    duration: 640,
+    easing: "cubic-bezier(0.22, 0.68, 0.35, 1.10)",
+    threshold: 0.12,
+    triggerOnce: true
+  },
+  entrance: {
+    slide: {
+      distance: 28,
+      easing: "cubic-bezier(0.22, 0.68, 0.35, 1.14)"
+    },
+    fade: {
+      initialOpacity: 0
+    },
+    scale: {
+      from: 0.97
+    },
+    bounce: {
+      intensity: 0.2,
+      easing: "cubic-bezier(0.22, 0.68, 0.35, 1.12)"
+    }
+  },
+  stagger: {
+    perItem: 80,
+    baseDelay: 0
+  },
+  interaction: {
+    hover: {
+      scale: 1.008,
+      y: -1,
+      duration: 180,
+      easing: "cubic-bezier(0.22, 0.68, 0.35, 1.10)"
+    }
+  },
+  spring: {
+    mass: 1,
+    stiffness: 180,
+    damping: 18,
+    restDelta: 5e-3,
+    restSpeed: 5e-3
+  },
+  reducedMotion: "fade-only"
+};
+
+// src/profiles/index.ts
+var PROFILES = {
+  neutral,
+  hua
+};
+function resolveProfile(profile) {
+  if (typeof profile === "string") {
+    return PROFILES[profile] ?? neutral;
   }
+  return profile;
 }
-function getVisibleStyle() {
-  return { opacity: 1, transform: "none" };
-}
-function getEasingForType(type, easing2) {
-  if (easing2) return easing2;
-  if (type === "bounceIn") return "cubic-bezier(0.34, 1.56, 0.64, 1)";
-  return "ease-out";
+function mergeProfileOverrides(base, overrides) {
+  return deepMerge(
+    base,
+    overrides
+  );
 }
-function getMultiEffectInitialStyle(effects, defaultDistance) {
-  const style = {};
-  const transforms = [];
-  if (effects.fade) {
-    style.opacity = 0;
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    const sourceVal = source[key];
+    const targetVal = result[key];
+    if (sourceVal !== null && sourceVal !== void 0 && typeof sourceVal === "object" && !Array.isArray(sourceVal) && typeof targetVal === "object" && targetVal !== null && !Array.isArray(targetVal)) {
+      result[key] = deepMerge(
+        targetVal,
+        sourceVal
+      );
+    } else if (sourceVal !== void 0) {
+      result[key] = sourceVal;
+    }
   }
-  if (effects.slide) {
-    const config = typeof effects.slide === "object" ? effects.slide : {};
+  return result;
+}
+
+// src/profiles/MotionProfileContext.ts
+var MotionProfileContext = createContext(neutral);
+function MotionProfileProvider({
+  profile = "neutral",
+  overrides,
+  children
+}) {
+  const resolved = useMemo(() => {
+    const base = resolveProfile(profile);
+    return overrides ? mergeProfileOverrides(base, overrides) : base;
+  }, [profile, overrides]);
+  return createElement(
+    MotionProfileContext.Provider,
+    { value: resolved },
+    children
+  );
+}
+function useMotionProfile() {
+  return useContext(MotionProfileContext);
+}
+
+// src/utils/sharedIntersectionObserver.ts
+var pool = /* @__PURE__ */ new Map();
+function makeKey(threshold, rootMargin) {
+  const th = Array.isArray(threshold) ? threshold.join(",") : String(threshold);
+  return `${th}|${rootMargin}`;
+}
+function handleIntersections(group, entries) {
+  for (const entry of entries) {
+    const subs = group.elements.get(entry.target);
+    if (!subs) continue;
+    const snapshot = [...subs];
+    for (const sub of snapshot) {
+      sub.callback(entry);
+      if (sub.once && entry.isIntersecting) {
+        removeSub(group, entry.target, sub);
+      }
+    }
+  }
+}
+function removeSub(group, element, sub) {
+  const subs = group.elements.get(element);
+  if (!subs) return;
+  const idx = subs.indexOf(sub);
+  if (idx >= 0) subs.splice(idx, 1);
+  if (subs.length === 0) {
+    group.elements.delete(element);
+    group.observer.unobserve(element);
+    if (group.elements.size === 0) {
+      group.observer.disconnect();
+      for (const [key, g] of pool) {
+        if (g === group) {
+          pool.delete(key);
+          break;
+        }
+      }
+    }
+  }
+}
+function observeElement(element, callback, options, once) {
+  if (typeof IntersectionObserver === "undefined") {
+    return () => {
+    };
+  }
+  const threshold = options?.threshold ?? 0;
+  const rootMargin = options?.rootMargin ?? "0px";
+  const key = makeKey(threshold, rootMargin);
+  let group = pool.get(key);
+  if (!group) {
+    const observer = new IntersectionObserver(
+      (entries) => handleIntersections(group, entries),
+      { threshold, rootMargin }
+    );
+    group = { observer, elements: /* @__PURE__ */ new Map() };
+    pool.set(key, group);
+  }
+  const sub = { callback, once: once ?? false };
+  const subs = group.elements.get(element);
+  if (subs) {
+    subs.push(sub);
+  } else {
+    group.elements.set(element, [sub]);
+    group.observer.observe(element);
+  }
+  let unsubscribed = false;
+  return () => {
+    if (unsubscribed) return;
+    unsubscribed = true;
+    removeSub(group, element, sub);
+  };
+}
+
+// src/hooks/useUnifiedMotion.ts
+function getInitialStyle(type, distance) {
+  switch (type) {
+    case "slideUp":
+      return { opacity: 0, transform: `translateY(${distance}px)` };
+    case "slideLeft":
+      return { opacity: 0, transform: `translateX(${distance}px)` };
+    case "slideRight":
+      return { opacity: 0, transform: `translateX(-${distance}px)` };
+    case "scaleIn":
+      return { opacity: 0, transform: "scale(0)" };
+    case "bounceIn":
+      return { opacity: 0, transform: "scale(0)" };
+    case "fadeIn":
+    default:
+      return { opacity: 0, transform: "none" };
+  }
+}
+function getVisibleStyle() {
+  return { opacity: 1, transform: "none" };
+}
+function getEasingForType(type, easing2) {
+  if (easing2) return easing2;
+  if (type === "bounceIn") return "cubic-bezier(0.34, 1.56, 0.64, 1)";
+  return "ease-out";
+}
+function getMultiEffectInitialStyle(effects, defaultDistance) {
+  const style = {};
+  const transforms = [];
+  if (effects.fade) {
+    style.opacity = 0;
+  }
+  if (effects.slide) {
+    const config = typeof effects.slide === "object" ? effects.slide : {};
     const direction = config.direction ?? "up";
     const distance = config.distance ?? defaultDistance;
     switch (direction) {
@@ -1753,16 +1614,17 @@ function getMultiEffectEasing(effects, easing2) {
   return "ease-out";
 }
 function useUnifiedMotion(options) {
+  const profile = useMotionProfile();
   const {
     type,
     effects,
-    duration = 600,
+    duration = profile.base.duration,
     autoStart = true,
     delay = 0,
     easing: easing2,
-    threshold = 0.1,
-    triggerOnce = true,
-    distance = 50,
+    threshold = profile.base.threshold,
+    triggerOnce = profile.base.triggerOnce,
+    distance = profile.entrance.slide.distance,
     onComplete,
     onStart,
     onStop,
@@ -1774,7 +1636,6 @@ function useUnifiedMotion(options) {
   const [isVisible, setIsVisible] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
   const [progress, setProgress] = useState(0);
-  const observerRef = useRef(null);
   const timeoutRef = useRef(null);
   const startRef = useRef(() => {
   });
@@ -1807,23 +1668,14 @@ function useUnifiedMotion(options) {
   }, [stop, onReset]);
   useEffect(() => {
     if (!ref.current || !autoStart) return;
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            startRef.current();
-            if (triggerOnce) {
-              observerRef.current?.disconnect();
-            }
-          }
-        });
+    return observeElement(
+      ref.current,
+      (entry) => {
+        if (entry.isIntersecting) startRef.current();
       },
-      { threshold }
+      { threshold },
+      triggerOnce
     );
-    observerRef.current.observe(ref.current);
-    return () => {
-      observerRef.current?.disconnect();
-    };
   }, [autoStart, threshold, triggerOnce]);
   useEffect(() => {
     return () => stop();
@@ -1863,14 +1715,15 @@ function useUnifiedMotion(options) {
   };
 }
 function useFadeIn(options = {}) {
+  const profile = useMotionProfile();
   const {
     delay = 0,
-    duration = 700,
-    threshold = 0.1,
-    triggerOnce = true,
-    easing: easing2 = "ease-out",
+    duration = profile.base.duration,
+    threshold = profile.base.threshold,
+    triggerOnce = profile.base.triggerOnce,
+    easing: easing2 = profile.base.easing,
     autoStart = true,
-    initialOpacity = 0,
+    initialOpacity = profile.entrance.fade.initialOpacity,
     targetOpacity = 1,
     onComplete,
     onStart,
@@ -1882,7 +1735,6 @@ function useFadeIn(options = {}) {
   const [isAnimating, setIsAnimating] = useState(false);
   const [progress, setProgress] = useState(0);
   const [nodeReady, setNodeReady] = useState(false);
-  const observerRef = useRef(null);
   const motionRef = useRef(null);
   const timeoutRef = useRef(null);
   const startRef = useRef(() => {
@@ -1941,31 +1793,15 @@ function useFadeIn(options = {}) {
   }, [stop, onReset]);
   useEffect(() => {
     if (!ref.current || !autoStart) return;
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            startRef.current();
-            if (triggerOnce) {
-              observerRef.current?.disconnect();
-            }
-          }
-        });
+    return observeElement(
+      ref.current,
+      (entry) => {
+        if (entry.isIntersecting) startRef.current();
       },
-      { threshold }
+      { threshold },
+      triggerOnce
     );
-    observerRef.current.observe(ref.current);
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-      }
-    };
   }, [autoStart, threshold, triggerOnce, nodeReady]);
-  useEffect(() => {
-    if (!autoStart) {
-      start();
-    }
-  }, [autoStart, start]);
   useEffect(() => {
     return () => {
       stop();
@@ -1991,15 +1827,16 @@ function useFadeIn(options = {}) {
   };
 }
 function useSlideUp(options = {}) {
+  const profile = useMotionProfile();
   const {
     delay = 0,
-    duration = 700,
-    threshold = 0.1,
-    triggerOnce = true,
-    easing: easing2 = "ease-out",
+    duration = profile.base.duration,
+    threshold = profile.base.threshold,
+    triggerOnce = profile.base.triggerOnce,
+    easing: easing2 = profile.entrance.slide.easing,
     autoStart = true,
     direction = "up",
-    distance = 50,
+    distance = profile.entrance.slide.distance,
     onComplete,
     onStart,
     onStop,
@@ -2010,7 +1847,6 @@ function useSlideUp(options = {}) {
   const [isAnimating, setIsAnimating] = useState(false);
   const [progress, setProgress] = useState(0);
   const [nodeReady, setNodeReady] = useState(false);
-  const observerRef = useRef(null);
   const timeoutRef = useRef(null);
   const startRef = useRef(() => {
   });
@@ -2078,31 +1914,15 @@ function useSlideUp(options = {}) {
   }, [stop, onReset]);
   useEffect(() => {
     if (!ref.current || !autoStart) return;
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            startRef.current();
-            if (triggerOnce) {
-              observerRef.current?.disconnect();
-            }
-          }
-        });
+    return observeElement(
+      ref.current,
+      (entry) => {
+        if (entry.isIntersecting) startRef.current();
       },
-      { threshold }
+      { threshold },
+      triggerOnce
     );
-    observerRef.current.observe(ref.current);
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-      }
-    };
   }, [autoStart, threshold, triggerOnce, nodeReady]);
-  useEffect(() => {
-    if (!autoStart) {
-      start();
-    }
-  }, [autoStart, start]);
   useEffect(() => {
     return () => {
       stop();
@@ -2145,15 +1965,16 @@ function useSlideRight(options = {}) {
   return useSlideUp({ ...options, direction: "right" });
 }
 function useScaleIn(options = {}) {
+  const profile = useMotionProfile();
   const {
     initialScale = 0,
     targetScale = 1,
-    duration = 700,
+    duration = profile.base.duration,
     delay = 0,
     autoStart = true,
-    easing: easing2 = "ease-out",
-    threshold = 0.1,
-    triggerOnce = true,
+    easing: easing2 = profile.base.easing,
+    threshold = profile.base.threshold,
+    triggerOnce = profile.base.triggerOnce,
     onComplete,
     onStart,
     onStop,
@@ -2165,7 +1986,6 @@ function useScaleIn(options = {}) {
   const [isAnimating, setIsAnimating] = useState(false);
   const [isVisible, setIsVisible] = useState(autoStart ? false : true);
   const [progress, setProgress] = useState(autoStart ? 0 : 1);
-  const observerRef = useRef(null);
   const timeoutRef = useRef(null);
   const startRef = useRef(() => {
   });
@@ -2213,25 +2033,14 @@ function useScaleIn(options = {}) {
   }, [stop, initialScale, onReset]);
   useEffect(() => {
     if (!ref.current || !autoStart) return;
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            startRef.current();
-            if (triggerOnce) {
-              observerRef.current?.disconnect();
-            }
-          }
-        });
+    return observeElement(
+      ref.current,
+      (entry) => {
+        if (entry.isIntersecting) startRef.current();
       },
-      { threshold }
+      { threshold },
+      triggerOnce
     );
-    observerRef.current.observe(ref.current);
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-      }
-    };
   }, [autoStart, threshold, triggerOnce]);
   useEffect(() => {
     return () => {
@@ -2259,15 +2068,15 @@ function useScaleIn(options = {}) {
   };
 }
 function useBounceIn(options = {}) {
+  const profile = useMotionProfile();
   const {
     duration = 600,
     delay = 0,
     autoStart = true,
-    intensity = 0.3,
-    threshold = 0.1,
-    triggerOnce = true,
-    easing: easing2 = "cubic-bezier(0.34, 1.56, 0.64, 1)",
-    // 바운스 이징
+    intensity = profile.entrance.bounce.intensity,
+    threshold = profile.base.threshold,
+    triggerOnce = profile.base.triggerOnce,
+    easing: easing2 = profile.entrance.bounce.easing,
     onComplete,
     onStart,
     onStop,
@@ -2279,7 +2088,6 @@ function useBounceIn(options = {}) {
   const [isAnimating, setIsAnimating] = useState(false);
   const [isVisible, setIsVisible] = useState(autoStart ? false : true);
   const [progress, setProgress] = useState(autoStart ? 0 : 1);
-  const observerRef = useRef(null);
   const timeoutRef = useRef(null);
   const bounceTimeoutRef = useRef(null);
   const startRef = useRef(() => {
@@ -2336,25 +2144,14 @@ function useBounceIn(options = {}) {
   }, [stop, onReset]);
   useEffect(() => {
     if (!ref.current || !autoStart) return;
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            startRef.current();
-            if (triggerOnce) {
-              observerRef.current?.disconnect();
-            }
-          }
-        });
+    return observeElement(
+      ref.current,
+      (entry) => {
+        if (entry.isIntersecting) startRef.current();
       },
-      { threshold }
+      { threshold },
+      triggerOnce
     );
-    observerRef.current.observe(ref.current);
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-      }
-    };
   }, [autoStart, threshold, triggerOnce]);
   useEffect(() => {
     return () => {
@@ -2679,18 +2476,33 @@ function usePulse(options = {}) {
     reset
   };
 }
+
+// src/utils/springPhysics.ts
+function calculateSpring(currentValue, currentVelocity, targetValue, deltaTime, config) {
+  const { stiffness, damping, mass } = config;
+  const displacement = currentValue - targetValue;
+  const springForce = -stiffness * displacement;
+  const dampingForce = -damping * currentVelocity;
+  const acceleration = (springForce + dampingForce) / mass;
+  const newVelocity = currentVelocity + acceleration * deltaTime;
+  const newValue = currentValue + newVelocity * deltaTime;
+  return { value: newValue, velocity: newVelocity };
+}
+
+// src/hooks/useSpringMotion.ts
 function useSpringMotion(options) {
+  const profile = useMotionProfile();
   const {
     from,
     to,
-    mass = 1,
-    stiffness = 100,
-    damping = 10,
-    restDelta = 0.01,
-    restSpeed = 0.01,
+    mass = profile.spring.mass,
+    stiffness = profile.spring.stiffness,
+    damping = profile.spring.damping,
+    restDelta = profile.spring.restDelta,
+    restSpeed = profile.spring.restSpeed,
     onComplete,
     enabled = true,
-    autoStart = false
+    autoStart = true
   } = options;
   const ref = useRef(null);
   const [springState, setSpringState] = useState({
@@ -2702,16 +2514,7 @@ function useSpringMotion(options) {
   const [progress, setProgress] = useState(0);
   const motionRef = useRef(null);
   const lastTimeRef = useRef(0);
-  const calculateSpring = useCallback((currentValue, currentVelocity, targetValue, deltaTime) => {
-    const displacement = currentValue - targetValue;
-    const springForce = -stiffness * displacement;
-    const dampingForce = -damping * currentVelocity;
-    const totalForce = springForce + dampingForce;
-    const acceleration = totalForce / mass;
-    const newVelocity = currentVelocity + acceleration * deltaTime;
-    const newValue = currentValue + newVelocity * deltaTime;
-    return { value: newValue, velocity: newVelocity };
-  }, [mass, stiffness, damping]);
+  const springConfig = useMemo(() => ({ stiffness, damping, mass }), [stiffness, damping, mass]);
   const animate = useCallback((currentTime) => {
     if (!enabled || !springState.isAnimating) return;
     const deltaTime = Math.min(currentTime - lastTimeRef.current, 16) / 1e3;
@@ -2720,7 +2523,8 @@ function useSpringMotion(options) {
       springState.value,
       springState.velocity,
       to,
-      deltaTime
+      deltaTime,
+      springConfig
     );
     const range = Math.abs(to - from);
     const currentProgress = range > 0 ? Math.min(Math.abs(value - from) / range, 1) : 1;
@@ -2742,7 +2546,7 @@ function useSpringMotion(options) {
       isAnimating: true
     });
     motionRef.current = requestAnimationFrame(animate);
-  }, [enabled, springState.isAnimating, to, from, restDelta, restSpeed, onComplete, calculateSpring]);
+  }, [enabled, springState.isAnimating, to, from, restDelta, restSpeed, onComplete, springConfig]);
   const start = useCallback(() => {
     if (springState.isAnimating) return;
     setSpringState((prev) => ({
@@ -2890,11 +2694,12 @@ function useGradient(options = {}) {
   };
 }
 function useHoverMotion(options = {}) {
+  const profile = useMotionProfile();
   const {
-    duration = 200,
-    easing: easing2 = "ease-out",
-    hoverScale = 1.05,
-    hoverY = -2,
+    duration = profile.interaction.hover.duration,
+    easing: easing2 = profile.interaction.hover.easing,
+    hoverScale = profile.interaction.hover.scale,
+    hoverY = profile.interaction.hover.y,
     hoverOpacity = 1
   } = options;
   const ref = useRef(null);
@@ -3178,13 +2983,14 @@ function useFocusToggle(options = {}) {
   };
 }
 function useScrollReveal(options = {}) {
+  const profile = useMotionProfile();
   const {
-    threshold = 0.1,
+    threshold = profile.base.threshold,
     rootMargin = "0px",
-    triggerOnce = true,
+    triggerOnce = profile.base.triggerOnce,
     delay = 0,
-    duration = 700,
-    easing: easing2 = "ease-out",
+    duration = profile.base.duration,
+    easing: easing2 = profile.base.easing,
     motionType = "fadeIn",
     onComplete,
     onStart,
@@ -3213,15 +3019,14 @@ function useScrollReveal(options = {}) {
   }, [triggerOnce, hasTriggered, delay, onStart, onComplete]);
   useEffect(() => {
     if (!ref.current) return;
-    const observer = new IntersectionObserver(observerCallback, {
-      threshold,
-      rootMargin
-    });
-    observer.observe(ref.current);
-    return () => {
-      observer.disconnect();
-    };
+    return observeElement(
+      ref.current,
+      (entry) => observerCallback([entry]),
+      { threshold, rootMargin }
+    );
   }, [observerCallback, threshold, rootMargin]);
+  const slideDistance = profile.entrance.slide.distance;
+  const scaleFrom = profile.entrance.scale.from;
   const style = useMemo(() => {
     const baseTransition = `all ${duration}ms ${easing2}`;
     if (!isVisible) {
@@ -3234,25 +3039,25 @@ function useScrollReveal(options = {}) {
         case "slideUp":
           return {
             opacity: 0,
-            transform: "translateY(32px)",
+            transform: `translateY(${slideDistance}px)`,
             transition: baseTransition
           };
         case "slideLeft":
           return {
             opacity: 0,
-            transform: "translateX(-32px)",
+            transform: `translateX(-${slideDistance}px)`,
             transition: baseTransition
           };
         case "slideRight":
           return {
             opacity: 0,
-            transform: "translateX(32px)",
+            transform: `translateX(${slideDistance}px)`,
             transition: baseTransition
           };
         case "scaleIn":
           return {
             opacity: 0,
-            transform: "scale(0.95)",
+            transform: `scale(${scaleFrom})`,
             transition: baseTransition
           };
         case "bounceIn":
@@ -3273,7 +3078,7 @@ function useScrollReveal(options = {}) {
       transform: "none",
       transition: baseTransition
     };
-  }, [isVisible, motionType, duration, easing2]);
+  }, [isVisible, motionType, duration, easing2, slideDistance, scaleFrom]);
   const start = useCallback(() => {
     setIsAnimating(true);
     onStart?.();
@@ -3306,6 +3111,38 @@ function useScrollReveal(options = {}) {
     stop
   };
 }
+
+// src/utils/sharedScroll.ts
+var subscribers = /* @__PURE__ */ new Set();
+var listening = false;
+var rafId = 0;
+function tick() {
+  subscribers.forEach((cb) => cb());
+}
+function onScroll() {
+  cancelAnimationFrame(rafId);
+  rafId = requestAnimationFrame(tick);
+}
+function subscribeScroll(cb) {
+  subscribers.add(cb);
+  if (!listening && subscribers.size > 0) {
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll, { passive: true });
+    listening = true;
+  }
+  return () => {
+    subscribers.delete(cb);
+    if (listening && subscribers.size === 0) {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+      cancelAnimationFrame(rafId);
+      listening = false;
+    }
+  };
+}
+
+// src/hooks/useScrollProgress.ts
+var PROGRESS_THRESHOLD = 0.1;
 function useScrollProgress(options = {}) {
   const {
     target,
@@ -3314,27 +3151,24 @@ function useScrollProgress(options = {}) {
   } = options;
   const [progress, setProgress] = useState(showOnMount ? 0 : 0);
   const [mounted, setMounted] = useState(false);
+  const progressRef = useRef(progress);
   useEffect(() => {
     setMounted(true);
   }, []);
   useEffect(() => {
     if (!mounted) return;
     const calculateProgress = () => {
-      if (typeof window !== "undefined") {
-        const scrollTop = window.pageYOffset;
-        const scrollHeight = target || document.documentElement.scrollHeight - window.innerHeight;
-        const adjustedScrollTop = Math.max(0, scrollTop - offset);
-        const progressPercent = Math.min(100, Math.max(0, adjustedScrollTop / scrollHeight * 100));
-        setProgress(progressPercent);
+      const scrollTop = window.pageYOffset;
+      const scrollHeight = target || document.documentElement.scrollHeight - window.innerHeight;
+      const adjustedScrollTop = Math.max(0, scrollTop - offset);
+      const next = Math.min(100, Math.max(0, adjustedScrollTop / scrollHeight * 100));
+      if (Math.abs(next - progressRef.current) > PROGRESS_THRESHOLD) {
+        progressRef.current = next;
+        setProgress(next);
       }
     };
     calculateProgress();
-    window.addEventListener("scroll", calculateProgress, { passive: true });
-    window.addEventListener("resize", calculateProgress, { passive: true });
-    return () => {
-      window.removeEventListener("scroll", calculateProgress);
-      window.removeEventListener("resize", calculateProgress);
-    };
+    return subscribeScroll(calculateProgress);
   }, [target, offset, mounted]);
   return {
     progress,
@@ -3719,14 +3553,11 @@ function useInView(options = {}) {
   useEffect(() => {
     const element = ref.current;
     if (!element) return;
-    const observer = new IntersectionObserver(handleIntersect, {
-      threshold,
-      rootMargin
-    });
-    observer.observe(element);
-    return () => {
-      observer.disconnect();
-    };
+    return observeElement(
+      element,
+      (entry2) => handleIntersect([entry2]),
+      { threshold, rootMargin }
+    );
   }, [threshold, rootMargin, handleIntersect]);
   return {
     ref,
@@ -4122,170 +3953,1432 @@ function useGesture(options = {}) {
         clearTimeout(longPressRef.current);
       }
     };
-  }, []);
+  }, []);
+  return {
+    isActive,
+    gesture,
+    scale,
+    rotation,
+    deltaX,
+    deltaY,
+    distance,
+    velocity,
+    start,
+    stop,
+    reset,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    onMouseDown,
+    onMouseMove,
+    onMouseUp
+  };
+}
+function useGestureMotion(options) {
+  const {
+    gestureType,
+    duration = 300,
+    easing: easing2 = "ease-out",
+    sensitivity = 1,
+    enabled = true,
+    onGestureStart,
+    onGestureEnd
+  } = options;
+  const elementRef = useRef(null);
+  const [gestureState, setGestureState] = useState({
+    isActive: false,
+    x: 0,
+    y: 0,
+    deltaX: 0,
+    deltaY: 0,
+    scale: 1,
+    rotation: 0
+  });
+  const [motionStyle, setMotionStyle] = useState({});
+  const startPoint = useRef({ x: 0, y: 0 });
+  const isDragging = useRef(false);
+  const updateMotionStyle = useCallback(() => {
+    if (!enabled) return;
+    const { isActive, deltaX, deltaY, scale, rotation } = gestureState;
+    let transform = "";
+    switch (gestureType) {
+      case "hover":
+        transform = isActive ? `scale(${1 + sensitivity * 0.05}) translateY(-${sensitivity * 2}px)` : "scale(1) translateY(0)";
+        break;
+      case "drag":
+        transform = isActive ? `translate(${deltaX * sensitivity}px, ${deltaY * sensitivity}px)` : "translate(0, 0)";
+        break;
+      case "pinch":
+        transform = `scale(${scale})`;
+        break;
+      case "swipe":
+        transform = isActive ? `translateX(${deltaX * sensitivity}px) rotateY(${deltaX * 0.1}deg)` : "translateX(0) rotateY(0)";
+        break;
+      case "tilt":
+        transform = isActive ? `rotateX(${deltaY * 0.1}deg) rotateY(${deltaX * 0.1}deg)` : "rotateX(0) rotateY(0)";
+        break;
+    }
+    setMotionStyle({
+      transform,
+      transition: isActive ? "none" : `all ${duration}ms ${easing2}`,
+      cursor: gestureType === "drag" && isActive ? "grabbing" : "pointer"
+    });
+  }, [gestureState, gestureType, enabled, duration, easing2, sensitivity]);
+  const handleMouseDown = useCallback((e) => {
+    if (!enabled || gestureType !== "drag") return;
+    isDragging.current = true;
+    startPoint.current = { x: e.clientX, y: e.clientY };
+    setGestureState((prev) => ({ ...prev, isActive: true }));
+    onGestureStart?.();
+  }, [enabled, gestureType, onGestureStart]);
+  const handleMouseMove = useCallback((e) => {
+    if (!enabled || !isDragging.current) return;
+    const deltaX = e.clientX - startPoint.current.x;
+    const deltaY = e.clientY - startPoint.current.y;
+    setGestureState((prev) => ({
+      ...prev,
+      x: e.clientX,
+      y: e.clientY,
+      deltaX,
+      deltaY
+    }));
+  }, [enabled]);
+  const handleMouseUp = useCallback(() => {
+    if (!enabled) return;
+    isDragging.current = false;
+    setGestureState((prev) => ({ ...prev, isActive: false }));
+    onGestureEnd?.();
+  }, [enabled, onGestureEnd]);
+  const handleMouseEnter = useCallback(() => {
+    if (!enabled || gestureType !== "hover") return;
+    setGestureState((prev) => ({ ...prev, isActive: true }));
+    onGestureStart?.();
+  }, [enabled, gestureType, onGestureStart]);
+  const handleMouseLeave = useCallback(() => {
+    if (!enabled || gestureType !== "hover") return;
+    setGestureState((prev) => ({ ...prev, isActive: false }));
+    onGestureEnd?.();
+  }, [enabled, gestureType, onGestureEnd]);
+  const handleTouchStart = useCallback((e) => {
+    if (!enabled) return;
+    const touch = e.touches[0];
+    startPoint.current = { x: touch.clientX, y: touch.clientY };
+    setGestureState((prev) => ({ ...prev, isActive: true }));
+    onGestureStart?.();
+  }, [enabled, onGestureStart]);
+  const handleTouchMove = useCallback((e) => {
+    if (!enabled) return;
+    const touch = e.touches[0];
+    const deltaX = touch.clientX - startPoint.current.x;
+    const deltaY = touch.clientY - startPoint.current.y;
+    setGestureState((prev) => ({
+      ...prev,
+      x: touch.clientX,
+      y: touch.clientY,
+      deltaX,
+      deltaY
+    }));
+  }, [enabled]);
+  const handleTouchEnd = useCallback(() => {
+    if (!enabled) return;
+    setGestureState((prev) => ({ ...prev, isActive: false }));
+    onGestureEnd?.();
+  }, [enabled, onGestureEnd]);
+  useEffect(() => {
+    if (!elementRef.current) return;
+    const element = elementRef.current;
+    if (gestureType === "hover") {
+      element.addEventListener("mouseenter", handleMouseEnter);
+      element.addEventListener("mouseleave", handleMouseLeave);
+    } else if (gestureType === "drag") {
+      element.addEventListener("mousedown", handleMouseDown);
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    }
+    element.addEventListener("touchstart", handleTouchStart);
+    element.addEventListener("touchmove", handleTouchMove);
+    element.addEventListener("touchend", handleTouchEnd);
+    return () => {
+      element.removeEventListener("mouseenter", handleMouseEnter);
+      element.removeEventListener("mouseleave", handleMouseLeave);
+      element.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      element.removeEventListener("touchstart", handleTouchStart);
+      element.removeEventListener("touchmove", handleTouchMove);
+      element.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [gestureType, handleMouseEnter, handleMouseLeave, handleMouseDown, handleMouseMove, handleMouseUp, handleTouchStart, handleTouchMove, handleTouchEnd]);
+  useEffect(() => {
+    updateMotionStyle();
+  }, [updateMotionStyle]);
+  return {
+    ref: elementRef,
+    gestureState,
+    motionStyle,
+    isActive: gestureState.isActive
+  };
+}
+function useButtonEffect(options = {}) {
+  const {
+    duration = 200,
+    easing: easing2 = "ease-out",
+    type = "scale",
+    scaleAmount = 0.95,
+    rippleColor = "rgba(255, 255, 255, 0.6)",
+    rippleSize = 100,
+    rippleDuration = 600,
+    glowColor = "#3b82f6",
+    glowSize = 20,
+    glowIntensity = 0.8,
+    shakeAmount = 5,
+    shakeFrequency = 10,
+    bounceHeight = 10,
+    bounceStiffness = 0.3,
+    slideDistance = 5,
+    slideDirection = "down",
+    hoverScale = 1.05,
+    hoverRotate = 0,
+    hoverTranslateY = -2,
+    hoverTranslateX = 0,
+    activeScale = 0.95,
+    activeRotate = 0,
+    activeTranslateY = 2,
+    activeTranslateX = 0,
+    focusScale = 1.02,
+    focusGlow = true,
+    disabled = false,
+    disabledOpacity = 0.5,
+    autoStart = false,
+    onComplete,
+    onStart,
+    onStop,
+    onReset
+  } = options;
+  const ref = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [buttonType] = useState(type);
+  const [isPressed, setIsPressed] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [ripplePosition, setRipplePosition] = useState({ x: 0, y: 0 });
+  const [currentGlowIntensity, setGlowIntensity] = useState(0);
+  const [shakeOffset, setShakeOffset] = useState(0);
+  const [bounceOffset, setBounceOffset] = useState(0);
+  const [slideOffset, setSlideOffset] = useState(0);
+  const animationRef = useRef(null);
+  const startTimeRef = useRef(0);
+  useCallback((event) => {
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    setRipplePosition({ x, y });
+    setIsAnimating(true);
+    setProgress(0);
+    startTimeRef.current = Date.now();
+    onStart?.();
+    const animateRipple = () => {
+      const elapsed = Date.now() - startTimeRef.current;
+      const currentProgress = Math.min(elapsed / rippleDuration, 1);
+      setProgress(currentProgress);
+      if (currentProgress < 1) {
+        animationRef.current = requestAnimationFrame(animateRipple);
+      } else {
+        setIsAnimating(false);
+        onComplete?.();
+      }
+    };
+    animationRef.current = requestAnimationFrame(animateRipple);
+  }, [rippleDuration, onStart, onComplete]);
+  const shakeButton = useCallback(() => {
+    setIsAnimating(true);
+    setProgress(0);
+    startTimeRef.current = Date.now();
+    onStart?.();
+    const animateShake = () => {
+      const elapsed = Date.now() - startTimeRef.current;
+      const currentProgress = Math.min(elapsed / duration, 1);
+      setProgress(currentProgress);
+      const shake = shakeAmount * Math.sin(currentProgress * Math.PI * 2 * shakeFrequency) * (1 - currentProgress);
+      setShakeOffset(shake);
+      if (currentProgress < 1) {
+        animationRef.current = requestAnimationFrame(animateShake);
+      } else {
+        setIsAnimating(false);
+        setShakeOffset(0);
+        onComplete?.();
+      }
+    };
+    animationRef.current = requestAnimationFrame(animateShake);
+  }, [duration, shakeAmount, shakeFrequency, onStart, onComplete]);
+  const bounceButton = useCallback(() => {
+    setIsAnimating(true);
+    setProgress(0);
+    startTimeRef.current = Date.now();
+    onStart?.();
+    const animateBounce = () => {
+      const elapsed = Date.now() - startTimeRef.current;
+      const currentProgress = Math.min(elapsed / duration, 1);
+      setProgress(currentProgress);
+      const bounce = bounceHeight * Math.sin(currentProgress * Math.PI * bounceStiffness) * Math.exp(-currentProgress * 3);
+      setBounceOffset(bounce);
+      if (currentProgress < 1) {
+        animationRef.current = requestAnimationFrame(animateBounce);
+      } else {
+        setIsAnimating(false);
+        setBounceOffset(0);
+        onComplete?.();
+      }
+    };
+    animationRef.current = requestAnimationFrame(animateBounce);
+  }, [duration, bounceHeight, bounceStiffness, onStart, onComplete]);
+  const slideButton = useCallback(() => {
+    setIsAnimating(true);
+    setProgress(0);
+    startTimeRef.current = Date.now();
+    onStart?.();
+    const animateSlide = () => {
+      const elapsed = Date.now() - startTimeRef.current;
+      const currentProgress = Math.min(elapsed / duration, 1);
+      setProgress(currentProgress);
+      const slide = slideDistance * currentProgress;
+      setSlideOffset(slide);
+      if (currentProgress < 1) {
+        animationRef.current = requestAnimationFrame(animateSlide);
+      } else {
+        setIsAnimating(false);
+        onComplete?.();
+      }
+    };
+    animationRef.current = requestAnimationFrame(animateSlide);
+  }, [duration, slideDistance, onStart, onComplete]);
+  const pressButton = useCallback(() => {
+    if (disabled) return;
+    setIsPressed(true);
+    switch (type) {
+      case "ripple":
+        break;
+      case "shake":
+        shakeButton();
+        break;
+      case "bounce":
+        bounceButton();
+        break;
+      case "slide":
+        slideButton();
+        break;
+    }
+  }, [disabled, type, shakeButton, bounceButton, slideButton]);
+  const releaseButton = useCallback(() => {
+    setIsPressed(false);
+  }, []);
+  const setButtonState = useCallback((state) => {
+    switch (state) {
+      case "hover":
+        setIsHovered(true);
+        break;
+      case "active":
+        setIsPressed(true);
+        break;
+      case "focus":
+        setIsFocused(true);
+        break;
+      case "disabled":
+        setIsHovered(false);
+        setIsPressed(false);
+        setIsFocused(false);
+        break;
+      default:
+        setIsHovered(false);
+        setIsPressed(false);
+        setIsFocused(false);
+        break;
+    }
+  }, []);
+  const start = useCallback(() => {
+    if (!isVisible) {
+      setIsVisible(true);
+    }
+  }, [isVisible]);
+  const stop = useCallback(() => {
+    setIsAnimating(false);
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+      animationRef.current = null;
+    }
+    onStop?.();
+  }, [onStop]);
+  const reset = useCallback(() => {
+    setIsVisible(false);
+    setIsAnimating(false);
+    setProgress(0);
+    setIsPressed(false);
+    setIsHovered(false);
+    setIsFocused(false);
+    setRipplePosition({ x: 0, y: 0 });
+    setGlowIntensity(0);
+    setShakeOffset(0);
+    setBounceOffset(0);
+    setSlideOffset(0);
+    startTimeRef.current = 0;
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+      animationRef.current = null;
+    }
+    onReset?.();
+  }, [onReset]);
+  const pause = useCallback(() => {
+    setIsAnimating(false);
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+      animationRef.current = null;
+    }
+  }, []);
+  const resume = useCallback(() => {
+    if (isVisible && !isAnimating) {
+      setIsAnimating(true);
+    }
+  }, [isVisible, isAnimating]);
+  useEffect(() => {
+    if (autoStart) {
+      start();
+    }
+  }, [autoStart, start]);
+  useEffect(() => {
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, []);
+  const getButtonStyle = () => {
+    let scale = 1;
+    let rotate = 0;
+    let translateY = 0;
+    let translateX = 0;
+    let boxShadow = "none";
+    if (isPressed) {
+      scale = activeScale;
+      rotate = activeRotate;
+      translateY = activeTranslateY;
+      translateX = activeTranslateX;
+    } else if (isHovered) {
+      scale = hoverScale;
+      rotate = hoverRotate;
+      translateY = hoverTranslateY;
+      translateX = hoverTranslateX;
+    }
+    if (isFocused && focusGlow) {
+      boxShadow = `0 0 ${glowSize}px ${glowColor}`;
+    }
+    switch (type) {
+      case "shake":
+        translateX += shakeOffset;
+        break;
+      case "bounce":
+        translateY += bounceOffset;
+        break;
+      case "slide":
+        if (slideDirection === "left") translateX -= slideOffset;
+        else if (slideDirection === "right") translateX += slideOffset;
+        else if (slideDirection === "up") translateY -= slideOffset;
+        else if (slideDirection === "down") translateY += slideOffset;
+        break;
+    }
+    const baseStyle = {
+      transform: `
+        scale(${scale})
+        rotate(${rotate}deg)
+        translate(${translateX}px, ${translateY}px)
+      `,
+      boxShadow,
+      opacity: disabled ? disabledOpacity : 1,
+      transition: `all ${duration}ms ${easing2}`,
+      willChange: "transform, box-shadow, opacity",
+      cursor: disabled ? "not-allowed" : "pointer",
+      position: "relative",
+      overflow: "hidden"
+    };
+    return baseStyle;
+  };
+  const style = getButtonStyle();
+  return {
+    ref,
+    isVisible,
+    isAnimating,
+    style,
+    progress,
+    start,
+    stop,
+    reset,
+    pause,
+    resume,
+    buttonType: type,
+    isPressed,
+    isHovered,
+    isFocused,
+    ripplePosition,
+    currentGlowIntensity,
+    shakeOffset,
+    bounceOffset,
+    slideOffset,
+    pressButton,
+    releaseButton,
+    setButtonState
+  };
+}
+function useVisibilityToggle(options = {}) {
+  const {
+    duration = 300,
+    easing: easing2 = "ease-out",
+    showScale = 1,
+    showOpacity = 1,
+    showRotate = 0,
+    showTranslateY = 0,
+    showTranslateX = 0,
+    hideScale = 0.8,
+    hideOpacity = 0,
+    hideRotate = 0,
+    hideTranslateY = 20,
+    hideTranslateX = 0,
+    onComplete,
+    onStart,
+    onStop,
+    onReset
+  } = options;
+  const ref = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const toggle = useCallback(() => {
+    setIsAnimating(true);
+    setProgress(0);
+    onStart?.();
+    const newVisibility = !isVisible;
+    setIsVisible(newVisibility);
+    setTimeout(() => {
+      setIsAnimating(false);
+      setProgress(1);
+      onComplete?.();
+    }, duration);
+  }, [isVisible, duration, onStart, onComplete]);
+  const show = useCallback(() => {
+    if (!isVisible) {
+      setIsAnimating(true);
+      setProgress(0);
+      onStart?.();
+      setIsVisible(true);
+      setTimeout(() => {
+        setIsAnimating(false);
+        setProgress(1);
+        onComplete?.();
+      }, duration);
+    }
+  }, [isVisible, duration, onStart, onComplete]);
+  const hide = useCallback(() => {
+    if (isVisible) {
+      setIsAnimating(true);
+      setProgress(1);
+      onStart?.();
+      setIsVisible(false);
+      setTimeout(() => {
+        setIsAnimating(false);
+        setProgress(0);
+        onComplete?.();
+      }, duration);
+    }
+  }, [isVisible, duration, onStart, onComplete]);
+  const start = useCallback(() => {
+    if (!isVisible) {
+      toggle();
+    }
+  }, [isVisible, toggle]);
+  const stop = useCallback(() => {
+    setIsAnimating(false);
+    onStop?.();
+  }, [onStop]);
+  const reset = useCallback(() => {
+    setIsVisible(false);
+    setIsAnimating(false);
+    setProgress(0);
+    onReset?.();
+  }, [onReset]);
+  const pause = useCallback(() => {
+    setIsAnimating(false);
+  }, []);
+  const resume = useCallback(() => {
+    if (isVisible) {
+      setIsAnimating(true);
+    }
+  }, [isVisible]);
+  const style = {
+    transform: `
+      scale(${isVisible ? showScale : hideScale})
+      rotate(${isVisible ? showRotate : hideRotate}deg)
+      translate(${isVisible ? showTranslateX : hideTranslateX}px, ${isVisible ? showTranslateY : hideTranslateY}px)
+    `,
+    opacity: isVisible ? showOpacity : hideOpacity,
+    transition: `all ${duration}ms ${easing2}`,
+    willChange: "transform, opacity"
+  };
+  return {
+    ref,
+    isVisible,
+    isAnimating,
+    style,
+    progress,
+    start,
+    stop,
+    reset,
+    pause,
+    resume,
+    // 추가 메서드
+    toggle,
+    show,
+    hide
+  };
+}
+function useScrollToggle(options = {}) {
+  const {
+    duration = 300,
+    easing: easing2 = "ease-out",
+    showScale = 1,
+    showOpacity = 1,
+    showRotate = 0,
+    showTranslateY = 0,
+    showTranslateX = 0,
+    hideScale = 0.8,
+    hideOpacity = 0,
+    hideRotate = 0,
+    hideTranslateY = 20,
+    hideTranslateX = 0,
+    scrollThreshold = 0.1,
+    scrollDirection = "both",
+    onComplete,
+    onStart,
+    onStop,
+    onReset
+  } = options;
+  const ref = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const isVisibleRef = useRef(false);
+  const lastScrollYRef = useRef(0);
+  useEffect(() => {
+    isVisibleRef.current = isVisible;
+  }, [isVisible]);
+  const handleScroll = useCallback(() => {
+    if (!ref.current) return;
+    const currentScrollY = window.scrollY;
+    const rect = ref.current.getBoundingClientRect();
+    const threshold = window.innerHeight * scrollThreshold;
+    const isScrollingDown = currentScrollY > lastScrollYRef.current;
+    const isScrollingUp = currentScrollY < lastScrollYRef.current;
+    let shouldToggle = false;
+    if (scrollDirection === "both") {
+      shouldToggle = rect.top <= threshold;
+    } else if (scrollDirection === "down" && isScrollingDown) {
+      shouldToggle = rect.top <= threshold;
+    } else if (scrollDirection === "up" && isScrollingUp) {
+      shouldToggle = rect.top <= threshold;
+    }
+    if (shouldToggle && !isVisibleRef.current) {
+      isVisibleRef.current = true;
+      setIsVisible(true);
+      setIsAnimating(true);
+      setProgress(0);
+      onStart?.();
+      setTimeout(() => {
+        setIsAnimating(false);
+        setProgress(1);
+        onComplete?.();
+      }, duration);
+    } else if (!shouldToggle && isVisibleRef.current) {
+      isVisibleRef.current = false;
+      setIsVisible(false);
+      setIsAnimating(true);
+      setProgress(1);
+      setTimeout(() => {
+        setIsAnimating(false);
+        setProgress(0);
+      }, duration);
+    }
+    lastScrollYRef.current = currentScrollY;
+  }, [scrollDirection, scrollThreshold, duration, onStart, onComplete]);
+  useEffect(() => {
+    handleScroll();
+    return subscribeScroll(handleScroll);
+  }, [handleScroll]);
+  const start = useCallback(() => {
+    if (!isVisibleRef.current) {
+      isVisibleRef.current = true;
+      setIsVisible(true);
+      setIsAnimating(true);
+      setProgress(0);
+      onStart?.();
+      setTimeout(() => {
+        setIsAnimating(false);
+        setProgress(1);
+        onComplete?.();
+      }, duration);
+    }
+  }, [duration, onStart, onComplete]);
+  const stop = useCallback(() => {
+    setIsAnimating(false);
+    onStop?.();
+  }, [onStop]);
+  const reset = useCallback(() => {
+    isVisibleRef.current = false;
+    setIsVisible(false);
+    setIsAnimating(false);
+    setProgress(0);
+    onReset?.();
+  }, [onReset]);
+  const pause = useCallback(() => {
+    setIsAnimating(false);
+  }, []);
+  const resume = useCallback(() => {
+    if (isVisibleRef.current) {
+      setIsAnimating(true);
+    }
+  }, []);
+  const style = {
+    transform: `
+      scale(${isVisible ? showScale : hideScale})
+      rotate(${isVisible ? showRotate : hideRotate}deg)
+      translate(${isVisible ? showTranslateX : hideTranslateX}px, ${isVisible ? showTranslateY : hideTranslateY}px)
+    `,
+    opacity: isVisible ? showOpacity : hideOpacity,
+    transition: `all ${duration}ms ${easing2}`,
+    willChange: "transform, opacity"
+  };
+  return {
+    ref,
+    isVisible,
+    isAnimating,
+    style,
+    progress,
+    start,
+    stop,
+    reset,
+    pause,
+    resume
+  };
+}
+function useCardList(options = {}) {
+  const {
+    duration = 500,
+    easing: easing2 = "ease-out",
+    staggerDelay = 100,
+    cardScale = 1,
+    cardOpacity = 1,
+    cardRotate = 0,
+    cardTranslateY = 0,
+    cardTranslateX = 0,
+    initialScale = 0.8,
+    initialOpacity = 0,
+    initialRotate = 0,
+    initialTranslateY = 30,
+    initialTranslateX = 0,
+    gridColumns = 3,
+    gridGap = 20,
+    onComplete,
+    onStart,
+    onStop,
+    onReset
+  } = options;
+  const ref = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [cardCount, setCardCount] = useState(0);
+  const startRef = useRef(() => {
+  });
+  useEffect(() => {
+    if (ref.current) {
+      const cards = ref.current.querySelectorAll("[data-card]");
+      setCardCount(cards.length);
+    }
+  }, []);
+  const cardStyles = Array.from({ length: cardCount }, (_, index) => {
+    const delay = isVisible ? index * staggerDelay : 0;
+    const isCardVisible = isVisible && delay <= progress * (cardCount * staggerDelay);
+    return {
+      transform: `
+        scale(${isCardVisible ? cardScale : initialScale})
+        rotate(${isCardVisible ? cardRotate : initialRotate}deg)
+        translate(${isCardVisible ? cardTranslateX : initialTranslateX}px, ${isCardVisible ? cardTranslateY : initialTranslateY}px)
+      `,
+      opacity: isCardVisible ? cardOpacity : initialOpacity,
+      transition: `all ${duration}ms ${easing2} ${delay}ms`,
+      willChange: "transform, opacity"
+    };
+  });
+  const start = useCallback(() => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+    setProgress(0);
+    onStart?.();
+    const totalDuration = cardCount * staggerDelay + duration;
+    const interval = setInterval(() => {
+      setProgress((prev) => {
+        const newProgress = prev + 0.1;
+        if (newProgress >= 1) {
+          setIsVisible(true);
+          setIsAnimating(false);
+          onComplete?.();
+          clearInterval(interval);
+          return 1;
+        }
+        return newProgress;
+      });
+    }, totalDuration / 10);
+  }, [isAnimating, cardCount, staggerDelay, duration, onStart, onComplete]);
+  startRef.current = start;
+  const stop = useCallback(() => {
+    setIsAnimating(false);
+    onStop?.();
+  }, [onStop]);
+  const reset = useCallback(() => {
+    setIsVisible(false);
+    setIsAnimating(false);
+    setProgress(0);
+    onReset?.();
+  }, [onReset]);
+  const pause = useCallback(() => {
+    setIsAnimating(false);
+  }, []);
+  const resume = useCallback(() => {
+    if (!isVisible && !isAnimating) {
+      start();
+    }
+  }, [isVisible, isAnimating, start]);
+  useEffect(() => {
+    if (!ref.current) return;
+    return observeElement(
+      ref.current,
+      (entry) => {
+        if (entry.isIntersecting) startRef.current();
+      },
+      { threshold: 0.1 }
+    );
+  }, []);
+  const gridStyle = {
+    display: "grid",
+    gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+    gap: `${gridGap}px`,
+    width: "100%"
+  };
+  return {
+    ref,
+    isVisible,
+    isAnimating,
+    style: gridStyle,
+    progress,
+    start,
+    stop,
+    reset,
+    pause,
+    resume,
+    cardStyles,
+    staggerDelay,
+    gridColumns,
+    gridGap
+  };
+}
+function useLoadingSpinner(options = {}) {
+  const {
+    duration = 1e3,
+    easing: easing2 = "linear",
+    type = "rotate",
+    rotationSpeed = 1,
+    pulseSpeed = 1,
+    bounceHeight = 20,
+    waveCount = 3,
+    dotCount = 3,
+    barCount = 4,
+    color = "#3b82f6",
+    backgroundColor = "transparent",
+    size = 40,
+    thickness = 4,
+    autoStart = true,
+    infinite = true,
+    onComplete,
+    onStart,
+    onStop,
+    onReset
+  } = options;
+  const ref = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [rotationAngle, setRotationAngle] = useState(0);
+  const [pulseScale, setPulseScale] = useState(1);
+  const [bounceOffset, setBounceOffset] = useState(0);
+  const [waveProgress, setWaveProgress] = useState(0);
+  const [dotProgress, setDotProgress] = useState(0);
+  const [barProgress, setBarProgress] = useState(0);
+  const animationRef = useRef(null);
+  const startTimeRef = useRef(0);
+  const runAnimation = useCallback(() => {
+    if (!isAnimating) return;
+    const animate = (currentTime) => {
+      if (!isAnimating) return;
+      if (!startTimeRef.current) {
+        startTimeRef.current = currentTime;
+      }
+      const elapsed = currentTime - startTimeRef.current;
+      const currentProgress = elapsed / duration % 1;
+      setProgress(currentProgress);
+      switch (type) {
+        case "rotate":
+          setRotationAngle(currentProgress * 360 * rotationSpeed);
+          break;
+        case "pulse":
+          setPulseScale(0.8 + 0.4 * Math.sin(currentProgress * Math.PI * 2 * pulseSpeed));
+          break;
+        case "bounce":
+          setBounceOffset(bounceHeight * Math.sin(currentProgress * Math.PI * 2));
+          break;
+        case "wave":
+          setWaveProgress(currentProgress);
+          break;
+        case "dots":
+          setDotProgress(currentProgress);
+          break;
+        case "bars":
+          setBarProgress(currentProgress);
+          break;
+      }
+      if (infinite || currentProgress < 1) {
+        animationRef.current = requestAnimationFrame(animate);
+      } else {
+        setIsAnimating(false);
+        onComplete?.();
+      }
+    };
+    animationRef.current = requestAnimationFrame(animate);
+  }, [isAnimating, duration, type, rotationSpeed, pulseSpeed, bounceHeight, infinite, onComplete]);
+  const startLoading = useCallback(() => {
+    if (isLoading) return;
+    setIsLoading(true);
+    setIsAnimating(true);
+    setProgress(0);
+    startTimeRef.current = 0;
+    onStart?.();
+    runAnimation();
+  }, [isLoading, onStart, runAnimation]);
+  const stopLoading = useCallback(() => {
+    setIsLoading(false);
+    setIsAnimating(false);
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+      animationRef.current = null;
+    }
+    onStop?.();
+  }, [onStop]);
+  const setLoadingState = useCallback((loading) => {
+    if (loading) {
+      startLoading();
+    } else {
+      stopLoading();
+    }
+  }, [startLoading, stopLoading]);
+  const start = useCallback(() => {
+    if (!isVisible) {
+      setIsVisible(true);
+      startLoading();
+    }
+  }, [isVisible, startLoading]);
+  const stop = useCallback(() => {
+    stopLoading();
+  }, [stopLoading]);
+  const reset = useCallback(() => {
+    setIsVisible(false);
+    setIsAnimating(false);
+    setProgress(0);
+    setIsLoading(false);
+    setRotationAngle(0);
+    setPulseScale(1);
+    setBounceOffset(0);
+    setWaveProgress(0);
+    setDotProgress(0);
+    setBarProgress(0);
+    startTimeRef.current = 0;
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+      animationRef.current = null;
+    }
+    onReset?.();
+  }, [onReset]);
+  const pause = useCallback(() => {
+    setIsAnimating(false);
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+      animationRef.current = null;
+    }
+  }, []);
+  const resume = useCallback(() => {
+    if (isVisible && !isAnimating) {
+      setIsAnimating(true);
+      runAnimation();
+    }
+  }, [isVisible, isAnimating, runAnimation]);
+  useEffect(() => {
+    if (autoStart) {
+      startLoading();
+    }
+  }, [autoStart, startLoading]);
+  useEffect(() => {
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, []);
+  const getSpinnerStyle = () => {
+    const baseStyle = {
+      width: size,
+      height: size,
+      backgroundColor: "transparent",
+      position: "relative",
+      display: "inline-block"
+    };
+    switch (type) {
+      case "rotate":
+        return {
+          ...baseStyle,
+          border: `${thickness}px solid ${backgroundColor}`,
+          borderTop: `${thickness}px solid ${color}`,
+          borderRadius: "50%",
+          transform: `rotate(${rotationAngle}deg)`,
+          transition: `transform ${duration}ms ${easing2}`
+        };
+      case "pulse":
+        return {
+          ...baseStyle,
+          backgroundColor: color,
+          borderRadius: "50%",
+          transform: `scale(${pulseScale})`,
+          transition: `transform ${duration}ms ${easing2}`
+        };
+      case "bounce":
+        return {
+          ...baseStyle,
+          backgroundColor: color,
+          borderRadius: "50%",
+          transform: `translateY(${bounceOffset}px)`,
+          transition: `transform ${duration}ms ${easing2}`
+        };
+      case "wave":
+        return {
+          ...baseStyle,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between"
+        };
+      case "dots":
+        return {
+          ...baseStyle,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between"
+        };
+      case "bars":
+        return {
+          ...baseStyle,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between"
+        };
+      default:
+        return baseStyle;
+    }
+  };
+  const style = getSpinnerStyle();
+  return {
+    ref,
+    isVisible,
+    isAnimating,
+    style,
+    progress,
+    start,
+    stop,
+    reset,
+    pause,
+    resume,
+    isLoading,
+    spinnerType: type,
+    rotationAngle,
+    pulseScale,
+    bounceOffset,
+    waveProgress,
+    dotProgress,
+    barProgress,
+    startLoading,
+    stopLoading,
+    setLoadingState
+  };
+}
+function useNavigation(options = {}) {
+  const {
+    duration = 300,
+    easing: easing2 = "ease-out",
+    type = "slide",
+    slideDirection = "left",
+    staggerDelay = 50,
+    itemScale = 1,
+    itemOpacity = 1,
+    itemRotate = 0,
+    itemTranslateY = 0,
+    itemTranslateX = 0,
+    initialScale = 0.8,
+    initialOpacity = 0,
+    initialRotate = -10,
+    initialTranslateY = 20,
+    initialTranslateX = 0,
+    activeScale = 1.05,
+    activeOpacity = 1,
+    activeRotate = 0,
+    activeTranslateY = 0,
+    activeTranslateX = 0,
+    hoverScale = 1.1,
+    hoverOpacity = 1,
+    hoverRotate = 5,
+    hoverTranslateY = -5,
+    hoverTranslateX = 0,
+    itemCount = 5,
+    autoStart = false,
+    onComplete,
+    onStart,
+    onStop,
+    onReset
+  } = options;
+  const ref = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [hoveredIndex, setHoveredIndex] = useState(null);
+  const openMenu = useCallback(() => {
+    if (isOpen) return;
+    setIsOpen(true);
+    setIsAnimating(true);
+    setProgress(0);
+    onStart?.();
+    const totalDuration = itemCount * staggerDelay + duration;
+    const interval = setInterval(() => {
+      setProgress((prev) => {
+        const newProgress = prev + 0.1;
+        if (newProgress >= 1) {
+          setIsAnimating(false);
+          onComplete?.();
+          clearInterval(interval);
+          return 1;
+        }
+        return newProgress;
+      });
+    }, totalDuration / 10);
+  }, [isOpen, itemCount, staggerDelay, duration, onStart, onComplete]);
+  const closeMenu = useCallback(() => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    setIsAnimating(true);
+    setProgress(1);
+    setTimeout(() => {
+      setIsAnimating(false);
+      setProgress(0);
+    }, duration);
+  }, [isOpen, duration]);
+  const toggleMenu = useCallback(() => {
+    if (isOpen) {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  }, [isOpen, openMenu, closeMenu]);
+  const setActiveItem = useCallback((index) => {
+    if (index >= 0 && index < itemCount) {
+      setActiveIndex(index);
+    }
+  }, [itemCount]);
+  const goToNext = useCallback(() => {
+    setActiveItem((activeIndex + 1) % itemCount);
+  }, [activeIndex, itemCount, setActiveItem]);
+  const goToPrevious = useCallback(() => {
+    setActiveItem(activeIndex === 0 ? itemCount - 1 : activeIndex - 1);
+  }, [activeIndex, itemCount, setActiveItem]);
+  const start = useCallback(() => {
+    if (!isVisible) {
+      setIsVisible(true);
+      openMenu();
+    }
+  }, [isVisible, openMenu]);
+  const stop = useCallback(() => {
+    setIsAnimating(false);
+    onStop?.();
+  }, [onStop]);
+  const reset = useCallback(() => {
+    setIsVisible(false);
+    setIsAnimating(false);
+    setProgress(0);
+    setIsOpen(false);
+    setActiveIndex(0);
+    setHoveredIndex(null);
+    onReset?.();
+  }, [onReset]);
+  const pause = useCallback(() => {
+    setIsAnimating(false);
+  }, []);
+  const resume = useCallback(() => {
+    if (isVisible) {
+      setIsAnimating(true);
+    }
+  }, [isVisible]);
+  useEffect(() => {
+    if (autoStart) {
+      start();
+    }
+  }, [autoStart, start]);
+  const itemStyles = Array.from({ length: itemCount }, (_, index) => {
+    const delay = isOpen ? index * staggerDelay : 0;
+    const isItemVisible = isOpen && delay <= progress * (itemCount * staggerDelay);
+    const isActive = index === activeIndex;
+    const isHovered = index === hoveredIndex;
+    let scale = initialScale;
+    let opacity = initialOpacity;
+    let rotate = initialRotate;
+    let translateY = initialTranslateY;
+    let translateX = initialTranslateX;
+    if (isItemVisible) {
+      if (isHovered) {
+        scale = hoverScale;
+        opacity = hoverOpacity;
+        rotate = hoverRotate;
+        translateY = hoverTranslateY;
+        translateX = hoverTranslateX;
+      } else if (isActive) {
+        scale = activeScale;
+        opacity = activeOpacity;
+        rotate = activeRotate;
+        translateY = activeTranslateY;
+        translateX = activeTranslateX;
+      } else {
+        scale = itemScale;
+        opacity = itemOpacity;
+        rotate = itemRotate;
+        translateY = itemTranslateY;
+        translateX = itemTranslateX;
+      }
+    }
+    return {
+      transform: `
+        scale(${scale})
+        rotate(${rotate}deg)
+        translate(${translateX}px, ${translateY}px)
+      `,
+      opacity,
+      transition: `all ${duration}ms ${easing2} ${delay}ms`,
+      willChange: "transform, opacity",
+      cursor: "pointer"
+    };
+  });
+  const getNavigationStyle = () => {
+    const baseStyle = {
+      transition: `all ${duration}ms ${easing2}`,
+      willChange: "transform, opacity"
+    };
+    switch (type) {
+      case "slide":
+        if (slideDirection === "left") {
+          baseStyle.transform = `translateX(${isOpen ? 0 : -100}%)`;
+        } else if (slideDirection === "right") {
+          baseStyle.transform = `translateX(${isOpen ? 0 : 100}%)`;
+        } else if (slideDirection === "up") {
+          baseStyle.transform = `translateY(${isOpen ? 0 : -100}%)`;
+        } else if (slideDirection === "down") {
+          baseStyle.transform = `translateY(${isOpen ? 0 : 100}%)`;
+        }
+        break;
+      case "fade":
+        baseStyle.opacity = isOpen ? 1 : 0;
+        break;
+      case "scale":
+        baseStyle.transform = `scale(${isOpen ? 1 : 0})`;
+        break;
+      case "rotate":
+        baseStyle.transform = `rotate(${isOpen ? 0 : 180}deg)`;
+        break;
+    }
+    return baseStyle;
+  };
+  const style = getNavigationStyle();
   return {
-    isActive,
-    gesture,
-    scale,
-    rotation,
-    deltaX,
-    deltaY,
-    distance,
-    velocity,
+    ref,
+    isVisible,
+    isAnimating,
+    style,
+    progress,
     start,
     stop,
     reset,
-    onTouchStart,
-    onTouchMove,
-    onTouchEnd,
-    onMouseDown,
-    onMouseMove,
-    onMouseUp
+    pause,
+    resume,
+    isOpen,
+    activeIndex,
+    itemStyles,
+    openMenu,
+    closeMenu,
+    toggleMenu,
+    setActiveItem,
+    goToNext,
+    goToPrevious
   };
 }
-function useGestureMotion(options) {
+function useSkeleton(options = {}) {
   const {
-    gestureType,
-    duration = 300,
-    easing: easing2 = "ease-out",
-    sensitivity = 1,
-    enabled = true,
-    onGestureStart,
-    onGestureEnd
+    delay = 0,
+    duration = 1500,
+    easing: easing2 = "ease-in-out",
+    autoStart = true,
+    backgroundColor = "#f0f0f0",
+    highlightColor = "#e0e0e0",
+    motionSpeed = 1500,
+    height = 20,
+    width = "100%",
+    borderRadius = 4,
+    wave = true,
+    pulse: pulse2 = false,
+    onComplete,
+    onStart,
+    onStop,
+    onReset
   } = options;
-  const elementRef = useRef(null);
-  const [gestureState, setGestureState] = useState({
-    isActive: false,
-    x: 0,
-    y: 0,
-    deltaX: 0,
-    deltaY: 0,
-    scale: 1,
-    rotation: 0
-  });
-  const [motionStyle, setMotionStyle] = useState({});
-  const startPoint = useRef({ x: 0, y: 0 });
-  const isDragging = useRef(false);
-  const updateMotionStyle = useCallback(() => {
-    if (!enabled) return;
-    const { isActive, deltaX, deltaY, scale, rotation } = gestureState;
-    let transform = "";
-    switch (gestureType) {
-      case "hover":
-        transform = isActive ? `scale(${1 + sensitivity * 0.05}) translateY(-${sensitivity * 2}px)` : "scale(1) translateY(0)";
-        break;
-      case "drag":
-        transform = isActive ? `translate(${deltaX * sensitivity}px, ${deltaY * sensitivity}px)` : "translate(0, 0)";
-        break;
-      case "pinch":
-        transform = `scale(${scale})`;
-        break;
-      case "swipe":
-        transform = isActive ? `translateX(${deltaX * sensitivity}px) rotateY(${deltaX * 0.1}deg)` : "translateX(0) rotateY(0)";
-        break;
-      case "tilt":
-        transform = isActive ? `rotateX(${deltaY * 0.1}deg) rotateY(${deltaX * 0.1}deg)` : "rotateX(0) rotateY(0)";
-        break;
+  const ref = useRef(null);
+  const [isVisible, setIsVisible] = useState(autoStart);
+  const [isAnimating, setIsAnimating] = useState(autoStart);
+  const [progress, setProgress] = useState(0);
+  const motionRef = useRef(null);
+  const startTimeRef = useRef(null);
+  const start = useCallback(() => {
+    if (isAnimating) return;
+    setIsVisible(true);
+    setIsAnimating(true);
+    setProgress(0);
+    onStart?.();
+    setTimeout(() => {
+      startTimeRef.current = Date.now();
+      const animate = () => {
+        if (!startTimeRef.current) return;
+        const elapsed = Date.now() - startTimeRef.current;
+        const newProgress = Math.min(elapsed / duration, 1);
+        setProgress(newProgress);
+        if (newProgress < 1) {
+          motionRef.current = requestAnimationFrame(animate);
+        } else {
+          setIsAnimating(false);
+          onComplete?.();
+        }
+      };
+      motionRef.current = requestAnimationFrame(animate);
+    }, delay);
+  }, [delay, duration, isAnimating, onStart, onComplete]);
+  const stop = useCallback(() => {
+    if (motionRef.current) {
+      cancelAnimationFrame(motionRef.current);
+      motionRef.current = null;
     }
-    setMotionStyle({
-      transform,
-      transition: isActive ? "none" : `all ${duration}ms ${easing2}`,
-      cursor: gestureType === "drag" && isActive ? "grabbing" : "pointer"
-    });
-  }, [gestureState, gestureType, enabled, duration, easing2, sensitivity]);
-  const handleMouseDown = useCallback((e) => {
-    if (!enabled || gestureType !== "drag") return;
-    isDragging.current = true;
-    startPoint.current = { x: e.clientX, y: e.clientY };
-    setGestureState((prev) => ({ ...prev, isActive: true }));
-    onGestureStart?.();
-  }, [enabled, gestureType, onGestureStart]);
-  const handleMouseMove = useCallback((e) => {
-    if (!enabled || !isDragging.current) return;
-    const deltaX = e.clientX - startPoint.current.x;
-    const deltaY = e.clientY - startPoint.current.y;
-    setGestureState((prev) => ({
-      ...prev,
-      x: e.clientX,
-      y: e.clientY,
-      deltaX,
-      deltaY
-    }));
-  }, [enabled]);
-  const handleMouseUp = useCallback(() => {
-    if (!enabled) return;
-    isDragging.current = false;
-    setGestureState((prev) => ({ ...prev, isActive: false }));
-    onGestureEnd?.();
-  }, [enabled, onGestureEnd]);
-  const handleMouseEnter = useCallback(() => {
-    if (!enabled || gestureType !== "hover") return;
-    setGestureState((prev) => ({ ...prev, isActive: true }));
-    onGestureStart?.();
-  }, [enabled, gestureType, onGestureStart]);
-  const handleMouseLeave = useCallback(() => {
-    if (!enabled || gestureType !== "hover") return;
-    setGestureState((prev) => ({ ...prev, isActive: false }));
-    onGestureEnd?.();
-  }, [enabled, gestureType, onGestureEnd]);
-  const handleTouchStart = useCallback((e) => {
-    if (!enabled) return;
-    const touch = e.touches[0];
-    startPoint.current = { x: touch.clientX, y: touch.clientY };
-    setGestureState((prev) => ({ ...prev, isActive: true }));
-    onGestureStart?.();
-  }, [enabled, onGestureStart]);
-  const handleTouchMove = useCallback((e) => {
-    if (!enabled) return;
-    const touch = e.touches[0];
-    const deltaX = touch.clientX - startPoint.current.x;
-    const deltaY = touch.clientY - startPoint.current.y;
-    setGestureState((prev) => ({
-      ...prev,
-      x: touch.clientX,
-      y: touch.clientY,
-      deltaX,
-      deltaY
-    }));
-  }, [enabled]);
-  const handleTouchEnd = useCallback(() => {
-    if (!enabled) return;
-    setGestureState((prev) => ({ ...prev, isActive: false }));
-    onGestureEnd?.();
-  }, [enabled, onGestureEnd]);
+    startTimeRef.current = null;
+    setIsAnimating(false);
+    onStop?.();
+  }, [onStop]);
+  const reset = useCallback(() => {
+    stop();
+    setIsVisible(false);
+    setProgress(0);
+    onReset?.();
+  }, [stop, onReset]);
+  const pause = useCallback(() => {
+    if (motionRef.current) {
+      cancelAnimationFrame(motionRef.current);
+      motionRef.current = null;
+    }
+    setIsAnimating(false);
+  }, []);
+  const resume = useCallback(() => {
+    if (!isAnimating && isVisible) {
+      start();
+    }
+  }, [isAnimating, isVisible, start]);
   useEffect(() => {
-    if (!elementRef.current) return;
-    const element = elementRef.current;
-    if (gestureType === "hover") {
-      element.addEventListener("mouseenter", handleMouseEnter);
-      element.addEventListener("mouseleave", handleMouseLeave);
-    } else if (gestureType === "drag") {
-      element.addEventListener("mousedown", handleMouseDown);
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
+    if (autoStart) {
+      start();
     }
-    element.addEventListener("touchstart", handleTouchStart);
-    element.addEventListener("touchmove", handleTouchMove);
-    element.addEventListener("touchend", handleTouchEnd);
+  }, [autoStart, start]);
+  useEffect(() => {
     return () => {
-      element.removeEventListener("mouseenter", handleMouseEnter);
-      element.removeEventListener("mouseleave", handleMouseLeave);
-      element.removeEventListener("mousedown", handleMouseDown);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      element.removeEventListener("touchstart", handleTouchStart);
-      element.removeEventListener("touchmove", handleTouchMove);
-      element.removeEventListener("touchend", handleTouchEnd);
+      if (motionRef.current) {
+        cancelAnimationFrame(motionRef.current);
+      }
     };
-  }, [gestureType, handleMouseEnter, handleMouseLeave, handleMouseDown, handleMouseMove, handleMouseUp, handleTouchStart, handleTouchMove, handleTouchEnd]);
+  }, []);
+  const getSkeletonStyle = () => {
+    const baseStyle = {
+      width: typeof width === "number" ? `${width}px` : width,
+      height: `${height}px`,
+      backgroundColor,
+      borderRadius: `${borderRadius}px`,
+      position: "relative",
+      overflow: "hidden",
+      opacity: isVisible ? 1 : 0,
+      transition: `opacity ${duration}ms ${easing2}`
+    };
+    if (wave && isAnimating) {
+      baseStyle.background = `linear-gradient(90deg, ${backgroundColor} 25%, ${highlightColor} 50%, ${backgroundColor} 75%)`;
+      baseStyle.backgroundSize = "200% 100%";
+      baseStyle.animation = `skeleton-wave ${motionSpeed}ms infinite linear`;
+    } else if (pulse2 && isAnimating) {
+      baseStyle.animation = `skeleton-pulse ${motionSpeed}ms infinite ease-in-out`;
+    }
+    return baseStyle;
+  };
+  const style = getSkeletonStyle();
   useEffect(() => {
-    updateMotionStyle();
-  }, [updateMotionStyle]);
+    const styleSheet = document.styleSheets[0] || document.createElement("style").sheet;
+    if (styleSheet && !document.getElementById("skeleton-animations")) {
+      const styleElement = document.createElement("style");
+      styleElement.id = "skeleton-animations";
+      styleElement.textContent = `
+        @keyframes skeleton-wave {
+          0% { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+        
+        @keyframes skeleton-pulse {
+          0%, 100% { opacity: 0.6; }
+          50% { opacity: 1; }
+        }
+      `;
+      document.head.appendChild(styleElement);
+    }
+  }, []);
   return {
-    ref: elementRef,
-    gestureState,
-    motionStyle,
-    isActive: gestureState.isActive
+    ref,
+    isVisible,
+    isAnimating,
+    style,
+    progress,
+    start,
+    stop,
+    reset,
+    pause,
+    resume
   };
 }
 function useTypewriter(options) {
@@ -4440,7 +5533,7 @@ function useSmoothScroll(options = {}) {
     wheelMultiplier = 1,
     touchMultiplier = 2,
     direction = "vertical",
-    onScroll
+    onScroll: onScroll2
   } = options;
   const [scroll, setScroll] = useState(0);
   const [progress, setProgress] = useState(0);
@@ -4468,14 +5561,14 @@ function useSmoothScroll(options = {}) {
     setScroll(currentRef.current);
     const max = getMaxScroll();
     setProgress(max > 0 ? currentRef.current / max : 0);
-    onScroll?.(currentRef.current);
+    onScroll2?.(currentRef.current);
     if (direction === "vertical") {
       window.scrollTo(0, currentRef.current);
     } else {
       window.scrollTo(currentRef.current, 0);
     }
     rafRef.current = requestAnimationFrame(animate);
-  }, [lerp, direction, getMaxScroll, onScroll]);
+  }, [lerp, direction, getMaxScroll, onScroll2]);
   const startAnimation = useCallback(() => {
     if (isRunningRef.current) return;
     isRunningRef.current = true;
@@ -4545,6 +5638,8 @@ function useElementProgress(options = {}) {
   const ref = useRef(null);
   const [progress, setProgress] = useState(0);
   const [isInView, setIsInView] = useState(false);
+  const progressRef = useRef(0);
+  const isInViewRef = useRef(false);
   useEffect(() => {
     const el = ref.current;
     if (!el || typeof window === "undefined") return;
@@ -4558,16 +5653,18 @@ function useElementProgress(options = {}) {
       const range = trackStart - trackEnd;
       const raw = range > 0 ? (trackStart - elementTop) / range : 0;
       const clamped = clamp ? Math.max(0, Math.min(1, raw)) : raw;
-      setProgress(clamped);
-      setIsInView(elementBottom > 0 && elementTop < vh);
+      if (Math.abs(clamped - progressRef.current) > 5e-3) {
+        progressRef.current = clamped;
+        setProgress(clamped);
+      }
+      const nowInView = elementBottom > 0 && elementTop < vh;
+      if (nowInView !== isInViewRef.current) {
+        isInViewRef.current = nowInView;
+        setIsInView(nowInView);
+      }
     };
     calculate();
-    window.addEventListener("scroll", calculate, { passive: true });
-    window.addEventListener("resize", calculate, { passive: true });
-    return () => {
-      window.removeEventListener("scroll", calculate);
-      window.removeEventListener("resize", calculate);
-    };
+    return subscribeScroll(calculate);
   }, [start, end, clamp]);
   return { ref, progress, isInView };
 }
@@ -4618,16 +5715,16 @@ function Motion({
     }
   );
 }
-function getInitialTransform(motionType) {
+function getInitialTransform(motionType, slideDistance, scaleFrom) {
   switch (motionType) {
     case "slideUp":
-      return "translateY(32px)";
+      return `translateY(${slideDistance}px)`;
     case "slideLeft":
-      return "translateX(-32px)";
+      return `translateX(-${slideDistance}px)`;
     case "slideRight":
-      return "translateX(32px)";
+      return `translateX(${slideDistance}px)`;
     case "scaleIn":
-      return "scale(0.95)";
+      return `scale(${scaleFrom})`;
     case "bounceIn":
       return "scale(0.75)";
     case "fadeIn":
@@ -4636,36 +5733,33 @@ function getInitialTransform(motionType) {
   }
 }
 function useStagger(options) {
+  const profile = useMotionProfile();
   const {
     count,
-    staggerDelay = 100,
-    baseDelay = 0,
-    duration = 700,
+    staggerDelay = profile.stagger.perItem,
+    baseDelay = profile.stagger.baseDelay,
+    duration = profile.base.duration,
     motionType = "fadeIn",
-    threshold = 0.1,
-    easing: easing2 = "ease-out"
+    threshold = profile.base.threshold,
+    easing: easing2 = profile.base.easing
   } = options;
   const containerRef = useRef(null);
   const [isVisible, setIsVisible] = useState(false);
   useEffect(() => {
     if (!containerRef.current) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            setIsVisible(true);
-            observer.disconnect();
-          }
-        });
+    return observeElement(
+      containerRef.current,
+      (entry) => {
+        if (entry.isIntersecting) setIsVisible(true);
       },
-      { threshold }
+      { threshold },
+      true
+      // once — 첫 intersection 후 자동 정리
     );
-    observer.observe(containerRef.current);
-    return () => {
-      observer.disconnect();
-    };
   }, [threshold]);
-  const initialTransform = useMemo(() => getInitialTransform(motionType), [motionType]);
+  const slideDistance = profile.entrance.slide.distance;
+  const scaleFrom = profile.entrance.scale.from;
+  const initialTransform = useMemo(() => getInitialTransform(motionType, slideDistance, scaleFrom), [motionType, slideDistance, scaleFrom]);
   const styles = useMemo(() => {
     return Array.from({ length: count }, (_, i) => {
       const itemDelay = baseDelay + i * staggerDelay;
@@ -4690,6 +5784,6 @@ function useStagger(options) {
   };
 }
 
-export { MOTION_PRESETS, Motion, MotionEngine, PAGE_MOTIONS, PerformanceOptimizer, TransitionEffects, applyEasing, easeIn, easeInOut, easeInOutQuad, easeInQuad, easeOut, easeOutQuad, easingPresets, getAvailableEasings, getEasing, getMotionPreset, getPagePreset, getPresetEasing, isEasingFunction, isValidEasing, linear, mergeWithPreset, motionEngine, performanceOptimizer, safeApplyEasing, transitionEffects, useBounceIn, useClickToggle, useCustomCursor, useElementProgress, useFadeIn, useFocusToggle, useGesture, useGestureMotion, useGradient, useHoverMotion, useInView, useMagneticCursor, useMotionState, useMouse, usePageMotions, usePulse, useReducedMotion, useRepeat, useScaleIn, useScrollProgress, useScrollReveal, useSimplePageMotion, useSlideDown, useSlideLeft, useSlideRight, useSlideUp, useSmartMotion, useSmoothScroll, useSpringMotion, useStagger, useToggleMotion, useTypewriter, useUnifiedMotion, useWindowSize };
+export { MOTION_PRESETS, Motion, MotionEngine, MotionProfileProvider, PAGE_MOTIONS, TransitionEffects, 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 };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map