@drivexstudio/animations 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs ADDED
@@ -0,0 +1,1912 @@
1
+ "use client";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+
30
+ // packages/index.js
31
+ var packages_exports = {};
32
+ __export(packages_exports, {
33
+ AnimatedButton: () => AnimatedButton,
34
+ AnimatedHeadline: () => AnimatedHeadline_default,
35
+ AnimatedLink: () => AnimatedLink_default,
36
+ AnimatedProse: () => AnimatedProse,
37
+ AnimatedProseContext: () => AnimatedProseContext,
38
+ AnimatedSubtext: () => AnimatedSubtext_default,
39
+ AnimatedText: () => AnimatedText,
40
+ DEFAULT_CHARS: () => DEFAULT_CHARS,
41
+ LenisProvider: () => Lenis,
42
+ PageEnterProvider: () => PageEnterProvider,
43
+ PageTransitionProvider: () => PageTransitionProvider,
44
+ Preloader: () => Preloader,
45
+ PreloaderProvider: () => PreloaderProvider,
46
+ ScrambleGroup: () => ScrambleGroup,
47
+ ScrambleText: () => ScrambleText,
48
+ ScrambleTextPlugin: () => import_ScrambleTextPlugin.ScrambleTextPlugin,
49
+ ScrollAnimatedHeadline: () => ScrollAnimatedHeadline,
50
+ ScrollTrigger: () => import_ScrollTrigger.ScrollTrigger,
51
+ SplitText: () => import_SplitText.SplitText,
52
+ cva: () => import_class_variance_authority2.cva,
53
+ cx: () => cx,
54
+ easingDefinitionToFunction: () => easingDefinitionToFunction,
55
+ getCssScrollLocked: () => getCssScrollLocked,
56
+ getLenis: () => getLenis,
57
+ gsap: () => import_gsap.default,
58
+ scrollToTop: () => scrollToTop,
59
+ setCssScrollLocked: () => setCssScrollLocked,
60
+ stagger: () => stagger,
61
+ useAsciiDelay: () => useAsciiDelay,
62
+ useDualLayerScramble: () => useDualLayerScramble,
63
+ useGSAP: () => import_react.useGSAP,
64
+ useIdleGSAP: () => useIdleGSAP,
65
+ useLenis: () => import_react3.useLenis,
66
+ usePageEnter: () => usePageEnter,
67
+ usePageEnterContext: () => usePageEnterContext,
68
+ usePageTransition: () => usePageTransition,
69
+ usePageTransitionContext: () => usePageTransitionContext,
70
+ usePreloader: () => usePreloader,
71
+ useScrambleGroup: () => useScrambleGroup
72
+ });
73
+ module.exports = __toCommonJS(packages_exports);
74
+
75
+ // packages/animations/ScrambleText.jsx
76
+ var import_react9 = __toESM(require("react"), 1);
77
+
78
+ // libs/vendor.js
79
+ var import_gsap = __toESM(require("gsap"), 1);
80
+ var import_react = require("@gsap/react");
81
+ var import_ScrollTrigger = require("gsap/ScrollTrigger");
82
+ var import_SplitText = require("gsap/SplitText");
83
+ var import_ScrambleTextPlugin = require("gsap/ScrambleTextPlugin");
84
+ var import_class_variance_authority = require("class-variance-authority");
85
+ var import_class_variance_authority2 = require("class-variance-authority");
86
+ import_gsap.default.registerPlugin(
87
+ import_ScrollTrigger.ScrollTrigger,
88
+ import_ScrambleTextPlugin.ScrambleTextPlugin,
89
+ import_SplitText.SplitText
90
+ );
91
+ var cx = import_class_variance_authority.cx;
92
+
93
+ // packages/animations/ScrambleGroup.jsx
94
+ var import_react8 = __toESM(require("react"), 1);
95
+
96
+ // libs/hooks/useIdleGSAP.js
97
+ var import_react6 = require("react");
98
+ var import_react7 = require("@gsap/react");
99
+
100
+ // libs/hooks/usePageTransition.js
101
+ var import_react5 = require("react");
102
+
103
+ // packages/providers/PageTransitionProvider.jsx
104
+ var import_react4 = __toESM(require("react"), 1);
105
+
106
+ // packages/providers/LenisProvider.jsx
107
+ var import_react2 = __toESM(require("react"), 1);
108
+ var import_react3 = require("lenis/react");
109
+ var import_jsx_runtime = require("react/jsx-runtime");
110
+ var globalLenisInstance = null;
111
+ var isCssScrollLocked = false;
112
+ function getLenis() {
113
+ return globalLenisInstance;
114
+ }
115
+ function setCssScrollLocked(isLocked) {
116
+ if (isLocked !== isCssScrollLocked) {
117
+ isCssScrollLocked = isLocked;
118
+ if (isLocked) {
119
+ document.documentElement.classList.add("scroll-locked");
120
+ } else {
121
+ document.documentElement.classList.remove("scroll-locked");
122
+ }
123
+ }
124
+ }
125
+ function getCssScrollLocked() {
126
+ return isCssScrollLocked;
127
+ }
128
+ function scrollToTop(immediate = true) {
129
+ const lenis = globalLenisInstance;
130
+ if (lenis) {
131
+ lenis.scrollTo(0, { immediate });
132
+ } else {
133
+ window.scrollTo(0, 0);
134
+ }
135
+ }
136
+ function LenisTracker() {
137
+ const lenis = (0, import_react3.useLenis)();
138
+ (0, import_react2.useEffect)(() => {
139
+ globalLenisInstance = lenis ?? null;
140
+ return () => {
141
+ globalLenisInstance = null;
142
+ };
143
+ }, [lenis]);
144
+ return null;
145
+ }
146
+ function customEasing(t) {
147
+ return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
148
+ }
149
+ function Lenis(props) {
150
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
151
+ import_react3.ReactLenis,
152
+ {
153
+ root: true,
154
+ options: {
155
+ anchors: {
156
+ duration: 1.2,
157
+ easing: customEasing
158
+ }
159
+ },
160
+ ...props,
161
+ children: [
162
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LenisTracker, {}),
163
+ props.children
164
+ ]
165
+ }
166
+ );
167
+ }
168
+
169
+ // packages/providers/PageTransitionProvider.jsx
170
+ var import_jsx_runtime2 = require("react/jsx-runtime");
171
+ var PageTransitionContext = (0, import_react4.createContext)(null);
172
+ var scrollTriggerModulePromise = null;
173
+ function getScrollTriggerModule() {
174
+ if (!scrollTriggerModulePromise) {
175
+ scrollTriggerModulePromise = import("gsap/ScrollTrigger");
176
+ }
177
+ return scrollTriggerModulePromise;
178
+ }
179
+ function clearScrollMemory() {
180
+ const modulePromise = getScrollTriggerModule();
181
+ if (modulePromise) {
182
+ modulePromise.then(({ ScrollTrigger: ScrollTrigger2 }) => {
183
+ ScrollTrigger2.clearScrollMemory();
184
+ });
185
+ }
186
+ }
187
+ function refreshScrollTrigger() {
188
+ const modulePromise = getScrollTriggerModule();
189
+ if (modulePromise) {
190
+ modulePromise.then(({ ScrollTrigger: ScrollTrigger2 }) => {
191
+ ScrollTrigger2.refresh(true);
192
+ });
193
+ }
194
+ }
195
+ function PageTransitionProvider({ children }) {
196
+ const [phase, setPhase] = (0, import_react4.useState)("idle");
197
+ const [isPending, startTransitionReact] = (0, import_react4.useTransition)();
198
+ const timerRef = (0, import_react4.useRef)(null);
199
+ const pendingCallbackRef = (0, import_react4.useRef)(null);
200
+ const startTimeRef = (0, import_react4.useRef)(0);
201
+ const clearTimer = (0, import_react4.useCallback)(() => {
202
+ if (timerRef.current) {
203
+ clearTimeout(timerRef.current);
204
+ timerRef.current = null;
205
+ }
206
+ }, []);
207
+ const handlePopState = (0, import_react4.useCallback)(() => {
208
+ clearTimer();
209
+ if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
210
+ startTimeRef.current = 0;
211
+ pendingCallbackRef.current = null;
212
+ setPhase("holding");
213
+ clearScrollMemory();
214
+ timerRef.current = window.setTimeout(() => {
215
+ setPhase("exiting");
216
+ timerRef.current = window.setTimeout(() => {
217
+ setPhase("idle");
218
+ refreshScrollTrigger();
219
+ }, 1200);
220
+ }, 100);
221
+ }
222
+ }, [clearTimer]);
223
+ const startTransition = (0, import_react4.useCallback)((callback) => {
224
+ clearTimer();
225
+ pendingCallbackRef.current = callback;
226
+ if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
227
+ callback();
228
+ } else {
229
+ setPhase("entering");
230
+ timerRef.current = window.setTimeout(() => {
231
+ startTimeRef.current = Date.now();
232
+ setPhase("holding");
233
+ clearScrollMemory();
234
+ scrollToTop();
235
+ startTransitionReact(() => {
236
+ var _a;
237
+ (_a = pendingCallbackRef.current) == null ? void 0 : _a.call(pendingCallbackRef);
238
+ });
239
+ }, 1300);
240
+ }
241
+ }, [clearTimer, startTransitionReact]);
242
+ (0, import_react4.useEffect)(() => {
243
+ if (phase === "holding" && !isPending && startTimeRef.current > 0) {
244
+ const elapsed = Date.now() - startTimeRef.current;
245
+ const remainingDelay = Math.max(0, 100 - elapsed);
246
+ timerRef.current = window.setTimeout(() => {
247
+ setPhase("exiting");
248
+ startTimeRef.current = 0;
249
+ timerRef.current = window.setTimeout(() => {
250
+ setPhase("idle");
251
+ refreshScrollTrigger();
252
+ }, 1200);
253
+ }, remainingDelay);
254
+ }
255
+ }, [phase, isPending]);
256
+ (0, import_react4.useEffect)(() => {
257
+ const onPopState = () => {
258
+ handlePopState();
259
+ };
260
+ window.addEventListener("popstate", onPopState);
261
+ return () => {
262
+ window.removeEventListener("popstate", onPopState);
263
+ };
264
+ }, [handlePopState]);
265
+ (0, import_react4.useEffect)(() => {
266
+ return () => {
267
+ clearTimer();
268
+ };
269
+ }, [clearTimer]);
270
+ const contextValue = (0, import_react4.useMemo)(() => ({
271
+ phase,
272
+ startTransition,
273
+ isPending
274
+ }), [phase, startTransition, isPending]);
275
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PageTransitionContext.Provider, { value: contextValue, children });
276
+ }
277
+ var defaultContextValue = {
278
+ phase: "idle",
279
+ startTransition: (t) => t(),
280
+ isPending: false
281
+ };
282
+ function usePageTransitionContext() {
283
+ return (0, import_react4.useContext)(PageTransitionContext) ?? defaultContextValue;
284
+ }
285
+
286
+ // libs/hooks/usePageTransition.js
287
+ function usePageTransition() {
288
+ const {
289
+ startTransition,
290
+ phase,
291
+ isPending
292
+ } = usePageTransitionContext();
293
+ const isTransitioning = phase !== "idle";
294
+ const transitionState = (0, import_react5.useMemo)(() => ({
295
+ startTransition,
296
+ isTransitioning,
297
+ phase,
298
+ isPending
299
+ }), [isPending, phase, startTransition, isTransitioning]);
300
+ return transitionState;
301
+ }
302
+
303
+ // libs/hooks/useIdleGSAP.js
304
+ function useIdleGSAP(callback, config) {
305
+ const { phase } = usePageTransition();
306
+ const [isIdle, setIsIdle] = (0, import_react6.useState)(phase === "idle");
307
+ (0, import_react6.useEffect)(() => {
308
+ if (phase === "idle") {
309
+ setIsIdle(true);
310
+ } else if (phase === "holding") {
311
+ setIsIdle(false);
312
+ }
313
+ }, [phase]);
314
+ const wrappedCallback = (0, import_react6.useCallback)((context, contextSafe) => {
315
+ if (isIdle) {
316
+ return callback(context, contextSafe);
317
+ }
318
+ }, [callback, isIdle]);
319
+ const gsapConfig = (0, import_react6.useMemo)(() => {
320
+ const configDependencies = (config == null ? void 0 : config.dependencies) ?? [];
321
+ const combinedDependencies = [...configDependencies, isIdle];
322
+ return {
323
+ ...config,
324
+ dependencies: combinedDependencies
325
+ };
326
+ }, [config, isIdle]);
327
+ return (0, import_react7.useGSAP)(wrappedCallback, gsapConfig);
328
+ }
329
+
330
+ // packages/animations/ScrambleGroup.jsx
331
+ var import_jsx_runtime3 = require("react/jsx-runtime");
332
+ var ScrambleContext = (0, import_react8.createContext)(null);
333
+ function ScrambleGroup({
334
+ children,
335
+ stagger: stagger2 = 0.1,
336
+ start = "top 80%",
337
+ markers = false,
338
+ manual = false,
339
+ className
340
+ }) {
341
+ const childrenMapRef = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
342
+ const [hasTriggered, setHasTriggered] = (0, import_react8.useState)(false);
343
+ const isTriggering = (0, import_react8.useRef)(false);
344
+ const scrollTriggerRef = (0, import_react8.useRef)(null);
345
+ const containerRef = (0, import_react8.useRef)(null);
346
+ const register = (0, import_react8.useCallback)((id, callback) => {
347
+ childrenMapRef.current.set(id, callback);
348
+ }, []);
349
+ const unregister = (0, import_react8.useCallback)((id) => {
350
+ childrenMapRef.current.delete(id);
351
+ }, []);
352
+ const triggerAll = (0, import_react8.useCallback)((customStagger) => {
353
+ if (isTriggering.current) return;
354
+ isTriggering.current = true;
355
+ const callbacks = Array.from(childrenMapRef.current.values());
356
+ const staggerValue = customStagger ?? stagger2;
357
+ callbacks.forEach((callbackFn, index) => {
358
+ import_gsap.default.delayedCall(index * staggerValue, () => {
359
+ callbackFn();
360
+ });
361
+ });
362
+ setHasTriggered(true);
363
+ }, [stagger2]);
364
+ const setupScrollTrigger = (0, import_react8.useCallback)(() => {
365
+ if (manual || !containerRef.current) return;
366
+ isTriggering.current = false;
367
+ const tween = import_gsap.default.to(containerRef.current, {
368
+ scrollTrigger: {
369
+ trigger: containerRef.current,
370
+ start,
371
+ markers,
372
+ toggleActions: "play none none none"
373
+ },
374
+ onStart: () => {
375
+ triggerAll();
376
+ },
377
+ duration: 1e-3
378
+ });
379
+ scrollTriggerRef.current = tween.scrollTrigger ?? null;
380
+ return () => {
381
+ var _a;
382
+ tween.kill();
383
+ (_a = scrollTriggerRef.current) == null ? void 0 : _a.kill();
384
+ };
385
+ }, [manual, start, markers, triggerAll]);
386
+ useIdleGSAP(setupScrollTrigger, {
387
+ dependencies: [manual, start, markers, triggerAll]
388
+ });
389
+ const contextValue = (0, import_react8.useMemo)(() => ({
390
+ register,
391
+ unregister,
392
+ triggerAll,
393
+ hasTriggered
394
+ }), [register, unregister, triggerAll, hasTriggered]);
395
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ScrambleContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: containerRef, className, children }) });
396
+ }
397
+ function useScrambleGroup() {
398
+ return (0, import_react8.useContext)(ScrambleContext);
399
+ }
400
+
401
+ // libs/constants/chars.js
402
+ var DEFAULT_CHARS = " .'`^\",:;Il!i><~+_-?][}{1)(|\\/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$";
403
+
404
+ // packages/animations/ScrambleText.jsx
405
+ var import_jsx_runtime4 = require("react/jsx-runtime");
406
+ function ScrambleText({
407
+ children,
408
+ className,
409
+ duration = 0.6,
410
+ chars = DEFAULT_CHARS,
411
+ dualLayer = true,
412
+ triggerOnHover = false,
413
+ revealMode = false,
414
+ theme = "dark",
415
+ firstColorClass,
416
+ secondColorClass,
417
+ onComplete,
418
+ onReady,
419
+ multiLine = false
420
+ }) {
421
+ const containerRef = (0, import_react9.useRef)(null);
422
+ const textElementRef = (0, import_react9.useRef)(null);
423
+ const timelineRef = (0, import_react9.useRef)(null);
424
+ const internalTextRef = (0, import_react9.useRef)("");
425
+ const isCompleteRef = (0, import_react9.useRef)(false);
426
+ const instanceIdRef = (0, import_react9.useRef)(`scramble-${Math.random().toString(36).slice(2, 9)}`);
427
+ const themeColors = theme === "brand" ? { firstColorClass: "scramble-white", secondColorClass: "scramble-foreground" } : { firstColorClass: "scramble-brand", secondColorClass: "scramble-foreground" };
428
+ const color1 = firstColorClass ?? themeColors.firstColorClass;
429
+ const color2 = secondColorClass ?? themeColors.secondColorClass;
430
+ const scrambleGroup = useScrambleGroup();
431
+ let childText;
432
+ if (typeof children === "string") {
433
+ childText = children;
434
+ } else if (typeof children === "number") {
435
+ childText = String(children);
436
+ } else {
437
+ childText = "";
438
+ }
439
+ (0, import_react9.useEffect)(() => {
440
+ internalTextRef.current = childText;
441
+ }, [childText]);
442
+ const killTimeline = () => {
443
+ if (timelineRef.current) {
444
+ timelineRef.current.kill();
445
+ timelineRef.current = null;
446
+ }
447
+ };
448
+ const triggerAnimation = () => {
449
+ if (!textElementRef.current) return null;
450
+ const targetEl = textElementRef.current;
451
+ const textToScramble = internalTextRef.current || childText;
452
+ if (!textToScramble || textToScramble.length === 0) return null;
453
+ if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
454
+ targetEl.textContent = textToScramble;
455
+ targetEl.className = targetEl.className.replace(/\bscramble-\w+\b/g, "");
456
+ isCompleteRef.current = true;
457
+ onComplete == null ? void 0 : onComplete();
458
+ return null;
459
+ }
460
+ killTimeline();
461
+ timelineRef.current = import_gsap.default.timeline({
462
+ onComplete: () => {
463
+ timelineRef.current = null;
464
+ isCompleteRef.current = true;
465
+ onComplete == null ? void 0 : onComplete();
466
+ }
467
+ });
468
+ if (dualLayer) {
469
+ const generateScrambledString = (targetString, charset = DEFAULT_CHARS) => {
470
+ let result = "";
471
+ for (let t = 0; t < targetString.length; t++) {
472
+ let char = targetString[t];
473
+ if (char === " " || char === "\n" || char === "\r") {
474
+ result += char;
475
+ } else {
476
+ result += charset[Math.floor(Math.random() * charset.length)];
477
+ }
478
+ }
479
+ return result;
480
+ };
481
+ const scrambledText = generateScrambledString(textToScramble, chars);
482
+ const nonWhitespaceLength = textToScramble.replace(/\s/g, "").length;
483
+ const stepDuration = nonWhitespaceLength > 0 ? duration / nonWhitespaceLength : 0;
484
+ if (revealMode && !isCompleteRef.current) {
485
+ targetEl.textContent = textToScramble.replace(/[^\s\n\r]/g, "\xA0");
486
+ timelineRef.current.to(targetEl, {
487
+ duration,
488
+ scrambleText: {
489
+ text: scrambledText,
490
+ chars,
491
+ speed: 1,
492
+ revealDelay: 0.1,
493
+ oldClass: color1,
494
+ newClass: color1
495
+ },
496
+ ease: "none"
497
+ });
498
+ } else {
499
+ timelineRef.current.to(targetEl, {
500
+ duration,
501
+ scrambleText: {
502
+ text: scrambledText,
503
+ chars,
504
+ speed: 1,
505
+ revealDelay: 0.1,
506
+ oldClass: color2,
507
+ newClass: color1
508
+ },
509
+ ease: "none"
510
+ });
511
+ }
512
+ timelineRef.current.to(targetEl, {
513
+ duration,
514
+ scrambleText: {
515
+ text: textToScramble,
516
+ chars,
517
+ speed: 1,
518
+ revealDelay: 0.1,
519
+ oldClass: color1,
520
+ newClass: color2
521
+ },
522
+ ease: "none"
523
+ }, stepDuration);
524
+ } else {
525
+ timelineRef.current.to(targetEl, {
526
+ duration,
527
+ scrambleText: {
528
+ text: textToScramble,
529
+ chars,
530
+ speed: 1,
531
+ revealDelay: 0.2
532
+ },
533
+ ease: "none"
534
+ });
535
+ }
536
+ return timelineRef.current;
537
+ };
538
+ (0, import_react9.useEffect)(() => {
539
+ if (scrambleGroup) {
540
+ scrambleGroup.register(instanceIdRef.current, triggerAnimation);
541
+ return () => {
542
+ scrambleGroup.unregister(instanceIdRef.current);
543
+ };
544
+ }
545
+ }, [scrambleGroup, triggerAnimation]);
546
+ (0, import_react9.useEffect)(() => {
547
+ onReady == null ? void 0 : onReady(triggerAnimation);
548
+ }, [onReady, triggerAnimation]);
549
+ const handleMouseEnter = () => {
550
+ if (triggerOnHover) {
551
+ triggerAnimation();
552
+ }
553
+ };
554
+ (0, import_react9.useEffect)(() => {
555
+ return () => {
556
+ killTimeline();
557
+ };
558
+ }, []);
559
+ const initialDisplayText = revealMode ? childText.replace(/[^\s\n\r]/g, "\xA0") : childText;
560
+ const whiteSpaceValue = multiLine ? "normal" : "nowrap";
561
+ const displayValue = multiLine ? "inline" : "inline-block";
562
+ const containerStyle = {
563
+ position: "relative",
564
+ display: displayValue,
565
+ whiteSpace: whiteSpaceValue
566
+ };
567
+ const hiddenSpanStyle = {
568
+ visibility: "hidden",
569
+ whiteSpace: whiteSpaceValue
570
+ };
571
+ const animatedSpanStyle = {
572
+ position: "absolute",
573
+ top: 0,
574
+ left: 0,
575
+ whiteSpace: whiteSpaceValue,
576
+ ...multiLine ? { width: "100%" } : {}
577
+ };
578
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
579
+ "span",
580
+ {
581
+ ref: containerRef,
582
+ className,
583
+ style: containerStyle,
584
+ onMouseEnter: triggerOnHover ? handleMouseEnter : void 0,
585
+ children: [
586
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: childText }),
587
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", style: hiddenSpanStyle, children: childText }),
588
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { ref: textElementRef, "aria-hidden": "true", style: animatedSpanStyle, children: initialDisplayText })
589
+ ]
590
+ }
591
+ );
592
+ }
593
+
594
+ // packages/animations/AnimatedHeadline.jsx
595
+ var import_react10 = __toESM(require("react"), 1);
596
+ var import_jsx_runtime5 = require("react/jsx-runtime");
597
+ var typographyClasses = {
598
+ display: "text-display",
599
+ h1: "text-h1",
600
+ h2: "text-h2",
601
+ h3: "text-h3",
602
+ h4: "text-h4",
603
+ h5: "text-h5",
604
+ h6: "text-h6"
605
+ };
606
+ var AnimatedHeadline = (0, import_react10.forwardRef)(({
607
+ children,
608
+ as: Component = "h1",
609
+ displayAs,
610
+ className,
611
+ skip,
612
+ trigger = "manual",
613
+ wrapperClassName
614
+ }, ref) => {
615
+ const containerRef = (0, import_react10.useRef)(null);
616
+ const wrapperRef = (0, import_react10.useRef)(null);
617
+ const hasRevealedRef = (0, import_react10.useRef)(false);
618
+ const [lines, setLines] = (0, import_react10.useState)(null);
619
+ const shouldSkip = skip ?? window.matchMedia("(prefers-reduced-motion: reduce)").matches;
620
+ (0, import_react10.useLayoutEffect)(() => {
621
+ if (!containerRef.current) return;
622
+ const wordNodes = containerRef.current.querySelectorAll("[data-word]");
623
+ if (wordNodes.length === 0) return;
624
+ const computedLines = [];
625
+ let currentLine = [];
626
+ let lastY = -Infinity;
627
+ let lastExplicitLine = -1;
628
+ for (const node of wordNodes) {
629
+ const top = node.getBoundingClientRect().top;
630
+ const explicitLine = Number(node.dataset.explicitLine ?? -1);
631
+ const isNewExplicit = explicitLine !== lastExplicitLine && lastExplicitLine !== -1;
632
+ if (lastY > -Infinity && top - lastY > 2 || isNewExplicit) {
633
+ computedLines.push(currentLine.join(" "));
634
+ currentLine = [];
635
+ }
636
+ currentLine.push(node.textContent || "");
637
+ lastY = top;
638
+ lastExplicitLine = explicitLine;
639
+ }
640
+ if (currentLine.length > 0) {
641
+ computedLines.push(currentLine.join(" "));
642
+ }
643
+ setLines(computedLines);
644
+ }, []);
645
+ (0, import_react.useGSAP)(() => {
646
+ if (shouldSkip || !containerRef.current || !lines) return;
647
+ const container = containerRef.current;
648
+ import_gsap.default.set(container.querySelectorAll("[data-line-inner]"), { opacity: 0 });
649
+ import_gsap.default.set(container.querySelectorAll("[data-brand-rect], [data-fg-rect]"), { scaleX: 0, transformOrigin: "left" });
650
+ }, { dependencies: [shouldSkip, lines] });
651
+ useIdleGSAP(() => {
652
+ if (trigger !== "scroll" || shouldSkip || !lines) return;
653
+ const triggerEl = wrapperRef.current || containerRef.current;
654
+ if (triggerEl) {
655
+ import_ScrollTrigger.ScrollTrigger.create({
656
+ trigger: triggerEl,
657
+ start: "top bottom",
658
+ once: true,
659
+ onEnter: () => reveal()
660
+ });
661
+ }
662
+ }, { dependencies: [trigger, shouldSkip, lines] });
663
+ const reveal = (0, import_react10.useCallback)((delayOffset = 0) => {
664
+ if (hasRevealedRef.current || shouldSkip || !containerRef.current) return;
665
+ hasRevealedRef.current = true;
666
+ const lineNodes = containerRef.current.querySelectorAll("[data-line]");
667
+ for (let r = 0; r < lineNodes.length; r++) {
668
+ const lineNode = lineNodes[r];
669
+ if (!lineNode) continue;
670
+ const delay = delayOffset + 0.15 * r;
671
+ const lineInner = lineNode.querySelector("[data-line-inner]");
672
+ const brandRect = lineNode.querySelector("[data-brand-rect]");
673
+ const fgRect = lineNode.querySelector("[data-fg-rect]");
674
+ if (!lineInner || !brandRect || !fgRect) continue;
675
+ const rects = [brandRect, fgRect];
676
+ const tl = import_gsap.default.timeline({ delay });
677
+ tl.to(brandRect, { scaleX: 1, duration: 0.45, ease: "power3.inOut" }, 0);
678
+ tl.to(fgRect, { scaleX: 1, duration: 0.45, ease: "power3.inOut" }, 0.1);
679
+ tl.set(lineInner, { opacity: 1 }, 0.5);
680
+ tl.set(rects, { transformOrigin: "right" }, 0.5);
681
+ tl.to(fgRect, { scaleX: 0, duration: 0.45, ease: "power3.inOut" }, 0.5);
682
+ tl.to(brandRect, { scaleX: 0, duration: 0.45, ease: "power3.inOut" }, 0.6);
683
+ }
684
+ }, [shouldSkip]);
685
+ const reset = (0, import_react10.useCallback)(() => {
686
+ hasRevealedRef.current = false;
687
+ if (!containerRef.current) return;
688
+ const container = containerRef.current;
689
+ import_gsap.default.set(container.querySelectorAll("[data-line-inner]"), { opacity: 0 });
690
+ import_gsap.default.set(container.querySelectorAll("[data-brand-rect], [data-fg-rect]"), { scaleX: 0, transformOrigin: "left" });
691
+ }, []);
692
+ (0, import_react10.useImperativeHandle)(ref, () => ({ reveal, reset }), [reveal, reset]);
693
+ const resolvedClassName = cx(typographyClasses[displayAs ?? Component], className);
694
+ if (!lines) {
695
+ const manualLines = children.split("\n");
696
+ 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: [
697
+ lineIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
698
+ lineStr.split(/\s+/).filter(Boolean).map((word, wordIndex) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react10.Fragment, { children: [
699
+ wordIndex > 0 && " ",
700
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-word": true, "data-explicit-line": lineIndex, children: word })
701
+ ] }, wordIndex))
702
+ ] }, lineIndex)) });
703
+ return trigger === "scroll" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: wrapperRef, className: wrapperClassName, children: preRenderedContent }) : preRenderedContent;
704
+ }
705
+ 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: [
706
+ lineIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
707
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-line": true, className: "relative inline-block", children: [
708
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-line-inner": true, className: "block whitespace-nowrap", children: lineStr }),
709
+ !shouldSkip && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react10.Fragment, { children: [
710
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-brand-rect": true, className: "absolute -inset-x-[0.1em] -inset-y-[0.1em] bg-brand" }),
711
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-fg-rect": true, className: "absolute -inset-x-[0.1em] -inset-y-[0.1em] bg-foreground" })
712
+ ] })
713
+ ] })
714
+ ] }, lineIndex)) });
715
+ return trigger === "scroll" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: wrapperRef, className: wrapperClassName, children: animatedContent }) : animatedContent;
716
+ });
717
+ var AnimatedHeadline_default = AnimatedHeadline;
718
+
719
+ // packages/animations/AnimatedButton.jsx
720
+ var import_react12 = __toESM(require("react"), 1);
721
+ var import_react_slot = require("@radix-ui/react-slot");
722
+
723
+ // libs/hooks/useDualLayerScramble.js
724
+ var import_react11 = require("react");
725
+ var DEFAULT_CHARS2 = " .'`^\",:;Il!i><~+_-?][}{1)(|\\/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$";
726
+ function useDualLayerScramble(options) {
727
+ const elementRef = (0, import_react11.useRef)(null);
728
+ const timelineRef = (0, import_react11.useRef)(null);
729
+ const originalTextRef = (0, import_react11.useRef)("");
730
+ const originalHTMLRef = (0, import_react11.useRef)("");
731
+ const dimensionsRef = (0, import_react11.useRef)(null);
732
+ const linesDataRef = (0, import_react11.useRef)([]);
733
+ const spansRef = (0, import_react11.useRef)([]);
734
+ const isAnimatingRef = (0, import_react11.useRef)(false);
735
+ const isPreparedRef = (0, import_react11.useRef)(false);
736
+ (0, import_react11.useEffect)(() => {
737
+ if (!elementRef.current) return;
738
+ const el = elementRef.current;
739
+ const innerText = el.innerText ?? "";
740
+ if (innerText.trim().length > 0) {
741
+ originalTextRef.current = innerText;
742
+ originalHTMLRef.current = el.innerHTML;
743
+ dimensionsRef.current = { width: el.offsetWidth, height: el.offsetHeight };
744
+ }
745
+ }, []);
746
+ const killTimeline = (0, import_react11.useCallback)(() => {
747
+ if (timelineRef.current) {
748
+ timelineRef.current.kill();
749
+ timelineRef.current = null;
750
+ isAnimatingRef.current = false;
751
+ }
752
+ }, []);
753
+ const prepareDOM = (0, import_react11.useCallback)(() => {
754
+ var _a, _b;
755
+ if (!elementRef.current || isPreparedRef.current) return;
756
+ const el = elementRef.current;
757
+ if ((originalTextRef.current || el.innerText || "").trim().length === 0) return;
758
+ if (!dimensionsRef.current) {
759
+ dimensionsRef.current = { width: el.offsetWidth, height: el.offsetHeight };
760
+ }
761
+ const splitTextIntoLines = (element) => {
762
+ const text = element.innerText || "";
763
+ if (text.trim().length === 0) return [];
764
+ if (text.includes("\n")) return text.split("\n").filter((line) => line.length > 0);
765
+ const firstChild = element.firstChild;
766
+ if (!firstChild || firstChild.nodeType !== Node.TEXT_NODE) return [text];
767
+ const range = document.createRange();
768
+ const lines2 = [];
769
+ let currentLine = "";
770
+ let lastTop = null;
771
+ const length = firstChild.length;
772
+ for (let i = 0; i < text.length && i < length; i++) {
773
+ range.setStart(firstChild, i);
774
+ range.setEnd(firstChild, i + 1);
775
+ const rect = range.getBoundingClientRect();
776
+ if (lastTop !== null && Math.abs(rect.top - lastTop) > 2) {
777
+ if (currentLine.length > 0) lines2.push(currentLine);
778
+ currentLine = "";
779
+ }
780
+ currentLine += text[i];
781
+ lastTop = rect.top;
782
+ }
783
+ if (currentLine.length > 0) lines2.push(currentLine);
784
+ return lines2.length > 0 ? lines2 : [text];
785
+ };
786
+ const lines = splitTextIntoLines(el);
787
+ const testDiv = document.createElement("div");
788
+ testDiv.style.cssText = `
789
+ position: absolute;
790
+ visibility: hidden;
791
+ pointer-events: none;
792
+ white-space: nowrap;
793
+ `;
794
+ const computedStyle = window.getComputedStyle(el);
795
+ testDiv.style.font = computedStyle.font;
796
+ testDiv.style.fontSize = computedStyle.fontSize;
797
+ testDiv.style.fontFamily = computedStyle.fontFamily;
798
+ testDiv.style.fontWeight = computedStyle.fontWeight;
799
+ testDiv.style.letterSpacing = computedStyle.letterSpacing;
800
+ testDiv.style.textTransform = computedStyle.textTransform;
801
+ document.body.appendChild(testDiv);
802
+ linesDataRef.current = lines.map((line) => {
803
+ testDiv.textContent = line;
804
+ return { text: line, width: testDiv.offsetWidth, height: testDiv.offsetHeight };
805
+ });
806
+ document.body.removeChild(testDiv);
807
+ const maxWidth = Math.max(...linesDataRef.current.map((lineData) => lineData.width));
808
+ const totalHeight = linesDataRef.current.reduce((sum, lineData) => sum + lineData.height, 0);
809
+ const finalWidth = Math.max(((_a = dimensionsRef.current) == null ? void 0 : _a.width) ?? 0, maxWidth);
810
+ const finalHeight = Math.max(((_b = dimensionsRef.current) == null ? void 0 : _b.height) ?? 0, totalHeight);
811
+ isPreparedRef.current = true;
812
+ import_gsap.default.set(el, { width: finalWidth, height: finalHeight, display: "inline-block", overflow: "hidden" });
813
+ el.innerHTML = "";
814
+ spansRef.current = [];
815
+ linesDataRef.current.forEach((lineData) => {
816
+ const span = document.createElement("span");
817
+ span.style.cssText = `
818
+ display: block;
819
+ opacity: 0;
820
+ width: ${lineData.width}px;
821
+ height: ${lineData.height}px;
822
+ overflow: hidden;
823
+ white-space: nowrap;
824
+ `;
825
+ span.innerText = lineData.text;
826
+ el.appendChild(span);
827
+ spansRef.current.push(span);
828
+ });
829
+ import_gsap.default.set(el, { opacity: 1 });
830
+ }, []);
831
+ const playScramble = (0, import_react11.useCallback)((overrides) => {
832
+ var _a;
833
+ if (!elementRef.current) return null;
834
+ if (isAnimatingRef.current) return timelineRef.current;
835
+ prepareDOM();
836
+ const config = { ...options, ...overrides };
837
+ const duration = config.duration ?? 1;
838
+ const speed = config.speed ?? 1;
839
+ const chars = config.chars ?? DEFAULT_CHARS2;
840
+ const firstColorClass = config.firstColorClass ?? "scramble-brand";
841
+ const secondColorClass = config.secondColorClass ?? "scramble-foreground";
842
+ const stagger2 = config.stagger ?? 0.08;
843
+ const linesData = linesDataRef.current;
844
+ const spans = spansRef.current;
845
+ if (linesData.length === 0 || spans.length === 0) return null;
846
+ if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
847
+ spans.forEach((span, index) => {
848
+ const lineData = linesData[index];
849
+ if (lineData) {
850
+ span.innerText = lineData.text;
851
+ }
852
+ span.style.opacity = "1";
853
+ span.className = span.className.replace(/\bscramble-\w+\b/g, "");
854
+ });
855
+ (_a = config.onComplete) == null ? void 0 : _a.call(config);
856
+ return null;
857
+ }
858
+ killTimeline();
859
+ isAnimatingRef.current = true;
860
+ timelineRef.current = import_gsap.default.timeline({
861
+ onComplete: () => {
862
+ var _a2;
863
+ isAnimatingRef.current = false;
864
+ timelineRef.current = null;
865
+ (_a2 = config.onComplete) == null ? void 0 : _a2.call(config);
866
+ }
867
+ });
868
+ spans.forEach((span, index) => {
869
+ var _a2, _b, _c;
870
+ const lineData = linesData[index];
871
+ if (!lineData) return;
872
+ const originalText = lineData.text;
873
+ const delay = index * stagger2;
874
+ const generateScrambled = (text, charSet = DEFAULT_CHARS2) => {
875
+ let scrambled = "";
876
+ for (let i = 0; i < text.length; i++) {
877
+ const char = text[i];
878
+ if (char === " ") {
879
+ scrambled += char;
880
+ } else {
881
+ scrambled += charSet[Math.floor(Math.random() * charSet.length)];
882
+ }
883
+ }
884
+ return scrambled;
885
+ };
886
+ const initialScrambledText = generateScrambled(originalText, chars);
887
+ const nonSpaceCount = originalText.replace(/\s/g, "").length;
888
+ const spacesOnly = originalText.replace(/[^\s]/g, " ");
889
+ (_a2 = timelineRef.current) == null ? void 0 : _a2.add(() => {
890
+ import_gsap.default.set(span, { opacity: 1 });
891
+ span.innerText = spacesOnly;
892
+ }, delay);
893
+ (_b = timelineRef.current) == null ? void 0 : _b.to(span, {
894
+ duration,
895
+ scrambleText: {
896
+ text: initialScrambledText,
897
+ chars,
898
+ speed,
899
+ revealDelay: 0.1,
900
+ oldClass: firstColorClass,
901
+ newClass: firstColorClass
902
+ },
903
+ ease: "none"
904
+ }, delay);
905
+ (_c = timelineRef.current) == null ? void 0 : _c.to(span, {
906
+ duration,
907
+ scrambleText: {
908
+ text: originalText,
909
+ chars,
910
+ speed,
911
+ revealDelay: 0.1,
912
+ oldClass: firstColorClass,
913
+ newClass: secondColorClass
914
+ },
915
+ ease: "none"
916
+ }, delay + (nonSpaceCount > 0 ? duration / nonSpaceCount : 0));
917
+ });
918
+ return timelineRef.current;
919
+ }, [options, killTimeline, prepareDOM]);
920
+ const resetDOM = (0, import_react11.useCallback)(() => {
921
+ killTimeline();
922
+ if (elementRef.current && isPreparedRef.current) {
923
+ elementRef.current.innerHTML = originalHTMLRef.current || originalTextRef.current;
924
+ import_gsap.default.set(elementRef.current, {
925
+ opacity: 0,
926
+ width: "auto",
927
+ height: "auto",
928
+ overflow: "visible"
929
+ });
930
+ spansRef.current = [];
931
+ linesDataRef.current = [];
932
+ isPreparedRef.current = false;
933
+ }
934
+ }, [killTimeline]);
935
+ (0, import_react11.useEffect)(() => {
936
+ return () => {
937
+ killTimeline();
938
+ spansRef.current = [];
939
+ linesDataRef.current = [];
940
+ isPreparedRef.current = false;
941
+ };
942
+ }, [killTimeline]);
943
+ return {
944
+ ref: elementRef,
945
+ scramble: playScramble,
946
+ kill: resetDOM,
947
+ isAnimating: isAnimatingRef.current
948
+ };
949
+ }
950
+
951
+ // packages/animations/AnimatedButton.jsx
952
+ var import_jsx_runtime6 = require("react/jsx-runtime");
953
+ var buttonVariants = (0, import_class_variance_authority2.cva)(
954
+ [
955
+ "group inline-flex min-w-0 shrink-0 cursor-pointer items-center justify-center whitespace-nowrap",
956
+ "font-medium font-mono uppercase",
957
+ "outline-none focus-visible:ring-2 focus-visible:ring-brand/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
958
+ "disabled:pointer-events-none disabled:opacity-50"
959
+ ],
960
+ {
961
+ variants: {
962
+ variant: {
963
+ primary: []
964
+ },
965
+ size: {
966
+ xs: "text-body-sm",
967
+ sm: "text-body-sm",
968
+ default: "text-body-sm lg:text-body",
969
+ lg: "text-body lg:text-body-lg"
970
+ }
971
+ },
972
+ defaultVariants: {
973
+ variant: "primary",
974
+ size: "default"
975
+ }
976
+ }
977
+ );
978
+ var iconVariants = (0, import_class_variance_authority2.cva)(
979
+ [
980
+ "flex items-center justify-center",
981
+ "transition-transform duration-700 [transition-timing-function:var(--ease-power4-in-out)]"
982
+ ],
983
+ {
984
+ variants: {
985
+ size: {
986
+ xs: "size-32",
987
+ sm: "size-32 lg:size-40",
988
+ default: "size-40 lg:size-48",
989
+ lg: "size-48 lg:size-56"
990
+ },
991
+ position: {
992
+ left: "origin-left -rotate-45 scale-0",
993
+ right: "absolute right-0 z-10 origin-right rotate-0 scale-100"
994
+ },
995
+ theme: {
996
+ light: "bg-foreground text-background",
997
+ dark: "bg-foreground text-background",
998
+ brand: "bg-brand text-black"
999
+ }
1000
+ },
1001
+ defaultVariants: {
1002
+ size: "default",
1003
+ theme: "light"
1004
+ }
1005
+ }
1006
+ );
1007
+ var textWrapperVariants = (0, import_class_variance_authority2.cva)(
1008
+ [
1009
+ "flex w-full flex-1 items-center justify-center",
1010
+ "transition-transform duration-700 [transition-timing-function:var(--ease-power4-in-out)]"
1011
+ ],
1012
+ {
1013
+ variants: {
1014
+ size: {
1015
+ xs: "h-32 -translate-x-[calc(32px+6px)] px-8",
1016
+ sm: "h-32 -translate-x-[calc(32px+6px)] px-8 lg:h-40 lg:-translate-x-[calc(40px+6px)] lg:px-12",
1017
+ default: "h-40 -translate-x-[calc(40px+6px)] px-12 lg:h-48 lg:-translate-x-[calc(48px+6px)] lg:px-16",
1018
+ lg: "h-48 -translate-x-[calc(48px+6px)] px-16 lg:h-56 lg:-translate-x-[calc(56px+6px)] lg:px-24"
1019
+ },
1020
+ theme: {
1021
+ light: "bg-foreground text-background",
1022
+ dark: "bg-foreground text-background",
1023
+ brand: "bg-brand text-black"
1024
+ }
1025
+ },
1026
+ defaultVariants: {
1027
+ size: "default",
1028
+ theme: "light"
1029
+ }
1030
+ }
1031
+ );
1032
+ function PlusIcon({ className }) {
1033
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1034
+ "svg",
1035
+ {
1036
+ className: cx("size-[0.75em]", className),
1037
+ viewBox: "0 0 12 12",
1038
+ fill: "none",
1039
+ "aria-hidden": "true",
1040
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1041
+ "path",
1042
+ {
1043
+ d: "M6 1v10M1 6h10",
1044
+ stroke: "currentColor",
1045
+ strokeWidth: "1.5",
1046
+ strokeLinecap: "square"
1047
+ }
1048
+ )
1049
+ }
1050
+ );
1051
+ }
1052
+ function AnimatedButton(props) {
1053
+ const {
1054
+ children,
1055
+ className,
1056
+ asChild,
1057
+ variant,
1058
+ size,
1059
+ theme,
1060
+ type,
1061
+ ...rest
1062
+ } = props;
1063
+ const resolvedType = type === void 0 ? asChild ? void 0 : "button" : type;
1064
+ const Comp = asChild ? import_react_slot.Slot : "button";
1065
+ const themeColors = theme === "brand" ? { firstColorClass: "scramble-white", secondColorClass: "scramble-inherit" } : { firstColorClass: "scramble-brand", secondColorClass: "scramble-inherit" };
1066
+ const scrambleConfig = {
1067
+ duration: 0.5,
1068
+ initiallyVisible: true,
1069
+ firstColorClass: themeColors.firstColorClass,
1070
+ secondColorClass: themeColors.secondColorClass
1071
+ };
1072
+ const scrambleResult = useDualLayerScramble(scrambleConfig);
1073
+ const isScramblingRef = (0, import_react12.useRef)(false);
1074
+ const handleMouseEnter = () => {
1075
+ if (!isScramblingRef.current) {
1076
+ isScramblingRef.current = true;
1077
+ scrambleResult.scramble();
1078
+ }
1079
+ };
1080
+ const handleMouseLeave = () => {
1081
+ isScramblingRef.current = false;
1082
+ };
1083
+ const buttonClasses = buttonVariants({ variant, size, className });
1084
+ const renderContent = (content) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "relative flex w-full items-center gap-6", children: [
1085
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1086
+ "span",
1087
+ {
1088
+ className: cx(
1089
+ iconVariants({ size, theme, position: "left" }),
1090
+ "group-hover:rotate-0 group-hover:scale-100"
1091
+ ),
1092
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlusIcon, {})
1093
+ }
1094
+ ),
1095
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1096
+ "span",
1097
+ {
1098
+ className: cx(
1099
+ textWrapperVariants({ size, theme }),
1100
+ "group-hover:translate-x-0"
1101
+ ),
1102
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { ref: scrambleResult.ref, children: content })
1103
+ }
1104
+ ),
1105
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1106
+ "span",
1107
+ {
1108
+ className: cx(
1109
+ iconVariants({ size, theme, position: "right" }),
1110
+ "group-hover:-rotate-45 group-hover:scale-0"
1111
+ ),
1112
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlusIcon, {})
1113
+ }
1114
+ )
1115
+ ] });
1116
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1117
+ Comp,
1118
+ {
1119
+ type: resolvedType,
1120
+ className: buttonClasses,
1121
+ onMouseEnter: handleMouseEnter,
1122
+ onMouseLeave: handleMouseLeave,
1123
+ ...rest,
1124
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_slot.Slottable, { asChild, child: children, children: renderContent })
1125
+ }
1126
+ );
1127
+ }
1128
+
1129
+ // packages/animations/AnimatedLink.jsx
1130
+ var import_react13 = __toESM(require("react"), 1);
1131
+ var import_react_slot2 = require("@radix-ui/react-slot");
1132
+ var import_jsx_runtime7 = require("react/jsx-runtime");
1133
+ var AnimatedLink = (0, import_react13.forwardRef)(function AnimatedLink2(props, ref) {
1134
+ const {
1135
+ children,
1136
+ className,
1137
+ asChild,
1138
+ indicator,
1139
+ ...restProps
1140
+ } = props;
1141
+ const Component = asChild ? import_react_slot2.Slot : "a";
1142
+ const displayClass = indicator ? "inline-flex items-center" : "inline-block";
1143
+ const combinedClassName = cx(
1144
+ "group relative w-fit cursor-pointer",
1145
+ displayClass,
1146
+ "outline-none focus-visible:ring-2 focus-visible:ring-brand/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
1147
+ className
1148
+ );
1149
+ const renderChildren = (childContent) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
1150
+ indicator && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1151
+ "span",
1152
+ {
1153
+ className: cx(
1154
+ "absolute left-0 size-8 bg-brand lg:size-12",
1155
+ "-rotate-90 scale-0",
1156
+ "transition-transform duration-500 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)]",
1157
+ "group-hover:rotate-0 group-hover:scale-100",
1158
+ "group-focus-visible:rotate-0 group-focus-visible:scale-100"
1159
+ ),
1160
+ "aria-hidden": "true"
1161
+ }
1162
+ ),
1163
+ indicator ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1164
+ "span",
1165
+ {
1166
+ className: cx(
1167
+ "transition-transform duration-500 [transition-timing-function:cubic-bezier(0.33,1,0.68,1)]",
1168
+ "group-hover:translate-x-24",
1169
+ "group-focus-visible:translate-x-24"
1170
+ ),
1171
+ children: childContent
1172
+ }
1173
+ ) : childContent,
1174
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
1175
+ "span",
1176
+ {
1177
+ className: cx(
1178
+ "pointer-events-none absolute inset-x-0 -bottom-1",
1179
+ indicator && [
1180
+ "transition-transform duration-500 [transition-timing-function:cubic-bezier(0.33,1,0.68,1)]",
1181
+ "group-hover:translate-x-24 group-focus-visible:translate-x-24"
1182
+ ]
1183
+ ),
1184
+ "aria-hidden": "true",
1185
+ children: [
1186
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1187
+ "span",
1188
+ {
1189
+ className: cx(
1190
+ "absolute inset-x-0 top-0 h-px bg-current",
1191
+ "origin-left scale-x-100",
1192
+ "transition-transform duration-700 [transition-timing-function:cubic-bezier(0.625,0.05,0,1)]",
1193
+ "delay-300 group-hover:origin-right group-hover:scale-x-0 group-hover:delay-0",
1194
+ "group-focus-visible:origin-right group-focus-visible:scale-x-0 group-focus-visible:delay-0"
1195
+ )
1196
+ }
1197
+ ),
1198
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1199
+ "span",
1200
+ {
1201
+ className: cx(
1202
+ "absolute inset-x-0 top-0 h-px bg-current",
1203
+ "origin-right scale-x-0",
1204
+ "transition-transform duration-700 [transition-timing-function:cubic-bezier(0.625,0.05,0,1)]",
1205
+ "delay-0 group-hover:origin-left group-hover:scale-x-100 group-hover:delay-300",
1206
+ "group-focus-visible:origin-left group-focus-visible:scale-x-100 group-focus-visible:delay-300"
1207
+ )
1208
+ }
1209
+ )
1210
+ ]
1211
+ }
1212
+ )
1213
+ ] });
1214
+ 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 }) });
1215
+ });
1216
+ var AnimatedLink_default = AnimatedLink;
1217
+
1218
+ // packages/animations/AnimatedProse.jsx
1219
+ var import_react14 = __toESM(require("react"), 1);
1220
+ var import_framer_motion = require("framer-motion");
1221
+
1222
+ // libs/utils/easings.js
1223
+ function cubicBezier(x1, y1, x2, y2) {
1224
+ const cx2 = 3 * x1;
1225
+ const bx = 3 * (x2 - x1) - cx2;
1226
+ const ax = 1 - cx2 - bx;
1227
+ const cy = 3 * y1;
1228
+ const by = 3 * (y2 - y1) - cy;
1229
+ const ay = 1 - cy - by;
1230
+ function sampleCurveX(t) {
1231
+ return ((ax * t + bx) * t + cx2) * t;
1232
+ }
1233
+ function sampleCurveY(t) {
1234
+ return ((ay * t + by) * t + cy) * t;
1235
+ }
1236
+ function sampleCurveDerivativeX(t) {
1237
+ return (3 * ax * t + 2 * bx) * t + cx2;
1238
+ }
1239
+ function solveCurveX(x, epsilon = 1e-6) {
1240
+ let t = x;
1241
+ for (let i = 0; i < 8; i++) {
1242
+ const currentX = sampleCurveX(t) - x;
1243
+ if (Math.abs(currentX) < epsilon) return t;
1244
+ const currentSlope = sampleCurveDerivativeX(t);
1245
+ if (Math.abs(currentSlope) < epsilon) break;
1246
+ t -= currentX / currentSlope;
1247
+ }
1248
+ let lower = 0;
1249
+ let upper = 1;
1250
+ t = x;
1251
+ if (t < lower) return lower;
1252
+ if (t > upper) return upper;
1253
+ while (lower < upper) {
1254
+ const currentX = sampleCurveX(t);
1255
+ if (Math.abs(currentX - x) < epsilon) return t;
1256
+ if (x > currentX) {
1257
+ lower = t;
1258
+ } else {
1259
+ upper = t;
1260
+ }
1261
+ t = (upper - lower) / 2 + lower;
1262
+ }
1263
+ return t;
1264
+ }
1265
+ return function bezierEase(t) {
1266
+ if (t <= 0) return 0;
1267
+ if (t >= 1) return 1;
1268
+ return sampleCurveY(solveCurveX(t));
1269
+ };
1270
+ }
1271
+ var NAMED_EASINGS = {
1272
+ linear: (t) => t,
1273
+ easeIn: cubicBezier(0.42, 0, 1, 1),
1274
+ easeOut: cubicBezier(0, 0, 0.58, 1),
1275
+ easeInOut: cubicBezier(0.42, 0, 0.58, 1),
1276
+ circIn: cubicBezier(0.55, 0, 1, 0.45),
1277
+ circOut: cubicBezier(0, 0.55, 0.45, 1),
1278
+ circInOut: cubicBezier(0.85, 0, 0.15, 1),
1279
+ backIn: cubicBezier(0.36, 0, 0.66, -0.56),
1280
+ backOut: cubicBezier(0.34, 1.56, 0.64, 1),
1281
+ backInOut: cubicBezier(0.68, -0.6, 0.32, 1.6),
1282
+ anticipate: cubicBezier(0.36, 0, 0.66, -0.56)
1283
+ };
1284
+ function easingDefinitionToFunction(definition) {
1285
+ if (typeof definition === "function") {
1286
+ return definition;
1287
+ }
1288
+ if (Array.isArray(definition) && definition.length === 4) {
1289
+ const [x1, y1, x2, y2] = definition;
1290
+ return cubicBezier(x1, y1, x2, y2);
1291
+ }
1292
+ if (typeof definition === "string" && NAMED_EASINGS[definition]) {
1293
+ return NAMED_EASINGS[definition];
1294
+ }
1295
+ return NAMED_EASINGS.linear;
1296
+ }
1297
+
1298
+ // packages/animations/AnimatedProse.jsx
1299
+ var import_jsx_runtime8 = require("react/jsx-runtime");
1300
+ function stagger(amount = 0.1, { startDelay = 0, from = 0, ease } = {}) {
1301
+ return (index, totalElements) => {
1302
+ let fromVal = typeof from === "number" ? from : (function(fromStr, total) {
1303
+ if (fromStr === "first") return 0;
1304
+ let lastIndex = total - 1;
1305
+ return fromStr === "last" ? lastIndex : lastIndex / 2;
1306
+ })(from, totalElements);
1307
+ let distance = amount * Math.abs(fromVal - index);
1308
+ if (ease) {
1309
+ let maxStagger = totalElements * amount;
1310
+ distance = easingDefinitionToFunction(ease)(distance / maxStagger) * maxStagger;
1311
+ }
1312
+ return startDelay + distance;
1313
+ };
1314
+ }
1315
+ var AnimatedProseContext = (0, import_react14.createContext)(false);
1316
+ function AnimatedProse({
1317
+ children,
1318
+ className,
1319
+ staggerDelay = 0.03,
1320
+ duration = 0.5,
1321
+ delay = 0,
1322
+ margin = "0px 0px -10% 0px"
1323
+ }) {
1324
+ const [isInView, setIsInView] = (0, import_react14.useState)(false);
1325
+ const [hasSplitLines, setHasSplitLines] = (0, import_react14.useState)(false);
1326
+ const containerRef = (0, import_react14.useRef)(null);
1327
+ const hasAnimatedRef = (0, import_react14.useRef)(false);
1328
+ (0, import_react14.useEffect)(() => {
1329
+ if (!containerRef.current) return;
1330
+ const checkSplitLines = () => {
1331
+ var _a;
1332
+ const lines = (_a = containerRef.current) == null ? void 0 : _a.querySelectorAll(".split-line");
1333
+ if (lines && lines.length > 0) {
1334
+ setHasSplitLines(true);
1335
+ return true;
1336
+ }
1337
+ return false;
1338
+ };
1339
+ if (checkSplitLines()) return;
1340
+ const intervalId = setInterval(() => {
1341
+ if (checkSplitLines()) {
1342
+ clearInterval(intervalId);
1343
+ }
1344
+ }, 50);
1345
+ const timeoutId = setTimeout(() => {
1346
+ clearInterval(intervalId);
1347
+ setHasSplitLines(true);
1348
+ }, 500);
1349
+ return () => {
1350
+ clearInterval(intervalId);
1351
+ clearTimeout(timeoutId);
1352
+ };
1353
+ }, []);
1354
+ (0, import_react14.useEffect)(() => {
1355
+ if (!isInView || !hasSplitLines || !containerRef.current || hasAnimatedRef.current) return;
1356
+ const lines = containerRef.current.querySelectorAll(".split-line");
1357
+ if (lines.length === 0) return;
1358
+ hasAnimatedRef.current = true;
1359
+ containerRef.current.querySelectorAll(".invisible").forEach(makeVisible);
1360
+ const animation = (0, import_framer_motion.animate)(
1361
+ Array.from(lines),
1362
+ { y: ["100%", "0%"] },
1363
+ {
1364
+ delay: stagger(staggerDelay, { startDelay: delay }),
1365
+ duration,
1366
+ ease: [0.33, 1, 0.68, 1]
1367
+ }
1368
+ );
1369
+ return () => {
1370
+ animation == null ? void 0 : animation.cancel();
1371
+ };
1372
+ }, [isInView, hasSplitLines, staggerDelay, duration, delay]);
1373
+ const handleViewportEnter = () => setIsInView(true);
1374
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AnimatedProseContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1375
+ import_framer_motion.motion.div,
1376
+ {
1377
+ ref: containerRef,
1378
+ onViewportEnter: handleViewportEnter,
1379
+ viewport: { once: true, margin },
1380
+ className: cx(className),
1381
+ children
1382
+ }
1383
+ ) });
1384
+ }
1385
+ function makeVisible(el) {
1386
+ el.style.visibility = "visible";
1387
+ }
1388
+
1389
+ // packages/animations/AnimatedSubtext.jsx
1390
+ var import_react15 = __toESM(require("react"), 1);
1391
+ var import_jsx_runtime9 = require("react/jsx-runtime");
1392
+ var AnimatedSubtext = (0, import_react15.forwardRef)(({
1393
+ children,
1394
+ className,
1395
+ skip = false,
1396
+ staggerDelay = 0.05,
1397
+ duration = 0.8
1398
+ }, ref) => {
1399
+ const elementRef = (0, import_react15.useRef)(null);
1400
+ const splitTextRef = (0, import_react15.useRef)(null);
1401
+ const [isSplit, setIsSplit] = (0, import_react15.useState)(false);
1402
+ (0, import_react15.useLayoutEffect)(() => {
1403
+ if (elementRef.current && !skip) {
1404
+ setIsSplit(false);
1405
+ splitTextRef.current = new import_SplitText.SplitText(elementRef.current, {
1406
+ type: "lines",
1407
+ autoSplit: true,
1408
+ aria: false,
1409
+ deepSlice: true,
1410
+ reduceWhiteSpace: false,
1411
+ mask: "lines",
1412
+ linesClass: "split-line",
1413
+ onSplit: () => setIsSplit(true)
1414
+ });
1415
+ return () => {
1416
+ var _a;
1417
+ (_a = splitTextRef.current) == null ? void 0 : _a.revert();
1418
+ splitTextRef.current = null;
1419
+ };
1420
+ }
1421
+ }, [skip]);
1422
+ (0, import_react15.useImperativeHandle)(ref, () => ({
1423
+ reveal: (delay = 0) => {
1424
+ if (!elementRef.current || !splitTextRef.current || skip) return;
1425
+ const lines = splitTextRef.current.lines ?? [];
1426
+ if (lines.length !== 0) {
1427
+ elementRef.current.style.visibility = "visible";
1428
+ import_gsap.default.fromTo(
1429
+ lines,
1430
+ { y: "100%" },
1431
+ {
1432
+ y: "0%",
1433
+ duration,
1434
+ ease: "power3.out",
1435
+ stagger: staggerDelay,
1436
+ delay
1437
+ }
1438
+ );
1439
+ }
1440
+ }
1441
+ }), [skip, duration, staggerDelay]);
1442
+ const renderWithLineBreaks = (text) => {
1443
+ const lines = text.split("\n");
1444
+ return lines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
1445
+ line,
1446
+ index < lines.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("br", {})
1447
+ ] }, index));
1448
+ };
1449
+ 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) });
1450
+ });
1451
+ var AnimatedSubtext_default = AnimatedSubtext;
1452
+
1453
+ // packages/animations/AnimatedText.jsx
1454
+ var import_react16 = __toESM(require("react"), 1);
1455
+ var import_framer_motion2 = require("framer-motion");
1456
+ var import_jsx_runtime10 = require("react/jsx-runtime");
1457
+ function AnimatedText({
1458
+ children,
1459
+ className,
1460
+ staggerDelay = 0.03,
1461
+ duration = 0.5,
1462
+ delay = 0,
1463
+ margin = "0px 0px -10% 0px",
1464
+ revert = false
1465
+ }) {
1466
+ const [isInView, setIsInView] = (0, import_react16.useState)(false);
1467
+ const [isSplit, setIsSplit] = (0, import_react16.useState)(false);
1468
+ const containerRef = (0, import_react16.useRef)(null);
1469
+ const splitTextRef = (0, import_react16.useRef)(null);
1470
+ const inAnimatedProse = (0, import_react16.useContext)(AnimatedProseContext);
1471
+ (0, import_react16.useLayoutEffect)(() => {
1472
+ if (containerRef.current) {
1473
+ setIsSplit(false);
1474
+ splitTextRef.current = new import_SplitText.SplitText(containerRef.current, {
1475
+ type: "lines",
1476
+ autoSplit: true,
1477
+ aria: false,
1478
+ deepSlice: true,
1479
+ reduceWhiteSpace: false,
1480
+ mask: "lines",
1481
+ linesClass: "split-line",
1482
+ onSplit: () => setIsSplit(true)
1483
+ });
1484
+ }
1485
+ return () => {
1486
+ splitTextRef.current = null;
1487
+ };
1488
+ }, []);
1489
+ (0, import_react16.useEffect)(() => {
1490
+ if (inAnimatedProse || !isInView || !isSplit || !containerRef.current || !splitTextRef.current) {
1491
+ return;
1492
+ }
1493
+ const lines = splitTextRef.current.lines ?? [];
1494
+ if (lines.length === 0) return;
1495
+ containerRef.current.style.visibility = "visible";
1496
+ const animation = (0, import_framer_motion2.animate)(
1497
+ lines,
1498
+ { y: ["100%", "0%"] },
1499
+ {
1500
+ delay: stagger(staggerDelay, { startDelay: delay }),
1501
+ duration,
1502
+ ease: [0.33, 1, 0.68, 1]
1503
+ }
1504
+ );
1505
+ const handleRevert = async () => {
1506
+ var _a;
1507
+ try {
1508
+ await animation;
1509
+ if (revert) {
1510
+ (_a = splitTextRef.current) == null ? void 0 : _a.revert();
1511
+ }
1512
+ } catch (err) {
1513
+ }
1514
+ };
1515
+ handleRevert();
1516
+ return () => {
1517
+ animation == null ? void 0 : animation.cancel();
1518
+ };
1519
+ }, [isInView, isSplit, inAnimatedProse, staggerDelay, duration, delay, revert]);
1520
+ const handleViewportEnter = () => setIsInView(true);
1521
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
1522
+ import_framer_motion2.motion.span,
1523
+ {
1524
+ ref: containerRef,
1525
+ onViewportEnter: handleViewportEnter,
1526
+ viewport: { once: true, margin },
1527
+ className: cx("invisible", className),
1528
+ children
1529
+ }
1530
+ );
1531
+ }
1532
+
1533
+ // packages/animations/ScrollAnimatedHeadline.jsx
1534
+ var import_jsx_runtime11 = require("react/jsx-runtime");
1535
+ function ScrollAnimatedHeadline({
1536
+ headline,
1537
+ displayAs,
1538
+ className,
1539
+ headlineClassName
1540
+ }) {
1541
+ if (!(headline == null ? void 0 : headline.text) || !(headline == null ? void 0 : headline.level)) return null;
1542
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
1543
+ AnimatedHeadline_default,
1544
+ {
1545
+ trigger: "scroll",
1546
+ as: headline.level,
1547
+ displayAs,
1548
+ className: cx(headlineClassName),
1549
+ wrapperClassName: className,
1550
+ children: headline.text
1551
+ }
1552
+ );
1553
+ }
1554
+
1555
+ // packages/animations/Preloader.jsx
1556
+ var import_react18 = __toESM(require("react"), 1);
1557
+
1558
+ // packages/providers/PreloaderProvider.jsx
1559
+ var import_react17 = __toESM(require("react"), 1);
1560
+ var import_jsx_runtime12 = require("react/jsx-runtime");
1561
+ var PreloaderContext = (0, import_react17.createContext)(null);
1562
+ var defaultContextValue2 = {
1563
+ phase: "hidden",
1564
+ setPhase: () => {
1565
+ },
1566
+ isInitialLoad: false
1567
+ };
1568
+ function PreloaderProvider({ children }) {
1569
+ const [phase, setPhase] = (0, import_react17.useState)("loading");
1570
+ const [isInitialLoad, setIsInitialLoad] = (0, import_react17.useState)(true);
1571
+ (0, import_react17.useEffect)(() => {
1572
+ if (phase === "revealing") {
1573
+ const timer = setTimeout(() => {
1574
+ setPhase("hidden");
1575
+ setIsInitialLoad(false);
1576
+ }, 200);
1577
+ return () => clearTimeout(timer);
1578
+ }
1579
+ }, [phase]);
1580
+ const contextValue = (0, import_react17.useMemo)(() => ({
1581
+ phase,
1582
+ setPhase,
1583
+ isInitialLoad
1584
+ }), [phase, isInitialLoad]);
1585
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PreloaderContext.Provider, { value: contextValue, children });
1586
+ }
1587
+ function usePreloader() {
1588
+ return (0, import_react17.useContext)(PreloaderContext) ?? defaultContextValue2;
1589
+ }
1590
+
1591
+ // packages/animations/Preloader.jsx
1592
+ var import_jsx_runtime13 = require("react/jsx-runtime");
1593
+ function Preloader() {
1594
+ const { phase, setPhase, isInitialLoad } = usePreloader();
1595
+ const containerRef = (0, import_react18.useRef)(null);
1596
+ const contentRef = (0, import_react18.useRef)(null);
1597
+ const squaresContainerRef = (0, import_react18.useRef)(null);
1598
+ const squaresRefs = (0, import_react18.useRef)([]);
1599
+ const onReadyRef = (0, import_react18.useRef)(null);
1600
+ const timelineRef = (0, import_react18.useRef)(null);
1601
+ const hasStartedRef = (0, import_react18.useRef)(false);
1602
+ const [isReducedMotion, setIsReducedMotion] = (0, import_react18.useState)(false);
1603
+ (0, import_react18.useEffect)(() => {
1604
+ const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
1605
+ setIsReducedMotion(mediaQuery.matches);
1606
+ const handleChange = (e) => setIsReducedMotion(e.matches);
1607
+ mediaQuery.addEventListener("change", handleChange);
1608
+ return () => mediaQuery.removeEventListener("change", handleChange);
1609
+ }, []);
1610
+ const handleReady = (readyFn) => {
1611
+ onReadyRef.current = readyFn;
1612
+ };
1613
+ (0, import_react.useGSAP)(() => {
1614
+ if (!isInitialLoad || phase !== "loading" || hasStartedRef.current) return;
1615
+ if (isReducedMotion) {
1616
+ setPhase("complete");
1617
+ return;
1618
+ }
1619
+ const squares = squaresRefs.current.filter(Boolean);
1620
+ if (squares.length === 0) return;
1621
+ hasStartedRef.current = true;
1622
+ let timeoutId;
1623
+ const runAnimation = () => {
1624
+ var _a, _b;
1625
+ if (!onReadyRef.current) {
1626
+ requestAnimationFrame(runAnimation);
1627
+ return;
1628
+ }
1629
+ timelineRef.current = import_gsap.default.timeline();
1630
+ onReadyRef.current();
1631
+ squares.forEach((square, index) => {
1632
+ var _a2;
1633
+ (_a2 = timelineRef.current) == null ? void 0 : _a2.fromTo(
1634
+ square,
1635
+ {
1636
+ x: index === 0 ? -16 : (index - 1) * 18,
1637
+ rotate: 0
1638
+ },
1639
+ {
1640
+ x: index * 18 - 16,
1641
+ rotate: 90,
1642
+ duration: 0.7,
1643
+ ease: "expo.inOut",
1644
+ immediateRender: false
1645
+ },
1646
+ index === 0 ? 0 : ">-25%"
1647
+ );
1648
+ });
1649
+ const timeOffset = 2.2749999999999995;
1650
+ (_a = timelineRef.current) == null ? void 0 : _a.to(
1651
+ contentRef.current,
1652
+ { opacity: 0, duration: 0.4, ease: "power3.out" },
1653
+ timeOffset + 0.2
1654
+ );
1655
+ const clipState = { value: 0 };
1656
+ const eventState = { value: false };
1657
+ (_b = timelineRef.current) == null ? void 0 : _b.to(
1658
+ clipState,
1659
+ {
1660
+ value: 1,
1661
+ duration: 1.5,
1662
+ ease: "expo.inOut",
1663
+ onUpdate: () => {
1664
+ if (containerRef.current) {
1665
+ const val = clipState.value;
1666
+ 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%)`;
1667
+ }
1668
+ if (!eventState.value && clipState.value >= 0.9) {
1669
+ eventState.value = true;
1670
+ setPhase("revealing");
1671
+ }
1672
+ }
1673
+ },
1674
+ timeOffset
1675
+ );
1676
+ };
1677
+ timeoutId = setTimeout(runAnimation, 100);
1678
+ return () => {
1679
+ var _a;
1680
+ clearTimeout(timeoutId);
1681
+ (_a = timelineRef.current) == null ? void 0 : _a.kill();
1682
+ };
1683
+ }, { dependencies: [isInitialLoad, isReducedMotion, setPhase] });
1684
+ if (!isInitialLoad || phase === "hidden") return null;
1685
+ const pointerEventsClass = phase === "complete" ? "pointer-events-none" : "";
1686
+ const containerClasses = cx("fixed inset-0 z-[10000] flex items-center justify-center bg-background", pointerEventsClass);
1687
+ 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: [
1688
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1689
+ "div",
1690
+ {
1691
+ ref: squaresContainerRef,
1692
+ className: "relative overflow-x-clip overflow-y-visible",
1693
+ style: { width: 70, height: 16 },
1694
+ children: [0, 1, 2, 3].map((index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1695
+ "div",
1696
+ {
1697
+ ref: (el) => {
1698
+ squaresRefs.current[index] = el;
1699
+ },
1700
+ className: "absolute top-0 left-0 bg-foreground",
1701
+ style: {
1702
+ width: 16,
1703
+ height: 16,
1704
+ transform: "translateX(-16px)",
1705
+ transformOrigin: "bottom right"
1706
+ }
1707
+ },
1708
+ index
1709
+ ))
1710
+ }
1711
+ ) }),
1712
+ /* @__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" }) }) })
1713
+ ] }) });
1714
+ }
1715
+
1716
+ // packages/providers/PageEnterProvider.jsx
1717
+ var import_react19 = __toESM(require("react"), 1);
1718
+ var import_jsx_runtime14 = require("react/jsx-runtime");
1719
+ var PageEnterContext = (0, import_react19.createContext)(null);
1720
+ function sortByPriority(a, b) {
1721
+ return a.priority - b.priority;
1722
+ }
1723
+ function PageEnterProvider({ children }) {
1724
+ const { phase: pageTransitionPhase } = usePageTransition();
1725
+ const { phase: preloaderPhase } = usePreloader();
1726
+ const [phase, setPhase] = (0, import_react19.useState)("waiting");
1727
+ const [prefersReducedMotion, setPrefersReducedMotion] = (0, import_react19.useState)(false);
1728
+ const callbacksMapRef = (0, import_react19.useRef)(/* @__PURE__ */ new Map());
1729
+ const isTriggeringRef = (0, import_react19.useRef)(false);
1730
+ (0, import_react19.useEffect)(() => {
1731
+ const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
1732
+ setPrefersReducedMotion(mediaQuery.matches);
1733
+ const handleMediaQueryChange = (e) => setPrefersReducedMotion(e.matches);
1734
+ mediaQuery.addEventListener("change", handleMediaQueryChange);
1735
+ return () => {
1736
+ mediaQuery.removeEventListener("change", handleMediaQueryChange);
1737
+ };
1738
+ }, []);
1739
+ const register = (0, import_react19.useCallback)((id, trigger, priority = 0) => {
1740
+ callbacksMapRef.current.set(id, { id, trigger, priority });
1741
+ }, []);
1742
+ const unregister = (0, import_react19.useCallback)((id) => {
1743
+ callbacksMapRef.current.delete(id);
1744
+ }, []);
1745
+ const triggerEnter = (0, import_react19.useCallback)(() => {
1746
+ if (isTriggeringRef.current) {
1747
+ return;
1748
+ }
1749
+ isTriggeringRef.current = true;
1750
+ setPhase("entering");
1751
+ const callbacks = Array.from(callbacksMapRef.current.values());
1752
+ callbacks.sort(sortByPriority);
1753
+ let lastPriority = null;
1754
+ let staggerIndex = 0;
1755
+ for (const item of callbacks) {
1756
+ if (lastPriority !== null && item.priority > lastPriority) {
1757
+ staggerIndex += 0.08;
1758
+ }
1759
+ lastPriority = item.priority;
1760
+ item.trigger(staggerIndex);
1761
+ }
1762
+ setTimeout(() => {
1763
+ setPhase("complete");
1764
+ }, 1e3 * (staggerIndex + 1));
1765
+ }, []);
1766
+ (0, import_react19.useEffect)(() => {
1767
+ const isPreloaderReady = preloaderPhase === "revealing" || preloaderPhase === "hidden";
1768
+ if ((pageTransitionPhase === "exiting" || pageTransitionPhase === "idle") && phase === "waiting" && isPreloaderReady) {
1769
+ const timerId = setTimeout(() => {
1770
+ triggerEnter();
1771
+ }, 250);
1772
+ return () => clearTimeout(timerId);
1773
+ }
1774
+ }, [pageTransitionPhase, preloaderPhase, phase, triggerEnter]);
1775
+ (0, import_react19.useEffect)(() => {
1776
+ if (pageTransitionPhase === "entering" || pageTransitionPhase === "holding") {
1777
+ setPhase("waiting");
1778
+ isTriggeringRef.current = false;
1779
+ }
1780
+ }, [pageTransitionPhase]);
1781
+ const contextValue = (0, import_react19.useMemo)(() => ({
1782
+ phase,
1783
+ register,
1784
+ unregister,
1785
+ prefersReducedMotion
1786
+ }), [phase, register, unregister, prefersReducedMotion]);
1787
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PageEnterContext.Provider, { value: contextValue, children });
1788
+ }
1789
+ var defaultContextValue3 = {
1790
+ phase: "complete",
1791
+ register: () => {
1792
+ },
1793
+ unregister: () => {
1794
+ },
1795
+ prefersReducedMotion: false
1796
+ };
1797
+ function usePageEnterContext() {
1798
+ return (0, import_react19.useContext)(PageEnterContext) ?? defaultContextValue3;
1799
+ }
1800
+
1801
+ // libs/hooks/usePageEnter.js
1802
+ var import_react20 = require("react");
1803
+ function usePageEnter(callback, options = {}) {
1804
+ const { priority = 0, skip = false } = options;
1805
+ const {
1806
+ register,
1807
+ unregister,
1808
+ phase,
1809
+ prefersReducedMotion
1810
+ } = usePageEnterContext();
1811
+ const uuid = (0, import_react20.useMemo)(() => crypto.randomUUID(), []);
1812
+ const idRef = (0, import_react20.useRef)(uuid);
1813
+ (0, import_react20.useEffect)(() => {
1814
+ if (skip) {
1815
+ return;
1816
+ }
1817
+ const currentId = idRef.current;
1818
+ register(currentId, callback, priority);
1819
+ return () => {
1820
+ unregister(currentId);
1821
+ };
1822
+ }, [register, unregister, callback, priority, skip]);
1823
+ const isEntering = phase === "entering";
1824
+ const isComplete = phase === "complete";
1825
+ const returnedState = (0, import_react20.useMemo)(() => ({
1826
+ phase,
1827
+ prefersReducedMotion,
1828
+ isEntering,
1829
+ isComplete
1830
+ }), [phase, prefersReducedMotion, isEntering, isComplete]);
1831
+ return returnedState;
1832
+ }
1833
+
1834
+ // libs/hooks/useBreakpoint.js
1835
+ var import_react21 = require("react");
1836
+ var BREAKPOINTS = {
1837
+ sm: 640,
1838
+ md: 768,
1839
+ lg: 1024,
1840
+ xl: 1280,
1841
+ "2xl": 1536
1842
+ };
1843
+ function useBreakpoint(breakpoint = "md") {
1844
+ const minWidth = BREAKPOINTS[breakpoint] ?? BREAKPOINTS.md;
1845
+ const [matches, setMatches] = (0, import_react21.useState)(() => {
1846
+ if (typeof window === "undefined") return false;
1847
+ return window.matchMedia(`(min-width: ${minWidth}px)`).matches;
1848
+ });
1849
+ (0, import_react21.useEffect)(() => {
1850
+ const mediaQuery = window.matchMedia(`(min-width: ${minWidth}px)`);
1851
+ const handleChange = (event) => setMatches(event.matches);
1852
+ setMatches(mediaQuery.matches);
1853
+ mediaQuery.addEventListener("change", handleChange);
1854
+ return () => {
1855
+ mediaQuery.removeEventListener("change", handleChange);
1856
+ };
1857
+ }, [minWidth]);
1858
+ return matches;
1859
+ }
1860
+
1861
+ // libs/constants/timing.js
1862
+ var ASCII_REVEAL_DURATION = 1.2;
1863
+
1864
+ // libs/hooks/useAsciiDelay.js
1865
+ var asciiDelayBase = 0.1 * ASCII_REVEAL_DURATION;
1866
+ function useAsciiDelay() {
1867
+ const md = useBreakpoint("md");
1868
+ return md ? asciiDelayBase : 0;
1869
+ }
1870
+ // Annotate the CommonJS export names for ESM import in node:
1871
+ 0 && (module.exports = {
1872
+ AnimatedButton,
1873
+ AnimatedHeadline,
1874
+ AnimatedLink,
1875
+ AnimatedProse,
1876
+ AnimatedProseContext,
1877
+ AnimatedSubtext,
1878
+ AnimatedText,
1879
+ DEFAULT_CHARS,
1880
+ LenisProvider,
1881
+ PageEnterProvider,
1882
+ PageTransitionProvider,
1883
+ Preloader,
1884
+ PreloaderProvider,
1885
+ ScrambleGroup,
1886
+ ScrambleText,
1887
+ ScrambleTextPlugin,
1888
+ ScrollAnimatedHeadline,
1889
+ ScrollTrigger,
1890
+ SplitText,
1891
+ cva,
1892
+ cx,
1893
+ easingDefinitionToFunction,
1894
+ getCssScrollLocked,
1895
+ getLenis,
1896
+ gsap,
1897
+ scrollToTop,
1898
+ setCssScrollLocked,
1899
+ stagger,
1900
+ useAsciiDelay,
1901
+ useDualLayerScramble,
1902
+ useGSAP,
1903
+ useIdleGSAP,
1904
+ useLenis,
1905
+ usePageEnter,
1906
+ usePageEnterContext,
1907
+ usePageTransition,
1908
+ usePageTransitionContext,
1909
+ usePreloader,
1910
+ useScrambleGroup
1911
+ });
1912
+ //# sourceMappingURL=index.cjs.map