@hua-labs/motion-core 2.3.0 → 2.4.1

package/dist/index.mjs

@@ -1,559 +1,9 @@
 "use client";
-import { createContext, useState, useRef, useCallback, useEffect, useMemo, createElement, useContext } from 'react';
+import { getPagePreset, getMotionPreset, mergeWithPreset, motionStateManager, MOTION_PRESETS, useMotionProfile, getEasing, calculateSpring } from './chunk-47QAGQLN.mjs';
+export { MOTION_PRESETS, 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, resolveProfile, safeApplyEasing, transitionEffects, useMotionProfile } from './chunk-47QAGQLN.mjs';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-// src/core/MotionEngine.ts
-var MotionEngine = class {
-  constructor() {
-    this.motions = /* @__PURE__ */ new Map();
-    this.isRunning = false;
-    this.animationFrameId = null;
-  }
-  /**
-   * 모션 시작
-   */
-  motion(element, motionFrames, options) {
-    return new Promise((resolve) => {
-      const motionId = this.generateMotionId();
-      this.enableGPUAcceleration(element);
-      this.createLayer(element);
-      const motion = {
-        id: motionId,
-        element,
-        isRunning: true,
-        isPaused: false,
-        currentProgress: 0,
-        startTime: Date.now() + (options.delay || 0),
-        pauseTime: 0,
-        options: {
-          ...options,
-          onComplete: () => {
-            options.onComplete?.();
-            this.motions.delete(motionId);
-          }
-        }
-      };
-      this.motions.set(motionId, motion);
-      if (!this.isRunning) {
-        this.startAnimationLoop();
-      }
-      options.onStart?.();
-      resolve(motionId);
-    });
-  }
-  /**
-   * 모션 중지
-   */
-  stop(motionId) {
-    const motion = this.motions.get(motionId);
-    if (motion) {
-      motion.isRunning = false;
-      motion.options.onCancel?.();
-      this.motions.delete(motionId);
-    }
-  }
-  /**
-   * 모션 일시정지
-   */
-  pause(motionId) {
-    const motion = this.motions.get(motionId);
-    if (motion && motion.isRunning && !motion.isPaused) {
-      motion.isPaused = true;
-      motion.pauseTime = Date.now();
-    }
-  }
-  /**
-   * 모션 재개
-   */
-  resume(motionId) {
-    const motion = this.motions.get(motionId);
-    if (motion && motion.isPaused) {
-      motion.isPaused = false;
-      if (motion.pauseTime > 0) {
-        motion.startTime += Date.now() - motion.pauseTime;
-      }
-    }
-  }
-  /**
-   * 모든 모션 중지
-   */
-  stopAll() {
-    this.motions.forEach((motion) => {
-      motion.isRunning = false;
-      motion.options.onCancel?.();
-    });
-    this.motions.clear();
-    this.stopAnimationLoop();
-  }
-  /**
-   * 모션 상태 확인
-   */
-  getMotion(motionId) {
-    return this.motions.get(motionId);
-  }
-  /**
-   * 실행 중인 모션 수
-   */
-  getActiveMotionCount() {
-    return this.motions.size;
-  }
-  /**
-   * 애니메이션 루프 시작
-   */
-  startAnimationLoop() {
-    if (this.isRunning) return;
-    this.isRunning = true;
-    this.animate();
-  }
-  /**
-   * 애니메이션 루프 중지
-   */
-  stopAnimationLoop() {
-    if (this.animationFrameId) {
-      cancelAnimationFrame(this.animationFrameId);
-      this.animationFrameId = null;
-    }
-    this.isRunning = false;
-  }
-  /**
-   * 메인 애니메이션 루프
-   */
-  animate() {
-    if (!this.isRunning || this.motions.size === 0) {
-      this.stopAnimationLoop();
-      return;
-    }
-    const currentTime = Date.now();
-    const completedMotions = [];
-    this.motions.forEach((motion) => {
-      if (!motion.isRunning || motion.isPaused) return;
-      const elapsed = currentTime - motion.startTime;
-      if (elapsed < 0) return;
-      const progress = Math.min(elapsed / motion.options.duration, 1);
-      const easedProgress = motion.options.easing(progress);
-      motion.currentProgress = easedProgress;
-      this.applyMotionFrame(motion.element, easedProgress);
-      motion.options.onUpdate?.(easedProgress);
-      if (progress >= 1) {
-        completedMotions.push(motion.id);
-        motion.isRunning = false;
-        motion.options.onComplete?.();
-      }
-    });
-    completedMotions.forEach((id) => this.motions.delete(id));
-    this.animationFrameId = requestAnimationFrame(() => this.animate());
-  }
-  /**
-   * 모션 프레임 적용
-   */
-  applyMotionFrame(element, progress) {
-    const transforms = [];
-    if (element.style.transform) {
-      transforms.push(element.style.transform);
-    }
-    element.style.transform = transforms.join(" ");
-  }
-  /**
-   * GPU 가속 활성화
-   */
-  enableGPUAcceleration(element) {
-    element.style.willChange = "transform, opacity";
-    element.style.transform = "translateZ(0)";
-  }
-  /**
-   * 레이어 분리
-   */
-  createLayer(element) {
-    element.style.transform = "translateZ(0)";
-    element.style.backfaceVisibility = "hidden";
-  }
-  /**
-   * 고유 모션 ID 생성
-   */
-  generateMotionId() {
-    return `motion_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-  }
-  /**
-   * 정리
-   */
-  destroy() {
-    this.stopAll();
-    this.stopAnimationLoop();
-  }
-};
-var motionEngine = new MotionEngine();
-
-// src/core/TransitionEffects.ts
-var TransitionEffects = class _TransitionEffects {
-  constructor() {
-    this.activeTransitions = /* @__PURE__ */ new Map();
-  }
-  static getInstance() {
-    if (!_TransitionEffects.instance) {
-      _TransitionEffects.instance = new _TransitionEffects();
-    }
-    return _TransitionEffects.instance;
-  }
-  /**
-   * 공통 전환 실행 헬퍼
-   */
-  async executeTransition(element, options, config) {
-    const transitionId = this.generateTransitionId();
-    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.activeTransitions.set(transitionId, motionId);
-    return completed;
-  }
-  /**
-   * 페이드 인/아웃 전환
-   */
-  async fade(element, options) {
-    const initialOpacity = parseFloat(getComputedStyle(element).opacity) || 1;
-    const targetOpacity = options.direction === "reverse" ? 0 : 1;
-    return this.executeTransition(element, options, {
-      setup: () => {
-        if (options.direction === "reverse") {
-          element.style.opacity = initialOpacity.toString();
-        } else {
-          element.style.opacity = "0";
-        }
-      },
-      keyframes: [
-        { opacity: options.direction === "reverse" ? initialOpacity : 0 },
-        { opacity: targetOpacity }
-      ],
-      onUpdate: (progress) => {
-        const currentOpacity = options.direction === "reverse" ? initialOpacity * (1 - progress) : targetOpacity * progress;
-        element.style.opacity = currentOpacity.toString();
-      },
-      onCleanup: () => {
-      }
-    });
-  }
-  /**
-   * 슬라이드 전환
-   */
-  async slide(element, options) {
-    const distance = options.distance || 100;
-    const initialTransform = getComputedStyle(element).transform;
-    const isReverse = options.direction === "reverse";
-    return this.executeTransition(element, options, {
-      setup: () => {
-        if (!isReverse) {
-          element.style.transform = `translateX(${distance}px)`;
-        }
-      },
-      keyframes: [
-        { translateX: isReverse ? 0 : distance },
-        { translateX: isReverse ? distance : 0 }
-      ],
-      onUpdate: (progress) => {
-        const currentTranslateX = isReverse ? distance * progress : distance * (1 - progress);
-        element.style.transform = `translateX(${currentTranslateX}px)`;
-      },
-      onCleanup: () => {
-        element.style.transform = initialTransform;
-      }
-    });
-  }
-  /**
-   * 스케일 전환
-   */
-  async scale(element, options) {
-    const scaleValue = options.scale || 0.8;
-    const initialTransform = getComputedStyle(element).transform;
-    const isReverse = options.direction === "reverse";
-    return this.executeTransition(element, options, {
-      setup: () => {
-        if (!isReverse) {
-          element.style.transform = `scale(${scaleValue})`;
-        }
-      },
-      keyframes: [
-        { scale: isReverse ? 1 : scaleValue },
-        { scale: isReverse ? scaleValue : 1 }
-      ],
-      onUpdate: (progress) => {
-        const currentScale = isReverse ? 1 - (1 - scaleValue) * progress : scaleValue + (1 - scaleValue) * progress;
-        element.style.transform = `scale(${currentScale})`;
-      },
-      onCleanup: () => {
-        element.style.transform = initialTransform;
-      }
-    });
-  }
-  /**
-   * 플립 전환 (3D 회전)
-   */
-  async flip(element, options) {
-    const perspective = options.perspective || 1e3;
-    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)`;
-        }
-      },
-      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 perspective = options.perspective || 1200;
-    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)`;
-        }
-      },
-      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 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)`;
-        }
-      },
-      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;
-      }
-    });
-  }
-  /**
-   * 전환 중지
-   */
-  stopTransition(transitionId) {
-    const motionId = this.activeTransitions.get(transitionId);
-    if (motionId) {
-      motionEngine.stop(motionId);
-      this.activeTransitions.delete(transitionId);
-    }
-  }
-  /**
-   * 모든 전환 중지
-   */
-  stopAllTransitions() {
-    this.activeTransitions.forEach((motionId) => {
-      motionEngine.stop(motionId);
-    });
-    this.activeTransitions.clear();
-  }
-  /**
-   * 활성 전환 수 확인
-   */
-  getActiveTransitionCount() {
-    return this.activeTransitions.size;
-  }
-  /**
-   * GPU 가속 활성화
-   */
-  enableGPUAcceleration(element) {
-    element.style.willChange = "transform, opacity";
-    const currentTransform = element.style.transform;
-    if (currentTransform && currentTransform !== "none" && currentTransform !== "") {
-      if (!currentTransform.includes("translateZ")) {
-        element.style.transform = `${currentTransform} translateZ(0)`;
-      }
-    } else {
-      element.style.transform = "translateZ(0)";
-    }
-  }
-  /**
-   * 기본 이징 함수
-   */
-  getDefaultEasing() {
-    return (t) => t * t * (3 - 2 * t);
-  }
-  /**
-   * 고유 전환 ID 생성
-   */
-  generateTransitionId() {
-    return `transition_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-  }
-  /**
-   * 정리
-   */
-  destroy() {
-    this.stopAllTransitions();
-  }
-};
-var transitionEffects = TransitionEffects.getInstance();
-
-// src/presets/index.ts
-var MOTION_PRESETS = {
-  hero: {
-    entrance: "fadeIn",
-    delay: 200,
-    duration: 800,
-    hover: false,
-    click: false
-  },
-  title: {
-    entrance: "slideUp",
-    delay: 400,
-    duration: 700,
-    hover: false,
-    click: false
-  },
-  button: {
-    entrance: "scaleIn",
-    delay: 600,
-    duration: 300,
-    hover: true,
-    click: true
-  },
-  card: {
-    entrance: "slideUp",
-    delay: 800,
-    duration: 500,
-    hover: true,
-    click: false
-  },
-  text: {
-    entrance: "fadeIn",
-    delay: 200,
-    duration: 600,
-    hover: false,
-    click: false
-  },
-  image: {
-    entrance: "scaleIn",
-    delay: 400,
-    duration: 600,
-    hover: true,
-    click: false
-  }
-};
-var PAGE_MOTIONS = {
-  // 홈페이지
-  home: {
-    hero: { type: "hero" },
-    title: { type: "title" },
-    description: { type: "text" },
-    cta: { type: "button" },
-    feature1: { type: "card" },
-    feature2: { type: "card" },
-    feature3: { type: "card" }
-  },
-  // 대시보드
-  dashboard: {
-    header: { type: "hero" },
-    sidebar: { type: "card", entrance: "slideLeft" },
-    main: { type: "text", entrance: "fadeIn" },
-    card1: { type: "card" },
-    card2: { type: "card" },
-    card3: { type: "card" },
-    chart: { type: "image" }
-  },
-  // 제품 페이지
-  product: {
-    hero: { type: "hero" },
-    title: { type: "title" },
-    image: { type: "image" },
-    description: { type: "text" },
-    price: { type: "text" },
-    buyButton: { type: "button" },
-    features: { type: "card" }
-  },
-  // 블로그
-  blog: {
-    header: { type: "hero" },
-    title: { type: "title" },
-    content: { type: "text" },
-    sidebar: { type: "card", entrance: "slideRight" },
-    related1: { type: "card" },
-    related2: { type: "card" },
-    related3: { type: "card" }
-  }
-};
-function mergeWithPreset(preset, custom = {}) {
-  return {
-    ...preset,
-    ...custom
-  };
-}
-function getPagePreset(pageType) {
-  return PAGE_MOTIONS[pageType];
-}
-function getMotionPreset(type) {
-  return MOTION_PRESETS[type] || MOTION_PRESETS.text;
-}
-
-// src/hooks/useSimplePageMotion.ts
 function useSimplePageMotion(pageType) {
   const config = getPagePreset(pageType);
   return useSimplePageMotions(config);
@@ -658,156 +108,6 @@ function useSimplePageMotions(config) {
   }, [motions]);
   return getPageMotionRefs();
 }
-
-// src/managers/MotionStateManager.ts
-var MotionStateManager = class {
-  constructor() {
-    this.states = /* @__PURE__ */ new Map();
-    this.listeners = /* @__PURE__ */ new Map();
-  }
-  /**
-   * 요소의 상태를 초기화
-   */
-  initializeElement(elementId, config) {
-    const initialState = {
-      internalVisibility: false,
-      // 초기에 숨김 상태로 시작 (스크롤 리빌용)
-      triggeredVisibility: false,
-      // Intersection Observer가 아직 트리거되지 않음
-      finalVisibility: false,
-      // 초기에 숨김 상태로 시작
-      opacity: 0,
-      // 초기에 투명 상태로 시작
-      translateY: 20,
-      // 초기에 아래로 이동된 상태로 시작
-      translateX: 0,
-      scale: 0.95,
-      // 초기에 약간 축소된 상태로 시작
-      rotation: 0,
-      isHovered: false,
-      isClicked: false,
-      isAnimating: false
-    };
-    this.states.set(elementId, initialState);
-    this.computeFinalState(elementId);
-  }
-  /**
-   * 내부 가시성 상태 업데이트 (초기화, 리셋 등)
-   */
-  setInternalVisibility(elementId, visible) {
-    const state = this.states.get(elementId);
-    if (!state) return;
-    state.internalVisibility = visible;
-    this.computeFinalState(elementId);
-    this.notifyListeners(elementId, state);
-  }
-  /**
-   * 외부 트리거 가시성 상태 업데이트 (Intersection Observer)
-   */
-  setTriggeredVisibility(elementId, visible) {
-    const state = this.states.get(elementId);
-    if (!state) return;
-    state.triggeredVisibility = visible;
-    this.computeFinalState(elementId);
-    this.notifyListeners(elementId, state);
-  }
-  /**
-   * 모션 값 업데이트
-   */
-  updateMotionValues(elementId, values) {
-    const state = this.states.get(elementId);
-    if (!state) return;
-    Object.assign(state, values);
-    this.notifyListeners(elementId, state);
-  }
-  /**
-   * 최종 상태 계산
-   */
-  computeFinalState(elementId) {
-    const state = this.states.get(elementId);
-    if (!state) return;
-    state.finalVisibility = state.internalVisibility || state.triggeredVisibility;
-    state.isAnimating = state.finalVisibility && (state.opacity < 1 || state.translateY > 0);
-  }
-  /**
-   * 현재 상태 조회
-   */
-  getState(elementId) {
-    return this.states.get(elementId);
-  }
-  /**
-   * 모든 상태 조회
-   */
-  getAllStates() {
-    return new Map(this.states);
-  }
-  /**
-   * 상태 변경 리스너 등록
-   */
-  subscribe(elementId, listener) {
-    if (!this.listeners.has(elementId)) {
-      this.listeners.set(elementId, /* @__PURE__ */ new Set());
-    }
-    this.listeners.get(elementId).add(listener);
-    return () => {
-      const listeners = this.listeners.get(elementId);
-      if (listeners) {
-        listeners.delete(listener);
-      }
-    };
-  }
-  /**
-   * 리스너들에게 상태 변경 알림
-   */
-  notifyListeners(elementId, state) {
-    const listeners = this.listeners.get(elementId);
-    if (!listeners) return;
-    listeners.forEach((listener) => {
-      try {
-        listener(state);
-      } catch (error) {
-        if (process.env.NODE_ENV === "development") {
-          console.error(`MotionStateManager listener error for ${elementId}:`, error);
-        }
-      }
-    });
-  }
-  /**
-   * 모든 상태 초기화
-   */
-  reset() {
-    this.states.clear();
-    this.listeners.clear();
-  }
-  /**
-   * 특정 요소 상태 초기화
-   */
-  resetElement(elementId) {
-    this.states.delete(elementId);
-    this.listeners.delete(elementId);
-  }
-  /**
-   * 디버그용 상태 출력
-   */
-  debug() {
-    if (process.env.NODE_ENV === "development") {
-      console.log("MotionStateManager Debug:");
-      this.states.forEach((state, elementId) => {
-        console.log(`  ${elementId}:`, {
-          internalVisibility: state.internalVisibility,
-          triggeredVisibility: state.triggeredVisibility,
-          finalVisibility: state.finalVisibility,
-          opacity: state.opacity,
-          translateY: state.translateY,
-          isAnimating: state.isAnimating
-        });
-      });
-    }
-  }
-};
-var motionStateManager = new MotionStateManager();
-
-// src/hooks/usePageMotions.ts
 function usePageMotions(config) {
   const [motions, setMotions] = useState(/* @__PURE__ */ new Map());
   const observersRef = useRef(/* @__PURE__ */ new Map());
@@ -1300,155 +600,6 @@ function useSmartMotion(options = {}) {
   };
 }
 
-// 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 mergeProfileOverrides(base, overrides) {
-  return deepMerge(
-    base,
-    overrides
-  );
-}
-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;
-}
-
-// 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) {
@@ -1541,8 +692,8 @@ function getInitialStyle(type, distance) {
 function getVisibleStyle() {
   return { opacity: 1, transform: "none" };
 }
-function getEasingForType(type, easing2) {
-  if (easing2) return easing2;
+function getEasingForType(type, easing) {
+  if (easing) return easing;
   if (type === "bounceIn") return "cubic-bezier(0.34, 1.56, 0.64, 1)";
   return "ease-out";
 }
@@ -1608,8 +759,8 @@ function getMultiEffectVisibleStyle(effects) {
   }
   return style;
 }
-function getMultiEffectEasing(effects, easing2) {
-  if (easing2) return easing2;
+function getMultiEffectEasing(effects, easing) {
+  if (easing) return easing;
   if (effects.bounce) return "cubic-bezier(0.34, 1.56, 0.64, 1)";
   return "ease-out";
 }
@@ -1621,7 +772,7 @@ function useUnifiedMotion(options) {
     duration = profile.base.duration,
     autoStart = true,
     delay = 0,
-    easing: easing2,
+    easing,
     threshold = profile.base.threshold,
     triggerOnce = profile.base.triggerOnce,
     distance = profile.entrance.slide.distance,
@@ -1631,7 +782,7 @@ function useUnifiedMotion(options) {
     onReset
   } = options;
   const resolvedType = type ?? "fadeIn";
-  const resolvedEasing = getEasingForType(resolvedType, easing2);
+  const resolvedEasing = getEasingForType(resolvedType, easing);
   const ref = useRef(null);
   const [isVisible, setIsVisible] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
@@ -1683,7 +834,7 @@ function useUnifiedMotion(options) {
   const style = useMemo(() => {
     if (effects) {
       const base2 = isVisible ? getMultiEffectVisibleStyle(effects) : getMultiEffectInitialStyle(effects, distance);
-      const resolvedEasingMulti = getMultiEffectEasing(effects, easing2);
+      const resolvedEasingMulti = getMultiEffectEasing(effects, easing);
       return {
         ...base2,
         transition: `all ${duration}ms ${resolvedEasingMulti}`,
@@ -1702,7 +853,7 @@ function useUnifiedMotion(options) {
       "--motion-easing": resolvedEasing,
       "--motion-progress": `${progress}`
     };
-  }, [isVisible, type, effects, distance, duration, resolvedEasing, easing2, delay, progress, resolvedType]);
+  }, [isVisible, type, effects, distance, duration, resolvedEasing, easing, delay, progress, resolvedType]);
   return {
     ref,
     isVisible,
@@ -1721,7 +872,7 @@ function useFadeIn(options = {}) {
     duration = profile.base.duration,
     threshold = profile.base.threshold,
     triggerOnce = profile.base.triggerOnce,
-    easing: easing2 = profile.base.easing,
+    easing = profile.base.easing,
     autoStart = true,
     initialOpacity = profile.entrance.fade.initialOpacity,
     targetOpacity = 1,
@@ -1791,6 +942,10 @@ function useFadeIn(options = {}) {
     setProgress(0);
     onReset?.();
   }, [stop, onReset]);
+  const pause = useCallback(() => {
+  }, []);
+  const resume = useCallback(() => {
+  }, []);
   useEffect(() => {
     if (!ref.current || !autoStart) return;
     return observeElement(
@@ -1807,14 +962,25 @@ function useFadeIn(options = {}) {
       stop();
     };
   }, [stop]);
-  const style = useMemo(() => ({
-    opacity: isVisible ? targetOpacity : initialOpacity,
-    transition: `opacity ${duration}ms ${easing2}`,
-    "--motion-delay": `${delay}ms`,
-    "--motion-duration": `${duration}ms`,
-    "--motion-easing": easing2,
-    "--motion-progress": `${progress}`
-  }), [isVisible, targetOpacity, initialOpacity, duration, easing2, delay, progress]);
+  const style = useMemo(
+    () => ({
+      opacity: isVisible ? targetOpacity : initialOpacity,
+      transition: `opacity ${duration}ms ${easing}`,
+      "--motion-delay": `${delay}ms`,
+      "--motion-duration": `${duration}ms`,
+      "--motion-easing": easing,
+      "--motion-progress": `${progress}`
+    }),
+    [
+      isVisible,
+      targetOpacity,
+      initialOpacity,
+      duration,
+      easing,
+      delay,
+      progress
+    ]
+  );
   return {
     ref,
     isVisible,
@@ -1823,7 +989,9 @@ function useFadeIn(options = {}) {
     progress,
     start,
     stop,
-    reset
+    reset,
+    pause,
+    resume
   };
 }
 function useSlideUp(options = {}) {
@@ -1833,7 +1001,7 @@ function useSlideUp(options = {}) {
     duration = profile.base.duration,
     threshold = profile.base.threshold,
     triggerOnce = profile.base.triggerOnce,
-    easing: easing2 = profile.entrance.slide.easing,
+    easing = profile.entrance.slide.easing,
     autoStart = true,
     direction = "up",
     distance = profile.entrance.slide.distance,
@@ -1912,6 +1080,10 @@ function useSlideUp(options = {}) {
     setProgress(0);
     onReset?.();
   }, [stop, onReset]);
+  const pause = useCallback(() => {
+  }, []);
+  const resume = useCallback(() => {
+  }, []);
   useEffect(() => {
     if (!ref.current || !autoStart) return;
     return observeElement(
@@ -1928,21 +1100,37 @@ function useSlideUp(options = {}) {
       stop();
     };
   }, [stop]);
-  const initialTransform = useMemo(() => getInitialTransform2(), [getInitialTransform2]);
+  const initialTransform = useMemo(
+    () => getInitialTransform2(),
+    [getInitialTransform2]
+  );
   const finalTransform = useMemo(() => {
     return direction === "left" || direction === "right" ? "translateX(0)" : "translateY(0)";
   }, [direction]);
-  const style = useMemo(() => ({
-    opacity: isVisible ? 1 : 0,
-    transform: isVisible ? finalTransform : initialTransform,
-    transition: `opacity ${duration}ms ${easing2}, transform ${duration}ms ${easing2}`,
-    "--motion-delay": `${delay}ms`,
-    "--motion-duration": `${duration}ms`,
-    "--motion-easing": easing2,
-    "--motion-progress": `${progress}`,
-    "--motion-direction": direction,
-    "--motion-distance": `${distance}px`
-  }), [isVisible, initialTransform, finalTransform, duration, easing2, delay, progress, direction, distance]);
+  const style = useMemo(
+    () => ({
+      opacity: isVisible ? 1 : 0,
+      transform: isVisible ? finalTransform : initialTransform,
+      transition: `opacity ${duration}ms ${easing}, transform ${duration}ms ${easing}`,
+      "--motion-delay": `${delay}ms`,
+      "--motion-duration": `${duration}ms`,
+      "--motion-easing": easing,
+      "--motion-progress": `${progress}`,
+      "--motion-direction": direction,
+      "--motion-distance": `${distance}px`
+    }),
+    [
+      isVisible,
+      initialTransform,
+      finalTransform,
+      duration,
+      easing,
+      delay,
+      progress,
+      direction,
+      distance
+    ]
+  );
   return {
     ref,
     isVisible,
@@ -1951,7 +1139,9 @@ function useSlideUp(options = {}) {
     progress,
     start,
     stop,
-    reset
+    reset,
+    pause,
+    resume
   };
 }
 
@@ -1972,7 +1162,7 @@ function useScaleIn(options = {}) {
     duration = profile.base.duration,
     delay = 0,
     autoStart = true,
-    easing: easing2 = profile.base.easing,
+    easing = profile.base.easing,
     threshold = profile.base.threshold,
     triggerOnce = profile.base.triggerOnce,
     onComplete,
@@ -2031,6 +1221,10 @@ function useScaleIn(options = {}) {
     }
     onReset?.();
   }, [stop, initialScale, onReset]);
+  const pause = useCallback(() => {
+  }, []);
+  const resume = useCallback(() => {
+  }, []);
   useEffect(() => {
     if (!ref.current || !autoStart) return;
     return observeElement(
@@ -2047,15 +1241,18 @@ function useScaleIn(options = {}) {
       stop();
     };
   }, [stop]);
-  const style = useMemo(() => ({
-    transform: `scale(${scale})`,
-    opacity,
-    transition: `all ${duration}ms ${easing2}`,
-    "--motion-delay": `${delay}ms`,
-    "--motion-duration": `${duration}ms`,
-    "--motion-easing": easing2,
-    "--motion-progress": `${progress}`
-  }), [scale, opacity, duration, easing2, delay, progress]);
+  const style = useMemo(
+    () => ({
+      transform: `scale(${scale})`,
+      opacity,
+      transition: `all ${duration}ms ${easing}`,
+      "--motion-delay": `${delay}ms`,
+      "--motion-duration": `${duration}ms`,
+      "--motion-easing": easing,
+      "--motion-progress": `${progress}`
+    }),
+    [scale, opacity, duration, easing, delay, progress]
+  );
   return {
     ref,
     isVisible,
@@ -2064,7 +1261,9 @@ function useScaleIn(options = {}) {
     progress,
     start,
     reset,
-    stop
+    stop,
+    pause,
+    resume
   };
 }
 function useBounceIn(options = {}) {
@@ -2076,7 +1275,7 @@ function useBounceIn(options = {}) {
     intensity = profile.entrance.bounce.intensity,
     threshold = profile.base.threshold,
     triggerOnce = profile.base.triggerOnce,
-    easing: easing2 = profile.entrance.bounce.easing,
+    easing = profile.entrance.bounce.easing,
     onComplete,
     onStart,
     onStop,
@@ -2142,6 +1341,10 @@ function useBounceIn(options = {}) {
     }
     onReset?.();
   }, [stop, onReset]);
+  const pause = useCallback(() => {
+  }, []);
+  const resume = useCallback(() => {
+  }, []);
   useEffect(() => {
     if (!ref.current || !autoStart) return;
     return observeElement(
@@ -2158,15 +1361,18 @@ function useBounceIn(options = {}) {
       stop();
     };
   }, [stop]);
-  const style = useMemo(() => ({
-    transform: `scale(${scale})`,
-    opacity,
-    transition: `all ${duration}ms ${easing2}`,
-    "--motion-delay": `${delay}ms`,
-    "--motion-duration": `${duration}ms`,
-    "--motion-easing": easing2,
-    "--motion-progress": `${progress}`
-  }), [scale, opacity, duration, easing2, delay, progress]);
+  const style = useMemo(
+    () => ({
+      transform: `scale(${scale})`,
+      opacity,
+      transition: `all ${duration}ms ${easing}`,
+      "--motion-delay": `${delay}ms`,
+      "--motion-duration": `${duration}ms`,
+      "--motion-easing": easing,
+      "--motion-progress": `${progress}`
+    }),
+    [scale, opacity, duration, easing, delay, progress]
+  );
   return {
     ref,
     isVisible,
@@ -2175,204 +1381,11 @@ function useBounceIn(options = {}) {
     progress,
     start,
     reset,
-    stop
+    stop,
+    pause,
+    resume
   };
 }
-
-// src/utils/easing.ts
-var linear = (t) => t;
-var easeIn = (t) => t * t;
-var easeOut = (t) => 1 - (1 - t) * (1 - t);
-var easeInOut = (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
-var easeInQuad = (t) => t * t;
-var easeOutQuad = (t) => 1 - (1 - t) * (1 - t);
-var easeInOutQuad = (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
-var easeInCubic = (t) => t * t * t;
-var easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
-var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
-var easeInQuart = (t) => t * t * t * t;
-var easeOutQuart = (t) => 1 - Math.pow(1 - t, 4);
-var easeInOutQuart = (t) => t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2;
-var easeInQuint = (t) => t * t * t * t * t;
-var easeOutQuint = (t) => 1 - Math.pow(1 - t, 5);
-var easeInOutQuint = (t) => t < 0.5 ? 16 * t * t * t * t * t : 1 - Math.pow(-2 * t + 2, 5) / 2;
-var easeInSine = (t) => 1 - Math.cos(t * Math.PI / 2);
-var easeOutSine = (t) => Math.sin(t * Math.PI / 2);
-var easeInOutSine = (t) => -(Math.cos(Math.PI * t) - 1) / 2;
-var easeInExpo = (t) => t === 0 ? 0 : Math.pow(2, 10 * t - 10);
-var easeOutExpo = (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
-var easeInOutExpo = (t) => {
-  if (t === 0) return 0;
-  if (t === 1) return 1;
-  if (t < 0.5) return Math.pow(2, 20 * t - 10) / 2;
-  return (2 - Math.pow(2, -20 * t + 10)) / 2;
-};
-var easeInCirc = (t) => 1 - Math.sqrt(1 - Math.pow(t, 2));
-var easeOutCirc = (t) => Math.sqrt(1 - Math.pow(t - 1, 2));
-var easeInOutCirc = (t) => {
-  if (t < 0.5) return (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2;
-  return (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2;
-};
-var easeInBounce = (t) => 1 - easeOutBounce(1 - t);
-var easeOutBounce = (t) => {
-  const n1 = 7.5625;
-  const d1 = 2.75;
-  if (t < 1 / d1) {
-    return n1 * t * t;
-  } else if (t < 2 / d1) {
-    return n1 * (t -= 1.5 / d1) * t + 0.75;
-  } else if (t < 2.5 / d1) {
-    return n1 * (t -= 2.25 / d1) * t + 0.9375;
-  } else {
-    return n1 * (t -= 2.625 / d1) * t + 0.984375;
-  }
-};
-var easeInOutBounce = (t) => {
-  if (t < 0.5) return (1 - easeOutBounce(1 - 2 * t)) / 2;
-  return (1 + easeOutBounce(2 * t - 1)) / 2;
-};
-var easeInBack = (t) => {
-  const c1 = 1.70158;
-  const c3 = c1 + 1;
-  return c3 * t * t * t - c1 * t * t;
-};
-var easeOutBack = (t) => {
-  const c1 = 1.70158;
-  const c3 = c1 + 1;
-  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
-};
-var easeInOutBack = (t) => {
-  const c1 = 1.70158;
-  const c2 = c1 * 1.525;
-  if (t < 0.5) {
-    return Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2) / 2;
-  } else {
-    return (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;
-  }
-};
-var easeInElastic = (t) => {
-  const c4 = 2 * Math.PI / 3;
-  if (t === 0) return 0;
-  if (t === 1) return 1;
-  return -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 0.75) * c4);
-};
-var easeOutElastic = (t) => {
-  const c4 = 2 * Math.PI / 3;
-  if (t === 0) return 0;
-  if (t === 1) return 1;
-  return Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
-};
-var easeInOutElastic = (t) => {
-  const c5 = 2 * Math.PI / 4.5;
-  if (t === 0) return 0;
-  if (t === 1) return 1;
-  if (t < 0.5) {
-    return -(Math.pow(2, 20 * t - 10) * Math.sin((20 * t - 11.125) * c5)) / 2;
-  } else {
-    return Math.pow(2, -20 * t + 10) * Math.sin((20 * t - 11.125) * c5) / 2 + 1;
-  }
-};
-var pulse = (t) => Math.sin(t * Math.PI) * 0.5 + 0.5;
-var pulseSmooth = (t) => Math.sin(t * Math.PI * 2) * 0.3 + 0.7;
-var skeletonWave = (t) => Math.sin((t - 0.5) * Math.PI * 2) * 0.5 + 0.5;
-var blink = (t) => t < 0.5 ? 1 : 0;
-var easing = {
-  linear,
-  easeIn,
-  easeOut,
-  easeInOut,
-  easeInQuad,
-  easeOutQuad,
-  easeInOutQuad,
-  easeInCubic,
-  easeOutCubic,
-  easeInOutCubic,
-  easeInQuart,
-  easeOutQuart,
-  easeInOutQuart,
-  easeInQuint,
-  easeOutQuint,
-  easeInOutQuint,
-  easeInSine,
-  easeOutSine,
-  easeInOutSine,
-  easeInExpo,
-  easeOutExpo,
-  easeInOutExpo,
-  easeInCirc,
-  easeOutCirc,
-  easeInOutCirc,
-  easeInBounce,
-  easeOutBounce,
-  easeInOutBounce,
-  easeInBack,
-  easeOutBack,
-  easeInOutBack,
-  easeInElastic,
-  easeOutElastic,
-  easeInOutElastic,
-  pulse,
-  pulseSmooth,
-  skeletonWave,
-  blink
-};
-function isValidEasing(easingName) {
-  return easingName in easing;
-}
-function getEasing(easingName) {
-  if (typeof easingName === "function") {
-    return easingName;
-  }
-  if (typeof easingName === "string") {
-    if (easingName in easing) {
-      return easing[easingName];
-    }
-    if (easingName === "bounce") {
-      return easing.easeOutBounce;
-    }
-    if (process.env.NODE_ENV === "development") {
-      console.warn(`[HUA Motion] Unknown easing "${easingName}", using default "easeOut".`);
-    }
-  }
-  return easeOut;
-}
-function applyEasing(t, easingName) {
-  const easingFn = getEasing(easingName);
-  return easingFn(t);
-}
-function safeApplyEasing(t, easingName) {
-  try {
-    const easingFn = getEasing(easingName);
-    return easingFn(t);
-  } catch (err) {
-    if (process.env.NODE_ENV === "development") {
-      console.error(`[HUA Motion] Failed to apply easing "${easingName}":`, err);
-    }
-    return easeOut(t);
-  }
-}
-function getAvailableEasings() {
-  return Object.keys(easing);
-}
-function isEasingFunction(value) {
-  return typeof value === "function";
-}
-var easingPresets = {
-  default: "easeOut",
-  smooth: "easeInOutCubic",
-  fast: "easeOutQuad",
-  slow: "easeInOutSine",
-  bouncy: "easeOutBounce",
-  elastic: "easeOutElastic",
-  fade: "easeInOut",
-  scale: "easeOutBack"
-};
-function getPresetEasing(preset) {
-  const easingName = easingPresets[preset];
-  return getEasing(easingName);
-}
-
-// src/hooks/usePulse.ts
 function usePulse(options = {}) {
   const {
     duration = 3e3,
@@ -2476,20 +1489,6 @@ 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 {
@@ -2629,7 +1628,7 @@ function useGradient(options = {}) {
     duration = 6e3,
     direction = "diagonal",
     size = 300,
-    easing: easing2 = "ease-in-out",
+    easing = "ease-in-out",
     autoStart = false
   } = options;
   const ref = useRef(null);
@@ -2646,10 +1645,10 @@ function useGradient(options = {}) {
     return {
       background,
       backgroundSize,
-      animation: isAnimating ? `gradientShift ${duration}ms ${easing2} infinite` : "none",
+      animation: isAnimating ? `gradientShift ${duration}ms ${easing} infinite` : "none",
       backgroundPosition: isAnimating ? void 0 : `${motionProgress}% 50%`
     };
-  }, [colors, direction, size, duration, easing2, isAnimating, motionProgress]);
+  }, [colors, direction, size, duration, easing, isAnimating, motionProgress]);
   const start = useCallback(() => {
     setIsAnimating(true);
   }, []);
@@ -2697,7 +1696,7 @@ function useHoverMotion(options = {}) {
   const profile = useMotionProfile();
   const {
     duration = profile.interaction.hover.duration,
-    easing: easing2 = profile.interaction.hover.easing,
+    easing = profile.interaction.hover.easing,
     hoverScale = profile.interaction.hover.scale,
     hoverY = profile.interaction.hover.y,
     hoverOpacity = 1
@@ -2731,8 +1730,8 @@ function useHoverMotion(options = {}) {
   const style = useMemo(() => ({
     transform: isHovered ? `scale(${hoverScale}) translateY(${hoverY}px)` : "scale(1) translateY(0px)",
     opacity: isHovered ? hoverOpacity : 1,
-    transition: `transform ${duration}ms ${easing2}, opacity ${duration}ms ${easing2}`
-  }), [isHovered, hoverScale, hoverY, hoverOpacity, duration, easing2]);
+    transition: `transform ${duration}ms ${easing}, opacity ${duration}ms ${easing}`
+  }), [isHovered, hoverScale, hoverY, hoverOpacity, duration, easing]);
   const start = useCallback(() => {
     setIsHovered(true);
     setIsAnimating(true);
@@ -2990,7 +1989,7 @@ function useScrollReveal(options = {}) {
     triggerOnce = profile.base.triggerOnce,
     delay = 0,
     duration = profile.base.duration,
-    easing: easing2 = profile.base.easing,
+    easing = profile.base.easing,
     motionType = "fadeIn",
     onComplete,
     onStart,
@@ -3028,7 +2027,7 @@ function useScrollReveal(options = {}) {
   const slideDistance = profile.entrance.slide.distance;
   const scaleFrom = profile.entrance.scale.from;
   const style = useMemo(() => {
-    const baseTransition = `all ${duration}ms ${easing2}`;
+    const baseTransition = `all ${duration}ms ${easing}`;
     if (!isVisible) {
       switch (motionType) {
         case "fadeIn":
@@ -3078,7 +2077,7 @@ function useScrollReveal(options = {}) {
       transform: "none",
       transition: baseTransition
     };
-  }, [isVisible, motionType, duration, easing2, slideDistance, scaleFrom]);
+  }, [isVisible, motionType, duration, easing, slideDistance, scaleFrom]);
   const start = useCallback(() => {
     setIsAnimating(true);
     onStart?.();
@@ -3300,14 +2299,7 @@ function useMotionState(options = {}) {
   const seek = useCallback((targetProgress) => {
     const clampedProgress = Math.max(0, Math.min(100, targetProgress));
     setProgress(clampedProgress);
-    let targetElapsed = 0;
-    if (currentDirection === "reverse") {
-      targetElapsed = (100 - clampedProgress) / 100 * duration;
-    } else if (currentDirection === "alternate") {
-      targetElapsed = clampedProgress / 100 * duration;
-    } else {
-      targetElapsed = clampedProgress / 100 * duration;
-    }
+    const targetElapsed = currentDirection === "reverse" ? (100 - clampedProgress) / 100 * duration : clampedProgress / 100 * duration;
     setElapsed(targetElapsed);
     if (state === "playing" && startTimeRef.current) {
       const currentTime = performance.now();
@@ -3476,7 +2468,7 @@ function useRepeat(options = {}) {
   };
 }
 function useToggleMotion(options = {}) {
-  const { duration = 300, delay = 0, easing: easing2 = "ease-in-out" } = options;
+  const { duration = 300, delay = 0, easing = "ease-in-out" } = options;
   const ref = useRef(null);
   const [isVisible, setIsVisible] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
@@ -3506,8 +2498,8 @@ function useToggleMotion(options = {}) {
   const style = useMemo(() => ({
     opacity: isVisible ? 1 : 0,
     transform: isVisible ? "translateY(0) scale(1)" : "translateY(10px) scale(0.95)",
-    transition: `opacity ${duration}ms ${easing2} ${delay}ms, transform ${duration}ms ${easing2} ${delay}ms`
-  }), [isVisible, duration, easing2, delay]);
+    transition: `opacity ${duration}ms ${easing} ${delay}ms, transform ${duration}ms ${easing} ${delay}ms`
+  }), [isVisible, duration, easing, delay]);
   return {
     ref,
     isVisible,
@@ -3655,9 +2647,11 @@ function useReducedMotion() {
       mediaQuery.removeEventListener("change", handleChange);
     };
   }, []);
-  return {
-    prefersReducedMotion
-  };
+  return prefersReducedMotion;
+}
+function useReducedMotionObject() {
+  const prefersReducedMotion = useReducedMotion();
+  return { prefersReducedMotion };
 }
 function useWindowSize(options = {}) {
   const {
@@ -3978,7 +2972,7 @@ function useGestureMotion(options) {
   const {
     gestureType,
     duration = 300,
-    easing: easing2 = "ease-out",
+    easing = "ease-out",
     sensitivity = 1,
     enabled = true,
     onGestureStart,
@@ -4020,10 +3014,10 @@ function useGestureMotion(options) {
     }
     setMotionStyle({
       transform,
-      transition: isActive ? "none" : `all ${duration}ms ${easing2}`,
+      transition: isActive ? "none" : `all ${duration}ms ${easing}`,
       cursor: gestureType === "drag" && isActive ? "grabbing" : "pointer"
     });
-  }, [gestureState, gestureType, enabled, duration, easing2, sensitivity]);
+  }, [gestureState, gestureType, enabled, duration, easing, sensitivity]);
   const handleMouseDown = useCallback((e) => {
     if (!enabled || gestureType !== "drag") return;
     isDragging.current = true;
@@ -4122,7 +3116,7 @@ function useGestureMotion(options) {
 function useButtonEffect(options = {}) {
   const {
     duration = 200,
-    easing: easing2 = "ease-out",
+    easing = "ease-out",
     type = "scale",
     scaleAmount = 0.95,
     rippleColor = "rgba(255, 255, 255, 0.6)",
@@ -4396,7 +3390,7 @@ function useButtonEffect(options = {}) {
       `,
       boxShadow,
       opacity: disabled ? disabledOpacity : 1,
-      transition: `all ${duration}ms ${easing2}`,
+      transition: `all ${duration}ms ${easing}`,
       willChange: "transform, box-shadow, opacity",
       cursor: disabled ? "not-allowed" : "pointer",
       position: "relative",
@@ -4433,7 +3427,7 @@ function useButtonEffect(options = {}) {
 function useVisibilityToggle(options = {}) {
   const {
     duration = 300,
-    easing: easing2 = "ease-out",
+    easing = "ease-out",
     showScale = 1,
     showOpacity = 1,
     showRotate = 0,
@@ -4521,7 +3515,7 @@ function useVisibilityToggle(options = {}) {
       translate(${isVisible ? showTranslateX : hideTranslateX}px, ${isVisible ? showTranslateY : hideTranslateY}px)
     `,
     opacity: isVisible ? showOpacity : hideOpacity,
-    transition: `all ${duration}ms ${easing2}`,
+    transition: `all ${duration}ms ${easing}`,
     willChange: "transform, opacity"
   };
   return {
@@ -4544,7 +3538,7 @@ function useVisibilityToggle(options = {}) {
 function useScrollToggle(options = {}) {
   const {
     duration = 300,
-    easing: easing2 = "ease-out",
+    easing = "ease-out",
     showScale = 1,
     showOpacity = 1,
     showRotate = 0,
@@ -4653,7 +3647,7 @@ function useScrollToggle(options = {}) {
       translate(${isVisible ? showTranslateX : hideTranslateX}px, ${isVisible ? showTranslateY : hideTranslateY}px)
     `,
     opacity: isVisible ? showOpacity : hideOpacity,
-    transition: `all ${duration}ms ${easing2}`,
+    transition: `all ${duration}ms ${easing}`,
     willChange: "transform, opacity"
   };
   return {
@@ -4672,7 +3666,7 @@ function useScrollToggle(options = {}) {
 function useCardList(options = {}) {
   const {
     duration = 500,
-    easing: easing2 = "ease-out",
+    easing = "ease-out",
     staggerDelay = 100,
     cardScale = 1,
     cardOpacity = 1,
@@ -4714,7 +3708,7 @@ function useCardList(options = {}) {
         translate(${isCardVisible ? cardTranslateX : initialTranslateX}px, ${isCardVisible ? cardTranslateY : initialTranslateY}px)
       `,
       opacity: isCardVisible ? cardOpacity : initialOpacity,
-      transition: `all ${duration}ms ${easing2} ${delay}ms`,
+      transition: `all ${duration}ms ${easing} ${delay}ms`,
       willChange: "transform, opacity"
     };
   });
@@ -4793,7 +3787,7 @@ function useCardList(options = {}) {
 function useLoadingSpinner(options = {}) {
   const {
     duration = 1e3,
-    easing: easing2 = "linear",
+    easing = "linear",
     type = "rotate",
     rotationSpeed = 1,
     pulseSpeed = 1,
@@ -4957,7 +3951,7 @@ function useLoadingSpinner(options = {}) {
           borderTop: `${thickness}px solid ${color}`,
           borderRadius: "50%",
           transform: `rotate(${rotationAngle}deg)`,
-          transition: `transform ${duration}ms ${easing2}`
+          transition: `transform ${duration}ms ${easing}`
         };
       case "pulse":
         return {
@@ -4965,7 +3959,7 @@ function useLoadingSpinner(options = {}) {
           backgroundColor: color,
           borderRadius: "50%",
           transform: `scale(${pulseScale})`,
-          transition: `transform ${duration}ms ${easing2}`
+          transition: `transform ${duration}ms ${easing}`
         };
       case "bounce":
         return {
@@ -4973,7 +3967,7 @@ function useLoadingSpinner(options = {}) {
           backgroundColor: color,
           borderRadius: "50%",
           transform: `translateY(${bounceOffset}px)`,
-          transition: `transform ${duration}ms ${easing2}`
+          transition: `transform ${duration}ms ${easing}`
         };
       case "wave":
         return {
@@ -5028,7 +4022,7 @@ function useLoadingSpinner(options = {}) {
 function useNavigation(options = {}) {
   const {
     duration = 300,
-    easing: easing2 = "ease-out",
+    easing = "ease-out",
     type = "slide",
     slideDirection = "left",
     staggerDelay = 50,
@@ -5184,14 +4178,14 @@ function useNavigation(options = {}) {
         translate(${translateX}px, ${translateY}px)
       `,
       opacity,
-      transition: `all ${duration}ms ${easing2} ${delay}ms`,
+      transition: `all ${duration}ms ${easing} ${delay}ms`,
       willChange: "transform, opacity",
       cursor: "pointer"
     };
   });
   const getNavigationStyle = () => {
     const baseStyle = {
-      transition: `all ${duration}ms ${easing2}`,
+      transition: `all ${duration}ms ${easing}`,
       willChange: "transform, opacity"
     };
     switch (type) {
@@ -5245,7 +4239,7 @@ function useSkeleton(options = {}) {
   const {
     delay = 0,
     duration = 1500,
-    easing: easing2 = "ease-in-out",
+    easing = "ease-in-out",
     autoStart = true,
     backgroundColor = "#f0f0f0",
     highlightColor = "#e0e0e0",
@@ -5254,7 +4248,7 @@ function useSkeleton(options = {}) {
     width = "100%",
     borderRadius = 4,
     wave = true,
-    pulse: pulse2 = false,
+    pulse = false,
     onComplete,
     onStart,
     onStop,
@@ -5337,13 +4331,13 @@ function useSkeleton(options = {}) {
       position: "relative",
       overflow: "hidden",
       opacity: isVisible ? 1 : 0,
-      transition: `opacity ${duration}ms ${easing2}`
+      transition: `opacity ${duration}ms ${easing}`
     };
     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) {
+    } else if (pulse && isAnimating) {
       baseStyle.animation = `skeleton-pulse ${motionSpeed}ms infinite ease-in-out`;
     }
     return baseStyle;
@@ -5668,16 +4662,2554 @@ function useElementProgress(options = {}) {
   }, [start, end, clamp]);
   return { ref, progress, isInView };
 }
-function Motion({
-  as: Component = "div",
-  type,
-  effects,
-  scroll,
-  delay,
-  duration,
-  children,
-  className,
-  style: userStyle,
+function useAutoFade(options = {}) {
+  const {
+    initialOpacity = 0,
+    targetOpacity = 1,
+    duration = 1e3,
+    delay = 0,
+    repeat = false,
+    repeatDelay = 1e3,
+    repeatCount = -1,
+    ease = "ease-in-out",
+    autoStart = true,
+    onComplete,
+    onRepeat,
+    showOnMount = false
+  } = options;
+  const [opacity, setOpacity] = useState(showOnMount ? initialOpacity : 0);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [isVisible, setIsVisible] = useState(
+    showOnMount ? initialOpacity > 0 : false
+  );
+  const [mounted, setMounted] = useState(false);
+  const motionRef = useRef(null);
+  const timeoutRef = useRef(null);
+  const repeatCountRef = useRef(0);
+  const isFadingInRef = useRef(true);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const getEasing2 = useCallback(
+    (t) => {
+      switch (ease) {
+        case "linear":
+          return t;
+        case "ease-in":
+          return t * t;
+        case "ease-out":
+          return 1 - (1 - t) * (1 - t);
+        case "ease-in-out":
+          return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+        default:
+          return t;
+      }
+    },
+    [ease]
+  );
+  const animate = useCallback(
+    (from, to, onFinish) => {
+      if (!mounted) return;
+      setIsAnimating(true);
+      const startTime = performance.now();
+      const startOpacity = from;
+      const updateOpacity = (currentTime) => {
+        const elapsed = currentTime - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const easedProgress = getEasing2(progress);
+        const currentOpacity = startOpacity + (to - startOpacity) * easedProgress;
+        setOpacity(currentOpacity);
+        setIsVisible(currentOpacity > 0);
+        if (progress < 1) {
+          motionRef.current = requestAnimationFrame(updateOpacity);
+        } else {
+          setIsAnimating(false);
+          onFinish?.();
+        }
+      };
+      motionRef.current = requestAnimationFrame(updateOpacity);
+    },
+    [mounted, duration, getEasing2]
+  );
+  const fadeIn = useCallback(() => {
+    if (!mounted || isAnimating) return;
+    animate(initialOpacity, targetOpacity, () => {
+      onComplete?.();
+      if (repeat && (repeatCount === -1 || repeatCountRef.current < repeatCount)) {
+        repeatCountRef.current++;
+        onRepeat?.(repeatCountRef.current);
+        timeoutRef.current = window.setTimeout(() => {
+          fadeOut();
+        }, repeatDelay);
+      }
+    });
+  }, [
+    mounted,
+    isAnimating,
+    animate,
+    initialOpacity,
+    targetOpacity,
+    onComplete,
+    repeat,
+    repeatCount,
+    repeatDelay,
+    onRepeat
+  ]);
+  const fadeOut = useCallback(() => {
+    if (!mounted || isAnimating) return;
+    animate(targetOpacity, initialOpacity, () => {
+      onComplete?.();
+      if (repeat && (repeatCount === -1 || repeatCountRef.current < repeatCount)) {
+        repeatCountRef.current++;
+        onRepeat?.(repeatCountRef.current);
+        timeoutRef.current = window.setTimeout(() => {
+          fadeIn();
+        }, repeatDelay);
+      }
+    });
+  }, [
+    mounted,
+    isAnimating,
+    animate,
+    targetOpacity,
+    initialOpacity,
+    onComplete,
+    repeat,
+    repeatCount,
+    repeatDelay,
+    onRepeat
+  ]);
+  const start = useCallback(() => {
+    if (!mounted || isAnimating) return;
+    if (delay > 0) {
+      timeoutRef.current = window.setTimeout(() => {
+        fadeIn();
+      }, delay);
+    } else {
+      fadeIn();
+    }
+  }, [mounted, isAnimating, delay, fadeIn]);
+  const stop = useCallback(() => {
+    if (motionRef.current !== null) {
+      cancelAnimationFrame(motionRef.current);
+      motionRef.current = null;
+    }
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setIsAnimating(false);
+  }, []);
+  const reset = useCallback(() => {
+    stop();
+    setOpacity(initialOpacity);
+    setIsVisible(initialOpacity > 0);
+    repeatCountRef.current = 0;
+    isFadingInRef.current = true;
+  }, [stop, initialOpacity]);
+  const toggle = useCallback(() => {
+    if (isFadingInRef.current) {
+      fadeOut();
+      isFadingInRef.current = false;
+    } else {
+      fadeIn();
+      isFadingInRef.current = true;
+    }
+  }, [fadeIn, fadeOut]);
+  useEffect(() => {
+    if (mounted && autoStart) {
+      start();
+    }
+  }, [mounted, autoStart, start]);
+  useEffect(() => {
+    return () => {
+      if (motionRef.current !== null) {
+        cancelAnimationFrame(motionRef.current);
+      }
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return {
+    opacity,
+    isAnimating,
+    isVisible,
+    mounted,
+    start,
+    stop,
+    reset,
+    fadeIn,
+    fadeOut,
+    toggle
+  };
+}
+function useAutoPlay(options = {}) {
+  const {
+    interval = 3e3,
+    delay = 0,
+    repeat = "infinite",
+    autoStart = true,
+    pauseOnHover = false,
+    pauseOnBlur = true,
+    showOnMount = false
+  } = options;
+  const [isPlaying, setIsPlaying] = useState(showOnMount ? autoStart : false);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [mounted, setMounted] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
+  const intervalRef = useRef(null);
+  const timeoutRef = useRef(null);
+  const repeatCountRef = useRef(0);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const next = useCallback(() => {
+    setCurrentStep((prev) => {
+      const nextStep = prev + 1;
+      if (repeat !== "infinite") {
+        repeatCountRef.current += 1;
+        if (repeatCountRef.current >= repeat) {
+          stop();
+          return prev;
+        }
+      }
+      return nextStep;
+    });
+  }, [repeat]);
+  const startInterval = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = window.setInterval(() => {
+      next();
+    }, interval);
+  }, [interval, next]);
+  const pause = useCallback(() => {
+    if (!isPlaying) return;
+    setIsPaused(true);
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, [isPlaying]);
+  const resume = useCallback(() => {
+    if (!isPlaying || !isPaused) return;
+    setIsPaused(false);
+    startInterval();
+  }, [isPlaying, isPaused, startInterval]);
+  const stop = useCallback(() => {
+    setIsPlaying(false);
+    setIsPaused(false);
+    setCurrentStep(0);
+    repeatCountRef.current = 0;
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  const start = useCallback(() => {
+    if (!mounted) return;
+    setIsPlaying(true);
+    setIsPaused(false);
+    setCurrentStep(0);
+    repeatCountRef.current = 0;
+    if (delay > 0) {
+      timeoutRef.current = window.setTimeout(() => {
+        startInterval();
+      }, delay);
+    } else {
+      startInterval();
+    }
+  }, [mounted, delay, startInterval]);
+  const previous = useCallback(() => {
+    setCurrentStep((prev) => Math.max(0, prev - 1));
+  }, []);
+  const goTo = useCallback((step) => {
+    setCurrentStep(Math.max(0, step));
+  }, []);
+  useEffect(() => {
+    if (mounted && autoStart) {
+      start();
+    }
+  }, [mounted, autoStart, start]);
+  useEffect(() => {
+    if (!pauseOnHover) return;
+    const handleMouseEnter = () => {
+      if (isPlaying && !isPaused) {
+        pause();
+      }
+    };
+    const handleMouseLeave = () => {
+      if (isPlaying && isPaused) {
+        resume();
+      }
+    };
+    document.addEventListener("mouseenter", handleMouseEnter);
+    document.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      document.removeEventListener("mouseenter", handleMouseEnter);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [pauseOnHover, isPlaying, isPaused, pause, resume]);
+  useEffect(() => {
+    if (!pauseOnBlur) return;
+    const handleBlur = () => {
+      if (isPlaying && !isPaused) {
+        pause();
+      }
+    };
+    const handleFocus = () => {
+      if (isPlaying && isPaused) {
+        resume();
+      }
+    };
+    window.addEventListener("blur", handleBlur);
+    window.addEventListener("focus", handleFocus);
+    return () => {
+      window.removeEventListener("blur", handleBlur);
+      window.removeEventListener("focus", handleFocus);
+    };
+  }, [pauseOnBlur, isPlaying, isPaused, pause, resume]);
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return {
+    isPlaying,
+    isPaused,
+    currentStep,
+    mounted,
+    start,
+    stop,
+    pause,
+    resume,
+    next,
+    previous,
+    goTo
+  };
+}
+function useAutoScale(options = {}) {
+  const {
+    initialScale = 0,
+    targetScale = 1,
+    duration = 1e3,
+    delay = 0,
+    repeat = false,
+    repeatDelay = 1e3,
+    repeatCount = -1,
+    ease = "ease-in-out",
+    autoStart = true,
+    onComplete,
+    onRepeat,
+    showOnMount = false,
+    centerTransform: _centerTransform = true
+  } = options;
+  const [scale, setScale] = useState(showOnMount ? initialScale : 0);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [isVisible, setIsVisible] = useState(
+    showOnMount ? initialScale > 0 : false
+  );
+  const [mounted, setMounted] = useState(false);
+  const motionRef = useRef(null);
+  const timeoutRef = useRef(null);
+  const repeatCountRef = useRef(0);
+  const isScalingInRef = useRef(true);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const getEasing2 = useCallback(
+    (t) => {
+      switch (ease) {
+        case "linear":
+          return t;
+        case "ease-in":
+          return t * t;
+        case "ease-out":
+          return 1 - (1 - t) * (1 - t);
+        case "ease-in-out":
+          return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+        case "bounce":
+          if (t < 1 / 2.75) {
+            return 7.5625 * t * t;
+          } else if (t < 2 / 2.75) {
+            return 7.5625 * (t -= 1.5 / 2.75) * t + 0.75;
+          } else if (t < 2.5 / 2.75) {
+            return 7.5625 * (t -= 2.25 / 2.75) * t + 0.9375;
+          } else {
+            return 7.5625 * (t -= 2.625 / 2.75) * t + 0.984375;
+          }
+        case "elastic":
+          if (t === 0) return 0;
+          if (t === 1) return 1;
+          return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
+        default:
+          return t;
+      }
+    },
+    [ease]
+  );
+  const animate = useCallback(
+    (from, to, onFinish) => {
+      if (!mounted) return;
+      setIsAnimating(true);
+      const startTime = performance.now();
+      const startScale = from;
+      const updateScale = (currentTime) => {
+        const elapsed = currentTime - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const easedProgress = getEasing2(progress);
+        const currentScale = startScale + (to - startScale) * easedProgress;
+        setScale(currentScale);
+        setIsVisible(currentScale > 0);
+        if (progress < 1) {
+          motionRef.current = requestAnimationFrame(updateScale);
+        } else {
+          setIsAnimating(false);
+          onFinish?.();
+        }
+      };
+      motionRef.current = requestAnimationFrame(updateScale);
+    },
+    [mounted, duration, getEasing2]
+  );
+  const scaleIn = useCallback(() => {
+    if (!mounted || isAnimating) return;
+    animate(initialScale, targetScale, () => {
+      onComplete?.();
+      if (repeat && (repeatCount === -1 || repeatCountRef.current < repeatCount)) {
+        repeatCountRef.current++;
+        onRepeat?.(repeatCountRef.current);
+        timeoutRef.current = window.setTimeout(() => {
+          scaleOut();
+        }, repeatDelay);
+      }
+    });
+  }, [
+    mounted,
+    isAnimating,
+    animate,
+    initialScale,
+    targetScale,
+    onComplete,
+    repeat,
+    repeatCount,
+    repeatDelay,
+    onRepeat
+  ]);
+  const scaleOut = useCallback(() => {
+    if (!mounted || isAnimating) return;
+    animate(targetScale, initialScale, () => {
+      onComplete?.();
+      if (repeat && (repeatCount === -1 || repeatCountRef.current < repeatCount)) {
+        repeatCountRef.current++;
+        onRepeat?.(repeatCountRef.current);
+        timeoutRef.current = window.setTimeout(() => {
+          scaleIn();
+        }, repeatDelay);
+      }
+    });
+  }, [
+    mounted,
+    isAnimating,
+    animate,
+    targetScale,
+    initialScale,
+    onComplete,
+    repeat,
+    repeatCount,
+    repeatDelay,
+    onRepeat
+  ]);
+  const start = useCallback(() => {
+    if (!mounted || isAnimating) return;
+    if (delay > 0) {
+      timeoutRef.current = window.setTimeout(() => {
+        scaleIn();
+      }, delay);
+    } else {
+      scaleIn();
+    }
+  }, [mounted, isAnimating, delay, scaleIn]);
+  const stop = useCallback(() => {
+    if (motionRef.current !== null) {
+      cancelAnimationFrame(motionRef.current);
+      motionRef.current = null;
+    }
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setIsAnimating(false);
+  }, []);
+  const reset = useCallback(() => {
+    stop();
+    setScale(initialScale);
+    setIsVisible(initialScale > 0);
+    repeatCountRef.current = 0;
+    isScalingInRef.current = true;
+  }, [stop, initialScale]);
+  const toggle = useCallback(() => {
+    if (isScalingInRef.current) {
+      scaleOut();
+      isScalingInRef.current = false;
+    } else {
+      scaleIn();
+      isScalingInRef.current = true;
+    }
+  }, [scaleIn, scaleOut]);
+  useEffect(() => {
+    if (mounted && autoStart) {
+      start();
+    }
+  }, [mounted, autoStart, start]);
+  useEffect(() => {
+    return () => {
+      if (motionRef.current !== null) {
+        cancelAnimationFrame(motionRef.current);
+      }
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return {
+    scale,
+    isAnimating,
+    isVisible,
+    mounted,
+    start,
+    stop,
+    reset,
+    scaleIn,
+    scaleOut,
+    toggle
+  };
+}
+function useAutoSlide(options = {}) {
+  const {
+    direction = "left",
+    distance = 100,
+    initialPosition,
+    targetPosition,
+    duration = 1e3,
+    delay = 0,
+    repeat = false,
+    repeatDelay = 1e3,
+    repeatCount = -1,
+    ease = "ease-in-out",
+    autoStart = true,
+    onComplete,
+    onRepeat,
+    showOnMount = false
+  } = options;
+  const getDefaultPositions = useCallback(() => {
+    const defaultInitial = { x: 0, y: 0 };
+    const defaultTarget = { x: 0, y: 0 };
+    switch (direction) {
+      case "left":
+        defaultInitial.x = distance;
+        defaultTarget.x = 0;
+        break;
+      case "right":
+        defaultInitial.x = -distance;
+        defaultTarget.x = 0;
+        break;
+      case "up":
+        defaultInitial.y = distance;
+        defaultTarget.y = 0;
+        break;
+      case "down":
+        defaultInitial.y = -distance;
+        defaultTarget.y = 0;
+        break;
+      case "left-up":
+        defaultInitial.x = distance;
+        defaultInitial.y = distance;
+        defaultTarget.x = 0;
+        defaultTarget.y = 0;
+        break;
+      case "left-down":
+        defaultInitial.x = distance;
+        defaultInitial.y = -distance;
+        defaultTarget.x = 0;
+        defaultTarget.y = 0;
+        break;
+      case "right-up":
+        defaultInitial.x = -distance;
+        defaultInitial.y = distance;
+        defaultTarget.x = 0;
+        defaultTarget.y = 0;
+        break;
+      case "right-down":
+        defaultInitial.x = -distance;
+        defaultInitial.y = -distance;
+        defaultTarget.x = 0;
+        defaultTarget.y = 0;
+        break;
+    }
+    return {
+      initial: initialPosition || defaultInitial,
+      target: targetPosition || defaultTarget
+    };
+  }, [direction, distance, initialPosition, targetPosition]);
+  const positions = getDefaultPositions();
+  const [position, setPosition] = useState(
+    showOnMount ? positions.initial : positions.target
+  );
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [isVisible, setIsVisible] = useState(showOnMount ? true : false);
+  const [mounted, setMounted] = useState(false);
+  const motionRef = useRef(null);
+  const timeoutRef = useRef(null);
+  const repeatCountRef = useRef(0);
+  const isSlidingInRef = useRef(true);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const getEasing2 = useCallback(
+    (t) => {
+      switch (ease) {
+        case "linear":
+          return t;
+        case "ease-in":
+          return t * t;
+        case "ease-out":
+          return 1 - (1 - t) * (1 - t);
+        case "ease-in-out":
+          return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+        default:
+          return t;
+      }
+    },
+    [ease]
+  );
+  const animate = useCallback(
+    (from, to, onFinish) => {
+      if (!mounted) return;
+      setIsAnimating(true);
+      const startTime = performance.now();
+      const startPosition = from;
+      const updatePosition = (currentTime) => {
+        const elapsed = currentTime - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const easedProgress = getEasing2(progress);
+        const currentX = startPosition.x + (to.x - startPosition.x) * easedProgress;
+        const currentY = startPosition.y + (to.y - startPosition.y) * easedProgress;
+        setPosition({ x: currentX, y: currentY });
+        setIsVisible(true);
+        if (progress < 1) {
+          motionRef.current = requestAnimationFrame(updatePosition);
+        } else {
+          setIsAnimating(false);
+          onFinish?.();
+        }
+      };
+      motionRef.current = requestAnimationFrame(updatePosition);
+    },
+    [mounted, duration, getEasing2]
+  );
+  const slideIn = useCallback(() => {
+    if (!mounted || isAnimating) return;
+    animate(positions.initial, positions.target, () => {
+      onComplete?.();
+      if (repeat && (repeatCount === -1 || repeatCountRef.current < repeatCount)) {
+        repeatCountRef.current++;
+        onRepeat?.(repeatCountRef.current);
+        timeoutRef.current = window.setTimeout(() => {
+          slideOut();
+        }, repeatDelay);
+      }
+    });
+  }, [
+    mounted,
+    isAnimating,
+    animate,
+    positions.initial,
+    positions.target,
+    onComplete,
+    repeat,
+    repeatCount,
+    repeatDelay,
+    onRepeat
+  ]);
+  const slideOut = useCallback(() => {
+    if (!mounted || isAnimating) return;
+    animate(positions.target, positions.initial, () => {
+      onComplete?.();
+      if (repeat && (repeatCount === -1 || repeatCountRef.current < repeatCount)) {
+        repeatCountRef.current++;
+        onRepeat?.(repeatCountRef.current);
+        timeoutRef.current = window.setTimeout(() => {
+          slideIn();
+        }, repeatDelay);
+      }
+    });
+  }, [
+    mounted,
+    isAnimating,
+    animate,
+    positions.target,
+    positions.initial,
+    onComplete,
+    repeat,
+    repeatCount,
+    repeatDelay,
+    onRepeat
+  ]);
+  const start = useCallback(() => {
+    if (!mounted || isAnimating) return;
+    if (delay > 0) {
+      timeoutRef.current = window.setTimeout(() => {
+        slideIn();
+      }, delay);
+    } else {
+      slideIn();
+    }
+  }, [mounted, isAnimating, delay, slideIn]);
+  const stop = useCallback(() => {
+    if (motionRef.current !== null) {
+      cancelAnimationFrame(motionRef.current);
+      motionRef.current = null;
+    }
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setIsAnimating(false);
+  }, []);
+  const reset = useCallback(() => {
+    stop();
+    setPosition(positions.initial);
+    setIsVisible(showOnMount ? true : false);
+    repeatCountRef.current = 0;
+    isSlidingInRef.current = true;
+  }, [stop, positions.initial, showOnMount]);
+  const toggle = useCallback(() => {
+    if (isSlidingInRef.current) {
+      slideOut();
+      isSlidingInRef.current = false;
+    } else {
+      slideIn();
+      isSlidingInRef.current = true;
+    }
+  }, [slideIn, slideOut]);
+  useEffect(() => {
+    if (mounted && autoStart) {
+      start();
+    }
+  }, [mounted, autoStart, start]);
+  useEffect(() => {
+    return () => {
+      if (motionRef.current !== null) {
+        cancelAnimationFrame(motionRef.current);
+      }
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return {
+    position,
+    isAnimating,
+    isVisible,
+    mounted,
+    start,
+    stop,
+    reset,
+    slideIn,
+    slideOut,
+    toggle
+  };
+}
+function useMotionOrchestra(options = {}) {
+  const {
+    mode = "sequential",
+    staggerDelay = 100,
+    autoStart = false,
+    loop = false,
+    onComplete
+  } = options;
+  const [orchestraState, setOrchestraState] = useState({
+    isPlaying: false,
+    currentStep: 0,
+    completedSteps: /* @__PURE__ */ new Set()
+  });
+  const motionsRef = useRef([]);
+  const timeoutsRef = useRef([]);
+  const addMotion = useCallback((step) => {
+    motionsRef.current.push(step);
+  }, []);
+  const removeMotion = useCallback((id) => {
+    motionsRef.current = motionsRef.current.filter((step) => step.id !== id);
+  }, []);
+  const clearTimeouts = useCallback(() => {
+    timeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+    timeoutsRef.current = [];
+  }, []);
+  const playSequential = useCallback(() => {
+    if (motionsRef.current.length === 0) return;
+    const playStep = (index) => {
+      if (index >= motionsRef.current.length) {
+        setOrchestraState((prev) => ({
+          ...prev,
+          isPlaying: false,
+          currentStep: 0
+        }));
+        onComplete?.();
+        if (loop) {
+          setTimeout(() => {
+            setOrchestraState((prev) => ({
+              ...prev,
+              isPlaying: true,
+              completedSteps: /* @__PURE__ */ new Set()
+            }));
+            playSequential();
+          }, 1e3);
+        }
+        return;
+      }
+      const step = motionsRef.current[index];
+      setOrchestraState((prev) => ({
+        ...prev,
+        currentStep: index,
+        completedSteps: /* @__PURE__ */ new Set([...prev.completedSteps, step.id])
+      }));
+      step.motion();
+      if (step.onComplete) {
+        step.onComplete();
+      }
+      const timeout = setTimeout(() => {
+        playStep(index + 1);
+      }, step.delay || 0);
+      timeoutsRef.current.push(timeout);
+    };
+    playStep(0);
+  }, [loop, onComplete]);
+  const playParallel = useCallback(() => {
+    if (motionsRef.current.length === 0) return;
+    const completedSteps = /* @__PURE__ */ new Set();
+    motionsRef.current.forEach((step) => {
+      const timeout = setTimeout(() => {
+        step.motion();
+        completedSteps.add(step.id);
+        if (step.onComplete) {
+          step.onComplete();
+        }
+        if (completedSteps.size === motionsRef.current.length) {
+          setOrchestraState((prev) => ({
+            ...prev,
+            isPlaying: false,
+            currentStep: 0
+          }));
+          onComplete?.();
+          if (loop) {
+            setTimeout(() => {
+              setOrchestraState((prev) => ({ ...prev, isPlaying: true }));
+              playParallel();
+            }, 1e3);
+          }
+        }
+      }, step.delay || 0);
+      timeoutsRef.current.push(timeout);
+    });
+    setOrchestraState((prev) => ({
+      ...prev,
+      completedSteps: new Set(completedSteps)
+    }));
+  }, [loop, onComplete]);
+  const playStagger = useCallback(() => {
+    if (motionsRef.current.length === 0) return;
+    const completedSteps = /* @__PURE__ */ new Set();
+    motionsRef.current.forEach((step, index) => {
+      const timeout = setTimeout(
+        () => {
+          step.motion();
+          completedSteps.add(step.id);
+          if (step.onComplete) {
+            step.onComplete();
+          }
+          setOrchestraState((prev) => ({
+            ...prev,
+            currentStep: index,
+            completedSteps: /* @__PURE__ */ new Set([...prev.completedSteps, step.id])
+          }));
+          if (completedSteps.size === motionsRef.current.length) {
+            setOrchestraState((prev) => ({
+              ...prev,
+              isPlaying: false,
+              currentStep: 0
+            }));
+            onComplete?.();
+            if (loop) {
+              setTimeout(() => {
+                setOrchestraState((prev) => ({
+                  ...prev,
+                  isPlaying: true,
+                  completedSteps: /* @__PURE__ */ new Set()
+                }));
+                playStagger();
+              }, 1e3);
+            }
+          }
+        },
+        (step.delay || 0) + index * staggerDelay
+      );
+      timeoutsRef.current.push(timeout);
+    });
+  }, [staggerDelay, loop, onComplete]);
+  const play = useCallback(() => {
+    clearTimeouts();
+    setOrchestraState((prev) => ({
+      ...prev,
+      isPlaying: true,
+      currentStep: 0,
+      completedSteps: /* @__PURE__ */ new Set()
+    }));
+    switch (mode) {
+      case "sequential":
+        playSequential();
+        break;
+      case "parallel":
+        playParallel();
+        break;
+      case "stagger":
+        playStagger();
+        break;
+    }
+  }, [mode, clearTimeouts, playSequential, playParallel, playStagger]);
+  const stop = useCallback(() => {
+    clearTimeouts();
+    setOrchestraState((prev) => ({
+      ...prev,
+      isPlaying: false,
+      currentStep: 0
+    }));
+  }, [clearTimeouts]);
+  const pause = useCallback(() => {
+    setOrchestraState((prev) => ({ ...prev, isPlaying: false }));
+  }, []);
+  const resume = useCallback(() => {
+    if (orchestraState.currentStep < motionsRef.current.length) {
+      setOrchestraState((prev) => ({ ...prev, isPlaying: true }));
+      switch (mode) {
+        case "sequential":
+          playSequential();
+          break;
+        case "parallel":
+          playParallel();
+          break;
+        case "stagger":
+          playStagger();
+          break;
+      }
+    }
+  }, [
+    mode,
+    orchestraState.currentStep,
+    playSequential,
+    playParallel,
+    playStagger
+  ]);
+  useEffect(() => {
+    if (autoStart && motionsRef.current.length > 0) {
+      play();
+    }
+  }, [autoStart, play]);
+  useEffect(() => {
+    return () => {
+      clearTimeouts();
+    };
+  }, [clearTimeouts]);
+  return {
+    addMotion,
+    removeMotion,
+    play,
+    stop,
+    pause,
+    resume,
+    isPlaying: orchestraState.isPlaying,
+    currentStep: orchestraState.currentStep,
+    completedSteps: orchestraState.completedSteps,
+    totalSteps: motionsRef.current.length
+  };
+}
+function useOrchestration(options = {}) {
+  const {
+    autoStart = false,
+    loop = false,
+    loopCount = -1,
+    loopDelay = 1e3,
+    timeline = [],
+    duration: totalDuration,
+    speed = 1,
+    reverse = false,
+    onStart,
+    onComplete,
+    onLoop,
+    onError: _onError,
+    onProgress,
+    onStepStart,
+    onStepComplete
+  } = options;
+  const [state, setState] = useState({
+    isPlaying: false,
+    isPaused: false,
+    currentTime: 0,
+    progress: 0,
+    currentStep: null,
+    loopCount: 0,
+    error: null
+  });
+  const [steps, setSteps] = useState(timeline);
+  const [currentSpeed, setCurrentSpeed] = useState(speed);
+  const [isReversed, setIsReversed] = useState(reverse);
+  const motionRef = useRef(null);
+  const startTimeRef = useRef(0);
+  const pauseTimeRef = useRef(0);
+  const stepStartTimesRef = useRef(/* @__PURE__ */ new Map());
+  const stepDurationsRef = useRef(/* @__PURE__ */ new Map());
+  const getEasing2 = useCallback(
+    (t, ease = "linear") => {
+      switch (ease) {
+        case "linear":
+          return t;
+        case "ease-in":
+          return t * t;
+        case "ease-out":
+          return 1 - (1 - t) * (1 - t);
+        case "ease-in-out":
+          return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+        case "bounce":
+          if (t < 1 / 2.75) {
+            return 7.5625 * t * t;
+          } else if (t < 2 / 2.75) {
+            return 7.5625 * (t -= 1.5 / 2.75) * t + 0.75;
+          } else if (t < 2.5 / 2.75) {
+            return 7.5625 * (t -= 2.25 / 2.75) * t + 0.9375;
+          } else {
+            return 7.5625 * (t -= 2.625 / 2.75) * t + 0.984375;
+          }
+        case "elastic":
+          if (t === 0) return 0;
+          if (t === 1) return 1;
+          return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
+        default:
+          return t;
+      }
+    },
+    []
+  );
+  const getTotalDuration = useCallback(() => {
+    if (totalDuration) return totalDuration;
+    let maxEndTime = 0;
+    steps.forEach((step) => {
+      const stepEndTime = (step.delay || 0) + step.duration;
+      maxEndTime = Math.max(maxEndTime, stepEndTime);
+    });
+    return maxEndTime;
+  }, [steps, totalDuration]);
+  const calculateStepTimes = useCallback(() => {
+    const stepTimes = /* @__PURE__ */ new Map();
+    const stepDurations = /* @__PURE__ */ new Map();
+    let currentTime = 0;
+    steps.forEach((step) => {
+      stepTimes.set(step.id, currentTime + (step.delay || 0));
+      stepDurations.set(step.id, step.duration);
+      currentTime += (step.delay || 0) + step.duration;
+    });
+    stepStartTimesRef.current = stepTimes;
+    stepDurationsRef.current = stepDurations;
+  }, [steps]);
+  const getCurrentStep = useCallback(
+    (time) => {
+      for (const step of steps) {
+        const startTime = stepStartTimesRef.current.get(step.id) || 0;
+        const endTime = startTime + (stepDurationsRef.current.get(step.id) || 0);
+        if (time >= startTime && time <= endTime) {
+          return step.id;
+        }
+      }
+      return null;
+    },
+    [steps]
+  );
+  const getStepProgress = useCallback(
+    (stepId) => {
+      const startTime = stepStartTimesRef.current.get(stepId) || 0;
+      const duration = stepDurationsRef.current.get(stepId) || 0;
+      const currentTime = state.currentTime;
+      if (currentTime < startTime) return 0;
+      if (currentTime > startTime + duration) return 1;
+      const stepProgress = (currentTime - startTime) / duration;
+      return Math.max(0, Math.min(1, stepProgress));
+    },
+    [state.currentTime]
+  );
+  const getStepTime = useCallback(
+    (stepId) => {
+      const startTime = stepStartTimesRef.current.get(stepId) || 0;
+      const duration = stepDurationsRef.current.get(stepId) || 0;
+      const currentTime = state.currentTime;
+      if (currentTime < startTime) return 0;
+      if (currentTime > startTime + duration) return duration;
+      return currentTime - startTime;
+    },
+    [state.currentTime]
+  );
+  const updateMotion = useCallback(
+    (currentTime) => {
+      const total = getTotalDuration();
+      const adjustedTime = isReversed ? total - currentTime : currentTime;
+      const progress = Math.min(adjustedTime / total, 1);
+      const currentStep = getCurrentStep(adjustedTime);
+      setState((prev) => ({
+        ...prev,
+        currentTime: adjustedTime,
+        progress,
+        currentStep
+      }));
+      onProgress?.(progress);
+      if (currentStep) {
+        const step = steps.find((s) => s.id === currentStep);
+        if (step) {
+          const stepProgress = getStepProgress(currentStep);
+          const easedProgress = getEasing2(stepProgress, step.ease);
+          step.onUpdate?.(easedProgress);
+        }
+      }
+      if (progress >= 1) {
+        if (loop && (loopCount === -1 || state.loopCount < loopCount)) {
+          setState((prev) => ({
+            ...prev,
+            loopCount: prev.loopCount + 1
+          }));
+          onLoop?.(state.loopCount + 1);
+          setTimeout(() => {
+            reset();
+            play();
+          }, loopDelay);
+        } else {
+          setState((prev) => ({
+            ...prev,
+            isPlaying: false,
+            currentTime: isReversed ? 0 : total,
+            progress: 1
+          }));
+          onComplete?.();
+        }
+      } else {
+        motionRef.current = requestAnimationFrame(() => {
+          const elapsed = (performance.now() - startTimeRef.current) * currentSpeed / 1e3;
+          updateMotion(elapsed);
+        });
+      }
+    },
+    [
+      getTotalDuration,
+      isReversed,
+      getCurrentStep,
+      onProgress,
+      steps,
+      getStepProgress,
+      getEasing2,
+      loop,
+      loopCount,
+      state.loopCount,
+      loopDelay,
+      onLoop,
+      onComplete,
+      currentSpeed
+    ]
+  );
+  const play = useCallback(() => {
+    if (state.isPlaying) return;
+    setState((prev) => ({
+      ...prev,
+      isPlaying: true,
+      isPaused: false,
+      error: null
+    }));
+    onStart?.();
+    const startTime = performance.now() - state.currentTime * 1e3 / currentSpeed;
+    startTimeRef.current = startTime;
+    motionRef.current = requestAnimationFrame(() => {
+      const elapsed = (performance.now() - startTimeRef.current) * currentSpeed / 1e3;
+      updateMotion(elapsed);
+    });
+  }, [state.isPlaying, state.currentTime, currentSpeed, onStart, updateMotion]);
+  const pause = useCallback(() => {
+    if (!state.isPlaying || state.isPaused) return;
+    setState((prev) => ({
+      ...prev,
+      isPaused: true
+    }));
+    if (motionRef.current) {
+      cancelAnimationFrame(motionRef.current);
+      motionRef.current = null;
+    }
+    pauseTimeRef.current = state.currentTime;
+  }, [state.isPlaying, state.isPaused, state.currentTime]);
+  const stop = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      isPlaying: false,
+      isPaused: false,
+      currentTime: 0,
+      progress: 0,
+      currentStep: null
+    }));
+    if (motionRef.current) {
+      cancelAnimationFrame(motionRef.current);
+      motionRef.current = null;
+    }
+  }, []);
+  const reset = useCallback(() => {
+    stop();
+    setState((prev) => ({
+      ...prev,
+      currentTime: 0,
+      progress: 0,
+      currentStep: null,
+      loopCount: 0
+    }));
+  }, [stop]);
+  const seek = useCallback(
+    (time) => {
+      const total = getTotalDuration();
+      const clampedTime = Math.max(0, Math.min(time, total));
+      setState((prev) => ({
+        ...prev,
+        currentTime: clampedTime,
+        progress: clampedTime / total,
+        currentStep: getCurrentStep(clampedTime)
+      }));
+    },
+    [getTotalDuration, getCurrentStep]
+  );
+  const setSpeed = useCallback((speed2) => {
+    setCurrentSpeed(Math.max(0.1, speed2));
+  }, []);
+  const reverseDirection = useCallback(() => {
+    setIsReversed((prev) => !prev);
+  }, []);
+  const addStep = useCallback((step) => {
+    setSteps((prev) => [...prev, step]);
+  }, []);
+  const removeStep = useCallback((stepId) => {
+    setSteps((prev) => prev.filter((step) => step.id !== stepId));
+  }, []);
+  const updateStep = useCallback(
+    (stepId, updates) => {
+      setSteps(
+        (prev) => prev.map(
+          (step) => step.id === stepId ? { ...step, ...updates } : step
+        )
+      );
+    },
+    []
+  );
+  const reorderSteps = useCallback((stepIds) => {
+    setSteps((prev) => {
+      const stepMap = new Map(prev.map((step) => [step.id, step]));
+      return stepIds.map((id) => stepMap.get(id)).filter(Boolean);
+    });
+  }, []);
+  useEffect(() => {
+    const currentStep = state.currentStep;
+    if (currentStep) {
+      onStepStart?.(currentStep);
+      const step = steps.find((s) => s.id === currentStep);
+      step?.onStart?.();
+    }
+  }, [state.currentStep, steps, onStepStart]);
+  useEffect(() => {
+    const currentStep = state.currentStep;
+    if (currentStep) {
+      const stepProgress = getStepProgress(currentStep);
+      if (stepProgress >= 1) {
+        const step = steps.find((s) => s.id === currentStep);
+        step?.onComplete?.();
+        onStepComplete?.(currentStep);
+      }
+    }
+  }, [
+    state.currentTime,
+    state.currentStep,
+    steps,
+    getStepProgress,
+    onStepComplete
+  ]);
+  useEffect(() => {
+    calculateStepTimes();
+  }, [calculateStepTimes]);
+  useEffect(() => {
+    if (autoStart && steps.length > 0) {
+      play();
+    }
+  }, [autoStart, steps.length, play]);
+  useEffect(() => {
+    return () => {
+      if (motionRef.current) {
+        cancelAnimationFrame(motionRef.current);
+      }
+    };
+  }, []);
+  return {
+    // 상태
+    isPlaying: state.isPlaying,
+    isPaused: state.isPaused,
+    currentTime: state.currentTime,
+    progress: state.progress,
+    currentStep: state.currentStep,
+    loopCount: state.loopCount,
+    error: state.error,
+    // 제어
+    play,
+    pause,
+    stop,
+    reset,
+    seek,
+    setSpeed,
+    reverse: reverseDirection,
+    // 타임라인 관리
+    addStep,
+    removeStep,
+    updateStep,
+    reorderSteps,
+    // 유틸리티
+    getStepProgress,
+    getStepTime,
+    getTotalDuration
+  };
+}
+function useSequence(sequence, options = {}) {
+  const { autoStart = true, loop = false } = options;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const motionsRef = useRef([]);
+  const timeoutsRef = useRef([]);
+  const motions = sequence.map((item) => item.hook());
+  const start = useCallback(() => {
+    if (isPlaying) return;
+    setIsPlaying(true);
+    setCurrentIndex(0);
+    motionsRef.current = motions;
+    if (motionsRef.current[0]) {
+      motionsRef.current[0].start();
+    }
+    sequence.forEach((item, index) => {
+      if (index === 0) return;
+      const timeout = window.setTimeout(() => {
+        if (motionsRef.current[index]) {
+          motionsRef.current[index].start();
+          setCurrentIndex(index);
+        }
+      }, item.delay || 0);
+      timeoutsRef.current.push(timeout);
+    });
+    const totalDuration = sequence.reduce((total, item) => {
+      return total + (item.delay || 0);
+    }, 0);
+    const finalTimeout = window.setTimeout(() => {
+      setIsPlaying(false);
+      if (loop) {
+        start();
+      }
+    }, totalDuration + 1e3);
+    timeoutsRef.current.push(finalTimeout);
+  }, [sequence, isPlaying, loop, motions]);
+  const stop = useCallback(() => {
+    setIsPlaying(false);
+    setCurrentIndex(0);
+    timeoutsRef.current.forEach((timeout) => window.clearTimeout(timeout));
+    timeoutsRef.current = [];
+    motionsRef.current.forEach((motion) => {
+      if (motion && motion.stop) {
+        motion.stop();
+      }
+    });
+  }, []);
+  const reset = useCallback(() => {
+    stop();
+    setCurrentIndex(0);
+    motionsRef.current.forEach((motion) => {
+      if (motion && motion.reset) {
+        motion.reset();
+      }
+    });
+  }, [stop]);
+  const pause = useCallback(() => {
+    setIsPlaying(false);
+    if (motionsRef.current[currentIndex] && motionsRef.current[currentIndex].pause) {
+      motionsRef.current[currentIndex].pause();
+    }
+  }, [currentIndex]);
+  const resume = useCallback(() => {
+    setIsPlaying(true);
+    if (motionsRef.current[currentIndex] && motionsRef.current[currentIndex].resume) {
+      motionsRef.current[currentIndex].resume();
+    }
+  }, [currentIndex]);
+  useEffect(() => {
+    if (autoStart && !isPlaying) {
+      start();
+    }
+  }, [autoStart, isPlaying, start]);
+  return {
+    start,
+    stop,
+    pause,
+    resume,
+    reset,
+    isPlaying,
+    currentIndex,
+    totalMotions: sequence.length,
+    ref: motions[0]?.ref ?? { current: null }
+    // 첫 번째 모션의 ref 반환
+  };
+}
+function useLayoutMotion(config) {
+  const {
+    from,
+    to,
+    duration = 500,
+    easing = "ease-in-out",
+    autoStart = false,
+    onComplete
+  } = config;
+  const ref = useRef(null);
+  const [state, setState] = useState({
+    isAnimating: false,
+    progress: 0,
+    currentStyle: {}
+  });
+  const motionFrameRef = useRef(null);
+  const startTimeRef = useRef(0);
+  const parseValue = useCallback(
+    (value) => {
+      if (typeof value === "number") return value;
+      if (typeof value === "string") {
+        const match = value.match(/^(\d+(?:\.\d+)?)(px|%|em|rem|vh|vw)?$/);
+        return match ? parseFloat(match[1]) : 0;
+      }
+      return 0;
+    },
+    []
+  );
+  const interpolate = useCallback(
+    (from2, to2, progress) => {
+      return from2 + (to2 - from2) * progress;
+    },
+    []
+  );
+  const applyEasing2 = useCallback(
+    (t) => {
+      switch (easing) {
+        case "ease-in":
+          return t * t;
+        case "ease-out":
+          return 1 - (1 - t) * (1 - t);
+        case "ease-in-out":
+          return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+        default:
+          return t;
+      }
+    },
+    [easing]
+  );
+  const calculateStyle = useCallback(
+    (progress) => {
+      const easedProgress = applyEasing2(progress);
+      const style = {};
+      if (from.width !== void 0 && to.width !== void 0) {
+        const fromWidth = parseValue(from.width);
+        const toWidth = parseValue(to.width);
+        style.width = `${interpolate(fromWidth, toWidth, easedProgress)}px`;
+      }
+      if (from.height !== void 0 && to.height !== void 0) {
+        const fromHeight = parseValue(from.height);
+        const toHeight = parseValue(to.height);
+        style.height = `${interpolate(fromHeight, toHeight, easedProgress)}px`;
+      }
+      if (from.flexDirection !== to.flexDirection) {
+        style.flexDirection = progress < 0.5 ? from.flexDirection : to.flexDirection;
+      }
+      if (from.justifyContent !== to.justifyContent) {
+        style.justifyContent = progress < 0.5 ? from.justifyContent : to.justifyContent;
+      }
+      if (from.alignItems !== to.alignItems) {
+        style.alignItems = progress < 0.5 ? from.alignItems : to.alignItems;
+      }
+      if (from.gap !== void 0 && to.gap !== void 0) {
+        const fromGap = parseValue(from.gap);
+        const toGap = parseValue(to.gap);
+        style.gap = `${interpolate(fromGap, toGap, easedProgress)}px`;
+      }
+      if (from.gridTemplateColumns !== to.gridTemplateColumns) {
+        style.gridTemplateColumns = progress < 0.5 ? from.gridTemplateColumns : to.gridTemplateColumns;
+      }
+      if (from.gridTemplateRows !== to.gridTemplateRows) {
+        style.gridTemplateRows = progress < 0.5 ? from.gridTemplateRows : to.gridTemplateRows;
+      }
+      if (from.gridGap !== void 0 && to.gridGap !== void 0) {
+        const fromGridGap = parseValue(from.gridGap);
+        const toGridGap = parseValue(to.gridGap);
+        style.gridGap = `${interpolate(fromGridGap, toGridGap, easedProgress)}px`;
+      }
+      return style;
+    },
+    [from, to, applyEasing2, parseValue, interpolate]
+  );
+  const updateMotion = useCallback(() => {
+    if (!state.isAnimating) return;
+    const elapsed = Date.now() - startTimeRef.current;
+    const progress = Math.min(elapsed / duration, 1);
+    setState((prev) => ({
+      ...prev,
+      progress,
+      currentStyle: calculateStyle(progress)
+    }));
+    if (progress < 1) {
+      motionFrameRef.current = requestAnimationFrame(updateMotion);
+    } else {
+      setState((prev) => ({ ...prev, isAnimating: false }));
+      onComplete?.();
+    }
+  }, [state.isAnimating, duration, calculateStyle, onComplete]);
+  const start = useCallback(() => {
+    setState((prev) => ({ ...prev, isAnimating: true, progress: 0 }));
+    startTimeRef.current = Date.now();
+    updateMotion();
+  }, [updateMotion]);
+  const stop = useCallback(() => {
+    setState((prev) => ({ ...prev, isAnimating: false }));
+    if (motionFrameRef.current) {
+      cancelAnimationFrame(motionFrameRef.current);
+    }
+  }, []);
+  const reset = useCallback(() => {
+    setState({
+      isAnimating: false,
+      progress: 0,
+      currentStyle: calculateStyle(0)
+    });
+    if (motionFrameRef.current) {
+      cancelAnimationFrame(motionFrameRef.current);
+    }
+  }, [calculateStyle]);
+  useEffect(() => {
+    if (autoStart) {
+      start();
+    }
+    return () => {
+      if (motionFrameRef.current) {
+        cancelAnimationFrame(motionFrameRef.current);
+      }
+    };
+  }, [autoStart, start]);
+  return {
+    ref,
+    state,
+    start,
+    stop,
+    reset
+  };
+}
+function createLayoutTransition(from, to, options = {}) {
+  return {
+    from,
+    to,
+    duration: options.duration || 500,
+    easing: options.easing || "ease-in-out",
+    autoStart: options.autoStart || false,
+    onComplete: options.onComplete
+  };
+}
+function useKeyboardToggle(options = {}) {
+  const {
+    initialState = false,
+    keys = [" "],
+    keyCode,
+    keyCombo,
+    toggleOnKeyDown = true,
+    toggleOnKeyUp = false,
+    toggleOnKeyPress = false,
+    autoReset = false,
+    resetDelay = 3e3,
+    preventDefault = false,
+    stopPropagation = false,
+    requireFocus = false,
+    showOnMount = false
+  } = options;
+  const [isActive, setIsActive] = useState(showOnMount ? initialState : false);
+  const [mounted, setMounted] = useState(false);
+  const resetTimeoutRef = useRef(null);
+  const elementRef = useRef(null);
+  const pressedKeysRef = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const startResetTimer = useCallback(() => {
+    if (!autoReset || resetDelay <= 0) return;
+    if (resetTimeoutRef.current !== null) {
+      clearTimeout(resetTimeoutRef.current);
+    }
+    resetTimeoutRef.current = window.setTimeout(() => {
+      setIsActive(false);
+      resetTimeoutRef.current = null;
+    }, resetDelay);
+  }, [autoReset, resetDelay]);
+  const toggle = useCallback(() => {
+    if (!mounted) return;
+    setIsActive((prev) => {
+      const newState = !prev;
+      if (newState && autoReset) {
+        startResetTimer();
+      } else if (!newState && resetTimeoutRef.current !== null) {
+        clearTimeout(resetTimeoutRef.current);
+        resetTimeoutRef.current = null;
+      }
+      return newState;
+    });
+  }, [mounted, autoReset, startResetTimer]);
+  const activate = useCallback(() => {
+    if (!mounted || isActive) return;
+    setIsActive(true);
+    if (autoReset) {
+      startResetTimer();
+    }
+  }, [mounted, isActive, autoReset, startResetTimer]);
+  const deactivate = useCallback(() => {
+    if (!mounted || !isActive) return;
+    setIsActive(false);
+    if (resetTimeoutRef.current !== null) {
+      clearTimeout(resetTimeoutRef.current);
+      resetTimeoutRef.current = null;
+    }
+  }, [mounted, isActive]);
+  const reset = useCallback(() => {
+    setIsActive(initialState);
+    if (resetTimeoutRef.current !== null) {
+      clearTimeout(resetTimeoutRef.current);
+      resetTimeoutRef.current = null;
+    }
+  }, [initialState]);
+  const isKeyMatch = useCallback(
+    (event) => {
+      if (keyCode !== void 0 && event.keyCode === keyCode) {
+        return true;
+      }
+      if (keys.length > 0 && keys.includes(event.key)) {
+        return true;
+      }
+      if (keyCombo && keyCombo.length > 0) {
+        const pressedKeys = Array.from(pressedKeysRef.current);
+        const comboMatch = keyCombo.every((key) => pressedKeys.includes(key));
+        return comboMatch;
+      }
+      return false;
+    },
+    [keys, keyCode, keyCombo]
+  );
+  const isFocused = useCallback(() => {
+    if (!requireFocus) return true;
+    return document.activeElement === elementRef.current;
+  }, [requireFocus]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!toggleOnKeyDown || !isFocused()) return;
+      pressedKeysRef.current.add(event.key);
+      if (isKeyMatch(event)) {
+        if (preventDefault) event.preventDefault();
+        if (stopPropagation) event.stopPropagation();
+        toggle();
+      }
+    },
+    [
+      toggleOnKeyDown,
+      isFocused,
+      isKeyMatch,
+      preventDefault,
+      stopPropagation,
+      toggle
+    ]
+  );
+  const handleKeyUp = useCallback(
+    (event) => {
+      if (!toggleOnKeyUp || !isFocused()) return;
+      pressedKeysRef.current.delete(event.key);
+      if (isKeyMatch(event)) {
+        if (preventDefault) event.preventDefault();
+        if (stopPropagation) event.stopPropagation();
+        toggle();
+      }
+    },
+    [
+      toggleOnKeyUp,
+      isFocused,
+      isKeyMatch,
+      preventDefault,
+      stopPropagation,
+      toggle
+    ]
+  );
+  const handleKeyPress = useCallback(
+    (event) => {
+      if (!toggleOnKeyPress || !isFocused()) return;
+      if (isKeyMatch(event)) {
+        if (preventDefault) event.preventDefault();
+        if (stopPropagation) event.stopPropagation();
+        toggle();
+      }
+    },
+    [
+      toggleOnKeyPress,
+      isFocused,
+      isKeyMatch,
+      preventDefault,
+      stopPropagation,
+      toggle
+    ]
+  );
+  useEffect(() => {
+    if (requireFocus || !mounted) return;
+    const handleGlobalKeyDown = (event) => {
+      pressedKeysRef.current.add(event.key);
+      if (isKeyMatch(event)) {
+        if (preventDefault) event.preventDefault();
+        if (stopPropagation) event.stopPropagation();
+        toggle();
+      }
+    };
+    const handleGlobalKeyUp = (event) => {
+      pressedKeysRef.current.delete(event.key);
+      if (isKeyMatch(event)) {
+        if (preventDefault) event.preventDefault();
+        if (stopPropagation) event.stopPropagation();
+        toggle();
+      }
+    };
+    document.addEventListener("keydown", handleGlobalKeyDown);
+    document.addEventListener("keyup", handleGlobalKeyUp);
+    return () => {
+      document.removeEventListener("keydown", handleGlobalKeyDown);
+      document.removeEventListener("keyup", handleGlobalKeyUp);
+    };
+  }, [
+    requireFocus,
+    mounted,
+    isKeyMatch,
+    preventDefault,
+    stopPropagation,
+    toggle
+  ]);
+  useEffect(() => {
+    return () => {
+      if (resetTimeoutRef.current !== null) {
+        clearTimeout(resetTimeoutRef.current);
+      }
+    };
+  }, []);
+  const keyboardHandlers = {
+    ...toggleOnKeyDown && { onKeyDown: handleKeyDown },
+    ...toggleOnKeyUp && { onKeyUp: handleKeyUp },
+    ...toggleOnKeyPress && { onKeyPress: handleKeyPress }
+  };
+  return {
+    isActive,
+    mounted,
+    toggle,
+    activate,
+    deactivate,
+    reset,
+    keyboardHandlers,
+    ref: elementRef
+  };
+}
+function useScrollDirection(options = {}) {
+  const { threshold = 10, idleDelay = 150, showOnMount = false } = options;
+  const [direction, setDirection] = useState(
+    showOnMount ? "idle" : "idle"
+  );
+  const [mounted, setMounted] = useState(false);
+  const [lastScrollY, setLastScrollY] = useState(0);
+  const [idleTimeout, setIdleTimeout] = useState(null);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!mounted) return;
+    const handleScroll = () => {
+      if (typeof window !== "undefined") {
+        const currentScrollY = window.pageYOffset;
+        const scrollDifference = Math.abs(currentScrollY - lastScrollY);
+        if (idleTimeout !== null) {
+          clearTimeout(idleTimeout);
+        }
+        if (scrollDifference > threshold) {
+          const newDirection = currentScrollY > lastScrollY ? "down" : "up";
+          setDirection(newDirection);
+          setLastScrollY(currentScrollY);
+          const timeout = setTimeout(() => {
+            setDirection("idle");
+          }, idleDelay);
+          setIdleTimeout(timeout);
+        }
+      }
+    };
+    if (typeof window !== "undefined") {
+      setLastScrollY(window.pageYOffset);
+    }
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      if (idleTimeout !== null) {
+        clearTimeout(idleTimeout);
+      }
+    };
+  }, [threshold, idleDelay, mounted, lastScrollY, idleTimeout]);
+  return {
+    direction,
+    mounted
+  };
+}
+function useStickyToggle(options = {}) {
+  const {
+    offset = 0,
+    behavior: _behavior = "smooth",
+    showOnMount = false
+  } = options;
+  const [isSticky, setIsSticky] = useState(showOnMount);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!mounted) return;
+    const toggleSticky = () => {
+      if (typeof window !== "undefined") {
+        if (window.pageYOffset > offset) {
+          setIsSticky(true);
+        } else {
+          setIsSticky(false);
+        }
+      }
+    };
+    toggleSticky();
+    window.addEventListener("scroll", toggleSticky, { passive: true });
+    window.addEventListener("resize", toggleSticky, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", toggleSticky);
+      window.removeEventListener("resize", toggleSticky);
+    };
+  }, [offset, mounted]);
+  return {
+    isSticky,
+    mounted
+  };
+}
+function useInteractive(config = {}) {
+  const {
+    hoverScale = 1.05,
+    clickScale = 0.95,
+    duration: _duration = 200
+  } = config;
+  const ref = useRef(null);
+  const [scale, setScale] = useState(1);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isClicked, setIsClicked] = useState(false);
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+    setScale(hoverScale);
+  }, [hoverScale]);
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+    setScale(1);
+  }, []);
+  const handleMouseDown = useCallback(() => {
+    setIsClicked(true);
+    setScale(clickScale);
+  }, [clickScale]);
+  const handleMouseUp = useCallback(() => {
+    setIsClicked(false);
+    setScale(isHovered ? hoverScale : 1);
+  }, [isHovered, hoverScale]);
+  const setRef = (element) => {
+    if (ref.current !== element) {
+      ref.current = element;
+    }
+  };
+  return {
+    ref: setRef,
+    scale,
+    isHovered,
+    isClicked,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleMouseDown,
+    handleMouseUp
+  };
+}
+function usePerformanceMonitor(config = {}) {
+  const { threshold = 30, onPerformanceIssue } = config;
+  const ref = useRef(null);
+  const [fps, setFps] = useState(60);
+  const [isLowPerformance, setIsLowPerformance] = useState(false);
+  const [frameCount, setFrameCount] = useState(0);
+  const lastTime = useRef(performance.now());
+  const frameCountRef = useRef(0);
+  const measurePerformance = () => {
+    const now = performance.now();
+    frameCountRef.current++;
+    if (now - lastTime.current >= 1e3) {
+      const currentFps = Math.round(
+        frameCountRef.current * 1e3 / (now - lastTime.current)
+      );
+      setFps(currentFps);
+      setFrameCount(frameCountRef.current);
+      const lowPerformance = currentFps < threshold;
+      setIsLowPerformance(lowPerformance);
+      if (lowPerformance && onPerformanceIssue) {
+        onPerformanceIssue(currentFps);
+      }
+      frameCountRef.current = 0;
+      lastTime.current = now;
+    }
+    requestAnimationFrame(measurePerformance);
+  };
+  useEffect(() => {
+    const motionId = requestAnimationFrame(measurePerformance);
+    return () => cancelAnimationFrame(motionId);
+  }, []);
+  const setRef = (element) => {
+    if (ref.current !== element) {
+      ref.current = element;
+    }
+  };
+  return {
+    ref: setRef,
+    fps,
+    isLowPerformance,
+    frameCount
+  };
+}
+function useLanguageAwareMotion(options) {
+  const {
+    motionType,
+    duration = 700,
+    delay = 0,
+    threshold = 0.1,
+    pauseOnLanguageChange = true,
+    restartOnLanguageChange = false,
+    currentLanguage: externalLanguage
+  } = options;
+  const elementRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
+  const [internalLanguage, setInternalLanguage] = useState("");
+  const isVisibleRef = useRef(false);
+  const isPausedRef = useRef(false);
+  isVisibleRef.current = isVisible;
+  isPausedRef.current = isPaused;
+  useEffect(() => {
+    if (externalLanguage && internalLanguage !== externalLanguage) {
+      setInternalLanguage(externalLanguage);
+      if (pauseOnLanguageChange && isVisible) {
+        setIsPaused(true);
+        setTimeout(() => {
+          setIsPaused(false);
+        }, 200);
+      }
+      if (restartOnLanguageChange && isVisible) {
+        setIsVisible(false);
+        setTimeout(() => {
+          setIsVisible(true);
+        }, 100);
+      }
+    }
+  }, [
+    externalLanguage,
+    internalLanguage,
+    isVisible,
+    pauseOnLanguageChange,
+    restartOnLanguageChange
+  ]);
+  useEffect(() => {
+    if (!elementRef.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !isVisibleRef.current && !isPausedRef.current) {
+            setTimeout(() => {
+              setIsVisible(true);
+            }, delay);
+          }
+        });
+      },
+      { threshold }
+    );
+    observer.observe(elementRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [delay, threshold]);
+  const getMotionStyle = useCallback(() => {
+    const baseTransition = `all ${duration}ms ease-out`;
+    if (isPaused) {
+      return {
+        opacity: 1,
+        transform: "none",
+        transition: baseTransition
+      };
+    }
+    if (!isVisible) {
+      switch (motionType) {
+        case "fadeIn":
+          return {
+            opacity: 0,
+            transition: baseTransition
+          };
+        case "slideUp":
+          return {
+            opacity: 0,
+            transform: "translateY(32px)",
+            transition: baseTransition
+          };
+        case "slideLeft":
+          return {
+            opacity: 0,
+            transform: "translateX(-32px)",
+            transition: baseTransition
+          };
+        case "slideRight":
+          return {
+            opacity: 0,
+            transform: "translateX(32px)",
+            transition: baseTransition
+          };
+        case "scaleIn":
+          return {
+            opacity: 0,
+            transform: "scale(0.95)",
+            transition: baseTransition
+          };
+        case "bounceIn":
+          return {
+            opacity: 0,
+            transform: "scale(0.75)",
+            transition: baseTransition
+          };
+        default:
+          return {
+            opacity: 0,
+            transition: baseTransition
+          };
+      }
+    }
+    return {
+      opacity: 1,
+      transform: "none",
+      transition: baseTransition
+    };
+  }, [isVisible, isPaused, motionType, duration]);
+  const pauseMotion = useCallback(() => {
+    setIsPaused(true);
+  }, []);
+  const resumeMotion = useCallback(() => {
+    setIsPaused(false);
+  }, []);
+  const restartMotion = useCallback(() => {
+    setIsVisible(false);
+    setTimeout(() => {
+      setIsVisible(true);
+    }, 100);
+  }, []);
+  const motionStyle = useMemo(() => getMotionStyle(), [getMotionStyle]);
+  return {
+    ref: elementRef,
+    isVisible,
+    isPaused,
+    style: motionStyle,
+    pauseMotion,
+    resumeMotion,
+    restartMotion,
+    currentLanguage: internalLanguage
+  };
+}
+function useGameLoop(options = {}) {
+  const {
+    fps = 60,
+    autoStart = false,
+    maxFPS = 120,
+    minFPS = 30,
+    showOnMount = false
+  } = options;
+  const [isRunning, setIsRunning] = useState(showOnMount ? autoStart : false);
+  const [isPaused, setIsPaused] = useState(false);
+  const [currentFPS, setCurrentFPS] = useState(0);
+  const [deltaTime, setDeltaTime] = useState(0);
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const [frameCount, setFrameCount] = useState(0);
+  const [mounted, setMounted] = useState(false);
+  const motionRef = useRef(null);
+  const lastTimeRef = useRef(null);
+  const frameTimeRef = useRef(1e3 / fps);
+  const fpsUpdateTimeRef = useRef(0);
+  const fpsFrameCountRef = useRef(0);
+  const updateCallbacksRef = useRef([]);
+  const renderCallbacksRef = useRef([]);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const gameLoop = useCallback(
+    (currentTime) => {
+      if (!isRunning || isPaused) return;
+      if (lastTimeRef.current === null) {
+        lastTimeRef.current = currentTime;
+        motionRef.current = requestAnimationFrame(gameLoop);
+        return;
+      }
+      const delta = currentTime - lastTimeRef.current;
+      const targetDelta = frameTimeRef.current;
+      if (delta >= targetDelta) {
+        updateCallbacksRef.current.forEach((callback) => {
+          try {
+            callback(delta, elapsedTime);
+          } catch (error) {
+            if (process.env.NODE_ENV === "development") {
+              console.error("Game loop update error:", error);
+            }
+          }
+        });
+        renderCallbacksRef.current.forEach((callback) => {
+          try {
+            callback(delta, elapsedTime);
+          } catch (error) {
+            if (process.env.NODE_ENV === "development") {
+              console.error("Game loop render error:", error);
+            }
+          }
+        });
+        setDeltaTime(delta);
+        setElapsedTime((prev) => prev + delta);
+        setFrameCount((prev) => prev + 1);
+        lastTimeRef.current = currentTime;
+        fpsFrameCountRef.current++;
+        if (currentTime - fpsUpdateTimeRef.current >= 1e3) {
+          const newFPS = Math.round(
+            fpsFrameCountRef.current * 1e3 / (currentTime - fpsUpdateTimeRef.current)
+          );
+          setCurrentFPS(newFPS);
+          fpsFrameCountRef.current = 0;
+          fpsUpdateTimeRef.current = currentTime;
+          if (process.env.NODE_ENV === "development" && typeof window !== "undefined" && window.location.hostname === "localhost") {
+            if (newFPS < minFPS) {
+              console.warn(`Low FPS detected: ${newFPS} (min: ${minFPS})`);
+            }
+          }
+        }
+      }
+      motionRef.current = requestAnimationFrame(gameLoop);
+    },
+    [isRunning, isPaused, elapsedTime, minFPS]
+  );
+  const start = useCallback(() => {
+    if (!mounted) return;
+    setIsRunning(true);
+    setIsPaused(false);
+    setElapsedTime(0);
+    setFrameCount(0);
+    setDeltaTime(0);
+    setCurrentFPS(0);
+    lastTimeRef.current = null;
+    fpsUpdateTimeRef.current = 0;
+    fpsFrameCountRef.current = 0;
+    if (!motionRef.current) {
+      motionRef.current = requestAnimationFrame(gameLoop);
+    }
+  }, [mounted, gameLoop]);
+  const stop = useCallback(() => {
+    setIsRunning(false);
+    setIsPaused(false);
+    if (motionRef.current) {
+      cancelAnimationFrame(motionRef.current);
+      motionRef.current = null;
+    }
+  }, []);
+  const pause = useCallback(() => {
+    if (!isRunning) return;
+    setIsPaused(true);
+  }, [isRunning]);
+  const resume = useCallback(() => {
+    if (!isRunning) return;
+    setIsPaused(false);
+    if (!motionRef.current) {
+      motionRef.current = requestAnimationFrame(gameLoop);
+    }
+  }, [isRunning, gameLoop]);
+  const reset = useCallback(() => {
+    setElapsedTime(0);
+    setFrameCount(0);
+    setDeltaTime(0);
+    setCurrentFPS(0);
+    lastTimeRef.current = null;
+    fpsUpdateTimeRef.current = 0;
+    fpsFrameCountRef.current = 0;
+  }, []);
+  const onUpdate = useCallback(
+    (callback) => {
+      updateCallbacksRef.current.push(callback);
+      return () => {
+        const index = updateCallbacksRef.current.indexOf(callback);
+        if (index > -1) {
+          updateCallbacksRef.current.splice(index, 1);
+        }
+      };
+    },
+    []
+  );
+  const onRender = useCallback(
+    (callback) => {
+      renderCallbacksRef.current.push(callback);
+      return () => {
+        const index = renderCallbacksRef.current.indexOf(callback);
+        if (index > -1) {
+          renderCallbacksRef.current.splice(index, 1);
+        }
+      };
+    },
+    []
+  );
+  useEffect(() => {
+    frameTimeRef.current = 1e3 / Math.min(fps, maxFPS);
+  }, [fps, maxFPS]);
+  useEffect(() => {
+    if (mounted && autoStart && !isRunning) {
+      start();
+    }
+  }, [mounted, autoStart, isRunning, start]);
+  useEffect(() => {
+    return () => {
+      if (motionRef.current) {
+        cancelAnimationFrame(motionRef.current);
+      }
+    };
+  }, []);
+  return {
+    isRunning,
+    fps: currentFPS,
+    deltaTime,
+    elapsedTime,
+    frameCount,
+    mounted,
+    start,
+    stop,
+    pause,
+    resume,
+    reset,
+    onUpdate,
+    onRender
+  };
+}
+function useMotion(configOrFrom = {}, to, options) {
+  let config;
+  let fromValues;
+  let toValues;
+  if (to && options) {
+    fromValues = configOrFrom;
+    toValues = to;
+    config = {
+      duration: options.duration || 1e3,
+      delay: options.delay || 0,
+      autoStart: options.autoStart || false,
+      easing: options.ease || "ease-out"
+    };
+  } else {
+    config = configOrFrom;
+    const { type = "fade" } = config;
+    switch (type) {
+      case "fade":
+        fromValues = { opacity: 0 };
+        toValues = { opacity: 1 };
+        break;
+      case "slide":
+        fromValues = { opacity: 0, translateX: 100 };
+        toValues = { opacity: 1, translateX: 0 };
+        break;
+      case "scale":
+        fromValues = { opacity: 0, scale: 0 };
+        toValues = { opacity: 1, scale: 1 };
+        break;
+      case "rotate":
+        fromValues = { opacity: 0, rotate: 180 };
+        toValues = { opacity: 1, rotate: 0 };
+        break;
+      default:
+        fromValues = { opacity: 0 };
+        toValues = { opacity: 1 };
+    }
+  }
+  const {
+    duration = 1e3,
+    delay = 0,
+    autoStart = true,
+    easing = "ease-out"
+  } = config;
+  const ref = useRef(null);
+  const fromValuesRef = useRef(fromValues);
+  const toValuesRef = useRef(toValues);
+  const initialBgColor = useRef(fromValues.backgroundColor);
+  const [state, setState] = useState({
+    transform: "",
+    opacity: fromValues.opacity ?? 1,
+    backgroundColor: fromValues.backgroundColor,
+    isAnimating: false
+  });
+  const easingFunction = useCallback(
+    (t) => {
+      switch (easing) {
+        case "ease-in":
+          return t * t;
+        case "ease-out":
+          return 1 - (1 - t) * (1 - t);
+        case "ease-in-out":
+          return t < 0.5 ? 2 * t * t : 1 - 2 * (1 - t) * (1 - t);
+        default:
+          return t;
+      }
+    },
+    [easing]
+  );
+  const interpolate = useCallback(
+    (from, to2, progress) => {
+      return from + (to2 - from) * progress;
+    },
+    []
+  );
+  const updateMotion = useCallback(
+    (progress) => {
+      const easedProgress = easingFunction(progress);
+      const from = fromValuesRef.current;
+      const to2 = toValuesRef.current;
+      const newState = {
+        transform: "",
+        opacity: 1,
+        backgroundColor: initialBgColor.current,
+        isAnimating: true
+      };
+      if (from.opacity !== void 0 && to2.opacity !== void 0) {
+        newState.opacity = interpolate(from.opacity, to2.opacity, easedProgress);
+      }
+      const transforms = [];
+      if (from.translateX !== void 0 && to2.translateX !== void 0) {
+        const translateX = interpolate(
+          from.translateX,
+          to2.translateX,
+          easedProgress
+        );
+        transforms.push(`translateX(${translateX}px)`);
+      }
+      if (from.translateY !== void 0 && to2.translateY !== void 0) {
+        const translateY = interpolate(
+          from.translateY,
+          to2.translateY,
+          easedProgress
+        );
+        transforms.push(`translateY(${translateY}px)`);
+      }
+      if (from.scale !== void 0 && to2.scale !== void 0) {
+        const scaleVal = interpolate(from.scale, to2.scale, easedProgress);
+        transforms.push(`scale(${scaleVal})`);
+      }
+      if (from.rotate !== void 0 && to2.rotate !== void 0) {
+        const rotate = interpolate(from.rotate, to2.rotate, easedProgress);
+        transforms.push(`rotate(${rotate}deg)`);
+      }
+      if (transforms.length > 0) {
+        newState.transform = transforms.join(" ");
+      }
+      if (from.backgroundColor && to2.backgroundColor) {
+        newState.backgroundColor = easedProgress > 0.5 ? to2.backgroundColor : from.backgroundColor;
+      }
+      setState(newState);
+    },
+    [easingFunction, interpolate]
+  );
+  const start = useCallback(() => {
+    setState((prev) => ({ ...prev, isAnimating: true }));
+    const startTime = Date.now();
+    const animate = () => {
+      const elapsed = Date.now() - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      updateMotion(progress);
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      } else {
+        setState((prev) => ({ ...prev, isAnimating: false }));
+      }
+    };
+    setTimeout(() => {
+      requestAnimationFrame(animate);
+    }, delay);
+  }, [duration, delay, updateMotion]);
+  const reset = useCallback(() => {
+    const from = fromValuesRef.current;
+    setState({
+      transform: "",
+      opacity: from.opacity ?? 1,
+      backgroundColor: from.backgroundColor,
+      isAnimating: false
+    });
+  }, []);
+  const stop = useCallback(() => {
+    setState((prev) => ({ ...prev, isAnimating: false }));
+  }, []);
+  useEffect(() => {
+    if (autoStart) {
+      start();
+    }
+  }, []);
+  const setRef = (element) => {
+    if (ref.current !== element) {
+      ref.current = element;
+    }
+  };
+  const style = {
+    opacity: state.opacity,
+    ...state.transform && { transform: state.transform },
+    ...state.backgroundColor && { backgroundColor: state.backgroundColor }
+  };
+  return {
+    ref: setRef,
+    style,
+    transform: state.transform,
+    opacity: state.opacity,
+    backgroundColor: state.backgroundColor,
+    isAnimating: state.isAnimating,
+    start,
+    stop,
+    reset
+  };
+}
+function useViewportToggle(options = {}) {
+  const {
+    threshold = 0.1,
+    rootMargin = "0px",
+    trigger = "both",
+    once = false,
+    showOnMount = false
+  } = options;
+  const [isVisible, setIsVisible] = useState(showOnMount);
+  const [mounted, setMounted] = useState(false);
+  const elementRef = useRef(null);
+  const hasTriggeredRef = useRef(false);
+  const isVisibleRef = useRef(showOnMount);
+  isVisibleRef.current = isVisible;
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!mounted || !elementRef.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const isIntersecting = entry.isIntersecting;
+          if (once && hasTriggeredRef.current) return;
+          let shouldBeVisible = isVisibleRef.current;
+          if (trigger === "enter" && isIntersecting) {
+            shouldBeVisible = true;
+            if (once) hasTriggeredRef.current = true;
+          } else if (trigger === "exit" && !isIntersecting) {
+            shouldBeVisible = true;
+            if (once) hasTriggeredRef.current = true;
+          } else if (trigger === "both") {
+            shouldBeVisible = isIntersecting;
+            if (once && isIntersecting) hasTriggeredRef.current = true;
+          }
+          setIsVisible(shouldBeVisible);
+        });
+      },
+      {
+        threshold,
+        rootMargin
+      }
+    );
+    observer.observe(elementRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [threshold, rootMargin, trigger, once, mounted]);
+  return {
+    ref: elementRef,
+    isVisible,
+    mounted
+  };
+}
+function useScrollPositionToggle(options = {}) {
+  const { threshold = 400, showOnMount = false, smooth = true } = options;
+  const [isVisible, setIsVisible] = useState(showOnMount);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!mounted) return;
+    const toggleVisibility = () => {
+      if (typeof window !== "undefined") {
+        if (window.pageYOffset > threshold) {
+          setIsVisible(true);
+        } else {
+          setIsVisible(false);
+        }
+      }
+    };
+    toggleVisibility();
+    window.addEventListener("scroll", toggleVisibility, { passive: true });
+    window.addEventListener("resize", toggleVisibility, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", toggleVisibility);
+      window.removeEventListener("resize", toggleVisibility);
+    };
+  }, [threshold, mounted]);
+  const scrollToTop = () => {
+    if (typeof window !== "undefined") {
+      if (smooth) {
+        window.scrollTo({
+          top: 0,
+          behavior: "smooth"
+        });
+      } else {
+        window.scrollTo(0, 0);
+      }
+    }
+  };
+  return {
+    isVisible,
+    scrollToTop,
+    mounted
+  };
+}
+function Motion({
+  as: Component = "div",
+  type,
+  effects,
+  scroll,
+  delay,
+  duration,
+  children,
+  className,
+  style: userStyle,
   ...rest
 }) {
   const scrollOptions = useMemo(() => {
@@ -5715,6 +7247,87 @@ function Motion({
     }
   );
 }
+function useCountUp(options) {
+  const {
+    end,
+    suffix = "",
+    duration = 1500,
+    delay = 0,
+    active = true
+  } = options;
+  const [value, setValue] = useState(0);
+  const startedRef = useRef(false);
+  useEffect(() => {
+    if (!active || startedRef.current) return;
+    const timer = setTimeout(() => {
+      startedRef.current = true;
+      const startTime = performance.now();
+      const animate = (now) => {
+        const elapsed = now - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const eased = 1 - Math.pow(1 - progress, 3);
+        setValue(Math.round(eased * end));
+        if (progress < 1) requestAnimationFrame(animate);
+      };
+      requestAnimationFrame(animate);
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [active, end, duration, delay]);
+  return { value, display: `${value}${suffix}` };
+}
+var SPRING_EASING = "cubic-bezier(0.34, 1.56, 0.64, 1)";
+function useClipReveal(options = {}) {
+  const {
+    delay = 0,
+    duration = 900,
+    easing = SPRING_EASING,
+    active = true
+  } = options;
+  const [triggered, setTriggered] = useState(false);
+  useEffect(() => {
+    if (active && !triggered) {
+      setTriggered(true);
+    }
+  }, [active, triggered]);
+  const containerStyle = useMemo(() => ({
+    overflow: "hidden",
+    display: "inline-block"
+  }), []);
+  const textStyle = useMemo(() => ({
+    display: "block",
+    transform: triggered ? "translateY(0)" : "translateY(110%)",
+    transition: `transform ${duration}ms ${easing} ${delay}ms`
+  }), [triggered, duration, easing, delay]);
+  return { containerStyle, textStyle, isVisible: triggered };
+}
+var SMOOTH_EASING = "cubic-bezier(0.16, 1, 0.3, 1)";
+function useBlurIn(options = {}) {
+  const {
+    delay = 0,
+    duration = 1200,
+    blurAmount = 12,
+    scale = 0.95,
+    easing = SMOOTH_EASING,
+    active = true
+  } = options;
+  const [triggered, setTriggered] = useState(false);
+  useEffect(() => {
+    if (active && !triggered) {
+      setTriggered(true);
+    }
+  }, [active, triggered]);
+  const style = useMemo(() => ({
+    opacity: triggered ? 1 : 0,
+    filter: triggered ? "blur(0px)" : `blur(${blurAmount}px)`,
+    transform: triggered ? "scale(1)" : `scale(${scale})`,
+    transition: [
+      `opacity ${duration}ms ${easing} ${delay}ms`,
+      `filter ${duration}ms ${easing} ${delay}ms`,
+      `transform ${duration}ms ${easing} ${delay}ms`
+    ].join(", ")
+  }), [triggered, duration, blurAmount, scale, easing, delay]);
+  return { style, isVisible: triggered };
+}
 function getInitialTransform(motionType, slideDistance, scaleFrom) {
   switch (motionType) {
     case "slideUp":
@@ -5741,7 +7354,7 @@ function useStagger(options) {
     duration = profile.base.duration,
     motionType = "fadeIn",
     threshold = profile.base.threshold,
-    easing: easing2 = profile.base.easing
+    easing = profile.base.easing
   } = options;
   const containerRef = useRef(null);
   const [isVisible, setIsVisible] = useState(false);
@@ -5767,16 +7380,16 @@ function useStagger(options) {
         return {
           opacity: 0,
           transform: initialTransform,
-          transition: `opacity ${duration}ms ${easing2} ${itemDelay}ms, transform ${duration}ms ${easing2} ${itemDelay}ms`
+          transition: `opacity ${duration}ms ${easing} ${itemDelay}ms, transform ${duration}ms ${easing} ${itemDelay}ms`
         };
       }
       return {
         opacity: 1,
         transform: "none",
-        transition: `opacity ${duration}ms ${easing2} ${itemDelay}ms, transform ${duration}ms ${easing2} ${itemDelay}ms`
+        transition: `opacity ${duration}ms ${easing} ${itemDelay}ms, transform ${duration}ms ${easing} ${itemDelay}ms`
       };
     });
-  }, [count, isVisible, staggerDelay, baseDelay, duration, motionType, easing2, initialTransform]);
+  }, [count, isVisible, staggerDelay, baseDelay, duration, motionType, easing, initialTransform]);
   return {
     containerRef,
     styles,
@@ -5784,6 +7397,6 @@ function useStagger(options) {
   };
 }
 
-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 };
+export { Motion, createLayoutTransition, observeElement, useAutoFade, useAutoPlay, useAutoScale, useAutoSlide, useBlurIn, useBounceIn, useButtonEffect, useCardList, useClickToggle, useClipReveal, useCountUp, useCustomCursor, useElementProgress, useFadeIn, useFocusToggle, useGameLoop, useGesture, useGestureMotion, useGradient, useHoverMotion, useInView, useInteractive, useKeyboardToggle, useLanguageAwareMotion, useLayoutMotion, useLoadingSpinner, useMagneticCursor, useMotion, useMotionOrchestra, useMotionState, useMouse, useNavigation, useOrchestration, usePageMotions, usePerformanceMonitor, usePulse, useReducedMotion, useReducedMotionObject, useRepeat, useScaleIn, useScrollDirection, useScrollPositionToggle, useScrollProgress, useScrollReveal, useScrollToggle, useSequence, useSimplePageMotion, useSkeleton, useSlideDown, useSlideLeft, useSlideRight, useSlideUp, useSmartMotion, useSmoothScroll, useSpringMotion, useStagger, useStickyToggle, useToggleMotion, useTypewriter, useUnifiedMotion, useViewportToggle, useVisibilityToggle, useWindowSize };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map