@drivexstudio/animations 1.0.0 → 1.0.2

package/dist/index.cjs

@@ -0,0 +1,1918 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/index.js
+var packages_exports = {};
+__export(packages_exports, {
+  AnimatedButton: () => AnimatedButton,
+  AnimatedHeadline: () => AnimatedHeadline_default,
+  AnimatedLink: () => AnimatedLink_default,
+  AnimatedProse: () => AnimatedProse,
+  AnimatedProseContext: () => AnimatedProseContext,
+  AnimatedSubtext: () => AnimatedSubtext_default,
+  AnimatedText: () => AnimatedText,
+  DEFAULT_CHARS: () => DEFAULT_CHARS,
+  LenisProvider: () => Lenis,
+  PageEnterProvider: () => PageEnterProvider,
+  PageTransitionProvider: () => PageTransitionProvider,
+  Preloader: () => Preloader,
+  PreloaderProvider: () => PreloaderProvider,
+  ScrambleGroup: () => ScrambleGroup,
+  ScrambleText: () => ScrambleText,
+  ScrambleTextPlugin: () => import_ScrambleTextPlugin.ScrambleTextPlugin,
+  ScrollAnimatedHeadline: () => ScrollAnimatedHeadline,
+  ScrollTrigger: () => import_ScrollTrigger.ScrollTrigger,
+  SplitText: () => import_SplitText.SplitText,
+  cva: () => import_class_variance_authority2.cva,
+  cx: () => cx,
+  easingDefinitionToFunction: () => easingDefinitionToFunction,
+  getCssScrollLocked: () => getCssScrollLocked,
+  getLenis: () => getLenis,
+  gsap: () => import_gsap.default,
+  scrollToTop: () => scrollToTop,
+  setCssScrollLocked: () => setCssScrollLocked,
+  stagger: () => stagger,
+  useAsciiDelay: () => useAsciiDelay,
+  useDualLayerScramble: () => useDualLayerScramble,
+  useGSAP: () => import_react.useGSAP,
+  useIdleGSAP: () => useIdleGSAP,
+  useLenis: () => import_react3.useLenis,
+  usePageEnter: () => usePageEnter,
+  usePageEnterContext: () => usePageEnterContext,
+  usePageTransition: () => usePageTransition,
+  usePageTransitionContext: () => usePageTransitionContext,
+  usePreloader: () => usePreloader,
+  useScrambleGroup: () => useScrambleGroup
+});
+module.exports = __toCommonJS(packages_exports);
+
+// packages/animations/ScrambleText.jsx
+var import_react9 = __toESM(require("react"), 1);
+
+// libs/vendor.js
+var import_gsap = __toESM(require("gsap"), 1);
+var import_react = require("@gsap/react");
+var import_ScrollTrigger = require("gsap/ScrollTrigger");
+var import_Flip = require("gsap/Flip");
+var import_SplitText = require("gsap/SplitText");
+var import_ScrambleTextPlugin = require("gsap/ScrambleTextPlugin");
+var import_InertiaPlugin = require("gsap/InertiaPlugin");
+var import_Draggable = require("gsap/Draggable");
+var import_class_variance_authority = require("class-variance-authority");
+var import_class_variance_authority2 = require("class-variance-authority");
+import_gsap.default.registerPlugin(
+  import_ScrollTrigger.ScrollTrigger,
+  import_ScrambleTextPlugin.ScrambleTextPlugin,
+  import_SplitText.SplitText,
+  import_Flip.Flip,
+  import_Draggable.Draggable,
+  import_InertiaPlugin.InertiaPlugin
+);
+var cx = import_class_variance_authority.cx;
+
+// packages/animations/ScrambleGroup.jsx
+var import_react8 = __toESM(require("react"), 1);
+
+// libs/hooks/useIdleGSAP.js
+var import_react6 = require("react");
+var import_react7 = require("@gsap/react");
+
+// libs/hooks/usePageTransition.js
+var import_react5 = require("react");
+
+// packages/providers/PageTransitionProvider.jsx
+var import_react4 = __toESM(require("react"), 1);
+
+// packages/providers/LenisProvider.jsx
+var import_react2 = __toESM(require("react"), 1);
+var import_react3 = require("lenis/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var globalLenisInstance = null;
+var isCssScrollLocked = false;
+function getLenis() {
+  return globalLenisInstance;
+}
+function setCssScrollLocked(isLocked) {
+  if (isLocked !== isCssScrollLocked) {
+    isCssScrollLocked = isLocked;
+    if (isLocked) {
+      document.documentElement.classList.add("scroll-locked");
+    } else {
+      document.documentElement.classList.remove("scroll-locked");
+    }
+  }
+}
+function getCssScrollLocked() {
+  return isCssScrollLocked;
+}
+function scrollToTop(immediate = true) {
+  const lenis = globalLenisInstance;
+  if (lenis) {
+    lenis.scrollTo(0, { immediate });
+  } else {
+    window.scrollTo(0, 0);
+  }
+}
+function LenisTracker() {
+  const lenis = (0, import_react3.useLenis)();
+  (0, import_react2.useEffect)(() => {
+    globalLenisInstance = lenis ?? null;
+    return () => {
+      globalLenisInstance = null;
+    };
+  }, [lenis]);
+  return null;
+}
+function customEasing(t) {
+  return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+}
+function Lenis(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_react3.ReactLenis,
+    {
+      root: true,
+      options: {
+        anchors: {
+          duration: 1.2,
+          easing: customEasing
+        }
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LenisTracker, {}),
+        props.children
+      ]
+    }
+  );
+}
+
+// packages/providers/PageTransitionProvider.jsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PageTransitionContext = (0, import_react4.createContext)(null);
+var scrollTriggerModulePromise = null;
+function getScrollTriggerModule() {
+  if (!scrollTriggerModulePromise) {
+    scrollTriggerModulePromise = import("gsap/ScrollTrigger");
+  }
+  return scrollTriggerModulePromise;
+}
+function clearScrollMemory() {
+  const modulePromise = getScrollTriggerModule();
+  if (modulePromise) {
+    modulePromise.then(({ ScrollTrigger: ScrollTrigger2 }) => {
+      ScrollTrigger2.clearScrollMemory();
+    });
+  }
+}
+function refreshScrollTrigger() {
+  const modulePromise = getScrollTriggerModule();
+  if (modulePromise) {
+    modulePromise.then(({ ScrollTrigger: ScrollTrigger2 }) => {
+      ScrollTrigger2.refresh(true);
+    });
+  }
+}
+function PageTransitionProvider({ children }) {
+  const [phase, setPhase] = (0, import_react4.useState)("idle");
+  const [isPending, startTransitionReact] = (0, import_react4.useTransition)();
+  const timerRef = (0, import_react4.useRef)(null);
+  const pendingCallbackRef = (0, import_react4.useRef)(null);
+  const startTimeRef = (0, import_react4.useRef)(0);
+  const clearTimer = (0, import_react4.useCallback)(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  const handlePopState = (0, import_react4.useCallback)(() => {
+    clearTimer();
+    if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      startTimeRef.current = 0;
+      pendingCallbackRef.current = null;
+      setPhase("holding");
+      clearScrollMemory();
+      timerRef.current = window.setTimeout(() => {
+        setPhase("exiting");
+        timerRef.current = window.setTimeout(() => {
+          setPhase("idle");
+          refreshScrollTrigger();
+        }, 1200);
+      }, 100);
+    }
+  }, [clearTimer]);
+  const startTransition = (0, import_react4.useCallback)((callback) => {
+    clearTimer();
+    pendingCallbackRef.current = callback;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      callback();
+    } else {
+      setPhase("entering");
+      timerRef.current = window.setTimeout(() => {
+        startTimeRef.current = Date.now();
+        setPhase("holding");
+        clearScrollMemory();
+        scrollToTop();
+        startTransitionReact(() => {
+          var _a;
+          (_a = pendingCallbackRef.current) == null ? void 0 : _a.call(pendingCallbackRef);
+        });
+      }, 1300);
+    }
+  }, [clearTimer, startTransitionReact]);
+  (0, import_react4.useEffect)(() => {
+    if (phase === "holding" && !isPending && startTimeRef.current > 0) {
+      const elapsed = Date.now() - startTimeRef.current;
+      const remainingDelay = Math.max(0, 100 - elapsed);
+      timerRef.current = window.setTimeout(() => {
+        setPhase("exiting");
+        startTimeRef.current = 0;
+        timerRef.current = window.setTimeout(() => {
+          setPhase("idle");
+          refreshScrollTrigger();
+        }, 1200);
+      }, remainingDelay);
+    }
+  }, [phase, isPending]);
+  (0, import_react4.useEffect)(() => {
+    const onPopState = () => {
+      handlePopState();
+    };
+    window.addEventListener("popstate", onPopState);
+    return () => {
+      window.removeEventListener("popstate", onPopState);
+    };
+  }, [handlePopState]);
+  (0, import_react4.useEffect)(() => {
+    return () => {
+      clearTimer();
+    };
+  }, [clearTimer]);
+  const contextValue = (0, import_react4.useMemo)(() => ({
+    phase,
+    startTransition,
+    isPending
+  }), [phase, startTransition, isPending]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PageTransitionContext.Provider, { value: contextValue, children });
+}
+var defaultContextValue = {
+  phase: "idle",
+  startTransition: (t) => t(),
+  isPending: false
+};
+function usePageTransitionContext() {
+  return (0, import_react4.useContext)(PageTransitionContext) ?? defaultContextValue;
+}
+
+// libs/hooks/usePageTransition.js
+function usePageTransition() {
+  const {
+    startTransition,
+    phase,
+    isPending
+  } = usePageTransitionContext();
+  const isTransitioning = phase !== "idle";
+  const transitionState = (0, import_react5.useMemo)(() => ({
+    startTransition,
+    isTransitioning,
+    phase,
+    isPending
+  }), [isPending, phase, startTransition, isTransitioning]);
+  return transitionState;
+}
+
+// libs/hooks/useIdleGSAP.js
+function useIdleGSAP(callback, config) {
+  const { phase } = usePageTransition();
+  const [isIdle, setIsIdle] = (0, import_react6.useState)(phase === "idle");
+  (0, import_react6.useEffect)(() => {
+    if (phase === "idle") {
+      setIsIdle(true);
+    } else if (phase === "holding") {
+      setIsIdle(false);
+    }
+  }, [phase]);
+  const wrappedCallback = (0, import_react6.useCallback)((context, contextSafe) => {
+    if (isIdle) {
+      return callback(context, contextSafe);
+    }
+  }, [callback, isIdle]);
+  const gsapConfig = (0, import_react6.useMemo)(() => {
+    const configDependencies = (config == null ? void 0 : config.dependencies) ?? [];
+    const combinedDependencies = [...configDependencies, isIdle];
+    return {
+      ...config,
+      dependencies: combinedDependencies
+    };
+  }, [config, isIdle]);
+  return (0, import_react7.useGSAP)(wrappedCallback, gsapConfig);
+}
+
+// packages/animations/ScrambleGroup.jsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ScrambleContext = (0, import_react8.createContext)(null);
+function ScrambleGroup({
+  children,
+  stagger: stagger2 = 0.1,
+  start = "top 80%",
+  markers = false,
+  manual = false,
+  className
+}) {
+  const childrenMapRef = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
+  const [hasTriggered, setHasTriggered] = (0, import_react8.useState)(false);
+  const isTriggering = (0, import_react8.useRef)(false);
+  const scrollTriggerRef = (0, import_react8.useRef)(null);
+  const containerRef = (0, import_react8.useRef)(null);
+  const register = (0, import_react8.useCallback)((id, callback) => {
+    childrenMapRef.current.set(id, callback);
+  }, []);
+  const unregister = (0, import_react8.useCallback)((id) => {
+    childrenMapRef.current.delete(id);
+  }, []);
+  const triggerAll = (0, import_react8.useCallback)((customStagger) => {
+    if (isTriggering.current) return;
+    isTriggering.current = true;
+    const callbacks = Array.from(childrenMapRef.current.values());
+    const staggerValue = customStagger ?? stagger2;
+    callbacks.forEach((callbackFn, index) => {
+      import_gsap.default.delayedCall(index * staggerValue, () => {
+        callbackFn();
+      });
+    });
+    setHasTriggered(true);
+  }, [stagger2]);
+  const setupScrollTrigger = (0, import_react8.useCallback)(() => {
+    if (manual || !containerRef.current) return;
+    isTriggering.current = false;
+    const tween = import_gsap.default.to(containerRef.current, {
+      scrollTrigger: {
+        trigger: containerRef.current,
+        start,
+        markers,
+        toggleActions: "play none none none"
+      },
+      onStart: () => {
+        triggerAll();
+      },
+      duration: 1e-3
+    });
+    scrollTriggerRef.current = tween.scrollTrigger ?? null;
+    return () => {
+      var _a;
+      tween.kill();
+      (_a = scrollTriggerRef.current) == null ? void 0 : _a.kill();
+    };
+  }, [manual, start, markers, triggerAll]);
+  useIdleGSAP(setupScrollTrigger, {
+    dependencies: [manual, start, markers, triggerAll]
+  });
+  const contextValue = (0, import_react8.useMemo)(() => ({
+    register,
+    unregister,
+    triggerAll,
+    hasTriggered
+  }), [register, unregister, triggerAll, hasTriggered]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ScrambleContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: containerRef, className, children }) });
+}
+function useScrambleGroup() {
+  return (0, import_react8.useContext)(ScrambleContext);
+}
+
+// libs/constants/chars.js
+var DEFAULT_CHARS = " .'`^\",:;Il!i><~+_-?][}{1)(|\\/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$";
+
+// packages/animations/ScrambleText.jsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ScrambleText({
+  children,
+  className,
+  duration = 0.6,
+  chars = DEFAULT_CHARS,
+  dualLayer = true,
+  triggerOnHover = false,
+  revealMode = false,
+  theme = "dark",
+  firstColorClass,
+  secondColorClass,
+  onComplete,
+  onReady,
+  multiLine = false
+}) {
+  const containerRef = (0, import_react9.useRef)(null);
+  const textElementRef = (0, import_react9.useRef)(null);
+  const timelineRef = (0, import_react9.useRef)(null);
+  const internalTextRef = (0, import_react9.useRef)("");
+  const isCompleteRef = (0, import_react9.useRef)(false);
+  const instanceIdRef = (0, import_react9.useRef)(`scramble-${Math.random().toString(36).slice(2, 9)}`);
+  const themeColors = theme === "brand" ? { firstColorClass: "scramble-white", secondColorClass: "scramble-foreground" } : { firstColorClass: "scramble-brand", secondColorClass: "scramble-foreground" };
+  const color1 = firstColorClass ?? themeColors.firstColorClass;
+  const color2 = secondColorClass ?? themeColors.secondColorClass;
+  const scrambleGroup = useScrambleGroup();
+  let childText;
+  if (typeof children === "string") {
+    childText = children;
+  } else if (typeof children === "number") {
+    childText = String(children);
+  } else {
+    childText = "";
+  }
+  (0, import_react9.useEffect)(() => {
+    internalTextRef.current = childText;
+  }, [childText]);
+  const killTimeline = () => {
+    if (timelineRef.current) {
+      timelineRef.current.kill();
+      timelineRef.current = null;
+    }
+  };
+  const triggerAnimation = () => {
+    if (!textElementRef.current) return null;
+    const targetEl = textElementRef.current;
+    const textToScramble = internalTextRef.current || childText;
+    if (!textToScramble || textToScramble.length === 0) return null;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      targetEl.textContent = textToScramble;
+      targetEl.className = targetEl.className.replace(/\bscramble-\w+\b/g, "");
+      isCompleteRef.current = true;
+      onComplete == null ? void 0 : onComplete();
+      return null;
+    }
+    killTimeline();
+    timelineRef.current = import_gsap.default.timeline({
+      onComplete: () => {
+        timelineRef.current = null;
+        isCompleteRef.current = true;
+        onComplete == null ? void 0 : onComplete();
+      }
+    });
+    if (dualLayer) {
+      const generateScrambledString = (targetString, charset = DEFAULT_CHARS) => {
+        let result = "";
+        for (let t = 0; t < targetString.length; t++) {
+          let char = targetString[t];
+          if (char === " " || char === "\n" || char === "\r") {
+            result += char;
+          } else {
+            result += charset[Math.floor(Math.random() * charset.length)];
+          }
+        }
+        return result;
+      };
+      const scrambledText = generateScrambledString(textToScramble, chars);
+      const nonWhitespaceLength = textToScramble.replace(/\s/g, "").length;
+      const stepDuration = nonWhitespaceLength > 0 ? duration / nonWhitespaceLength : 0;
+      if (revealMode && !isCompleteRef.current) {
+        targetEl.textContent = textToScramble.replace(/[^\s\n\r]/g, "\xA0");
+        timelineRef.current.to(targetEl, {
+          duration,
+          scrambleText: {
+            text: scrambledText,
+            chars,
+            speed: 1,
+            revealDelay: 0.1,
+            oldClass: color1,
+            newClass: color1
+          },
+          ease: "none"
+        });
+      } else {
+        timelineRef.current.to(targetEl, {
+          duration,
+          scrambleText: {
+            text: scrambledText,
+            chars,
+            speed: 1,
+            revealDelay: 0.1,
+            oldClass: color2,
+            newClass: color1
+          },
+          ease: "none"
+        });
+      }
+      timelineRef.current.to(targetEl, {
+        duration,
+        scrambleText: {
+          text: textToScramble,
+          chars,
+          speed: 1,
+          revealDelay: 0.1,
+          oldClass: color1,
+          newClass: color2
+        },
+        ease: "none"
+      }, stepDuration);
+    } else {
+      timelineRef.current.to(targetEl, {
+        duration,
+        scrambleText: {
+          text: textToScramble,
+          chars,
+          speed: 1,
+          revealDelay: 0.2
+        },
+        ease: "none"
+      });
+    }
+    return timelineRef.current;
+  };
+  (0, import_react9.useEffect)(() => {
+    if (scrambleGroup) {
+      scrambleGroup.register(instanceIdRef.current, triggerAnimation);
+      return () => {
+        scrambleGroup.unregister(instanceIdRef.current);
+      };
+    }
+  }, [scrambleGroup, triggerAnimation]);
+  (0, import_react9.useEffect)(() => {
+    onReady == null ? void 0 : onReady(triggerAnimation);
+  }, [onReady, triggerAnimation]);
+  const handleMouseEnter = () => {
+    if (triggerOnHover) {
+      triggerAnimation();
+    }
+  };
+  (0, import_react9.useEffect)(() => {
+    return () => {
+      killTimeline();
+    };
+  }, []);
+  const initialDisplayText = revealMode ? childText.replace(/[^\s\n\r]/g, "\xA0") : childText;
+  const whiteSpaceValue = multiLine ? "normal" : "nowrap";
+  const displayValue = multiLine ? "inline" : "inline-block";
+  const containerStyle = {
+    position: "relative",
+    display: displayValue,
+    whiteSpace: whiteSpaceValue
+  };
+  const hiddenSpanStyle = {
+    visibility: "hidden",
+    whiteSpace: whiteSpaceValue
+  };
+  const animatedSpanStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    whiteSpace: whiteSpaceValue,
+    ...multiLine ? { width: "100%" } : {}
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "span",
+    {
+      ref: containerRef,
+      className,
+      style: containerStyle,
+      onMouseEnter: triggerOnHover ? handleMouseEnter : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: childText }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", style: hiddenSpanStyle, children: childText }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { ref: textElementRef, "aria-hidden": "true", style: animatedSpanStyle, children: initialDisplayText })
+      ]
+    }
+  );
+}
+
+// packages/animations/AnimatedHeadline.jsx
+var import_react10 = __toESM(require("react"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var typographyClasses = {
+  display: "text-display",
+  h1: "text-h1",
+  h2: "text-h2",
+  h3: "text-h3",
+  h4: "text-h4",
+  h5: "text-h5",
+  h6: "text-h6"
+};
+var AnimatedHeadline = (0, import_react10.forwardRef)(({
+  children,
+  as: Component = "h1",
+  displayAs,
+  className,
+  skip,
+  trigger = "manual",
+  wrapperClassName
+}, ref) => {
+  const containerRef = (0, import_react10.useRef)(null);
+  const wrapperRef = (0, import_react10.useRef)(null);
+  const hasRevealedRef = (0, import_react10.useRef)(false);
+  const [lines, setLines] = (0, import_react10.useState)(null);
+  const shouldSkip = skip ?? window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  (0, import_react10.useLayoutEffect)(() => {
+    if (!containerRef.current) return;
+    const wordNodes = containerRef.current.querySelectorAll("[data-word]");
+    if (wordNodes.length === 0) return;
+    const computedLines = [];
+    let currentLine = [];
+    let lastY = -Infinity;
+    let lastExplicitLine = -1;
+    for (const node of wordNodes) {
+      const top = node.getBoundingClientRect().top;
+      const explicitLine = Number(node.dataset.explicitLine ?? -1);
+      const isNewExplicit = explicitLine !== lastExplicitLine && lastExplicitLine !== -1;
+      if (lastY > -Infinity && top - lastY > 2 || isNewExplicit) {
+        computedLines.push(currentLine.join(" "));
+        currentLine = [];
+      }
+      currentLine.push(node.textContent || "");
+      lastY = top;
+      lastExplicitLine = explicitLine;
+    }
+    if (currentLine.length > 0) {
+      computedLines.push(currentLine.join(" "));
+    }
+    setLines(computedLines);
+  }, []);
+  (0, import_react.useGSAP)(() => {
+    if (shouldSkip || !containerRef.current || !lines) return;
+    const container = containerRef.current;
+    import_gsap.default.set(container.querySelectorAll("[data-line-inner]"), { opacity: 0 });
+    import_gsap.default.set(container.querySelectorAll("[data-brand-rect], [data-fg-rect]"), { scaleX: 0, transformOrigin: "left" });
+  }, { dependencies: [shouldSkip, lines] });
+  useIdleGSAP(() => {
+    if (trigger !== "scroll" || shouldSkip || !lines) return;
+    const triggerEl = wrapperRef.current || containerRef.current;
+    if (triggerEl) {
+      import_ScrollTrigger.ScrollTrigger.create({
+        trigger: triggerEl,
+        start: "top bottom",
+        once: true,
+        onEnter: () => reveal()
+      });
+    }
+  }, { dependencies: [trigger, shouldSkip, lines] });
+  const reveal = (0, import_react10.useCallback)((delayOffset = 0) => {
+    if (hasRevealedRef.current || shouldSkip || !containerRef.current) return;
+    hasRevealedRef.current = true;
+    const lineNodes = containerRef.current.querySelectorAll("[data-line]");
+    for (let r = 0; r < lineNodes.length; r++) {
+      const lineNode = lineNodes[r];
+      if (!lineNode) continue;
+      const delay = delayOffset + 0.15 * r;
+      const lineInner = lineNode.querySelector("[data-line-inner]");
+      const brandRect = lineNode.querySelector("[data-brand-rect]");
+      const fgRect = lineNode.querySelector("[data-fg-rect]");
+      if (!lineInner || !brandRect || !fgRect) continue;
+      const rects = [brandRect, fgRect];
+      const tl = import_gsap.default.timeline({ delay });
+      tl.to(brandRect, { scaleX: 1, duration: 0.45, ease: "power3.inOut" }, 0);
+      tl.to(fgRect, { scaleX: 1, duration: 0.45, ease: "power3.inOut" }, 0.1);
+      tl.set(lineInner, { opacity: 1 }, 0.5);
+      tl.set(rects, { transformOrigin: "right" }, 0.5);
+      tl.to(fgRect, { scaleX: 0, duration: 0.45, ease: "power3.inOut" }, 0.5);
+      tl.to(brandRect, { scaleX: 0, duration: 0.45, ease: "power3.inOut" }, 0.6);
+    }
+  }, [shouldSkip]);
+  const reset = (0, import_react10.useCallback)(() => {
+    hasRevealedRef.current = false;
+    if (!containerRef.current) return;
+    const container = containerRef.current;
+    import_gsap.default.set(container.querySelectorAll("[data-line-inner]"), { opacity: 0 });
+    import_gsap.default.set(container.querySelectorAll("[data-brand-rect], [data-fg-rect]"), { scaleX: 0, transformOrigin: "left" });
+  }, []);
+  (0, import_react10.useImperativeHandle)(ref, () => ({ reveal, reset }), [reveal, reset]);
+  const resolvedClassName = cx(typographyClasses[displayAs ?? Component], className);
+  if (!lines) {
+    const manualLines = children.split("\n");
+    const preRenderedContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, { ref: containerRef, className: resolvedClassName, children: manualLines.map((lineStr, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react10.Fragment, { children: [
+      lineIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+      lineStr.split(/\s+/).filter(Boolean).map((word, wordIndex) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react10.Fragment, { children: [
+        wordIndex > 0 && " ",
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-word": true, "data-explicit-line": lineIndex, children: word })
+      ] }, wordIndex))
+    ] }, lineIndex)) });
+    return trigger === "scroll" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: wrapperRef, className: wrapperClassName, children: preRenderedContent }) : preRenderedContent;
+  }
+  const animatedContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, { ref: containerRef, className: resolvedClassName, children: lines.map((lineStr, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react10.Fragment, { children: [
+    lineIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-line": true, className: "relative inline-block", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-line-inner": true, className: "block whitespace-nowrap", children: lineStr }),
+      !shouldSkip && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react10.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-brand-rect": true, className: "absolute -inset-x-[0.1em] -inset-y-[0.1em] bg-brand" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-fg-rect": true, className: "absolute -inset-x-[0.1em] -inset-y-[0.1em] bg-foreground" })
+      ] })
+    ] })
+  ] }, lineIndex)) });
+  return trigger === "scroll" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: wrapperRef, className: wrapperClassName, children: animatedContent }) : animatedContent;
+});
+var AnimatedHeadline_default = AnimatedHeadline;
+
+// packages/animations/AnimatedButton.jsx
+var import_react12 = __toESM(require("react"), 1);
+var import_react_slot = require("@radix-ui/react-slot");
+
+// libs/hooks/useDualLayerScramble.js
+var import_react11 = require("react");
+var DEFAULT_CHARS2 = " .'`^\",:;Il!i><~+_-?][}{1)(|\\/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$";
+function useDualLayerScramble(options) {
+  const elementRef = (0, import_react11.useRef)(null);
+  const timelineRef = (0, import_react11.useRef)(null);
+  const originalTextRef = (0, import_react11.useRef)("");
+  const originalHTMLRef = (0, import_react11.useRef)("");
+  const dimensionsRef = (0, import_react11.useRef)(null);
+  const linesDataRef = (0, import_react11.useRef)([]);
+  const spansRef = (0, import_react11.useRef)([]);
+  const isAnimatingRef = (0, import_react11.useRef)(false);
+  const isPreparedRef = (0, import_react11.useRef)(false);
+  (0, import_react11.useEffect)(() => {
+    if (!elementRef.current) return;
+    const el = elementRef.current;
+    const innerText = el.innerText ?? "";
+    if (innerText.trim().length > 0) {
+      originalTextRef.current = innerText;
+      originalHTMLRef.current = el.innerHTML;
+      dimensionsRef.current = { width: el.offsetWidth, height: el.offsetHeight };
+    }
+  }, []);
+  const killTimeline = (0, import_react11.useCallback)(() => {
+    if (timelineRef.current) {
+      timelineRef.current.kill();
+      timelineRef.current = null;
+      isAnimatingRef.current = false;
+    }
+  }, []);
+  const prepareDOM = (0, import_react11.useCallback)(() => {
+    var _a, _b;
+    if (!elementRef.current || isPreparedRef.current) return;
+    const el = elementRef.current;
+    if ((originalTextRef.current || el.innerText || "").trim().length === 0) return;
+    if (!dimensionsRef.current) {
+      dimensionsRef.current = { width: el.offsetWidth, height: el.offsetHeight };
+    }
+    const splitTextIntoLines = (element) => {
+      const text = element.innerText || "";
+      if (text.trim().length === 0) return [];
+      if (text.includes("\n")) return text.split("\n").filter((line) => line.length > 0);
+      const firstChild = element.firstChild;
+      if (!firstChild || firstChild.nodeType !== Node.TEXT_NODE) return [text];
+      const range = document.createRange();
+      const lines2 = [];
+      let currentLine = "";
+      let lastTop = null;
+      const length = firstChild.length;
+      for (let i = 0; i < text.length && i < length; i++) {
+        range.setStart(firstChild, i);
+        range.setEnd(firstChild, i + 1);
+        const rect = range.getBoundingClientRect();
+        if (lastTop !== null && Math.abs(rect.top - lastTop) > 2) {
+          if (currentLine.length > 0) lines2.push(currentLine);
+          currentLine = "";
+        }
+        currentLine += text[i];
+        lastTop = rect.top;
+      }
+      if (currentLine.length > 0) lines2.push(currentLine);
+      return lines2.length > 0 ? lines2 : [text];
+    };
+    const lines = splitTextIntoLines(el);
+    const testDiv = document.createElement("div");
+    testDiv.style.cssText = `
+			position: absolute;
+			visibility: hidden;
+			pointer-events: none;
+			white-space: nowrap;
+		`;
+    const computedStyle = window.getComputedStyle(el);
+    testDiv.style.font = computedStyle.font;
+    testDiv.style.fontSize = computedStyle.fontSize;
+    testDiv.style.fontFamily = computedStyle.fontFamily;
+    testDiv.style.fontWeight = computedStyle.fontWeight;
+    testDiv.style.letterSpacing = computedStyle.letterSpacing;
+    testDiv.style.textTransform = computedStyle.textTransform;
+    document.body.appendChild(testDiv);
+    linesDataRef.current = lines.map((line) => {
+      testDiv.textContent = line;
+      return { text: line, width: testDiv.offsetWidth, height: testDiv.offsetHeight };
+    });
+    document.body.removeChild(testDiv);
+    const maxWidth = Math.max(...linesDataRef.current.map((lineData) => lineData.width));
+    const totalHeight = linesDataRef.current.reduce((sum, lineData) => sum + lineData.height, 0);
+    const finalWidth = Math.max(((_a = dimensionsRef.current) == null ? void 0 : _a.width) ?? 0, maxWidth);
+    const finalHeight = Math.max(((_b = dimensionsRef.current) == null ? void 0 : _b.height) ?? 0, totalHeight);
+    isPreparedRef.current = true;
+    import_gsap.default.set(el, { width: finalWidth, height: finalHeight, display: "inline-block", overflow: "hidden" });
+    el.innerHTML = "";
+    spansRef.current = [];
+    linesDataRef.current.forEach((lineData) => {
+      const span = document.createElement("span");
+      span.style.cssText = `
+				display: block;
+				opacity: 0;
+				width: ${lineData.width}px;
+				height: ${lineData.height}px;
+				overflow: hidden;
+				white-space: nowrap;
+			`;
+      span.innerText = lineData.text;
+      el.appendChild(span);
+      spansRef.current.push(span);
+    });
+    import_gsap.default.set(el, { opacity: 1 });
+  }, []);
+  const playScramble = (0, import_react11.useCallback)((overrides) => {
+    var _a;
+    if (!elementRef.current) return null;
+    if (isAnimatingRef.current) return timelineRef.current;
+    prepareDOM();
+    const config = { ...options, ...overrides };
+    const duration = config.duration ?? 1;
+    const speed = config.speed ?? 1;
+    const chars = config.chars ?? DEFAULT_CHARS2;
+    const firstColorClass = config.firstColorClass ?? "scramble-brand";
+    const secondColorClass = config.secondColorClass ?? "scramble-foreground";
+    const stagger2 = config.stagger ?? 0.08;
+    const linesData = linesDataRef.current;
+    const spans = spansRef.current;
+    if (linesData.length === 0 || spans.length === 0) return null;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      spans.forEach((span, index) => {
+        const lineData = linesData[index];
+        if (lineData) {
+          span.innerText = lineData.text;
+        }
+        span.style.opacity = "1";
+        span.className = span.className.replace(/\bscramble-\w+\b/g, "");
+      });
+      (_a = config.onComplete) == null ? void 0 : _a.call(config);
+      return null;
+    }
+    killTimeline();
+    isAnimatingRef.current = true;
+    timelineRef.current = import_gsap.default.timeline({
+      onComplete: () => {
+        var _a2;
+        isAnimatingRef.current = false;
+        timelineRef.current = null;
+        (_a2 = config.onComplete) == null ? void 0 : _a2.call(config);
+      }
+    });
+    spans.forEach((span, index) => {
+      var _a2, _b, _c;
+      const lineData = linesData[index];
+      if (!lineData) return;
+      const originalText = lineData.text;
+      const delay = index * stagger2;
+      const generateScrambled = (text, charSet = DEFAULT_CHARS2) => {
+        let scrambled = "";
+        for (let i = 0; i < text.length; i++) {
+          const char = text[i];
+          if (char === " ") {
+            scrambled += char;
+          } else {
+            scrambled += charSet[Math.floor(Math.random() * charSet.length)];
+          }
+        }
+        return scrambled;
+      };
+      const initialScrambledText = generateScrambled(originalText, chars);
+      const nonSpaceCount = originalText.replace(/\s/g, "").length;
+      const spacesOnly = originalText.replace(/[^\s]/g, " ");
+      (_a2 = timelineRef.current) == null ? void 0 : _a2.add(() => {
+        import_gsap.default.set(span, { opacity: 1 });
+        span.innerText = spacesOnly;
+      }, delay);
+      (_b = timelineRef.current) == null ? void 0 : _b.to(span, {
+        duration,
+        scrambleText: {
+          text: initialScrambledText,
+          chars,
+          speed,
+          revealDelay: 0.1,
+          oldClass: firstColorClass,
+          newClass: firstColorClass
+        },
+        ease: "none"
+      }, delay);
+      (_c = timelineRef.current) == null ? void 0 : _c.to(span, {
+        duration,
+        scrambleText: {
+          text: originalText,
+          chars,
+          speed,
+          revealDelay: 0.1,
+          oldClass: firstColorClass,
+          newClass: secondColorClass
+        },
+        ease: "none"
+      }, delay + (nonSpaceCount > 0 ? duration / nonSpaceCount : 0));
+    });
+    return timelineRef.current;
+  }, [options, killTimeline, prepareDOM]);
+  const resetDOM = (0, import_react11.useCallback)(() => {
+    killTimeline();
+    if (elementRef.current && isPreparedRef.current) {
+      elementRef.current.innerHTML = originalHTMLRef.current || originalTextRef.current;
+      import_gsap.default.set(elementRef.current, {
+        opacity: 0,
+        width: "auto",
+        height: "auto",
+        overflow: "visible"
+      });
+      spansRef.current = [];
+      linesDataRef.current = [];
+      isPreparedRef.current = false;
+    }
+  }, [killTimeline]);
+  (0, import_react11.useEffect)(() => {
+    return () => {
+      killTimeline();
+      spansRef.current = [];
+      linesDataRef.current = [];
+      isPreparedRef.current = false;
+    };
+  }, [killTimeline]);
+  return {
+    ref: elementRef,
+    scramble: playScramble,
+    kill: resetDOM,
+    isAnimating: isAnimatingRef.current
+  };
+}
+
+// packages/animations/AnimatedButton.jsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority2.cva)(
+  [
+    "group inline-flex min-w-0 shrink-0 cursor-pointer items-center justify-center whitespace-nowrap",
+    "font-medium font-mono uppercase",
+    "outline-none focus-visible:ring-2 focus-visible:ring-brand/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: []
+      },
+      size: {
+        xs: "text-body-sm",
+        sm: "text-body-sm",
+        default: "text-body-sm lg:text-body",
+        lg: "text-body lg:text-body-lg"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "default"
+    }
+  }
+);
+var iconVariants = (0, import_class_variance_authority2.cva)(
+  [
+    "flex items-center justify-center",
+    "transition-transform duration-700 [transition-timing-function:var(--ease-power4-in-out)]"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "size-32",
+        sm: "size-32 lg:size-40",
+        default: "size-40 lg:size-48",
+        lg: "size-48 lg:size-56"
+      },
+      position: {
+        left: "origin-left -rotate-45 scale-0",
+        right: "absolute right-0 z-10 origin-right rotate-0 scale-100"
+      },
+      theme: {
+        light: "bg-foreground text-background",
+        dark: "bg-foreground text-background",
+        brand: "bg-brand text-black"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      theme: "light"
+    }
+  }
+);
+var textWrapperVariants = (0, import_class_variance_authority2.cva)(
+  [
+    "flex w-full flex-1 items-center justify-center",
+    "transition-transform duration-700 [transition-timing-function:var(--ease-power4-in-out)]"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "h-32 -translate-x-[calc(32px+6px)] px-8",
+        sm: "h-32 -translate-x-[calc(32px+6px)] px-8 lg:h-40 lg:-translate-x-[calc(40px+6px)] lg:px-12",
+        default: "h-40 -translate-x-[calc(40px+6px)] px-12 lg:h-48 lg:-translate-x-[calc(48px+6px)] lg:px-16",
+        lg: "h-48 -translate-x-[calc(48px+6px)] px-16 lg:h-56 lg:-translate-x-[calc(56px+6px)] lg:px-24"
+      },
+      theme: {
+        light: "bg-foreground text-background",
+        dark: "bg-foreground text-background",
+        brand: "bg-brand text-black"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      theme: "light"
+    }
+  }
+);
+function PlusIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "svg",
+    {
+      className: cx("size-[0.75em]", className),
+      viewBox: "0 0 12 12",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "path",
+        {
+          d: "M6 1v10M1 6h10",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "square"
+        }
+      )
+    }
+  );
+}
+function AnimatedButton(props) {
+  const {
+    children,
+    className,
+    asChild,
+    variant,
+    size,
+    theme,
+    type,
+    ...rest
+  } = props;
+  const resolvedType = type === void 0 ? asChild ? void 0 : "button" : type;
+  const Comp = asChild ? import_react_slot.Slot : "button";
+  const themeColors = theme === "brand" ? { firstColorClass: "scramble-white", secondColorClass: "scramble-inherit" } : { firstColorClass: "scramble-brand", secondColorClass: "scramble-inherit" };
+  const scrambleConfig = {
+    duration: 0.5,
+    initiallyVisible: true,
+    firstColorClass: themeColors.firstColorClass,
+    secondColorClass: themeColors.secondColorClass
+  };
+  const scrambleResult = useDualLayerScramble(scrambleConfig);
+  const isScramblingRef = (0, import_react12.useRef)(false);
+  const handleMouseEnter = () => {
+    if (!isScramblingRef.current) {
+      isScramblingRef.current = true;
+      scrambleResult.scramble();
+    }
+  };
+  const handleMouseLeave = () => {
+    isScramblingRef.current = false;
+  };
+  const buttonClasses = buttonVariants({ variant, size, className });
+  const renderContent = (content) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "relative flex w-full items-center gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        className: cx(
+          iconVariants({ size, theme, position: "left" }),
+          "group-hover:rotate-0 group-hover:scale-100"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlusIcon, {})
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        className: cx(
+          textWrapperVariants({ size, theme }),
+          "group-hover:translate-x-0"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { ref: scrambleResult.ref, children: content })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        className: cx(
+          iconVariants({ size, theme, position: "right" }),
+          "group-hover:-rotate-45 group-hover:scale-0"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlusIcon, {})
+      }
+    )
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Comp,
+    {
+      type: resolvedType,
+      className: buttonClasses,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_slot.Slottable, { asChild, child: children, children: renderContent })
+    }
+  );
+}
+
+// packages/animations/AnimatedLink.jsx
+var import_react13 = __toESM(require("react"), 1);
+var import_react_slot2 = require("@radix-ui/react-slot");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var AnimatedLink = (0, import_react13.forwardRef)(function AnimatedLink2(props, ref) {
+  const {
+    children,
+    className,
+    asChild,
+    indicator,
+    ...restProps
+  } = props;
+  const Component = asChild ? import_react_slot2.Slot : "a";
+  const displayClass = indicator ? "inline-flex items-center" : "inline-block";
+  const combinedClassName = cx(
+    "group relative w-fit cursor-pointer",
+    displayClass,
+    "outline-none focus-visible:ring-2 focus-visible:ring-brand/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    className
+  );
+  const renderChildren = (childContent) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    indicator && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "span",
+      {
+        className: cx(
+          "absolute left-0 size-8 bg-brand lg:size-12",
+          "-rotate-90 scale-0",
+          "transition-transform duration-500 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)]",
+          "group-hover:rotate-0 group-hover:scale-100",
+          "group-focus-visible:rotate-0 group-focus-visible:scale-100"
+        ),
+        "aria-hidden": "true"
+      }
+    ),
+    indicator ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "span",
+      {
+        className: cx(
+          "transition-transform duration-500 [transition-timing-function:cubic-bezier(0.33,1,0.68,1)]",
+          "group-hover:translate-x-24",
+          "group-focus-visible:translate-x-24"
+        ),
+        children: childContent
+      }
+    ) : childContent,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "span",
+      {
+        className: cx(
+          "pointer-events-none absolute inset-x-0 -bottom-1",
+          indicator && [
+            "transition-transform duration-500 [transition-timing-function:cubic-bezier(0.33,1,0.68,1)]",
+            "group-hover:translate-x-24 group-focus-visible:translate-x-24"
+          ]
+        ),
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "span",
+            {
+              className: cx(
+                "absolute inset-x-0 top-0 h-px bg-current",
+                "origin-left scale-x-100",
+                "transition-transform duration-700 [transition-timing-function:cubic-bezier(0.625,0.05,0,1)]",
+                "delay-300 group-hover:origin-right group-hover:scale-x-0 group-hover:delay-0",
+                "group-focus-visible:origin-right group-focus-visible:scale-x-0 group-focus-visible:delay-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "span",
+            {
+              className: cx(
+                "absolute inset-x-0 top-0 h-px bg-current",
+                "origin-right scale-x-0",
+                "transition-transform duration-700 [transition-timing-function:cubic-bezier(0.625,0.05,0,1)]",
+                "delay-0 group-hover:origin-left group-hover:scale-x-100 group-hover:delay-300",
+                "group-focus-visible:origin-left group-focus-visible:scale-x-100 group-focus-visible:delay-300"
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Component, { ref, className: combinedClassName, ...restProps, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_slot2.Slottable, { asChild, child: children, children: renderChildren }) });
+});
+var AnimatedLink_default = AnimatedLink;
+
+// packages/animations/AnimatedProse.jsx
+var import_react14 = __toESM(require("react"), 1);
+var import_framer_motion = require("framer-motion");
+
+// libs/utils/easings.js
+function cubicBezier(x1, y1, x2, y2) {
+  const cx2 = 3 * x1;
+  const bx = 3 * (x2 - x1) - cx2;
+  const ax = 1 - cx2 - bx;
+  const cy = 3 * y1;
+  const by = 3 * (y2 - y1) - cy;
+  const ay = 1 - cy - by;
+  function sampleCurveX(t) {
+    return ((ax * t + bx) * t + cx2) * t;
+  }
+  function sampleCurveY(t) {
+    return ((ay * t + by) * t + cy) * t;
+  }
+  function sampleCurveDerivativeX(t) {
+    return (3 * ax * t + 2 * bx) * t + cx2;
+  }
+  function solveCurveX(x, epsilon = 1e-6) {
+    let t = x;
+    for (let i = 0; i < 8; i++) {
+      const currentX = sampleCurveX(t) - x;
+      if (Math.abs(currentX) < epsilon) return t;
+      const currentSlope = sampleCurveDerivativeX(t);
+      if (Math.abs(currentSlope) < epsilon) break;
+      t -= currentX / currentSlope;
+    }
+    let lower = 0;
+    let upper = 1;
+    t = x;
+    if (t < lower) return lower;
+    if (t > upper) return upper;
+    while (lower < upper) {
+      const currentX = sampleCurveX(t);
+      if (Math.abs(currentX - x) < epsilon) return t;
+      if (x > currentX) {
+        lower = t;
+      } else {
+        upper = t;
+      }
+      t = (upper - lower) / 2 + lower;
+    }
+    return t;
+  }
+  return function bezierEase(t) {
+    if (t <= 0) return 0;
+    if (t >= 1) return 1;
+    return sampleCurveY(solveCurveX(t));
+  };
+}
+var NAMED_EASINGS = {
+  linear: (t) => t,
+  easeIn: cubicBezier(0.42, 0, 1, 1),
+  easeOut: cubicBezier(0, 0, 0.58, 1),
+  easeInOut: cubicBezier(0.42, 0, 0.58, 1),
+  circIn: cubicBezier(0.55, 0, 1, 0.45),
+  circOut: cubicBezier(0, 0.55, 0.45, 1),
+  circInOut: cubicBezier(0.85, 0, 0.15, 1),
+  backIn: cubicBezier(0.36, 0, 0.66, -0.56),
+  backOut: cubicBezier(0.34, 1.56, 0.64, 1),
+  backInOut: cubicBezier(0.68, -0.6, 0.32, 1.6),
+  anticipate: cubicBezier(0.36, 0, 0.66, -0.56)
+};
+function easingDefinitionToFunction(definition) {
+  if (typeof definition === "function") {
+    return definition;
+  }
+  if (Array.isArray(definition) && definition.length === 4) {
+    const [x1, y1, x2, y2] = definition;
+    return cubicBezier(x1, y1, x2, y2);
+  }
+  if (typeof definition === "string" && NAMED_EASINGS[definition]) {
+    return NAMED_EASINGS[definition];
+  }
+  return NAMED_EASINGS.linear;
+}
+
+// packages/animations/AnimatedProse.jsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function stagger(amount = 0.1, { startDelay = 0, from = 0, ease } = {}) {
+  return (index, totalElements) => {
+    let fromVal = typeof from === "number" ? from : (function(fromStr, total) {
+      if (fromStr === "first") return 0;
+      let lastIndex = total - 1;
+      return fromStr === "last" ? lastIndex : lastIndex / 2;
+    })(from, totalElements);
+    let distance = amount * Math.abs(fromVal - index);
+    if (ease) {
+      let maxStagger = totalElements * amount;
+      distance = easingDefinitionToFunction(ease)(distance / maxStagger) * maxStagger;
+    }
+    return startDelay + distance;
+  };
+}
+var AnimatedProseContext = (0, import_react14.createContext)(false);
+function AnimatedProse({
+  children,
+  className,
+  staggerDelay = 0.03,
+  duration = 0.5,
+  delay = 0,
+  margin = "0px 0px -10% 0px"
+}) {
+  const [isInView, setIsInView] = (0, import_react14.useState)(false);
+  const [hasSplitLines, setHasSplitLines] = (0, import_react14.useState)(false);
+  const containerRef = (0, import_react14.useRef)(null);
+  const hasAnimatedRef = (0, import_react14.useRef)(false);
+  (0, import_react14.useEffect)(() => {
+    if (!containerRef.current) return;
+    const checkSplitLines = () => {
+      var _a;
+      const lines = (_a = containerRef.current) == null ? void 0 : _a.querySelectorAll(".split-line");
+      if (lines && lines.length > 0) {
+        setHasSplitLines(true);
+        return true;
+      }
+      return false;
+    };
+    if (checkSplitLines()) return;
+    const intervalId = setInterval(() => {
+      if (checkSplitLines()) {
+        clearInterval(intervalId);
+      }
+    }, 50);
+    const timeoutId = setTimeout(() => {
+      clearInterval(intervalId);
+      setHasSplitLines(true);
+    }, 500);
+    return () => {
+      clearInterval(intervalId);
+      clearTimeout(timeoutId);
+    };
+  }, []);
+  (0, import_react14.useEffect)(() => {
+    if (!isInView || !hasSplitLines || !containerRef.current || hasAnimatedRef.current) return;
+    const lines = containerRef.current.querySelectorAll(".split-line");
+    if (lines.length === 0) return;
+    hasAnimatedRef.current = true;
+    containerRef.current.querySelectorAll(".invisible").forEach(makeVisible);
+    const animation = (0, import_framer_motion.animate)(
+      Array.from(lines),
+      { y: ["100%", "0%"] },
+      {
+        delay: stagger(staggerDelay, { startDelay: delay }),
+        duration,
+        ease: [0.33, 1, 0.68, 1]
+      }
+    );
+    return () => {
+      animation == null ? void 0 : animation.cancel();
+    };
+  }, [isInView, hasSplitLines, staggerDelay, duration, delay]);
+  const handleViewportEnter = () => setIsInView(true);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AnimatedProseContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_framer_motion.motion.div,
+    {
+      ref: containerRef,
+      onViewportEnter: handleViewportEnter,
+      viewport: { once: true, margin },
+      className: cx(className),
+      children
+    }
+  ) });
+}
+function makeVisible(el) {
+  el.style.visibility = "visible";
+}
+
+// packages/animations/AnimatedSubtext.jsx
+var import_react15 = __toESM(require("react"), 1);
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var AnimatedSubtext = (0, import_react15.forwardRef)(({
+  children,
+  className,
+  skip = false,
+  staggerDelay = 0.05,
+  duration = 0.8
+}, ref) => {
+  const elementRef = (0, import_react15.useRef)(null);
+  const splitTextRef = (0, import_react15.useRef)(null);
+  const [isSplit, setIsSplit] = (0, import_react15.useState)(false);
+  (0, import_react15.useLayoutEffect)(() => {
+    if (elementRef.current && !skip) {
+      setIsSplit(false);
+      splitTextRef.current = new import_SplitText.SplitText(elementRef.current, {
+        type: "lines",
+        autoSplit: true,
+        aria: false,
+        deepSlice: true,
+        reduceWhiteSpace: false,
+        mask: "lines",
+        linesClass: "split-line",
+        onSplit: () => setIsSplit(true)
+      });
+      return () => {
+        var _a;
+        (_a = splitTextRef.current) == null ? void 0 : _a.revert();
+        splitTextRef.current = null;
+      };
+    }
+  }, [skip]);
+  (0, import_react15.useImperativeHandle)(ref, () => ({
+    reveal: (delay = 0) => {
+      if (!elementRef.current || !splitTextRef.current || skip) return;
+      const lines = splitTextRef.current.lines ?? [];
+      if (lines.length !== 0) {
+        elementRef.current.style.visibility = "visible";
+        import_gsap.default.fromTo(
+          lines,
+          { y: "100%" },
+          {
+            y: "0%",
+            duration,
+            ease: "power3.out",
+            stagger: staggerDelay,
+            delay
+          }
+        );
+      }
+    }
+  }), [skip, duration, staggerDelay]);
+  const renderWithLineBreaks = (text) => {
+    const lines = text.split("\n");
+    return lines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+      line,
+      index < lines.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("br", {})
+    ] }, index));
+  };
+  return skip ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className, children: renderWithLineBreaks(children) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { ref: elementRef, className: cx("invisible", className), children: renderWithLineBreaks(children) });
+});
+var AnimatedSubtext_default = AnimatedSubtext;
+
+// packages/animations/AnimatedText.jsx
+var import_react16 = __toESM(require("react"), 1);
+var import_framer_motion2 = require("framer-motion");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function AnimatedText({
+  children,
+  className,
+  staggerDelay = 0.03,
+  duration = 0.5,
+  delay = 0,
+  margin = "0px 0px -10% 0px",
+  revert = false
+}) {
+  const [isInView, setIsInView] = (0, import_react16.useState)(false);
+  const [isSplit, setIsSplit] = (0, import_react16.useState)(false);
+  const containerRef = (0, import_react16.useRef)(null);
+  const splitTextRef = (0, import_react16.useRef)(null);
+  const inAnimatedProse = (0, import_react16.useContext)(AnimatedProseContext);
+  (0, import_react16.useLayoutEffect)(() => {
+    if (containerRef.current) {
+      setIsSplit(false);
+      splitTextRef.current = new import_SplitText.SplitText(containerRef.current, {
+        type: "lines",
+        autoSplit: true,
+        aria: false,
+        deepSlice: true,
+        reduceWhiteSpace: false,
+        mask: "lines",
+        linesClass: "split-line",
+        onSplit: () => setIsSplit(true)
+      });
+    }
+    return () => {
+      splitTextRef.current = null;
+    };
+  }, []);
+  (0, import_react16.useEffect)(() => {
+    if (inAnimatedProse || !isInView || !isSplit || !containerRef.current || !splitTextRef.current) {
+      return;
+    }
+    const lines = splitTextRef.current.lines ?? [];
+    if (lines.length === 0) return;
+    containerRef.current.style.visibility = "visible";
+    const animation = (0, import_framer_motion2.animate)(
+      lines,
+      { y: ["100%", "0%"] },
+      {
+        delay: stagger(staggerDelay, { startDelay: delay }),
+        duration,
+        ease: [0.33, 1, 0.68, 1]
+      }
+    );
+    const handleRevert = async () => {
+      var _a;
+      try {
+        await animation;
+        if (revert) {
+          (_a = splitTextRef.current) == null ? void 0 : _a.revert();
+        }
+      } catch (err) {
+      }
+    };
+    handleRevert();
+    return () => {
+      animation == null ? void 0 : animation.cancel();
+    };
+  }, [isInView, isSplit, inAnimatedProse, staggerDelay, duration, delay, revert]);
+  const handleViewportEnter = () => setIsInView(true);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_framer_motion2.motion.span,
+    {
+      ref: containerRef,
+      onViewportEnter: handleViewportEnter,
+      viewport: { once: true, margin },
+      className: cx("invisible", className),
+      children
+    }
+  );
+}
+
+// packages/animations/ScrollAnimatedHeadline.jsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function ScrollAnimatedHeadline({
+  headline,
+  displayAs,
+  className,
+  headlineClassName
+}) {
+  if (!(headline == null ? void 0 : headline.text) || !(headline == null ? void 0 : headline.level)) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    AnimatedHeadline_default,
+    {
+      trigger: "scroll",
+      as: headline.level,
+      displayAs,
+      className: cx(headlineClassName),
+      wrapperClassName: className,
+      children: headline.text
+    }
+  );
+}
+
+// packages/animations/Preloader.jsx
+var import_react18 = __toESM(require("react"), 1);
+
+// packages/providers/PreloaderProvider.jsx
+var import_react17 = __toESM(require("react"), 1);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var PreloaderContext = (0, import_react17.createContext)(null);
+var defaultContextValue2 = {
+  phase: "hidden",
+  setPhase: () => {
+  },
+  isInitialLoad: false
+};
+function PreloaderProvider({ children }) {
+  const [phase, setPhase] = (0, import_react17.useState)("loading");
+  const [isInitialLoad, setIsInitialLoad] = (0, import_react17.useState)(true);
+  (0, import_react17.useEffect)(() => {
+    if (phase === "revealing") {
+      const timer = setTimeout(() => {
+        setPhase("hidden");
+        setIsInitialLoad(false);
+      }, 200);
+      return () => clearTimeout(timer);
+    }
+  }, [phase]);
+  const contextValue = (0, import_react17.useMemo)(() => ({
+    phase,
+    setPhase,
+    isInitialLoad
+  }), [phase, isInitialLoad]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PreloaderContext.Provider, { value: contextValue, children });
+}
+function usePreloader() {
+  return (0, import_react17.useContext)(PreloaderContext) ?? defaultContextValue2;
+}
+
+// packages/animations/Preloader.jsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Preloader() {
+  const { phase, setPhase, isInitialLoad } = usePreloader();
+  const containerRef = (0, import_react18.useRef)(null);
+  const contentRef = (0, import_react18.useRef)(null);
+  const squaresContainerRef = (0, import_react18.useRef)(null);
+  const squaresRefs = (0, import_react18.useRef)([]);
+  const onReadyRef = (0, import_react18.useRef)(null);
+  const timelineRef = (0, import_react18.useRef)(null);
+  const hasStartedRef = (0, import_react18.useRef)(false);
+  const [isReducedMotion, setIsReducedMotion] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setIsReducedMotion(mediaQuery.matches);
+    const handleChange = (e) => setIsReducedMotion(e.matches);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  const handleReady = (readyFn) => {
+    onReadyRef.current = readyFn;
+  };
+  (0, import_react.useGSAP)(() => {
+    if (!isInitialLoad || phase !== "loading" || hasStartedRef.current) return;
+    if (isReducedMotion) {
+      setPhase("complete");
+      return;
+    }
+    const squares = squaresRefs.current.filter(Boolean);
+    if (squares.length === 0) return;
+    hasStartedRef.current = true;
+    let timeoutId;
+    const runAnimation = () => {
+      var _a, _b;
+      if (!onReadyRef.current) {
+        requestAnimationFrame(runAnimation);
+        return;
+      }
+      timelineRef.current = import_gsap.default.timeline();
+      onReadyRef.current();
+      squares.forEach((square, index) => {
+        var _a2;
+        (_a2 = timelineRef.current) == null ? void 0 : _a2.fromTo(
+          square,
+          {
+            x: index === 0 ? -16 : (index - 1) * 18,
+            rotate: 0
+          },
+          {
+            x: index * 18 - 16,
+            rotate: 90,
+            duration: 0.7,
+            ease: "expo.inOut",
+            immediateRender: false
+          },
+          index === 0 ? 0 : ">-25%"
+        );
+      });
+      const timeOffset = 2.2749999999999995;
+      (_a = timelineRef.current) == null ? void 0 : _a.to(
+        contentRef.current,
+        { opacity: 0, duration: 0.4, ease: "power3.out" },
+        timeOffset + 0.2
+      );
+      const clipState = { value: 0 };
+      const eventState = { value: false };
+      (_b = timelineRef.current) == null ? void 0 : _b.to(
+        clipState,
+        {
+          value: 1,
+          duration: 1.5,
+          ease: "expo.inOut",
+          onUpdate: () => {
+            if (containerRef.current) {
+              const val = clipState.value;
+              containerRef.current.style.clipPath = val <= 0 ? "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" : val >= 1 ? "polygon(0% 100%, 0% 100%, 0% 100%)" : val <= 0.5 ? `polygon(0% 100%, ${2 * val * 100}% 0%, 100% 0%, 100% 100%)` : `polygon(0% 100%, 100% ${(val - 0.5) * 200}%, 100% 100%)`;
+            }
+            if (!eventState.value && clipState.value >= 0.9) {
+              eventState.value = true;
+              setPhase("revealing");
+            }
+          }
+        },
+        timeOffset
+      );
+    };
+    timeoutId = setTimeout(runAnimation, 100);
+    return () => {
+      var _a;
+      clearTimeout(timeoutId);
+      (_a = timelineRef.current) == null ? void 0 : _a.kill();
+    };
+  }, { dependencies: [isInitialLoad, isReducedMotion, setPhase] });
+  if (!isInitialLoad || phase === "hidden") return null;
+  const pointerEventsClass = phase === "complete" ? "pointer-events-none" : "";
+  const containerClasses = cx("fixed inset-0 z-[10000] flex items-center justify-center bg-background", pointerEventsClass);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: containerRef, "data-theme": "brand", className: containerClasses, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref: contentRef, className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        ref: squaresContainerRef,
+        className: "relative overflow-x-clip overflow-y-visible",
+        style: { width: 70, height: 16 },
+        children: [0, 1, 2, 3].map((index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "div",
+          {
+            ref: (el) => {
+              squaresRefs.current[index] = el;
+            },
+            className: "absolute top-0 left-0 bg-foreground",
+            style: {
+              width: 16,
+              height: 16,
+              transform: "translateX(-16px)",
+              transformOrigin: "bottom right"
+            }
+          },
+          index
+        ))
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScrambleText, { revealMode: true, duration: 1, onReady: handleReady, children: "LOADING" }) }) })
+  ] }) });
+}
+
+// packages/providers/PageEnterProvider.jsx
+var import_react19 = __toESM(require("react"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var PageEnterContext = (0, import_react19.createContext)(null);
+function sortByPriority(a, b) {
+  return a.priority - b.priority;
+}
+function PageEnterProvider({ children }) {
+  const { phase: pageTransitionPhase } = usePageTransition();
+  const { phase: preloaderPhase } = usePreloader();
+  const [phase, setPhase] = (0, import_react19.useState)("waiting");
+  const [prefersReducedMotion, setPrefersReducedMotion] = (0, import_react19.useState)(false);
+  const callbacksMapRef = (0, import_react19.useRef)(/* @__PURE__ */ new Map());
+  const isTriggeringRef = (0, import_react19.useRef)(false);
+  (0, import_react19.useEffect)(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleMediaQueryChange = (e) => setPrefersReducedMotion(e.matches);
+    mediaQuery.addEventListener("change", handleMediaQueryChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleMediaQueryChange);
+    };
+  }, []);
+  const register = (0, import_react19.useCallback)((id, trigger, priority = 0) => {
+    callbacksMapRef.current.set(id, { id, trigger, priority });
+  }, []);
+  const unregister = (0, import_react19.useCallback)((id) => {
+    callbacksMapRef.current.delete(id);
+  }, []);
+  const triggerEnter = (0, import_react19.useCallback)(() => {
+    if (isTriggeringRef.current) {
+      return;
+    }
+    isTriggeringRef.current = true;
+    setPhase("entering");
+    const callbacks = Array.from(callbacksMapRef.current.values());
+    callbacks.sort(sortByPriority);
+    let lastPriority = null;
+    let staggerIndex = 0;
+    for (const item of callbacks) {
+      if (lastPriority !== null && item.priority > lastPriority) {
+        staggerIndex += 0.08;
+      }
+      lastPriority = item.priority;
+      item.trigger(staggerIndex);
+    }
+    setTimeout(() => {
+      setPhase("complete");
+    }, 1e3 * (staggerIndex + 1));
+  }, []);
+  (0, import_react19.useEffect)(() => {
+    const isPreloaderReady = preloaderPhase === "revealing" || preloaderPhase === "hidden";
+    if ((pageTransitionPhase === "exiting" || pageTransitionPhase === "idle") && phase === "waiting" && isPreloaderReady) {
+      const timerId = setTimeout(() => {
+        triggerEnter();
+      }, 250);
+      return () => clearTimeout(timerId);
+    }
+  }, [pageTransitionPhase, preloaderPhase, phase, triggerEnter]);
+  (0, import_react19.useEffect)(() => {
+    if (pageTransitionPhase === "entering" || pageTransitionPhase === "holding") {
+      setPhase("waiting");
+      isTriggeringRef.current = false;
+    }
+  }, [pageTransitionPhase]);
+  const contextValue = (0, import_react19.useMemo)(() => ({
+    phase,
+    register,
+    unregister,
+    prefersReducedMotion
+  }), [phase, register, unregister, prefersReducedMotion]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PageEnterContext.Provider, { value: contextValue, children });
+}
+var defaultContextValue3 = {
+  phase: "complete",
+  register: () => {
+  },
+  unregister: () => {
+  },
+  prefersReducedMotion: false
+};
+function usePageEnterContext() {
+  return (0, import_react19.useContext)(PageEnterContext) ?? defaultContextValue3;
+}
+
+// libs/hooks/usePageEnter.js
+var import_react20 = require("react");
+function usePageEnter(callback, options = {}) {
+  const { priority = 0, skip = false } = options;
+  const {
+    register,
+    unregister,
+    phase,
+    prefersReducedMotion
+  } = usePageEnterContext();
+  const uuid = (0, import_react20.useMemo)(() => crypto.randomUUID(), []);
+  const idRef = (0, import_react20.useRef)(uuid);
+  (0, import_react20.useEffect)(() => {
+    if (skip) {
+      return;
+    }
+    const currentId = idRef.current;
+    register(currentId, callback, priority);
+    return () => {
+      unregister(currentId);
+    };
+  }, [register, unregister, callback, priority, skip]);
+  const isEntering = phase === "entering";
+  const isComplete = phase === "complete";
+  const returnedState = (0, import_react20.useMemo)(() => ({
+    phase,
+    prefersReducedMotion,
+    isEntering,
+    isComplete
+  }), [phase, prefersReducedMotion, isEntering, isComplete]);
+  return returnedState;
+}
+
+// libs/hooks/useBreakpoint.js
+var import_react21 = require("react");
+var BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function useBreakpoint(breakpoint = "md") {
+  const minWidth = BREAKPOINTS[breakpoint] ?? BREAKPOINTS.md;
+  const [matches, setMatches] = (0, import_react21.useState)(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(`(min-width: ${minWidth}px)`).matches;
+  });
+  (0, import_react21.useEffect)(() => {
+    const mediaQuery = window.matchMedia(`(min-width: ${minWidth}px)`);
+    const handleChange = (event) => setMatches(event.matches);
+    setMatches(mediaQuery.matches);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, [minWidth]);
+  return matches;
+}
+
+// libs/constants/timing.js
+var ASCII_REVEAL_DURATION = 1.2;
+
+// libs/hooks/useAsciiDelay.js
+var asciiDelayBase = 0.1 * ASCII_REVEAL_DURATION;
+function useAsciiDelay() {
+  const md = useBreakpoint("md");
+  return md ? asciiDelayBase : 0;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimatedButton,
+  AnimatedHeadline,
+  AnimatedLink,
+  AnimatedProse,
+  AnimatedProseContext,
+  AnimatedSubtext,
+  AnimatedText,
+  DEFAULT_CHARS,
+  LenisProvider,
+  PageEnterProvider,
+  PageTransitionProvider,
+  Preloader,
+  PreloaderProvider,
+  ScrambleGroup,
+  ScrambleText,
+  ScrambleTextPlugin,
+  ScrollAnimatedHeadline,
+  ScrollTrigger,
+  SplitText,
+  cva,
+  cx,
+  easingDefinitionToFunction,
+  getCssScrollLocked,
+  getLenis,
+  gsap,
+  scrollToTop,
+  setCssScrollLocked,
+  stagger,
+  useAsciiDelay,
+  useDualLayerScramble,
+  useGSAP,
+  useIdleGSAP,
+  useLenis,
+  usePageEnter,
+  usePageEnterContext,
+  usePageTransition,
+  usePageTransitionContext,
+  usePreloader,
+  useScrambleGroup
+});
+//# sourceMappingURL=index.cjs.map