@hua-labs/motion-core 2.2.2 → 2.3.0

package/dist/index.mjs

@@ -1,5 +1,6 @@
 "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
 var MotionEngine = class {
@@ -194,246 +195,202 @@ var TransitionEffects = class _TransitionEffects {
     return _TransitionEffects.instance;
   }
   /**
-   * 페이드 인/아웃 전환
+   * 공통 전환 실행 헬퍼
    */
-  async fade(element, options) {
+  async executeTransition(element, options, config) {
     const transitionId = this.generateTransitionId();
-    return new Promise(async (resolve) => {
-      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) => {
+      resolveTransition = resolve;
+    });
+    const motionId = await motionEngine.motion(
+      element,
+      [
+        { 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: config.onUpdate,
+        onComplete: () => {
+          config.onCleanup();
+          options.onTransitionComplete?.();
+          this.activeTransitions.delete(transitionId);
+          resolveTransition();
+        }
       }
-      this.enableGPUAcceleration(element);
-      const motionId = await motionEngine.motion(
-        element,
-        [
-          { progress: 0, properties: { opacity: options.direction === "reverse" ? initialOpacity : 0 } },
-          { progress: 1, properties: { opacity: targetOpacity } }
-        ],
-        {
-          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();
-          },
-          onComplete: () => {
-            options.onTransitionComplete?.();
-            this.activeTransitions.delete(transitionId);
-            resolve();
-          }
+    );
+    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";
         }
-      );
-      this.activeTransitions.set(transitionId, motionId);
+      },
+      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;
-    return new Promise(async (resolve) => {
-      const initialTransform = getComputedStyle(element).transform;
-      const isReverse = options.direction === "reverse";
-      if (!isReverse) {
-        element.style.transform = `translateX(${distance}px)`;
-      }
-      this.enableGPUAcceleration(element);
-      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);
-            resolve();
-          }
+    const initialTransform = getComputedStyle(element).transform;
+    const isReverse = options.direction === "reverse";
+    return this.executeTransition(element, options, {
+      setup: () => {
+        if (!isReverse) {
+          element.style.transform = `translateX(${distance}px)`;
         }
-      );
-      this.activeTransitions.set(transitionId, motionId);
+      },
+      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;
+      }
     });
   }
   /**
    * 스케일 전환
    */
   async scale(element, options) {
-    const transitionId = this.generateTransitionId();
     const scaleValue = options.scale || 0.8;
-    return new Promise(async (resolve) => {
-      const initialTransform = getComputedStyle(element).transform;
-      const isReverse = options.direction === "reverse";
-      if (!isReverse) {
-        element.style.transform = `scale(${scaleValue})`;
-      }
-      this.enableGPUAcceleration(element);
-      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);
-            resolve();
-          }
+    const initialTransform = getComputedStyle(element).transform;
+    const isReverse = options.direction === "reverse";
+    return this.executeTransition(element, options, {
+      setup: () => {
+        if (!isReverse) {
+          element.style.transform = `scale(${scaleValue})`;
         }
-      );
-      this.activeTransitions.set(transitionId, motionId);
+      },
+      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;
+      }
     });
   }
   /**
    * 플립 전환 (3D 회전)
    */
   async flip(element, options) {
-    const transitionId = this.generateTransitionId();
     const perspective = options.perspective || 1e3;
-    return new Promise(async (resolve) => {
-      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);
-      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);
-            resolve();
-          }
+    const initialTransform = getComputedStyle(element).transform;
+    const isReverse = options.direction === "reverse";
+    return this.executeTransition(element, options, {
+      setup: () => {
+        element.style.perspective = `${perspective}px`;
+        element.style.transformStyle = "preserve-3d";
+        if (!isReverse) {
+          element.style.transform = `rotateY(90deg)`;
         }
-      );
-      this.activeTransitions.set(transitionId, motionId);
+      },
+      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 = "";
+      }
     });
   }
   /**
    * 큐브 전환 (3D 큐브 회전)
    */
   async cube(element, options) {
-    const transitionId = this.generateTransitionId();
     const perspective = options.perspective || 1200;
-    return new Promise(async (resolve) => {
-      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);
-      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);
-            resolve();
-          }
+    const initialTransform = getComputedStyle(element).transform;
+    const isReverse = options.direction === "reverse";
+    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)`;
         }
-      );
-      this.activeTransitions.set(transitionId, motionId);
+      },
+      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 = "";
+      }
     });
   }
   /**
    * 모프 전환 (복합 변형)
    */
   async morph(element, options) {
-    const transitionId = this.generateTransitionId();
-    return new Promise(async (resolve) => {
-      const initialTransform = getComputedStyle(element).transform;
-      const isReverse = options.direction === "reverse";
-      if (!isReverse) {
-        element.style.transform = `scale(0.9) rotate(5deg)`;
-      }
-      this.enableGPUAcceleration(element);
-      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);
-            resolve();
-          }
+    const initialTransform = getComputedStyle(element).transform;
+    const isReverse = options.direction === "reverse";
+    return this.executeTransition(element, options, {
+      setup: () => {
+        if (!isReverse) {
+          element.style.transform = `scale(0.9) rotate(5deg)`;
         }
-      );
-      this.activeTransitions.set(transitionId, motionId);
+      },
+      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;
+      }
     });
   }
   /**
@@ -496,305 +453,6 @@ 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();
-  }
-  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: {
@@ -906,10 +564,10 @@ function useSimplePageMotions(config) {
   const calculateMotionValues = useCallback((isVisible, elementConfig) => {
     const preset = getMotionPreset(elementConfig.type);
     mergeWithPreset(preset, elementConfig);
-    let opacity = isVisible ? 1 : 0;
-    let translateY = isVisible ? 0 : 20;
-    let translateX = 0;
-    let scale = isVisible ? 1 : 0.95;
+    const opacity = isVisible ? 1 : 0;
+    const translateY = isVisible ? 0 : 20;
+    const translateX = 0;
+    const scale = isVisible ? 1 : 0.95;
     return { opacity, translateY, translateX, scale };
   }, []);
   useEffect(() => {
@@ -1169,7 +827,7 @@ function usePageMotions(config) {
     const mergedConfig = mergeWithPreset(preset, elementConfig);
     let opacity = state.finalVisibility ? 1 : 0;
     let translateY = state.finalVisibility ? 0 : 20;
-    let translateX = 0;
+    const translateX = 0;
     let scale = state.finalVisibility ? 1 : 0.95;
     if (mergedConfig.hover && state.isHovered) {
       scale *= 1.1;
@@ -1641,52 +1299,343 @@ 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 mergeProfileOverrides(base, overrides) {
+  return deepMerge(
+    base,
+    overrides
+  );
 }
-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 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;
+    }
+  }
+  return result;
 }
-function useUnifiedMotion(options) {
-  const {
-    type,
-    duration = 600,
+
+// 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) {
+      case "up":
+        transforms.push(`translateY(${distance}px)`);
+        break;
+      case "down":
+        transforms.push(`translateY(-${distance}px)`);
+        break;
+      case "left":
+        transforms.push(`translateX(${distance}px)`);
+        break;
+      case "right":
+        transforms.push(`translateX(-${distance}px)`);
+        break;
+    }
+    if (!effects.fade) style.opacity = 0;
+  }
+  if (effects.scale) {
+    const config = typeof effects.scale === "object" ? effects.scale : {};
+    const from = config.from ?? 0.95;
+    transforms.push(`scale(${from})`);
+    if (!effects.fade && !effects.slide) style.opacity = 0;
+  }
+  if (effects.bounce) {
+    transforms.push("scale(0)");
+    if (!effects.fade && !effects.slide && !effects.scale) style.opacity = 0;
+  }
+  if (transforms.length > 0) {
+    style.transform = transforms.join(" ");
+  } else {
+    style.transform = "none";
+  }
+  if (effects.fade && transforms.length === 0) {
+    style.transform = "none";
+  }
+  return style;
+}
+function getMultiEffectVisibleStyle(effects) {
+  const style = {};
+  if (effects.fade) {
+    const config = typeof effects.fade === "object" ? effects.fade : {};
+    style.opacity = config.targetOpacity ?? 1;
+  } else {
+    style.opacity = 1;
+  }
+  if (effects.scale) {
+    const config = typeof effects.scale === "object" ? effects.scale : {};
+    style.transform = `scale(${config.to ?? 1})`;
+  } else {
+    style.transform = "none";
+  }
+  return style;
+}
+function getMultiEffectEasing(effects, easing2) {
+  if (easing2) return easing2;
+  if (effects.bounce) return "cubic-bezier(0.34, 1.56, 0.64, 1)";
+  return "ease-out";
+}
+function useUnifiedMotion(options) {
+  const profile = useMotionProfile();
+  const {
+    type,
+    effects,
+    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,
     onReset
   } = options;
-  const resolvedEasing = getEasingForType(type, easing2);
+  const resolvedType = type ?? "fadeIn";
+  const resolvedEasing = getEasingForType(resolvedType, easing2);
   const ref = useRef(null);
   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(() => {
   });
@@ -1719,29 +1668,32 @@ 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();
   }, [stop]);
   const style = useMemo(() => {
-    const base = isVisible ? getVisibleStyle() : getInitialStyle(type, distance);
+    if (effects) {
+      const base2 = isVisible ? getMultiEffectVisibleStyle(effects) : getMultiEffectInitialStyle(effects, distance);
+      const resolvedEasingMulti = getMultiEffectEasing(effects, easing2);
+      return {
+        ...base2,
+        transition: `all ${duration}ms ${resolvedEasingMulti}`,
+        "--motion-delay": `${delay}ms`,
+        "--motion-duration": `${duration}ms`,
+        "--motion-easing": resolvedEasingMulti,
+        "--motion-progress": `${progress}`
+      };
+    }
+    const base = isVisible ? getVisibleStyle() : getInitialStyle(resolvedType, distance);
     return {
       ...base,
       transition: `all ${duration}ms ${resolvedEasing}`,
@@ -1750,7 +1702,7 @@ function useUnifiedMotion(options) {
       "--motion-easing": resolvedEasing,
       "--motion-progress": `${progress}`
     };
-  }, [isVisible, type, distance, duration, resolvedEasing, delay, progress]);
+  }, [isVisible, type, effects, distance, duration, resolvedEasing, easing2, delay, progress, resolvedType]);
   return {
     ref,
     isVisible,
@@ -1763,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,
@@ -1782,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(() => {
@@ -1841,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();
@@ -1891,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,
@@ -1910,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(() => {
   });
@@ -1928,7 +1864,7 @@ function useSlideUp(options = {}) {
     }, 50);
     return () => clearInterval(id);
   }, [nodeReady]);
-  const getInitialTransform = useCallback(() => {
+  const getInitialTransform2 = useCallback(() => {
     switch (direction) {
       case "up":
         return `translateY(${distance}px)`;
@@ -1978,37 +1914,21 @@ 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();
     };
   }, [stop]);
-  const initialTransform = useMemo(() => getInitialTransform(), [getInitialTransform]);
+  const initialTransform = useMemo(() => getInitialTransform2(), [getInitialTransform2]);
   const finalTransform = useMemo(() => {
     return direction === "left" || direction === "right" ? "translateX(0)" : "translateY(0)";
   }, [direction]);
@@ -2045,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,
@@ -2065,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(() => {
   });
@@ -2113,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 () => {
@@ -2159,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,
@@ -2179,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(() => {
@@ -2236,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 () => {
@@ -2579,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({
@@ -2602,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;
@@ -2620,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;
@@ -2642,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) => ({
@@ -2790,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);
@@ -3078,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,
@@ -3113,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) {
@@ -3134,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":
@@ -3173,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?.();
@@ -3206,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,
@@ -3214,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,
@@ -3619,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,
@@ -4188,7 +4119,1671 @@ function useGestureMotion(options) {
     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 {
+    ref,
+    isVisible,
+    isAnimating,
+    style,
+    progress,
+    start,
+    stop,
+    reset,
+    pause,
+    resume,
+    isOpen,
+    activeIndex,
+    itemStyles,
+    openMenu,
+    closeMenu,
+    toggleMenu,
+    setActiveItem,
+    goToNext,
+    goToPrevious
+  };
+}
+function useSkeleton(options = {}) {
+  const {
+    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 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;
+    }
+    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 (autoStart) {
+      start();
+    }
+  }, [autoStart, start]);
+  useEffect(() => {
+    return () => {
+      if (motionRef.current) {
+        cancelAnimationFrame(motionRef.current);
+      }
+    };
+  }, []);
+  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(() => {
+    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,
+    isVisible,
+    isAnimating,
+    style,
+    progress,
+    start,
+    stop,
+    reset,
+    pause,
+    resume
+  };
+}
+function useTypewriter(options) {
+  const { text, speed = 50, delay = 0, enabled = true, onComplete } = options;
+  const [index, setIndex] = useState(0);
+  const [started, setStarted] = useState(false);
+  const timerRef = useRef(null);
+  const restart = useCallback(() => {
+    setIndex(0);
+    setStarted(false);
+  }, []);
+  useEffect(() => {
+    if (!enabled) return;
+    const id = setTimeout(() => setStarted(true), delay);
+    return () => clearTimeout(id);
+  }, [enabled, delay]);
+  useEffect(() => {
+    if (!started || !enabled) return;
+    if (index >= text.length) {
+      onComplete?.();
+      return;
+    }
+    timerRef.current = setTimeout(() => {
+      setIndex((prev) => prev + 1);
+    }, speed);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [started, enabled, index, text.length, speed, onComplete]);
+  useEffect(() => {
+    setIndex(0);
+    setStarted(false);
+  }, [text]);
+  return {
+    displayText: text.slice(0, index),
+    isTyping: started && index < text.length,
+    progress: text.length > 0 ? index / text.length : 0,
+    restart
+  };
+}
+function useCustomCursor(options = {}) {
+  const {
+    enabled = true,
+    size = 32,
+    smoothing = 0.15,
+    hoverScale = 1.5,
+    detectLabels = true
+  } = options;
+  const [isVisible, setIsVisible] = useState(false);
+  const [label, setLabel] = useState(null);
+  const [isHovering, setIsHovering] = useState(false);
+  const targetRef = useRef({ x: 0, y: 0 });
+  const currentRef = useRef({ x: 0, y: 0 });
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const rafRef = useRef(null);
+  const animate = useCallback(() => {
+    const dx = targetRef.current.x - currentRef.current.x;
+    const dy = targetRef.current.y - currentRef.current.y;
+    currentRef.current.x += dx * smoothing;
+    currentRef.current.y += dy * smoothing;
+    setPos({ x: currentRef.current.x, y: currentRef.current.y });
+    if (Math.abs(dx) > 0.1 || Math.abs(dy) > 0.1) {
+      rafRef.current = requestAnimationFrame(animate);
+    }
+  }, [smoothing]);
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") return;
+    const handleMouseMove = (e) => {
+      targetRef.current = { x: e.clientX, y: e.clientY };
+      setIsVisible(true);
+      if (!rafRef.current) {
+        rafRef.current = requestAnimationFrame(animate);
+      }
+      if (detectLabels) {
+        const target = e.target;
+        const cursorEl = target.closest("[data-cursor]");
+        if (cursorEl) {
+          setLabel(cursorEl.dataset.cursor || null);
+          setIsHovering(true);
+        } else {
+          setLabel(null);
+          setIsHovering(false);
+        }
+      }
+    };
+    const handleMouseLeave = () => {
+      setIsVisible(false);
+      setLabel(null);
+      setIsHovering(false);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [enabled, detectLabels, animate]);
+  const scale = isHovering ? hoverScale : 1;
+  const style = useMemo(() => ({
+    "--cursor-x": `${pos.x}px`,
+    "--cursor-y": `${pos.y}px`,
+    "--cursor-size": `${size}px`,
+    "--cursor-scale": `${scale}`,
+    position: "fixed",
+    left: pos.x - size * scale / 2,
+    top: pos.y - size * scale / 2,
+    width: size * scale,
+    height: size * scale,
+    pointerEvents: "none",
+    zIndex: 9999,
+    transition: "width 0.2s, height 0.2s, left 0.05s, top 0.05s"
+  }), [pos.x, pos.y, size, scale]);
+  return { x: pos.x, y: pos.y, label, isHovering, style, isVisible };
+}
+function useMagneticCursor(options = {}) {
+  const { strength = 0.3, radius = 100, enabled = true } = options;
+  const ref = useRef(null);
+  const transformRef = useRef({ x: 0, y: 0 });
+  const styleRef = useRef({
+    transition: "transform 0.3s cubic-bezier(0.22, 1, 0.36, 1)",
+    transform: "translate(0px, 0px)"
+  });
+  const onMouseMove = useCallback((e) => {
+    if (!enabled || !ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const dx = e.clientX - centerX;
+    const dy = e.clientY - centerY;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    if (dist < radius) {
+      const pull = (1 - dist / radius) * strength;
+      transformRef.current = { x: dx * pull, y: dy * pull };
+    } else {
+      transformRef.current = { x: 0, y: 0 };
+    }
+    ref.current.style.transform = `translate(${transformRef.current.x}px, ${transformRef.current.y}px)`;
+  }, [enabled, strength, radius]);
+  const onMouseLeave = useCallback(() => {
+    if (!ref.current) return;
+    transformRef.current = { x: 0, y: 0 };
+    ref.current.style.transform = "translate(0px, 0px)";
+  }, []);
+  const handlers = useMemo(() => ({ onMouseMove, onMouseLeave }), [onMouseMove, onMouseLeave]);
+  return { ref, handlers, style: styleRef.current };
+}
+function useSmoothScroll(options = {}) {
+  const {
+    enabled = true,
+    lerp = 0.1,
+    wheelMultiplier = 1,
+    touchMultiplier = 2,
+    direction = "vertical",
+    onScroll: onScroll2
+  } = options;
+  const [scroll, setScroll] = useState(0);
+  const [progress, setProgress] = useState(0);
+  const targetRef = useRef(0);
+  const currentRef = useRef(0);
+  const rafRef = useRef(null);
+  const isRunningRef = useRef(false);
+  const touchStartRef = useRef(0);
+  const getMaxScroll = useCallback(() => {
+    if (typeof document === "undefined") return 0;
+    return direction === "vertical" ? document.documentElement.scrollHeight - window.innerHeight : document.documentElement.scrollWidth - window.innerWidth;
+  }, [direction]);
+  const clamp = useCallback((val) => {
+    return Math.max(0, Math.min(val, getMaxScroll()));
+  }, [getMaxScroll]);
+  const animate = useCallback(() => {
+    const dx = targetRef.current - currentRef.current;
+    if (Math.abs(dx) < 0.5) {
+      currentRef.current = targetRef.current;
+      setScroll(currentRef.current);
+      isRunningRef.current = false;
+      return;
+    }
+    currentRef.current += dx * lerp;
+    setScroll(currentRef.current);
+    const max = getMaxScroll();
+    setProgress(max > 0 ? currentRef.current / max : 0);
+    onScroll2?.(currentRef.current);
+    if (direction === "vertical") {
+      window.scrollTo(0, currentRef.current);
+    } else {
+      window.scrollTo(currentRef.current, 0);
+    }
+    rafRef.current = requestAnimationFrame(animate);
+  }, [lerp, direction, getMaxScroll, onScroll2]);
+  const startAnimation = useCallback(() => {
+    if (isRunningRef.current) return;
+    isRunningRef.current = true;
+    rafRef.current = requestAnimationFrame(animate);
+  }, [animate]);
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") return;
+    document.documentElement.style.scrollBehavior = "auto";
+    currentRef.current = direction === "vertical" ? window.scrollY : window.scrollX;
+    targetRef.current = currentRef.current;
+    const handleWheel = (e) => {
+      e.preventDefault();
+      const delta = direction === "vertical" ? e.deltaY : e.deltaX;
+      targetRef.current = clamp(targetRef.current + delta * wheelMultiplier);
+      startAnimation();
+    };
+    const handleTouchStart = (e) => {
+      touchStartRef.current = direction === "vertical" ? e.touches[0].clientY : e.touches[0].clientX;
+    };
+    const handleTouchMove = (e) => {
+      const current = direction === "vertical" ? e.touches[0].clientY : e.touches[0].clientX;
+      const delta = (touchStartRef.current - current) * touchMultiplier;
+      touchStartRef.current = current;
+      targetRef.current = clamp(targetRef.current + delta);
+      startAnimation();
+    };
+    window.addEventListener("wheel", handleWheel, { passive: false });
+    window.addEventListener("touchstart", handleTouchStart, { passive: true });
+    window.addEventListener("touchmove", handleTouchMove, { passive: true });
+    return () => {
+      window.removeEventListener("wheel", handleWheel);
+      window.removeEventListener("touchstart", handleTouchStart);
+      window.removeEventListener("touchmove", handleTouchMove);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      document.documentElement.style.scrollBehavior = "";
+    };
+  }, [enabled, direction, wheelMultiplier, touchMultiplier, clamp, startAnimation]);
+  const scrollTo = useCallback((target, opts) => {
+    const offset = opts?.offset ?? 0;
+    if (typeof target === "number") {
+      targetRef.current = clamp(target + offset);
+    } else {
+      const rect = target.getBoundingClientRect();
+      const pos = direction === "vertical" ? rect.top + currentRef.current + offset : rect.left + currentRef.current + offset;
+      targetRef.current = clamp(pos);
+    }
+    startAnimation();
+  }, [clamp, direction, startAnimation]);
+  const stop = useCallback(() => {
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    isRunningRef.current = false;
+    targetRef.current = currentRef.current;
+  }, []);
+  return {
+    scroll,
+    targetScroll: targetRef.current,
+    progress,
+    scrollTo,
+    stop
+  };
+}
+function useElementProgress(options = {}) {
+  const { start = 0, end = 1, clamp = true } = 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;
+    const calculate = () => {
+      const rect = el.getBoundingClientRect();
+      const vh = window.innerHeight;
+      const elementTop = rect.top;
+      const elementBottom = rect.bottom;
+      const trackStart = vh * (1 - start);
+      const trackEnd = vh * end * -1 + vh;
+      const range = trackStart - trackEnd;
+      const raw = range > 0 ? (trackStart - elementTop) / range : 0;
+      const clamped = clamp ? Math.max(0, Math.min(1, raw)) : raw;
+      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();
+    return subscribeScroll(calculate);
+  }, [start, end, clamp]);
+  return { ref, progress, isInView };
+}
+function Motion({
+  as: Component = "div",
+  type,
+  effects,
+  scroll,
+  delay,
+  duration,
+  children,
+  className,
+  style: userStyle,
+  ...rest
+}) {
+  const scrollOptions = useMemo(() => {
+    if (!scroll) return null;
+    const base = typeof scroll === "object" ? scroll : {};
+    return {
+      ...base,
+      ...delay != null && { delay },
+      ...duration != null && { duration },
+      ...type != null && { motionType: type }
+    };
+  }, [scroll, delay, duration, type]);
+  const scrollMotion = useScrollReveal(scrollOptions ?? { delay: 0 });
+  const unifiedMotion = useUnifiedMotion({
+    type: type ?? "fadeIn",
+    effects,
+    delay,
+    duration,
+    autoStart: true
+  });
+  const isScroll = scroll != null && scroll !== false;
+  const motion = isScroll ? scrollMotion : unifiedMotion;
+  const mergedStyle = useMemo(() => {
+    if (!userStyle) return motion.style;
+    return { ...motion.style, ...userStyle };
+  }, [motion.style, userStyle]);
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: motion.ref,
+      className,
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
+}
+function getInitialTransform(motionType, slideDistance, scaleFrom) {
+  switch (motionType) {
+    case "slideUp":
+      return `translateY(${slideDistance}px)`;
+    case "slideLeft":
+      return `translateX(-${slideDistance}px)`;
+    case "slideRight":
+      return `translateX(${slideDistance}px)`;
+    case "scaleIn":
+      return `scale(${scaleFrom})`;
+    case "bounceIn":
+      return "scale(0.75)";
+    case "fadeIn":
+    default:
+      return "none";
+  }
+}
+function useStagger(options) {
+  const profile = useMotionProfile();
+  const {
+    count,
+    staggerDelay = profile.stagger.perItem,
+    baseDelay = profile.stagger.baseDelay,
+    duration = profile.base.duration,
+    motionType = "fadeIn",
+    threshold = profile.base.threshold,
+    easing: easing2 = profile.base.easing
+  } = options;
+  const containerRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    return observeElement(
+      containerRef.current,
+      (entry) => {
+        if (entry.isIntersecting) setIsVisible(true);
+      },
+      { threshold },
+      true
+      // once — 첫 intersection 후 자동 정리
+    );
+  }, [threshold]);
+  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;
+      if (!isVisible) {
+        return {
+          opacity: 0,
+          transform: initialTransform,
+          transition: `opacity ${duration}ms ${easing2} ${itemDelay}ms, transform ${duration}ms ${easing2} ${itemDelay}ms`
+        };
+      }
+      return {
+        opacity: 1,
+        transform: "none",
+        transition: `opacity ${duration}ms ${easing2} ${itemDelay}ms, transform ${duration}ms ${easing2} ${itemDelay}ms`
+      };
+    });
+  }, [count, isVisible, staggerDelay, baseDelay, duration, motionType, easing2, initialTransform]);
+  return {
+    containerRef,
+    styles,
+    isVisible
+  };
+}
 
-export { MOTION_PRESETS, 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, useFadeIn, useFocusToggle, useGesture, useGestureMotion, useGradient, useHoverMotion, useInView, useMotionState, useMouse, usePageMotions, usePulse, useReducedMotion, useRepeat, useScaleIn, useScrollProgress, useScrollReveal, useSimplePageMotion, useSlideDown, useSlideLeft, useSlideRight, useSlideUp, useSmartMotion, useSpringMotion, useToggleMotion, useUnifiedMotion, useWindowSize };
+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