@drivexstudio/animations 1.0.0 → 1.0.2

package/dist/index.js

@@ -0,0 +1,1862 @@
+"use client";
+
+// packages/animations/ScrambleText.jsx
+import React4, { useEffect as useEffect4, useRef as useRef3 } from "react";
+
+// libs/vendor.js
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { Flip } from "gsap/Flip";
+import { SplitText } from "gsap/SplitText";
+import { ScrambleTextPlugin } from "gsap/ScrambleTextPlugin";
+import { InertiaPlugin } from "gsap/InertiaPlugin";
+import { Draggable } from "gsap/Draggable";
+import { cx as classVarianceCx } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+gsap.registerPlugin(
+  ScrollTrigger,
+  ScrambleTextPlugin,
+  SplitText,
+  Flip,
+  Draggable,
+  InertiaPlugin
+);
+var cx = classVarianceCx;
+
+// packages/animations/ScrambleGroup.jsx
+import React3, { createContext as createContext2, useContext as useContext2, useRef as useRef2, useState as useState3, useCallback as useCallback3, useMemo as useMemo4 } from "react";
+
+// libs/hooks/useIdleGSAP.js
+import { useState as useState2, useEffect as useEffect3, useCallback as useCallback2, useMemo as useMemo3 } from "react";
+import { useGSAP as useGSAP2 } from "@gsap/react";
+
+// libs/hooks/usePageTransition.js
+import { useMemo as useMemo2 } from "react";
+
+// packages/providers/PageTransitionProvider.jsx
+import React2, {
+  createContext,
+  useState,
+  useTransition,
+  useRef,
+  useCallback,
+  useEffect as useEffect2,
+  useMemo,
+  useContext
+} from "react";
+
+// packages/providers/LenisProvider.jsx
+import React, { useEffect } from "react";
+import { ReactLenis, useLenis } from "lenis/react";
+import { jsx, jsxs } from "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 = useLenis();
+  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__ */ jsxs(
+    ReactLenis,
+    {
+      root: true,
+      options: {
+        anchors: {
+          duration: 1.2,
+          easing: customEasing
+        }
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(LenisTracker, {}),
+        props.children
+      ]
+    }
+  );
+}
+
+// packages/providers/PageTransitionProvider.jsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var PageTransitionContext = 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] = useState("idle");
+  const [isPending, startTransitionReact] = useTransition();
+  const timerRef = useRef(null);
+  const pendingCallbackRef = useRef(null);
+  const startTimeRef = useRef(0);
+  const clearTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  const handlePopState = 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 = 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]);
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    const onPopState = () => {
+      handlePopState();
+    };
+    window.addEventListener("popstate", onPopState);
+    return () => {
+      window.removeEventListener("popstate", onPopState);
+    };
+  }, [handlePopState]);
+  useEffect2(() => {
+    return () => {
+      clearTimer();
+    };
+  }, [clearTimer]);
+  const contextValue = useMemo(() => ({
+    phase,
+    startTransition,
+    isPending
+  }), [phase, startTransition, isPending]);
+  return /* @__PURE__ */ jsx2(PageTransitionContext.Provider, { value: contextValue, children });
+}
+var defaultContextValue = {
+  phase: "idle",
+  startTransition: (t) => t(),
+  isPending: false
+};
+function usePageTransitionContext() {
+  return useContext(PageTransitionContext) ?? defaultContextValue;
+}
+
+// libs/hooks/usePageTransition.js
+function usePageTransition() {
+  const {
+    startTransition,
+    phase,
+    isPending
+  } = usePageTransitionContext();
+  const isTransitioning = phase !== "idle";
+  const transitionState = useMemo2(() => ({
+    startTransition,
+    isTransitioning,
+    phase,
+    isPending
+  }), [isPending, phase, startTransition, isTransitioning]);
+  return transitionState;
+}
+
+// libs/hooks/useIdleGSAP.js
+function useIdleGSAP(callback, config) {
+  const { phase } = usePageTransition();
+  const [isIdle, setIsIdle] = useState2(phase === "idle");
+  useEffect3(() => {
+    if (phase === "idle") {
+      setIsIdle(true);
+    } else if (phase === "holding") {
+      setIsIdle(false);
+    }
+  }, [phase]);
+  const wrappedCallback = useCallback2((context, contextSafe) => {
+    if (isIdle) {
+      return callback(context, contextSafe);
+    }
+  }, [callback, isIdle]);
+  const gsapConfig = useMemo3(() => {
+    const configDependencies = (config == null ? void 0 : config.dependencies) ?? [];
+    const combinedDependencies = [...configDependencies, isIdle];
+    return {
+      ...config,
+      dependencies: combinedDependencies
+    };
+  }, [config, isIdle]);
+  return useGSAP2(wrappedCallback, gsapConfig);
+}
+
+// packages/animations/ScrambleGroup.jsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ScrambleContext = createContext2(null);
+function ScrambleGroup({
+  children,
+  stagger: stagger2 = 0.1,
+  start = "top 80%",
+  markers = false,
+  manual = false,
+  className
+}) {
+  const childrenMapRef = useRef2(/* @__PURE__ */ new Map());
+  const [hasTriggered, setHasTriggered] = useState3(false);
+  const isTriggering = useRef2(false);
+  const scrollTriggerRef = useRef2(null);
+  const containerRef = useRef2(null);
+  const register = useCallback3((id, callback) => {
+    childrenMapRef.current.set(id, callback);
+  }, []);
+  const unregister = useCallback3((id) => {
+    childrenMapRef.current.delete(id);
+  }, []);
+  const triggerAll = useCallback3((customStagger) => {
+    if (isTriggering.current) return;
+    isTriggering.current = true;
+    const callbacks = Array.from(childrenMapRef.current.values());
+    const staggerValue = customStagger ?? stagger2;
+    callbacks.forEach((callbackFn, index) => {
+      gsap.delayedCall(index * staggerValue, () => {
+        callbackFn();
+      });
+    });
+    setHasTriggered(true);
+  }, [stagger2]);
+  const setupScrollTrigger = useCallback3(() => {
+    if (manual || !containerRef.current) return;
+    isTriggering.current = false;
+    const tween = gsap.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 = useMemo4(() => ({
+    register,
+    unregister,
+    triggerAll,
+    hasTriggered
+  }), [register, unregister, triggerAll, hasTriggered]);
+  return /* @__PURE__ */ jsx3(ScrambleContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx3("div", { ref: containerRef, className, children }) });
+}
+function useScrambleGroup() {
+  return useContext2(ScrambleContext);
+}
+
+// libs/constants/chars.js
+var DEFAULT_CHARS = " .'`^\",:;Il!i><~+_-?][}{1)(|\\/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$";
+
+// packages/animations/ScrambleText.jsx
+import { jsx as jsx4, jsxs as jsxs2 } from "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 = useRef3(null);
+  const textElementRef = useRef3(null);
+  const timelineRef = useRef3(null);
+  const internalTextRef = useRef3("");
+  const isCompleteRef = useRef3(false);
+  const instanceIdRef = useRef3(`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 = "";
+  }
+  useEffect4(() => {
+    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 = gsap.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;
+  };
+  useEffect4(() => {
+    if (scrambleGroup) {
+      scrambleGroup.register(instanceIdRef.current, triggerAnimation);
+      return () => {
+        scrambleGroup.unregister(instanceIdRef.current);
+      };
+    }
+  }, [scrambleGroup, triggerAnimation]);
+  useEffect4(() => {
+    onReady == null ? void 0 : onReady(triggerAnimation);
+  }, [onReady, triggerAnimation]);
+  const handleMouseEnter = () => {
+    if (triggerOnHover) {
+      triggerAnimation();
+    }
+  };
+  useEffect4(() => {
+    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__ */ jsxs2(
+    "span",
+    {
+      ref: containerRef,
+      className,
+      style: containerStyle,
+      onMouseEnter: triggerOnHover ? handleMouseEnter : void 0,
+      children: [
+        /* @__PURE__ */ jsx4("span", { className: "sr-only", children: childText }),
+        /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", style: hiddenSpanStyle, children: childText }),
+        /* @__PURE__ */ jsx4("span", { ref: textElementRef, "aria-hidden": "true", style: animatedSpanStyle, children: initialDisplayText })
+      ]
+    }
+  );
+}
+
+// packages/animations/AnimatedHeadline.jsx
+import React5, { forwardRef, useRef as useRef4, useState as useState4, useLayoutEffect, useCallback as useCallback4, useImperativeHandle, Fragment } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "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 = forwardRef(({
+  children,
+  as: Component = "h1",
+  displayAs,
+  className,
+  skip,
+  trigger = "manual",
+  wrapperClassName
+}, ref) => {
+  const containerRef = useRef4(null);
+  const wrapperRef = useRef4(null);
+  const hasRevealedRef = useRef4(false);
+  const [lines, setLines] = useState4(null);
+  const shouldSkip = skip ?? window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  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);
+  }, []);
+  useGSAP(() => {
+    if (shouldSkip || !containerRef.current || !lines) return;
+    const container = containerRef.current;
+    gsap.set(container.querySelectorAll("[data-line-inner]"), { opacity: 0 });
+    gsap.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) {
+      ScrollTrigger.create({
+        trigger: triggerEl,
+        start: "top bottom",
+        once: true,
+        onEnter: () => reveal()
+      });
+    }
+  }, { dependencies: [trigger, shouldSkip, lines] });
+  const reveal = useCallback4((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 = gsap.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 = useCallback4(() => {
+    hasRevealedRef.current = false;
+    if (!containerRef.current) return;
+    const container = containerRef.current;
+    gsap.set(container.querySelectorAll("[data-line-inner]"), { opacity: 0 });
+    gsap.set(container.querySelectorAll("[data-brand-rect], [data-fg-rect]"), { scaleX: 0, transformOrigin: "left" });
+  }, []);
+  useImperativeHandle(ref, () => ({ reveal, reset }), [reveal, reset]);
+  const resolvedClassName = cx(typographyClasses[displayAs ?? Component], className);
+  if (!lines) {
+    const manualLines = children.split("\n");
+    const preRenderedContent = /* @__PURE__ */ jsx5(Component, { ref: containerRef, className: resolvedClassName, children: manualLines.map((lineStr, lineIndex) => /* @__PURE__ */ jsxs3(Fragment, { children: [
+      lineIndex > 0 && /* @__PURE__ */ jsx5("br", {}),
+      lineStr.split(/\s+/).filter(Boolean).map((word, wordIndex) => /* @__PURE__ */ jsxs3(Fragment, { children: [
+        wordIndex > 0 && " ",
+        /* @__PURE__ */ jsx5("span", { "data-word": true, "data-explicit-line": lineIndex, children: word })
+      ] }, wordIndex))
+    ] }, lineIndex)) });
+    return trigger === "scroll" ? /* @__PURE__ */ jsx5("div", { ref: wrapperRef, className: wrapperClassName, children: preRenderedContent }) : preRenderedContent;
+  }
+  const animatedContent = /* @__PURE__ */ jsx5(Component, { ref: containerRef, className: resolvedClassName, children: lines.map((lineStr, lineIndex) => /* @__PURE__ */ jsxs3(Fragment, { children: [
+    lineIndex > 0 && /* @__PURE__ */ jsx5("br", {}),
+    /* @__PURE__ */ jsxs3("div", { "data-line": true, className: "relative inline-block", children: [
+      /* @__PURE__ */ jsx5("span", { "data-line-inner": true, className: "block whitespace-nowrap", children: lineStr }),
+      !shouldSkip && /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsx5("div", { "data-brand-rect": true, className: "absolute -inset-x-[0.1em] -inset-y-[0.1em] bg-brand" }),
+        /* @__PURE__ */ jsx5("div", { "data-fg-rect": true, className: "absolute -inset-x-[0.1em] -inset-y-[0.1em] bg-foreground" })
+      ] })
+    ] })
+  ] }, lineIndex)) });
+  return trigger === "scroll" ? /* @__PURE__ */ jsx5("div", { ref: wrapperRef, className: wrapperClassName, children: animatedContent }) : animatedContent;
+});
+var AnimatedHeadline_default = AnimatedHeadline;
+
+// packages/animations/AnimatedButton.jsx
+import React6, { useRef as useRef6 } from "react";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+
+// libs/hooks/useDualLayerScramble.js
+import { useRef as useRef5, useEffect as useEffect5, useCallback as useCallback5 } from "react";
+var DEFAULT_CHARS2 = " .'`^\",:;Il!i><~+_-?][}{1)(|\\/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$";
+function useDualLayerScramble(options) {
+  const elementRef = useRef5(null);
+  const timelineRef = useRef5(null);
+  const originalTextRef = useRef5("");
+  const originalHTMLRef = useRef5("");
+  const dimensionsRef = useRef5(null);
+  const linesDataRef = useRef5([]);
+  const spansRef = useRef5([]);
+  const isAnimatingRef = useRef5(false);
+  const isPreparedRef = useRef5(false);
+  useEffect5(() => {
+    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 = useCallback5(() => {
+    if (timelineRef.current) {
+      timelineRef.current.kill();
+      timelineRef.current = null;
+      isAnimatingRef.current = false;
+    }
+  }, []);
+  const prepareDOM = useCallback5(() => {
+    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;
+    gsap.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);
+    });
+    gsap.set(el, { opacity: 1 });
+  }, []);
+  const playScramble = useCallback5((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 = gsap.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(() => {
+        gsap.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 = useCallback5(() => {
+    killTimeline();
+    if (elementRef.current && isPreparedRef.current) {
+      elementRef.current.innerHTML = originalHTMLRef.current || originalTextRef.current;
+      gsap.set(elementRef.current, {
+        opacity: 0,
+        width: "auto",
+        height: "auto",
+        overflow: "visible"
+      });
+      spansRef.current = [];
+      linesDataRef.current = [];
+      isPreparedRef.current = false;
+    }
+  }, [killTimeline]);
+  useEffect5(() => {
+    return () => {
+      killTimeline();
+      spansRef.current = [];
+      linesDataRef.current = [];
+      isPreparedRef.current = false;
+    };
+  }, [killTimeline]);
+  return {
+    ref: elementRef,
+    scramble: playScramble,
+    kill: resetDOM,
+    isAnimating: isAnimatingRef.current
+  };
+}
+
+// packages/animations/AnimatedButton.jsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var buttonVariants = 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 = 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 = 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__ */ jsx6(
+    "svg",
+    {
+      className: cx("size-[0.75em]", className),
+      viewBox: "0 0 12 12",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx6(
+        "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 ? 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 = useRef6(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__ */ jsxs4("span", { className: "relative flex w-full items-center gap-6", children: [
+    /* @__PURE__ */ jsx6(
+      "span",
+      {
+        className: cx(
+          iconVariants({ size, theme, position: "left" }),
+          "group-hover:rotate-0 group-hover:scale-100"
+        ),
+        children: /* @__PURE__ */ jsx6(PlusIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "span",
+      {
+        className: cx(
+          textWrapperVariants({ size, theme }),
+          "group-hover:translate-x-0"
+        ),
+        children: /* @__PURE__ */ jsx6("span", { ref: scrambleResult.ref, children: content })
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "span",
+      {
+        className: cx(
+          iconVariants({ size, theme, position: "right" }),
+          "group-hover:-rotate-45 group-hover:scale-0"
+        ),
+        children: /* @__PURE__ */ jsx6(PlusIcon, {})
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx6(
+    Comp,
+    {
+      type: resolvedType,
+      className: buttonClasses,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ...rest,
+      children: /* @__PURE__ */ jsx6(Slottable, { asChild, child: children, children: renderContent })
+    }
+  );
+}
+
+// packages/animations/AnimatedLink.jsx
+import React7, { forwardRef as forwardRef2 } from "react";
+import { Slot as Slot2, Slottable as Slottable2 } from "@radix-ui/react-slot";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var AnimatedLink = forwardRef2(function AnimatedLink2(props, ref) {
+  const {
+    children,
+    className,
+    asChild,
+    indicator,
+    ...restProps
+  } = props;
+  const Component = asChild ? Slot2 : "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__ */ jsxs5(Fragment2, { children: [
+    indicator && /* @__PURE__ */ jsx7(
+      "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__ */ jsx7(
+      "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__ */ jsxs5(
+      "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__ */ jsx7(
+            "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__ */ jsx7(
+            "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__ */ jsx7(Component, { ref, className: combinedClassName, ...restProps, children: /* @__PURE__ */ jsx7(Slottable2, { asChild, child: children, children: renderChildren }) });
+});
+var AnimatedLink_default = AnimatedLink;
+
+// packages/animations/AnimatedProse.jsx
+import React8, { createContext as createContext3, useState as useState5, useRef as useRef7, useEffect as useEffect6 } from "react";
+import { motion, animate } from "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
+import { jsx as jsx8 } from "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 = createContext3(false);
+function AnimatedProse({
+  children,
+  className,
+  staggerDelay = 0.03,
+  duration = 0.5,
+  delay = 0,
+  margin = "0px 0px -10% 0px"
+}) {
+  const [isInView, setIsInView] = useState5(false);
+  const [hasSplitLines, setHasSplitLines] = useState5(false);
+  const containerRef = useRef7(null);
+  const hasAnimatedRef = useRef7(false);
+  useEffect6(() => {
+    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);
+    };
+  }, []);
+  useEffect6(() => {
+    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 = 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__ */ jsx8(AnimatedProseContext.Provider, { value: true, children: /* @__PURE__ */ jsx8(
+    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
+import React9, { forwardRef as forwardRef3, useRef as useRef8, useState as useState6, useLayoutEffect as useLayoutEffect2, useImperativeHandle as useImperativeHandle2 } from "react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var AnimatedSubtext = forwardRef3(({
+  children,
+  className,
+  skip = false,
+  staggerDelay = 0.05,
+  duration = 0.8
+}, ref) => {
+  const elementRef = useRef8(null);
+  const splitTextRef = useRef8(null);
+  const [isSplit, setIsSplit] = useState6(false);
+  useLayoutEffect2(() => {
+    if (elementRef.current && !skip) {
+      setIsSplit(false);
+      splitTextRef.current = new 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]);
+  useImperativeHandle2(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";
+        gsap.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__ */ jsxs6("span", { children: [
+      line,
+      index < lines.length - 1 && /* @__PURE__ */ jsx9("br", {})
+    ] }, index));
+  };
+  return skip ? /* @__PURE__ */ jsx9("p", { className, children: renderWithLineBreaks(children) }) : /* @__PURE__ */ jsx9("p", { ref: elementRef, className: cx("invisible", className), children: renderWithLineBreaks(children) });
+});
+var AnimatedSubtext_default = AnimatedSubtext;
+
+// packages/animations/AnimatedText.jsx
+import React10, { useState as useState7, useRef as useRef9, useContext as useContext3, useLayoutEffect as useLayoutEffect3, useEffect as useEffect7 } from "react";
+import { motion as motion2, animate as animate2 } from "framer-motion";
+import { jsx as jsx10 } from "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] = useState7(false);
+  const [isSplit, setIsSplit] = useState7(false);
+  const containerRef = useRef9(null);
+  const splitTextRef = useRef9(null);
+  const inAnimatedProse = useContext3(AnimatedProseContext);
+  useLayoutEffect3(() => {
+    if (containerRef.current) {
+      setIsSplit(false);
+      splitTextRef.current = new 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;
+    };
+  }, []);
+  useEffect7(() => {
+    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 = animate2(
+      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__ */ jsx10(
+    motion2.span,
+    {
+      ref: containerRef,
+      onViewportEnter: handleViewportEnter,
+      viewport: { once: true, margin },
+      className: cx("invisible", className),
+      children
+    }
+  );
+}
+
+// packages/animations/ScrollAnimatedHeadline.jsx
+import { jsx as jsx11 } from "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__ */ jsx11(
+    AnimatedHeadline_default,
+    {
+      trigger: "scroll",
+      as: headline.level,
+      displayAs,
+      className: cx(headlineClassName),
+      wrapperClassName: className,
+      children: headline.text
+    }
+  );
+}
+
+// packages/animations/Preloader.jsx
+import React12, { useRef as useRef10, useState as useState9, useEffect as useEffect9 } from "react";
+
+// packages/providers/PreloaderProvider.jsx
+import React11, { createContext as createContext4, useState as useState8, useEffect as useEffect8, useContext as useContext4, useMemo as useMemo5 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var PreloaderContext = createContext4(null);
+var defaultContextValue2 = {
+  phase: "hidden",
+  setPhase: () => {
+  },
+  isInitialLoad: false
+};
+function PreloaderProvider({ children }) {
+  const [phase, setPhase] = useState8("loading");
+  const [isInitialLoad, setIsInitialLoad] = useState8(true);
+  useEffect8(() => {
+    if (phase === "revealing") {
+      const timer = setTimeout(() => {
+        setPhase("hidden");
+        setIsInitialLoad(false);
+      }, 200);
+      return () => clearTimeout(timer);
+    }
+  }, [phase]);
+  const contextValue = useMemo5(() => ({
+    phase,
+    setPhase,
+    isInitialLoad
+  }), [phase, isInitialLoad]);
+  return /* @__PURE__ */ jsx12(PreloaderContext.Provider, { value: contextValue, children });
+}
+function usePreloader() {
+  return useContext4(PreloaderContext) ?? defaultContextValue2;
+}
+
+// packages/animations/Preloader.jsx
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+function Preloader() {
+  const { phase, setPhase, isInitialLoad } = usePreloader();
+  const containerRef = useRef10(null);
+  const contentRef = useRef10(null);
+  const squaresContainerRef = useRef10(null);
+  const squaresRefs = useRef10([]);
+  const onReadyRef = useRef10(null);
+  const timelineRef = useRef10(null);
+  const hasStartedRef = useRef10(false);
+  const [isReducedMotion, setIsReducedMotion] = useState9(false);
+  useEffect9(() => {
+    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;
+  };
+  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 = gsap.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__ */ jsx13("div", { ref: containerRef, "data-theme": "brand", className: containerClasses, children: /* @__PURE__ */ jsxs7("div", { ref: contentRef, className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13(
+      "div",
+      {
+        ref: squaresContainerRef,
+        className: "relative overflow-x-clip overflow-y-visible",
+        style: { width: 70, height: 16 },
+        children: [0, 1, 2, 3].map((index) => /* @__PURE__ */ jsx13(
+          "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__ */ jsx13("div", { children: /* @__PURE__ */ jsx13("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx13(ScrambleText, { revealMode: true, duration: 1, onReady: handleReady, children: "LOADING" }) }) })
+  ] }) });
+}
+
+// packages/providers/PageEnterProvider.jsx
+import React13, {
+  createContext as createContext5,
+  useState as useState10,
+  useRef as useRef11,
+  useEffect as useEffect10,
+  useCallback as useCallback6,
+  useMemo as useMemo6,
+  useContext as useContext5
+} from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var PageEnterContext = createContext5(null);
+function sortByPriority(a, b) {
+  return a.priority - b.priority;
+}
+function PageEnterProvider({ children }) {
+  const { phase: pageTransitionPhase } = usePageTransition();
+  const { phase: preloaderPhase } = usePreloader();
+  const [phase, setPhase] = useState10("waiting");
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState10(false);
+  const callbacksMapRef = useRef11(/* @__PURE__ */ new Map());
+  const isTriggeringRef = useRef11(false);
+  useEffect10(() => {
+    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 = useCallback6((id, trigger, priority = 0) => {
+    callbacksMapRef.current.set(id, { id, trigger, priority });
+  }, []);
+  const unregister = useCallback6((id) => {
+    callbacksMapRef.current.delete(id);
+  }, []);
+  const triggerEnter = useCallback6(() => {
+    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));
+  }, []);
+  useEffect10(() => {
+    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]);
+  useEffect10(() => {
+    if (pageTransitionPhase === "entering" || pageTransitionPhase === "holding") {
+      setPhase("waiting");
+      isTriggeringRef.current = false;
+    }
+  }, [pageTransitionPhase]);
+  const contextValue = useMemo6(() => ({
+    phase,
+    register,
+    unregister,
+    prefersReducedMotion
+  }), [phase, register, unregister, prefersReducedMotion]);
+  return /* @__PURE__ */ jsx14(PageEnterContext.Provider, { value: contextValue, children });
+}
+var defaultContextValue3 = {
+  phase: "complete",
+  register: () => {
+  },
+  unregister: () => {
+  },
+  prefersReducedMotion: false
+};
+function usePageEnterContext() {
+  return useContext5(PageEnterContext) ?? defaultContextValue3;
+}
+
+// libs/hooks/usePageEnter.js
+import { useRef as useRef12, useEffect as useEffect11, useMemo as useMemo7 } from "react";
+function usePageEnter(callback, options = {}) {
+  const { priority = 0, skip = false } = options;
+  const {
+    register,
+    unregister,
+    phase,
+    prefersReducedMotion
+  } = usePageEnterContext();
+  const uuid = useMemo7(() => crypto.randomUUID(), []);
+  const idRef = useRef12(uuid);
+  useEffect11(() => {
+    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 = useMemo7(() => ({
+    phase,
+    prefersReducedMotion,
+    isEntering,
+    isComplete
+  }), [phase, prefersReducedMotion, isEntering, isComplete]);
+  return returnedState;
+}
+
+// libs/hooks/useBreakpoint.js
+import { useEffect as useEffect12, useState as useState11 } from "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] = useState11(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(`(min-width: ${minWidth}px)`).matches;
+  });
+  useEffect12(() => {
+    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;
+}
+export {
+  AnimatedButton,
+  AnimatedHeadline_default as AnimatedHeadline,
+  AnimatedLink_default as AnimatedLink,
+  AnimatedProse,
+  AnimatedProseContext,
+  AnimatedSubtext_default as AnimatedSubtext,
+  AnimatedText,
+  DEFAULT_CHARS,
+  Lenis as 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.js.map