@hua-labs/motion-core 2.2.1 → 2.2.3

package/dist/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 
 // src/core/MotionEngine.ts
 var MotionEngine = class {
@@ -199,39 +200,42 @@ var TransitionEffects = class _TransitionEffects {
    */
   async fade(element, options) {
     const transitionId = this.generateTransitionId();
-    return new Promise(async (resolve) => {
-      const initialOpacity = parseFloat(getComputedStyle(element).opacity) || 1;
-      const targetOpacity = options.direction === "reverse" ? 0 : 1;
-      if (options.direction === "reverse") {
-        element.style.opacity = initialOpacity.toString();
-      } else {
-        element.style.opacity = "0";
-      }
-      this.enableGPUAcceleration(element);
-      const motionId = await motionEngine.motion(
-        element,
-        [
-          { progress: 0, properties: { opacity: options.direction === "reverse" ? initialOpacity : 0 } },
-          { progress: 1, properties: { opacity: targetOpacity } }
-        ],
-        {
-          duration: options.duration,
-          easing: options.easing || this.getDefaultEasing(),
-          delay: options.delay,
-          onStart: options.onTransitionStart,
-          onUpdate: (progress) => {
-            const currentOpacity = options.direction === "reverse" ? initialOpacity * (1 - progress) : targetOpacity * progress;
-            element.style.opacity = currentOpacity.toString();
-          },
-          onComplete: () => {
-            options.onTransitionComplete?.();
-            this.activeTransitions.delete(transitionId);
-            resolve();
-          }
-        }
-      );
-      this.activeTransitions.set(transitionId, motionId);
+    const initialOpacity = parseFloat(getComputedStyle(element).opacity) || 1;
+    const targetOpacity = options.direction === "reverse" ? 0 : 1;
+    if (options.direction === "reverse") {
+      element.style.opacity = initialOpacity.toString();
+    } else {
+      element.style.opacity = "0";
+    }
+    this.enableGPUAcceleration(element);
+    let resolveTransition;
+    const completed = new Promise((resolve) => {
+      resolveTransition = resolve;
     });
+    const motionId = await motionEngine.motion(
+      element,
+      [
+        { progress: 0, properties: { opacity: options.direction === "reverse" ? initialOpacity : 0 } },
+        { progress: 1, properties: { opacity: targetOpacity } }
+      ],
+      {
+        duration: options.duration,
+        easing: options.easing || this.getDefaultEasing(),
+        delay: options.delay,
+        onStart: options.onTransitionStart,
+        onUpdate: (progress) => {
+          const currentOpacity = options.direction === "reverse" ? initialOpacity * (1 - progress) : targetOpacity * progress;
+          element.style.opacity = currentOpacity.toString();
+        },
+        onComplete: () => {
+          options.onTransitionComplete?.();
+          this.activeTransitions.delete(transitionId);
+          resolveTransition();
+        }
+      }
+    );
+    this.activeTransitions.set(transitionId, motionId);
+    return completed;
   }
   /**
    * 슬라이드 전환
@@ -239,38 +243,41 @@ var TransitionEffects = class _TransitionEffects {
   async slide(element, options) {
     const transitionId = this.generateTransitionId();
     const distance = options.distance || 100;
-    return new Promise(async (resolve) => {
-      const initialTransform = getComputedStyle(element).transform;
-      const isReverse = options.direction === "reverse";
-      if (!isReverse) {
-        element.style.transform = `translateX(${distance}px)`;
-      }
-      this.enableGPUAcceleration(element);
-      const motionId = await motionEngine.motion(
-        element,
-        [
-          { progress: 0, properties: { translateX: isReverse ? 0 : distance } },
-          { progress: 1, properties: { translateX: isReverse ? distance : 0 } }
-        ],
-        {
-          duration: options.duration,
-          easing: options.easing || this.getDefaultEasing(),
-          delay: options.delay,
-          onStart: options.onTransitionStart,
-          onUpdate: (progress) => {
-            const currentTranslateX = isReverse ? distance * progress : distance * (1 - progress);
-            element.style.transform = `translateX(${currentTranslateX}px)`;
-          },
-          onComplete: () => {
-            element.style.transform = initialTransform;
-            options.onTransitionComplete?.();
-            this.activeTransitions.delete(transitionId);
-            resolve();
-          }
-        }
-      );
-      this.activeTransitions.set(transitionId, motionId);
+    const initialTransform = getComputedStyle(element).transform;
+    const isReverse = options.direction === "reverse";
+    if (!isReverse) {
+      element.style.transform = `translateX(${distance}px)`;
+    }
+    this.enableGPUAcceleration(element);
+    let resolveTransition;
+    const completed = new Promise((resolve) => {
+      resolveTransition = resolve;
     });
+    const motionId = await motionEngine.motion(
+      element,
+      [
+        { progress: 0, properties: { translateX: isReverse ? 0 : distance } },
+        { progress: 1, properties: { translateX: isReverse ? distance : 0 } }
+      ],
+      {
+        duration: options.duration,
+        easing: options.easing || this.getDefaultEasing(),
+        delay: options.delay,
+        onStart: options.onTransitionStart,
+        onUpdate: (progress) => {
+          const currentTranslateX = isReverse ? distance * progress : distance * (1 - progress);
+          element.style.transform = `translateX(${currentTranslateX}px)`;
+        },
+        onComplete: () => {
+          element.style.transform = initialTransform;
+          options.onTransitionComplete?.();
+          this.activeTransitions.delete(transitionId);
+          resolveTransition();
+        }
+      }
+    );
+    this.activeTransitions.set(transitionId, motionId);
+    return completed;
   }
   /**
    * 스케일 전환
@@ -278,38 +285,41 @@ var TransitionEffects = class _TransitionEffects {
   async scale(element, options) {
     const transitionId = this.generateTransitionId();
     const scaleValue = options.scale || 0.8;
-    return new Promise(async (resolve) => {
-      const initialTransform = getComputedStyle(element).transform;
-      const isReverse = options.direction === "reverse";
-      if (!isReverse) {
-        element.style.transform = `scale(${scaleValue})`;
-      }
-      this.enableGPUAcceleration(element);
-      const motionId = await motionEngine.motion(
-        element,
-        [
-          { progress: 0, properties: { scale: isReverse ? 1 : scaleValue } },
-          { progress: 1, properties: { scale: isReverse ? scaleValue : 1 } }
-        ],
-        {
-          duration: options.duration,
-          easing: options.easing || this.getDefaultEasing(),
-          delay: options.delay,
-          onStart: options.onTransitionStart,
-          onUpdate: (progress) => {
-            const currentScale = isReverse ? 1 - (1 - scaleValue) * progress : scaleValue + (1 - scaleValue) * progress;
-            element.style.transform = `scale(${currentScale})`;
-          },
-          onComplete: () => {
-            element.style.transform = initialTransform;
-            options.onTransitionComplete?.();
-            this.activeTransitions.delete(transitionId);
-            resolve();
-          }
-        }
-      );
-      this.activeTransitions.set(transitionId, motionId);
+    const initialTransform = getComputedStyle(element).transform;
+    const isReverse = options.direction === "reverse";
+    if (!isReverse) {
+      element.style.transform = `scale(${scaleValue})`;
+    }
+    this.enableGPUAcceleration(element);
+    let resolveTransition;
+    const completed = new Promise((resolve) => {
+      resolveTransition = resolve;
     });
+    const motionId = await motionEngine.motion(
+      element,
+      [
+        { progress: 0, properties: { scale: isReverse ? 1 : scaleValue } },
+        { progress: 1, properties: { scale: isReverse ? scaleValue : 1 } }
+      ],
+      {
+        duration: options.duration,
+        easing: options.easing || this.getDefaultEasing(),
+        delay: options.delay,
+        onStart: options.onTransitionStart,
+        onUpdate: (progress) => {
+          const currentScale = isReverse ? 1 - (1 - scaleValue) * progress : scaleValue + (1 - scaleValue) * progress;
+          element.style.transform = `scale(${currentScale})`;
+        },
+        onComplete: () => {
+          element.style.transform = initialTransform;
+          options.onTransitionComplete?.();
+          this.activeTransitions.delete(transitionId);
+          resolveTransition();
+        }
+      }
+    );
+    this.activeTransitions.set(transitionId, motionId);
+    return completed;
   }
   /**
    * 플립 전환 (3D 회전)
@@ -317,42 +327,45 @@ var TransitionEffects = class _TransitionEffects {
   async flip(element, options) {
     const transitionId = this.generateTransitionId();
     const perspective = options.perspective || 1e3;
-    return new Promise(async (resolve) => {
-      const initialTransform = getComputedStyle(element).transform;
-      const isReverse = options.direction === "reverse";
-      element.style.perspective = `${perspective}px`;
-      element.style.transformStyle = "preserve-3d";
-      if (!isReverse) {
-        element.style.transform = `rotateY(90deg)`;
-      }
-      this.enableGPUAcceleration(element);
-      const motionId = await motionEngine.motion(
-        element,
-        [
-          { progress: 0, properties: { rotateY: isReverse ? 0 : 90 } },
-          { progress: 1, properties: { rotateY: isReverse ? 90 : 0 } }
-        ],
-        {
-          duration: options.duration,
-          easing: options.easing || this.getDefaultEasing(),
-          delay: options.delay,
-          onStart: options.onTransitionStart,
-          onUpdate: (progress) => {
-            const currentRotateY = isReverse ? 90 * progress : 90 * (1 - progress);
-            element.style.transform = `rotateY(${currentRotateY}deg)`;
-          },
-          onComplete: () => {
-            element.style.transform = initialTransform;
-            element.style.perspective = "";
-            element.style.transformStyle = "";
-            options.onTransitionComplete?.();
-            this.activeTransitions.delete(transitionId);
-            resolve();
-          }
-        }
-      );
-      this.activeTransitions.set(transitionId, motionId);
+    const initialTransform = getComputedStyle(element).transform;
+    const isReverse = options.direction === "reverse";
+    element.style.perspective = `${perspective}px`;
+    element.style.transformStyle = "preserve-3d";
+    if (!isReverse) {
+      element.style.transform = `rotateY(90deg)`;
+    }
+    this.enableGPUAcceleration(element);
+    let resolveTransition;
+    const completed = new Promise((resolve) => {
+      resolveTransition = resolve;
     });
+    const motionId = await motionEngine.motion(
+      element,
+      [
+        { progress: 0, properties: { rotateY: isReverse ? 0 : 90 } },
+        { progress: 1, properties: { rotateY: isReverse ? 90 : 0 } }
+      ],
+      {
+        duration: options.duration,
+        easing: options.easing || this.getDefaultEasing(),
+        delay: options.delay,
+        onStart: options.onTransitionStart,
+        onUpdate: (progress) => {
+          const currentRotateY = isReverse ? 90 * progress : 90 * (1 - progress);
+          element.style.transform = `rotateY(${currentRotateY}deg)`;
+        },
+        onComplete: () => {
+          element.style.transform = initialTransform;
+          element.style.perspective = "";
+          element.style.transformStyle = "";
+          options.onTransitionComplete?.();
+          this.activeTransitions.delete(transitionId);
+          resolveTransition();
+        }
+      }
+    );
+    this.activeTransitions.set(transitionId, motionId);
+    return completed;
   }
   /**
    * 큐브 전환 (3D 큐브 회전)
@@ -360,82 +373,88 @@ var TransitionEffects = class _TransitionEffects {
   async cube(element, options) {
     const transitionId = this.generateTransitionId();
     const perspective = options.perspective || 1200;
-    return new Promise(async (resolve) => {
-      const initialTransform = getComputedStyle(element).transform;
-      const isReverse = options.direction === "reverse";
-      element.style.perspective = `${perspective}px`;
-      element.style.transformStyle = "preserve-3d";
-      if (!isReverse) {
-        element.style.transform = `rotateX(90deg) rotateY(45deg)`;
-      }
-      this.enableGPUAcceleration(element);
-      const motionId = await motionEngine.motion(
-        element,
-        [
-          { progress: 0, properties: { rotateX: isReverse ? 0 : 90, rotateY: isReverse ? 0 : 45 } },
-          { progress: 1, properties: { rotateX: isReverse ? 90 : 0, rotateY: isReverse ? 45 : 0 } }
-        ],
-        {
-          duration: options.duration,
-          easing: options.easing || this.getDefaultEasing(),
-          delay: options.delay,
-          onStart: options.onTransitionStart,
-          onUpdate: (progress) => {
-            const currentRotateX = isReverse ? 90 * progress : 90 * (1 - progress);
-            const currentRotateY = isReverse ? 45 * progress : 45 * (1 - progress);
-            element.style.transform = `rotateX(${currentRotateX}deg) rotateY(${currentRotateY}deg)`;
-          },
-          onComplete: () => {
-            element.style.transform = initialTransform;
-            element.style.perspective = "";
-            element.style.transformStyle = "";
-            options.onTransitionComplete?.();
-            this.activeTransitions.delete(transitionId);
-            resolve();
-          }
-        }
-      );
-      this.activeTransitions.set(transitionId, motionId);
+    const initialTransform = getComputedStyle(element).transform;
+    const isReverse = options.direction === "reverse";
+    element.style.perspective = `${perspective}px`;
+    element.style.transformStyle = "preserve-3d";
+    if (!isReverse) {
+      element.style.transform = `rotateX(90deg) rotateY(45deg)`;
+    }
+    this.enableGPUAcceleration(element);
+    let resolveTransition;
+    const completed = new Promise((resolve) => {
+      resolveTransition = resolve;
     });
+    const motionId = await motionEngine.motion(
+      element,
+      [
+        { progress: 0, properties: { rotateX: isReverse ? 0 : 90, rotateY: isReverse ? 0 : 45 } },
+        { progress: 1, properties: { rotateX: isReverse ? 90 : 0, rotateY: isReverse ? 45 : 0 } }
+      ],
+      {
+        duration: options.duration,
+        easing: options.easing || this.getDefaultEasing(),
+        delay: options.delay,
+        onStart: options.onTransitionStart,
+        onUpdate: (progress) => {
+          const currentRotateX = isReverse ? 90 * progress : 90 * (1 - progress);
+          const currentRotateY = isReverse ? 45 * progress : 45 * (1 - progress);
+          element.style.transform = `rotateX(${currentRotateX}deg) rotateY(${currentRotateY}deg)`;
+        },
+        onComplete: () => {
+          element.style.transform = initialTransform;
+          element.style.perspective = "";
+          element.style.transformStyle = "";
+          options.onTransitionComplete?.();
+          this.activeTransitions.delete(transitionId);
+          resolveTransition();
+        }
+      }
+    );
+    this.activeTransitions.set(transitionId, motionId);
+    return completed;
   }
   /**
    * 모프 전환 (복합 변형)
    */
   async morph(element, options) {
     const transitionId = this.generateTransitionId();
-    return new Promise(async (resolve) => {
-      const initialTransform = getComputedStyle(element).transform;
-      const isReverse = options.direction === "reverse";
-      if (!isReverse) {
-        element.style.transform = `scale(0.9) rotate(5deg)`;
-      }
-      this.enableGPUAcceleration(element);
-      const motionId = await motionEngine.motion(
-        element,
-        [
-          { progress: 0, properties: { scale: isReverse ? 1 : 0.9, rotate: isReverse ? 0 : 5 } },
-          { progress: 1, properties: { scale: isReverse ? 0.9 : 1, rotate: isReverse ? 5 : 0 } }
-        ],
-        {
-          duration: options.duration,
-          easing: options.easing || this.getDefaultEasing(),
-          delay: options.delay,
-          onStart: options.onTransitionStart,
-          onUpdate: (progress) => {
-            const currentScale = isReverse ? 1 - 0.1 * progress : 0.9 + 0.1 * progress;
-            const currentRotate = isReverse ? 5 * progress : 5 * (1 - progress);
-            element.style.transform = `scale(${currentScale}) rotate(${currentRotate}deg)`;
-          },
-          onComplete: () => {
-            element.style.transform = initialTransform;
-            options.onTransitionComplete?.();
-            this.activeTransitions.delete(transitionId);
-            resolve();
-          }
-        }
-      );
-      this.activeTransitions.set(transitionId, motionId);
+    const initialTransform = getComputedStyle(element).transform;
+    const isReverse = options.direction === "reverse";
+    if (!isReverse) {
+      element.style.transform = `scale(0.9) rotate(5deg)`;
+    }
+    this.enableGPUAcceleration(element);
+    let resolveTransition;
+    const completed = new Promise((resolve) => {
+      resolveTransition = resolve;
     });
+    const motionId = await motionEngine.motion(
+      element,
+      [
+        { progress: 0, properties: { scale: isReverse ? 1 : 0.9, rotate: isReverse ? 0 : 5 } },
+        { progress: 1, properties: { scale: isReverse ? 0.9 : 1, rotate: isReverse ? 5 : 0 } }
+      ],
+      {
+        duration: options.duration,
+        easing: options.easing || this.getDefaultEasing(),
+        delay: options.delay,
+        onStart: options.onTransitionStart,
+        onUpdate: (progress) => {
+          const currentScale = isReverse ? 1 - 0.1 * progress : 0.9 + 0.1 * progress;
+          const currentRotate = isReverse ? 5 * progress : 5 * (1 - progress);
+          element.style.transform = `scale(${currentScale}) rotate(${currentRotate}deg)`;
+        },
+        onComplete: () => {
+          element.style.transform = initialTransform;
+          options.onTransitionComplete?.();
+          this.activeTransitions.delete(transitionId);
+          resolveTransition();
+        }
+      }
+    );
+    this.activeTransitions.set(transitionId, motionId);
+    return completed;
   }
   /**
    * 전환 중지
@@ -907,10 +926,10 @@ function useSimplePageMotions(config) {
   const calculateMotionValues = react.useCallback((isVisible, elementConfig) => {
     const preset = getMotionPreset(elementConfig.type);
     mergeWithPreset(preset, elementConfig);
-    let opacity = isVisible ? 1 : 0;
-    let translateY = isVisible ? 0 : 20;
-    let translateX = 0;
-    let scale = isVisible ? 1 : 0.95;
+    const opacity = isVisible ? 1 : 0;
+    const translateY = isVisible ? 0 : 20;
+    const translateX = 0;
+    const scale = isVisible ? 1 : 0.95;
     return { opacity, translateY, translateX, scale };
   }, []);
   react.useEffect(() => {
@@ -1170,7 +1189,7 @@ function usePageMotions(config) {
     const mergedConfig = mergeWithPreset(preset, elementConfig);
     let opacity = state.finalVisibility ? 1 : 0;
     let translateY = state.finalVisibility ? 0 : 20;
-    let translateX = 0;
+    const translateX = 0;
     let scale = state.finalVisibility ? 1 : 0.95;
     if (mergedConfig.hover && state.isHovered) {
       scale *= 1.1;
@@ -1667,9 +1686,77 @@ function getEasingForType(type, easing2) {
   if (type === "bounceIn") return "cubic-bezier(0.34, 1.56, 0.64, 1)";
   return "ease-out";
 }
+function getMultiEffectInitialStyle(effects, defaultDistance) {
+  const style = {};
+  const transforms = [];
+  if (effects.fade) {
+    style.opacity = 0;
+  }
+  if (effects.slide) {
+    const config = typeof effects.slide === "object" ? effects.slide : {};
+    const direction = config.direction ?? "up";
+    const distance = config.distance ?? defaultDistance;
+    switch (direction) {
+      case "up":
+        transforms.push(`translateY(${distance}px)`);
+        break;
+      case "down":
+        transforms.push(`translateY(-${distance}px)`);
+        break;
+      case "left":
+        transforms.push(`translateX(${distance}px)`);
+        break;
+      case "right":
+        transforms.push(`translateX(-${distance}px)`);
+        break;
+    }
+    if (!effects.fade) style.opacity = 0;
+  }
+  if (effects.scale) {
+    const config = typeof effects.scale === "object" ? effects.scale : {};
+    const from = config.from ?? 0.95;
+    transforms.push(`scale(${from})`);
+    if (!effects.fade && !effects.slide) style.opacity = 0;
+  }
+  if (effects.bounce) {
+    transforms.push("scale(0)");
+    if (!effects.fade && !effects.slide && !effects.scale) style.opacity = 0;
+  }
+  if (transforms.length > 0) {
+    style.transform = transforms.join(" ");
+  } else {
+    style.transform = "none";
+  }
+  if (effects.fade && transforms.length === 0) {
+    style.transform = "none";
+  }
+  return style;
+}
+function getMultiEffectVisibleStyle(effects) {
+  const style = {};
+  if (effects.fade) {
+    const config = typeof effects.fade === "object" ? effects.fade : {};
+    style.opacity = config.targetOpacity ?? 1;
+  } else {
+    style.opacity = 1;
+  }
+  if (effects.scale) {
+    const config = typeof effects.scale === "object" ? effects.scale : {};
+    style.transform = `scale(${config.to ?? 1})`;
+  } else {
+    style.transform = "none";
+  }
+  return style;
+}
+function getMultiEffectEasing(effects, easing2) {
+  if (easing2) return easing2;
+  if (effects.bounce) return "cubic-bezier(0.34, 1.56, 0.64, 1)";
+  return "ease-out";
+}
 function useUnifiedMotion(options) {
   const {
     type,
+    effects,
     duration = 600,
     autoStart = true,
     delay = 0,
@@ -1682,7 +1769,8 @@ function useUnifiedMotion(options) {
     onStop,
     onReset
   } = options;
-  const resolvedEasing = getEasingForType(type, easing2);
+  const resolvedType = type ?? "fadeIn";
+  const resolvedEasing = getEasingForType(resolvedType, easing2);
   const ref = react.useRef(null);
   const [isVisible, setIsVisible] = react.useState(false);
   const [isAnimating, setIsAnimating] = react.useState(false);
@@ -1742,7 +1830,19 @@ function useUnifiedMotion(options) {
     return () => stop();
   }, [stop]);
   const style = react.useMemo(() => {
-    const base = isVisible ? getVisibleStyle() : getInitialStyle(type, distance);
+    if (effects) {
+      const base2 = isVisible ? getMultiEffectVisibleStyle(effects) : getMultiEffectInitialStyle(effects, distance);
+      const resolvedEasingMulti = getMultiEffectEasing(effects, easing2);
+      return {
+        ...base2,
+        transition: `all ${duration}ms ${resolvedEasingMulti}`,
+        "--motion-delay": `${delay}ms`,
+        "--motion-duration": `${duration}ms`,
+        "--motion-easing": resolvedEasingMulti,
+        "--motion-progress": `${progress}`
+      };
+    }
+    const base = isVisible ? getVisibleStyle() : getInitialStyle(resolvedType, distance);
     return {
       ...base,
       transition: `all ${duration}ms ${resolvedEasing}`,
@@ -1751,7 +1851,7 @@ function useUnifiedMotion(options) {
       "--motion-easing": resolvedEasing,
       "--motion-progress": `${progress}`
     };
-  }, [isVisible, type, distance, duration, resolvedEasing, delay, progress]);
+  }, [isVisible, type, effects, distance, duration, resolvedEasing, easing2, delay, progress, resolvedType]);
   return {
     ref,
     isVisible,
@@ -1929,7 +2029,7 @@ function useSlideUp(options = {}) {
     }, 50);
     return () => clearInterval(id);
   }, [nodeReady]);
-  const getInitialTransform = react.useCallback(() => {
+  const getInitialTransform2 = react.useCallback(() => {
     switch (direction) {
       case "up":
         return `translateY(${distance}px)`;
@@ -2009,7 +2109,7 @@ function useSlideUp(options = {}) {
       stop();
     };
   }, [stop]);
-  const initialTransform = react.useMemo(() => getInitialTransform(), [getInitialTransform]);
+  const initialTransform = react.useMemo(() => getInitialTransform2(), [getInitialTransform2]);
   const finalTransform = react.useMemo(() => {
     return direction === "left" || direction === "right" ? "translateX(0)" : "translateY(0)";
   }, [direction]);
@@ -4189,8 +4289,410 @@ function useGestureMotion(options) {
     isActive: gestureState.isActive
   };
 }
+function useTypewriter(options) {
+  const { text, speed = 50, delay = 0, enabled = true, onComplete } = options;
+  const [index, setIndex] = react.useState(0);
+  const [started, setStarted] = react.useState(false);
+  const timerRef = react.useRef(null);
+  const restart = react.useCallback(() => {
+    setIndex(0);
+    setStarted(false);
+  }, []);
+  react.useEffect(() => {
+    if (!enabled) return;
+    const id = setTimeout(() => setStarted(true), delay);
+    return () => clearTimeout(id);
+  }, [enabled, delay]);
+  react.useEffect(() => {
+    if (!started || !enabled) return;
+    if (index >= text.length) {
+      onComplete?.();
+      return;
+    }
+    timerRef.current = setTimeout(() => {
+      setIndex((prev) => prev + 1);
+    }, speed);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [started, enabled, index, text.length, speed, onComplete]);
+  react.useEffect(() => {
+    setIndex(0);
+    setStarted(false);
+  }, [text]);
+  return {
+    displayText: text.slice(0, index),
+    isTyping: started && index < text.length,
+    progress: text.length > 0 ? index / text.length : 0,
+    restart
+  };
+}
+function useCustomCursor(options = {}) {
+  const {
+    enabled = true,
+    size = 32,
+    smoothing = 0.15,
+    hoverScale = 1.5,
+    detectLabels = true
+  } = options;
+  const [isVisible, setIsVisible] = react.useState(false);
+  const [label, setLabel] = react.useState(null);
+  const [isHovering, setIsHovering] = react.useState(false);
+  const targetRef = react.useRef({ x: 0, y: 0 });
+  const currentRef = react.useRef({ x: 0, y: 0 });
+  const [pos, setPos] = react.useState({ x: 0, y: 0 });
+  const rafRef = react.useRef(null);
+  const animate = react.useCallback(() => {
+    const dx = targetRef.current.x - currentRef.current.x;
+    const dy = targetRef.current.y - currentRef.current.y;
+    currentRef.current.x += dx * smoothing;
+    currentRef.current.y += dy * smoothing;
+    setPos({ x: currentRef.current.x, y: currentRef.current.y });
+    if (Math.abs(dx) > 0.1 || Math.abs(dy) > 0.1) {
+      rafRef.current = requestAnimationFrame(animate);
+    }
+  }, [smoothing]);
+  react.useEffect(() => {
+    if (!enabled || typeof window === "undefined") return;
+    const handleMouseMove = (e) => {
+      targetRef.current = { x: e.clientX, y: e.clientY };
+      setIsVisible(true);
+      if (!rafRef.current) {
+        rafRef.current = requestAnimationFrame(animate);
+      }
+      if (detectLabels) {
+        const target = e.target;
+        const cursorEl = target.closest("[data-cursor]");
+        if (cursorEl) {
+          setLabel(cursorEl.dataset.cursor || null);
+          setIsHovering(true);
+        } else {
+          setLabel(null);
+          setIsHovering(false);
+        }
+      }
+    };
+    const handleMouseLeave = () => {
+      setIsVisible(false);
+      setLabel(null);
+      setIsHovering(false);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [enabled, detectLabels, animate]);
+  const scale = isHovering ? hoverScale : 1;
+  const style = react.useMemo(() => ({
+    "--cursor-x": `${pos.x}px`,
+    "--cursor-y": `${pos.y}px`,
+    "--cursor-size": `${size}px`,
+    "--cursor-scale": `${scale}`,
+    position: "fixed",
+    left: pos.x - size * scale / 2,
+    top: pos.y - size * scale / 2,
+    width: size * scale,
+    height: size * scale,
+    pointerEvents: "none",
+    zIndex: 9999,
+    transition: "width 0.2s, height 0.2s, left 0.05s, top 0.05s"
+  }), [pos.x, pos.y, size, scale]);
+  return { x: pos.x, y: pos.y, label, isHovering, style, isVisible };
+}
+function useMagneticCursor(options = {}) {
+  const { strength = 0.3, radius = 100, enabled = true } = options;
+  const ref = react.useRef(null);
+  const transformRef = react.useRef({ x: 0, y: 0 });
+  const styleRef = react.useRef({
+    transition: "transform 0.3s cubic-bezier(0.22, 1, 0.36, 1)",
+    transform: "translate(0px, 0px)"
+  });
+  const onMouseMove = react.useCallback((e) => {
+    if (!enabled || !ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const dx = e.clientX - centerX;
+    const dy = e.clientY - centerY;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    if (dist < radius) {
+      const pull = (1 - dist / radius) * strength;
+      transformRef.current = { x: dx * pull, y: dy * pull };
+    } else {
+      transformRef.current = { x: 0, y: 0 };
+    }
+    ref.current.style.transform = `translate(${transformRef.current.x}px, ${transformRef.current.y}px)`;
+  }, [enabled, strength, radius]);
+  const onMouseLeave = react.useCallback(() => {
+    if (!ref.current) return;
+    transformRef.current = { x: 0, y: 0 };
+    ref.current.style.transform = "translate(0px, 0px)";
+  }, []);
+  const handlers = react.useMemo(() => ({ onMouseMove, onMouseLeave }), [onMouseMove, onMouseLeave]);
+  return { ref, handlers, style: styleRef.current };
+}
+function useSmoothScroll(options = {}) {
+  const {
+    enabled = true,
+    lerp = 0.1,
+    wheelMultiplier = 1,
+    touchMultiplier = 2,
+    direction = "vertical",
+    onScroll
+  } = options;
+  const [scroll, setScroll] = react.useState(0);
+  const [progress, setProgress] = react.useState(0);
+  const targetRef = react.useRef(0);
+  const currentRef = react.useRef(0);
+  const rafRef = react.useRef(null);
+  const isRunningRef = react.useRef(false);
+  const touchStartRef = react.useRef(0);
+  const getMaxScroll = react.useCallback(() => {
+    if (typeof document === "undefined") return 0;
+    return direction === "vertical" ? document.documentElement.scrollHeight - window.innerHeight : document.documentElement.scrollWidth - window.innerWidth;
+  }, [direction]);
+  const clamp = react.useCallback((val) => {
+    return Math.max(0, Math.min(val, getMaxScroll()));
+  }, [getMaxScroll]);
+  const animate = react.useCallback(() => {
+    const dx = targetRef.current - currentRef.current;
+    if (Math.abs(dx) < 0.5) {
+      currentRef.current = targetRef.current;
+      setScroll(currentRef.current);
+      isRunningRef.current = false;
+      return;
+    }
+    currentRef.current += dx * lerp;
+    setScroll(currentRef.current);
+    const max = getMaxScroll();
+    setProgress(max > 0 ? currentRef.current / max : 0);
+    onScroll?.(currentRef.current);
+    if (direction === "vertical") {
+      window.scrollTo(0, currentRef.current);
+    } else {
+      window.scrollTo(currentRef.current, 0);
+    }
+    rafRef.current = requestAnimationFrame(animate);
+  }, [lerp, direction, getMaxScroll, onScroll]);
+  const startAnimation = react.useCallback(() => {
+    if (isRunningRef.current) return;
+    isRunningRef.current = true;
+    rafRef.current = requestAnimationFrame(animate);
+  }, [animate]);
+  react.useEffect(() => {
+    if (!enabled || typeof window === "undefined") return;
+    document.documentElement.style.scrollBehavior = "auto";
+    currentRef.current = direction === "vertical" ? window.scrollY : window.scrollX;
+    targetRef.current = currentRef.current;
+    const handleWheel = (e) => {
+      e.preventDefault();
+      const delta = direction === "vertical" ? e.deltaY : e.deltaX;
+      targetRef.current = clamp(targetRef.current + delta * wheelMultiplier);
+      startAnimation();
+    };
+    const handleTouchStart = (e) => {
+      touchStartRef.current = direction === "vertical" ? e.touches[0].clientY : e.touches[0].clientX;
+    };
+    const handleTouchMove = (e) => {
+      const current = direction === "vertical" ? e.touches[0].clientY : e.touches[0].clientX;
+      const delta = (touchStartRef.current - current) * touchMultiplier;
+      touchStartRef.current = current;
+      targetRef.current = clamp(targetRef.current + delta);
+      startAnimation();
+    };
+    window.addEventListener("wheel", handleWheel, { passive: false });
+    window.addEventListener("touchstart", handleTouchStart, { passive: true });
+    window.addEventListener("touchmove", handleTouchMove, { passive: true });
+    return () => {
+      window.removeEventListener("wheel", handleWheel);
+      window.removeEventListener("touchstart", handleTouchStart);
+      window.removeEventListener("touchmove", handleTouchMove);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      document.documentElement.style.scrollBehavior = "";
+    };
+  }, [enabled, direction, wheelMultiplier, touchMultiplier, clamp, startAnimation]);
+  const scrollTo = react.useCallback((target, opts) => {
+    const offset = opts?.offset ?? 0;
+    if (typeof target === "number") {
+      targetRef.current = clamp(target + offset);
+    } else {
+      const rect = target.getBoundingClientRect();
+      const pos = direction === "vertical" ? rect.top + currentRef.current + offset : rect.left + currentRef.current + offset;
+      targetRef.current = clamp(pos);
+    }
+    startAnimation();
+  }, [clamp, direction, startAnimation]);
+  const stop = react.useCallback(() => {
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    isRunningRef.current = false;
+    targetRef.current = currentRef.current;
+  }, []);
+  return {
+    scroll,
+    targetScroll: targetRef.current,
+    progress,
+    scrollTo,
+    stop
+  };
+}
+function useElementProgress(options = {}) {
+  const { start = 0, end = 1, clamp = true } = options;
+  const ref = react.useRef(null);
+  const [progress, setProgress] = react.useState(0);
+  const [isInView, setIsInView] = react.useState(false);
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof window === "undefined") return;
+    const calculate = () => {
+      const rect = el.getBoundingClientRect();
+      const vh = window.innerHeight;
+      const elementTop = rect.top;
+      const elementBottom = rect.bottom;
+      const trackStart = vh * (1 - start);
+      const trackEnd = vh * end * -1 + vh;
+      const range = trackStart - trackEnd;
+      const raw = range > 0 ? (trackStart - elementTop) / range : 0;
+      const clamped = clamp ? Math.max(0, Math.min(1, raw)) : raw;
+      setProgress(clamped);
+      setIsInView(elementBottom > 0 && elementTop < vh);
+    };
+    calculate();
+    window.addEventListener("scroll", calculate, { passive: true });
+    window.addEventListener("resize", calculate, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", calculate);
+      window.removeEventListener("resize", calculate);
+    };
+  }, [start, end, clamp]);
+  return { ref, progress, isInView };
+}
+function Motion({
+  as: Component = "div",
+  type,
+  effects,
+  scroll,
+  delay,
+  duration,
+  children,
+  className,
+  style: userStyle,
+  ...rest
+}) {
+  const scrollOptions = react.useMemo(() => {
+    if (!scroll) return null;
+    const base = typeof scroll === "object" ? scroll : {};
+    return {
+      ...base,
+      ...delay != null && { delay },
+      ...duration != null && { duration },
+      ...type != null && { motionType: type }
+    };
+  }, [scroll, delay, duration, type]);
+  const scrollMotion = useScrollReveal(scrollOptions ?? { delay: 0 });
+  const unifiedMotion = useUnifiedMotion({
+    type: type ?? "fadeIn",
+    effects,
+    delay,
+    duration,
+    autoStart: true
+  });
+  const isScroll = scroll != null && scroll !== false;
+  const motion = isScroll ? scrollMotion : unifiedMotion;
+  const mergedStyle = react.useMemo(() => {
+    if (!userStyle) return motion.style;
+    return { ...motion.style, ...userStyle };
+  }, [motion.style, userStyle]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref: motion.ref,
+      className,
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
+}
+function getInitialTransform(motionType) {
+  switch (motionType) {
+    case "slideUp":
+      return "translateY(32px)";
+    case "slideLeft":
+      return "translateX(-32px)";
+    case "slideRight":
+      return "translateX(32px)";
+    case "scaleIn":
+      return "scale(0.95)";
+    case "bounceIn":
+      return "scale(0.75)";
+    case "fadeIn":
+    default:
+      return "none";
+  }
+}
+function useStagger(options) {
+  const {
+    count,
+    staggerDelay = 100,
+    baseDelay = 0,
+    duration = 700,
+    motionType = "fadeIn",
+    threshold = 0.1,
+    easing: easing2 = "ease-out"
+  } = options;
+  const containerRef = react.useRef(null);
+  const [isVisible, setIsVisible] = react.useState(false);
+  react.useEffect(() => {
+    if (!containerRef.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setIsVisible(true);
+            observer.disconnect();
+          }
+        });
+      },
+      { threshold }
+    );
+    observer.observe(containerRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [threshold]);
+  const initialTransform = react.useMemo(() => getInitialTransform(motionType), [motionType]);
+  const styles = react.useMemo(() => {
+    return Array.from({ length: count }, (_, i) => {
+      const itemDelay = baseDelay + i * staggerDelay;
+      if (!isVisible) {
+        return {
+          opacity: 0,
+          transform: initialTransform,
+          transition: `opacity ${duration}ms ${easing2} ${itemDelay}ms, transform ${duration}ms ${easing2} ${itemDelay}ms`
+        };
+      }
+      return {
+        opacity: 1,
+        transform: "none",
+        transition: `opacity ${duration}ms ${easing2} ${itemDelay}ms, transform ${duration}ms ${easing2} ${itemDelay}ms`
+      };
+    });
+  }, [count, isVisible, staggerDelay, baseDelay, duration, motionType, easing2, initialTransform]);
+  return {
+    containerRef,
+    styles,
+    isVisible
+  };
+}
 
 exports.MOTION_PRESETS = MOTION_PRESETS;
+exports.Motion = Motion;
 exports.MotionEngine = MotionEngine;
 exports.PAGE_MOTIONS = PAGE_MOTIONS;
 exports.PerformanceOptimizer = PerformanceOptimizer;
@@ -4218,6 +4720,8 @@ exports.safeApplyEasing = safeApplyEasing;
 exports.transitionEffects = transitionEffects;
 exports.useBounceIn = useBounceIn;
 exports.useClickToggle = useClickToggle;
+exports.useCustomCursor = useCustomCursor;
+exports.useElementProgress = useElementProgress;
 exports.useFadeIn = useFadeIn;
 exports.useFocusToggle = useFocusToggle;
 exports.useGesture = useGesture;
@@ -4225,6 +4729,7 @@ exports.useGestureMotion = useGestureMotion;
 exports.useGradient = useGradient;
 exports.useHoverMotion = useHoverMotion;
 exports.useInView = useInView;
+exports.useMagneticCursor = useMagneticCursor;
 exports.useMotionState = useMotionState;
 exports.useMouse = useMouse;
 exports.usePageMotions = usePageMotions;
@@ -4240,8 +4745,11 @@ exports.useSlideLeft = useSlideLeft;
 exports.useSlideRight = useSlideRight;
 exports.useSlideUp = useSlideUp;
 exports.useSmartMotion = useSmartMotion;
+exports.useSmoothScroll = useSmoothScroll;
 exports.useSpringMotion = useSpringMotion;
+exports.useStagger = useStagger;
 exports.useToggleMotion = useToggleMotion;
+exports.useTypewriter = useTypewriter;
 exports.useUnifiedMotion = useUnifiedMotion;
 exports.useWindowSize = useWindowSize;
 //# sourceMappingURL=index.js.map