@cosmictraveler002/anim-kit 1.0.0 → 1.2.0
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/README.md +275 -50
- package/dist/anim-kit.standalone.js +18 -8
- package/dist/anim-kit.standalone.js.map +1 -1
- package/dist/core/gsap.d.ts +2 -1
- package/dist/core/gsap.d.ts.map +1 -1
- package/dist/core/gsap.js +3 -2
- package/dist/core/gsap.js.map +1 -1
- package/dist/core/split.d.ts.map +1 -1
- package/dist/core/split.js +15 -2
- package/dist/core/split.js.map +1 -1
- package/dist/effects/clip-wipe.d.ts +31 -0
- package/dist/effects/clip-wipe.d.ts.map +1 -0
- package/dist/effects/clip-wipe.js +82 -0
- package/dist/effects/clip-wipe.js.map +1 -0
- package/dist/effects/counter.d.ts +9 -0
- package/dist/effects/counter.d.ts.map +1 -1
- package/dist/effects/counter.js +17 -7
- package/dist/effects/counter.js.map +1 -1
- package/dist/effects/cursor-follower.d.ts.map +1 -1
- package/dist/effects/cursor-follower.js +22 -4
- package/dist/effects/cursor-follower.js.map +1 -1
- package/dist/effects/flip-words.d.ts +31 -0
- package/dist/effects/flip-words.d.ts.map +1 -0
- package/dist/effects/flip-words.js +104 -0
- package/dist/effects/flip-words.js.map +1 -0
- package/dist/effects/line-reveal.d.ts +6 -2
- package/dist/effects/line-reveal.d.ts.map +1 -1
- package/dist/effects/line-reveal.js +8 -4
- package/dist/effects/line-reveal.js.map +1 -1
- package/dist/effects/magnetic.d.ts +15 -0
- package/dist/effects/magnetic.d.ts.map +1 -0
- package/dist/effects/magnetic.js +59 -0
- package/dist/effects/magnetic.js.map +1 -0
- package/dist/effects/media-settle.d.ts +30 -0
- package/dist/effects/media-settle.d.ts.map +1 -0
- package/dist/effects/media-settle.js +55 -0
- package/dist/effects/media-settle.js.map +1 -0
- package/dist/effects/roll-text.d.ts +13 -0
- package/dist/effects/roll-text.d.ts.map +1 -0
- package/dist/effects/roll-text.js +91 -0
- package/dist/effects/roll-text.js.map +1 -0
- package/dist/effects/scramble-text.d.ts +17 -0
- package/dist/effects/scramble-text.d.ts.map +1 -0
- package/dist/effects/scramble-text.js +93 -0
- package/dist/effects/scramble-text.js.map +1 -0
- package/dist/effects/unfold-reveal.d.ts +23 -0
- package/dist/effects/unfold-reveal.d.ts.map +1 -0
- package/dist/effects/unfold-reveal.js +53 -0
- package/dist/effects/unfold-reveal.js.map +1 -0
- package/dist/index.d.ts +25 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +19 -2
- package/dist/index.js.map +1 -1
- package/dist/styles/anim-kit.css +22 -0
- package/package.json +6 -3
- package/src/core/gsap.ts +3 -2
- package/src/core/split.ts +16 -2
- package/src/effects/clip-wipe.ts +141 -0
- package/src/effects/counter.ts +26 -6
- package/src/effects/cursor-follower.ts +21 -4
- package/src/effects/flip-words.ts +148 -0
- package/src/effects/line-reveal.ts +12 -5
- package/src/effects/magnetic.ts +87 -0
- package/src/effects/media-settle.ts +106 -0
- package/src/effects/roll-text.ts +118 -0
- package/src/effects/scramble-text.ts +122 -0
- package/src/effects/unfold-reveal.ts +92 -0
- package/src/index.ts +33 -2
- package/src/styles/anim-kit.css +22 -0
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
* Line reveal — the masked, staggered text reveal used all over DZ!NR.
|
|
3
3
|
*
|
|
4
4
|
* Text is split into lines, each line gets an `overflow:hidden` mask, and the
|
|
5
|
-
* inner line slides up from `y:100%` to `y:0%`.
|
|
5
|
+
* inner line slides up from `y:100%` to `y:0%`. `split: "chars"` runs the
|
|
6
|
+
* same masked rise per character (`.ak-char-mask > .ak-char`) with a tighter
|
|
7
|
+
* default stagger — the per-letter headline reveal.
|
|
6
8
|
*
|
|
7
9
|
* Two modes:
|
|
8
10
|
* mode: "scroll" → plays when the element enters the viewport and reverses
|
|
@@ -17,7 +19,8 @@ import { split } from "../core/split.js";
|
|
|
17
19
|
import { toArray } from "../core/util.js";
|
|
18
20
|
export function lineReveal(target, options = {}) {
|
|
19
21
|
initGSAP();
|
|
20
|
-
const { mode = "scroll",
|
|
22
|
+
const { mode = "scroll", split: splitType = "lines", stagger, duration = 1, ease = "power4.out", delay = 0, start = "top 90%", end = "bottom 10%", } = options;
|
|
23
|
+
const stag = stagger ?? (splitType === "chars" ? 0.03 : 0.1);
|
|
21
24
|
const els = toArray(target);
|
|
22
25
|
if (!els.length)
|
|
23
26
|
return () => { };
|
|
@@ -27,9 +30,10 @@ export function lineReveal(target, options = {}) {
|
|
|
27
30
|
const tweens = [];
|
|
28
31
|
els.forEach((el) => {
|
|
29
32
|
const res = split(el, {
|
|
30
|
-
type:
|
|
33
|
+
type: splitType,
|
|
31
34
|
mask: true,
|
|
32
35
|
linesClass: "ak-line++",
|
|
36
|
+
charsClass: "ak-char++",
|
|
33
37
|
lineThreshold: 0.05,
|
|
34
38
|
});
|
|
35
39
|
splits.push(res);
|
|
@@ -41,7 +45,7 @@ export function lineReveal(target, options = {}) {
|
|
|
41
45
|
const vars = {
|
|
42
46
|
y: "0%",
|
|
43
47
|
duration,
|
|
44
|
-
stagger,
|
|
48
|
+
stagger: stag,
|
|
45
49
|
ease,
|
|
46
50
|
delay,
|
|
47
51
|
overwrite: "auto",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"line-reveal.js","sourceRoot":"","sources":["../../src/effects/line-reveal.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"line-reveal.js","sourceRoot":"","sources":["../../src/effects/line-reveal.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
|
|
2
|
+
export interface MagneticOptions extends CommonOptions {
|
|
3
|
+
/** How far the element follows the pointer — fraction of its own box. @default 0.4 */
|
|
4
|
+
strength?: number;
|
|
5
|
+
/** Max tilt in degrees at full pull (0 disables rotation). @default 8 */
|
|
6
|
+
rotation?: number;
|
|
7
|
+
/** Scale held while the pointer is over the element (1 = none). @default 1 */
|
|
8
|
+
scale?: number;
|
|
9
|
+
/** Spring-back duration, seconds. @default 1.2 */
|
|
10
|
+
duration?: number;
|
|
11
|
+
/** Spring-back ease. @default "elastic.out(1, 0.35)" */
|
|
12
|
+
ease?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare function magnetic(target: TargetLike, options?: MagneticOptions): Destroy;
|
|
15
|
+
//# sourceMappingURL=magnetic.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"magnetic.d.ts","sourceRoot":"","sources":["../../src/effects/magnetic.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,sFAAsF;IACtF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,QAAQ,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE,eAAoB,GAAG,OAAO,CAuDnF"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Magnetic hover — buttons and links that pull toward the pointer.
|
|
3
|
+
*
|
|
4
|
+
* While the pointer is over the element it follows the cursor (a fraction
|
|
5
|
+
* of its own box), tilts toward the pull, and optionally grows a touch.
|
|
6
|
+
* On leave it springs back to rest with an elastic snap:
|
|
7
|
+
*
|
|
8
|
+
* magnetic("[data-magnet]", { strength: 0.5, rotation: 10 });
|
|
9
|
+
*
|
|
10
|
+
* Attach it to individual buttons/links (or a container's children — pass
|
|
11
|
+
* the list). destroy() removes the listeners, kills in-flight tweens and
|
|
12
|
+
* restores the inline transform.
|
|
13
|
+
*/
|
|
14
|
+
import { gsap, initGSAP, killTweens } from "../core/gsap.js";
|
|
15
|
+
import { guard } from "../core/guard.js";
|
|
16
|
+
import { toArray } from "../core/util.js";
|
|
17
|
+
export function magnetic(target, options = {}) {
|
|
18
|
+
initGSAP();
|
|
19
|
+
const els = toArray(target);
|
|
20
|
+
if (!els.length)
|
|
21
|
+
return () => { };
|
|
22
|
+
const { strength = 0.4, rotation = 8, scale = 1, duration = 1.2, ease = "elastic.out(1, 0.35)", } = options;
|
|
23
|
+
return guard(options, () => {
|
|
24
|
+
const prevTransform = els.map((el) => el.style.transform);
|
|
25
|
+
const listeners = [];
|
|
26
|
+
els.forEach((el) => {
|
|
27
|
+
const onMove = (e) => {
|
|
28
|
+
const ptr = e;
|
|
29
|
+
const r = el.getBoundingClientRect();
|
|
30
|
+
const dx = ptr.clientX - (r.left + r.width / 2);
|
|
31
|
+
const dy = ptr.clientY - (r.top + r.height / 2);
|
|
32
|
+
const nx = r.width ? dx / (r.width / 2) : 0; // -1 … 1 across the box
|
|
33
|
+
gsap.to(el, {
|
|
34
|
+
x: dx * strength,
|
|
35
|
+
y: dy * strength,
|
|
36
|
+
rotation: rotation ? nx * rotation : 0,
|
|
37
|
+
scale,
|
|
38
|
+
duration: 0.4,
|
|
39
|
+
ease: "power3.out",
|
|
40
|
+
overwrite: "auto",
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
const onLeave = () => {
|
|
44
|
+
gsap.to(el, { x: 0, y: 0, rotation: 0, scale: 1, duration, ease, overwrite: "auto" });
|
|
45
|
+
};
|
|
46
|
+
el.addEventListener("pointermove", onMove);
|
|
47
|
+
el.addEventListener("pointerleave", onLeave);
|
|
48
|
+
listeners.push({ el, type: "pointermove", fn: onMove }, { el, type: "pointerleave", fn: onLeave });
|
|
49
|
+
});
|
|
50
|
+
return () => {
|
|
51
|
+
listeners.forEach(({ el, type, fn }) => el.removeEventListener(type, fn));
|
|
52
|
+
killTweens(els);
|
|
53
|
+
els.forEach((el, i) => {
|
|
54
|
+
el.style.transform = prevTransform[i];
|
|
55
|
+
});
|
|
56
|
+
};
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
//# sourceMappingURL=magnetic.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"magnetic.js","sourceRoot":"","sources":["../../src/effects/magnetic.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
|
|
2
|
+
export interface MediaSettleOptions extends CommonOptions {
|
|
3
|
+
/** Starting scale — settles down to 1. @default 1.15 */
|
|
4
|
+
from?: number;
|
|
5
|
+
/** Animation duration, seconds (enter mode). @default 1.5 */
|
|
6
|
+
duration?: number;
|
|
7
|
+
/** GSAP ease. @default "power2.out" */
|
|
8
|
+
ease?: string;
|
|
9
|
+
/** transformOrigin. @default "center" */
|
|
10
|
+
origin?: string;
|
|
11
|
+
/** Stagger between targets, seconds. @default 0.06 */
|
|
12
|
+
stagger?: number;
|
|
13
|
+
/** Delay before playing, seconds. @default 0 */
|
|
14
|
+
delay?: number;
|
|
15
|
+
/** "scroll" plays on enter, "immediate" plays at once. @default "scroll" */
|
|
16
|
+
mode?: "scroll" | "immediate";
|
|
17
|
+
/** ScrollTrigger start position. @default "top 75%" */
|
|
18
|
+
start?: string;
|
|
19
|
+
/** ScrollTrigger end position (scrub mode). @default "bottom top" */
|
|
20
|
+
end?: string;
|
|
21
|
+
/** Re-settle when leaving / re-entering the viewport (enter mode). @default false */
|
|
22
|
+
replay?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Bind the settle to scroll progress instead of playing it on enter —
|
|
25
|
+
* number = scrub smoothing seconds, `true` = immediate. unset = one-shot.
|
|
26
|
+
*/
|
|
27
|
+
scrub?: number | boolean;
|
|
28
|
+
}
|
|
29
|
+
export declare function mediaSettle(target: TargetLike, options?: MediaSettleOptions): Destroy;
|
|
30
|
+
//# sourceMappingURL=media-settle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-settle.d.ts","sourceRoot":"","sources":["../../src/effects/media-settle.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,IAAI,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC9B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qFAAqF;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE,kBAAuB,GAAG,OAAO,CA2DzF"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Media settle — images that arrive slightly oversized and settle to size.
|
|
3
|
+
*
|
|
4
|
+
* The classic entrance for grids and heroes: media enters at `scale > 1`
|
|
5
|
+
* and eases down to 1 as the section arrives (or across the scroll range in
|
|
6
|
+
* `scrub` mode), so content lands instead of popping in.
|
|
7
|
+
*
|
|
8
|
+
* mediaSettle("[data-settle]", { from: 1.3 }); // on enter
|
|
9
|
+
* mediaSettle("[data-settle]", { scrub: 0.5 }); // scroll-bound
|
|
10
|
+
* mediaSettle("[data-settle]", { replay: true }); // reverse on leave-back, replay on re-enter
|
|
11
|
+
*
|
|
12
|
+
* destroy() kills the tween and restores the original scale.
|
|
13
|
+
*/
|
|
14
|
+
import { gsap, ScrollTrigger, initGSAP } from "../core/gsap.js";
|
|
15
|
+
import { guard } from "../core/guard.js";
|
|
16
|
+
import { toArray } from "../core/util.js";
|
|
17
|
+
export function mediaSettle(target, options = {}) {
|
|
18
|
+
initGSAP();
|
|
19
|
+
const { from = 1.15, duration = 1.5, ease = "power2.out", origin = "center", stagger = 0.06, delay = 0, mode = "scroll", start = "top 75%", end = "bottom top", replay = false, scrub, } = options;
|
|
20
|
+
const els = toArray(target);
|
|
21
|
+
if (!els.length)
|
|
22
|
+
return () => { };
|
|
23
|
+
return guard(options, run);
|
|
24
|
+
function run() {
|
|
25
|
+
gsap.set(els, { scale: from, transformOrigin: origin });
|
|
26
|
+
const vars = { scale: 1, stagger, delay, overwrite: "auto" };
|
|
27
|
+
if (scrub !== undefined) {
|
|
28
|
+
vars.ease = "none";
|
|
29
|
+
vars.scrollTrigger = {
|
|
30
|
+
trigger: els[0],
|
|
31
|
+
start,
|
|
32
|
+
end,
|
|
33
|
+
scrub: scrub === true ? true : scrub,
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
else {
|
|
37
|
+
vars.duration = duration;
|
|
38
|
+
vars.ease = ease;
|
|
39
|
+
if (mode === "scroll") {
|
|
40
|
+
vars.scrollTrigger = replay
|
|
41
|
+
? { trigger: els[0], start, toggleActions: "play reverse play reverse" }
|
|
42
|
+
: { trigger: els[0], start, once: true };
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
const tween = gsap.fromTo(els, { scale: from, transformOrigin: origin }, { ...vars, immediateRender: true });
|
|
46
|
+
ScrollTrigger.refresh();
|
|
47
|
+
return () => {
|
|
48
|
+
tween.scrollTrigger?.kill();
|
|
49
|
+
tween.kill();
|
|
50
|
+
gsap.set(els, { clearProps: "transform,transformOrigin" });
|
|
51
|
+
ScrollTrigger.refresh();
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
//# sourceMappingURL=media-settle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-settle.js","sourceRoot":"","sources":["../../src/effects/media-settle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AA+B1C,MAAM,UAAU,WAAW,CAAC,MAAkB,EAAE,UAA8B,EAAE;IAC9E,QAAQ,EAAE,CAAC;IAEX,MAAM,EACJ,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,GAAG,EACd,IAAI,GAAG,YAAY,EACnB,MAAM,GAAG,QAAQ,EACjB,OAAO,GAAG,IAAI,EACd,KAAK,GAAG,CAAC,EACT,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,SAAS,EACjB,GAAG,GAAG,YAAY,EAClB,MAAM,GAAG,KAAK,EACd,KAAK,GACN,GAAG,OAAO,CAAC;IAEZ,MAAM,GAAG,GAAG,OAAO,CAAc,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,GAAG,CAAC,MAAM;QAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAEjC,OAAO,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IAE3B,SAAS,GAAG;QACV,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC;QAExD,MAAM,IAAI,GAAmB,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;QAE7E,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;YACnB,IAAI,CAAC,aAAa,GAAG;gBACnB,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;gBACf,KAAK;gBACL,GAAG;gBACH,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;aACrC,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACtB,IAAI,CAAC,aAAa,GAAG,MAAM;oBACzB,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,2BAA2B,EAAE;oBACxE,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;YAC7C,CAAC;QACH,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CACvB,GAAG,EACH,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,EACxC,EAAE,GAAG,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,CACnC,CAAC;QACF,aAAa,CAAC,OAAO,EAAE,CAAC;QAExB,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,aAAa,EAAE,IAAI,EAAE,CAAC;YAC5B,KAAK,CAAC,IAAI,EAAE,CAAC;YACb,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,UAAU,EAAE,2BAA2B,EAAE,CAAC,CAAC;YAC3D,aAAa,CAAC,OAAO,EAAE,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC;AACH,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
|
|
2
|
+
export interface RollTextOptions extends CommonOptions {
|
|
3
|
+
/** Seconds each row is shown (including the roll). @default 2.2 */
|
|
4
|
+
interval?: number;
|
|
5
|
+
/** Roll duration, seconds. @default 0.6 */
|
|
6
|
+
duration?: number;
|
|
7
|
+
/** GSAP ease for the roll. @default "power4.inOut" */
|
|
8
|
+
ease?: string;
|
|
9
|
+
/** "up" rolls rows upward, "down" walks them in reverse. @default "up" */
|
|
10
|
+
direction?: "up" | "down";
|
|
11
|
+
}
|
|
12
|
+
export declare function rollText(target: TargetLike, options?: RollTextOptions): Destroy;
|
|
13
|
+
//# sourceMappingURL=roll-text.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"roll-text.d.ts","sourceRoot":"","sources":["../../src/effects/roll-text.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;CAC3B;AAED,wBAAgB,QAAQ,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE,eAAoB,GAAG,OAAO,CAsFnF"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Roll text — the rolling word rotator.
|
|
3
|
+
*
|
|
4
|
+
* The target holds two or more rows; they are stacked into a hidden overflow
|
|
5
|
+
* box one row tall, and the box rolls to the next row on an interval — the
|
|
6
|
+
* first row is cloned at the end so the wrap is seamless (same trick as
|
|
7
|
+
* `marquee()`).
|
|
8
|
+
*
|
|
9
|
+
* <span class="ak-roll" data-roll>
|
|
10
|
+
* <span>Design</span><span>Code</span><span>Motion</span>
|
|
11
|
+
* </span>
|
|
12
|
+
*
|
|
13
|
+
* destroy() unwraps the rows, removes the clone and restores every inline
|
|
14
|
+
* style it touched — markup comes back byte-identical.
|
|
15
|
+
*/
|
|
16
|
+
import { gsap, initGSAP, killTweens } from "../core/gsap.js";
|
|
17
|
+
import { guard } from "../core/guard.js";
|
|
18
|
+
import { toArray } from "../core/util.js";
|
|
19
|
+
export function rollText(target, options = {}) {
|
|
20
|
+
initGSAP();
|
|
21
|
+
const { interval = 2.2, duration = 0.6, ease = "power4.inOut", direction = "up" } = options;
|
|
22
|
+
const els = toArray(target);
|
|
23
|
+
if (!els.length)
|
|
24
|
+
return () => { };
|
|
25
|
+
return guard(options, () => {
|
|
26
|
+
const setups = [];
|
|
27
|
+
els.forEach((el) => {
|
|
28
|
+
const rows = Array.from(el.children).filter((n) => n instanceof HTMLElement);
|
|
29
|
+
if (rows.length < 2)
|
|
30
|
+
return;
|
|
31
|
+
// Snapshot inline styles BEFORE touching them (restored on destroy).
|
|
32
|
+
const snapshots = [
|
|
33
|
+
{ el, cssText: el.style.cssText },
|
|
34
|
+
...rows.map((r) => ({ el: r, cssText: r.style.cssText })),
|
|
35
|
+
];
|
|
36
|
+
// Rows must stack as blocks for the box to measure one row.
|
|
37
|
+
rows.forEach((r) => (r.style.display = "block"));
|
|
38
|
+
if (window.getComputedStyle(el).display === "inline")
|
|
39
|
+
el.style.display = "inline-block";
|
|
40
|
+
const inner = document.createElement("div");
|
|
41
|
+
inner.className = "ak-roll__inner";
|
|
42
|
+
el.insertBefore(inner, rows[0]);
|
|
43
|
+
rows.forEach((r) => inner.appendChild(r));
|
|
44
|
+
const clone = rows[0].cloneNode(true);
|
|
45
|
+
clone.setAttribute("data-ak-roll-clone", "");
|
|
46
|
+
inner.appendChild(clone);
|
|
47
|
+
const rowH = rows[0].getBoundingClientRect().height;
|
|
48
|
+
el.style.overflow = "hidden";
|
|
49
|
+
el.style.height = `${rowH}px`;
|
|
50
|
+
el.dataset.akRoll = String(rows.length);
|
|
51
|
+
let timeline = null;
|
|
52
|
+
if (rowH > 0) {
|
|
53
|
+
const n = rows.length;
|
|
54
|
+
const hold = Math.max(0.01, interval - duration);
|
|
55
|
+
const tl = gsap.timeline({ repeat: -1, defaults: { ease } });
|
|
56
|
+
if (direction === "up") {
|
|
57
|
+
gsap.set(inner, { y: 0 });
|
|
58
|
+
for (let i = 1; i <= n; i++) {
|
|
59
|
+
tl.to(inner, { y: -i * rowH, duration });
|
|
60
|
+
tl.to({}, { duration: hold });
|
|
61
|
+
}
|
|
62
|
+
tl.set(inner, { y: 0 });
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
gsap.set(inner, { y: -n * rowH });
|
|
66
|
+
for (let i = n - 1; i >= 0; i--) {
|
|
67
|
+
tl.to(inner, { y: -i * rowH, duration });
|
|
68
|
+
tl.to({}, { duration: hold });
|
|
69
|
+
}
|
|
70
|
+
tl.set(inner, { y: -n * rowH });
|
|
71
|
+
}
|
|
72
|
+
timeline = tl;
|
|
73
|
+
}
|
|
74
|
+
setups.push({ el, inner, rows, snapshots, timeline });
|
|
75
|
+
// Clone lives inside inner — remember it for teardown via the attribute.
|
|
76
|
+
});
|
|
77
|
+
return () => {
|
|
78
|
+
setups.forEach(({ el, inner, rows, snapshots, timeline }) => {
|
|
79
|
+
timeline?.kill();
|
|
80
|
+
// Unwrap: rows home first, then drop the (now empty) inner box.
|
|
81
|
+
rows.forEach((r) => el.appendChild(r));
|
|
82
|
+
inner.remove();
|
|
83
|
+
killTweens(inner);
|
|
84
|
+
snapshots.forEach(({ el: node, cssText }) => (node.style.cssText = cssText));
|
|
85
|
+
delete el.dataset.akRoll;
|
|
86
|
+
});
|
|
87
|
+
setups.length = 0;
|
|
88
|
+
};
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
//# sourceMappingURL=roll-text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"roll-text.js","sourceRoot":"","sources":["../../src/effects/roll-text.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
|
|
2
|
+
export interface ScrambleTextOptions extends CommonOptions {
|
|
3
|
+
/** "scroll" plays on enter, "immediate" now, "hover" on pointerenter. @default "scroll" */
|
|
4
|
+
mode?: "scroll" | "immediate" | "hover";
|
|
5
|
+
/** Glyphs each letter churns through. @default "abcdefghijklmnopqrstuvwxyz" */
|
|
6
|
+
charset?: string;
|
|
7
|
+
/** Seconds each character spends scrambling. @default 0.18 */
|
|
8
|
+
durationPerChar?: number;
|
|
9
|
+
/** Delay between character starts, seconds. @default 0.04 */
|
|
10
|
+
stagger?: number;
|
|
11
|
+
/** Delay before the timeline starts, seconds. @default 0 */
|
|
12
|
+
delay?: number;
|
|
13
|
+
/** ScrollTrigger start position (mode: "scroll"). @default "top 80%" */
|
|
14
|
+
start?: string;
|
|
15
|
+
}
|
|
16
|
+
export declare function scrambleText(target: TargetLike, options?: ScrambleTextOptions): Destroy;
|
|
17
|
+
//# sourceMappingURL=scramble-text.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scramble-text.d.ts","sourceRoot":"","sources":["../../src/effects/scramble-text.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,2FAA2F;IAC3F,IAAI,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,OAAO,CAAC;IACxC,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE,mBAAwB,GAAG,OAAO,CAwF3F"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Scramble text — the decode / cipher reveal.
|
|
3
|
+
*
|
|
4
|
+
* Each character churns through the charset and settles on its final glyph,
|
|
5
|
+
* left to right; letters scramble, everything else (digits, punctuation,
|
|
6
|
+
* spaces) stays put, and case is preserved. Three triggers:
|
|
7
|
+
*
|
|
8
|
+
* mode: "scroll" → plays once when the element enters the viewport.
|
|
9
|
+
* mode: "immediate" → plays at once (above the fold).
|
|
10
|
+
* mode: "hover" → re-scrambles on every pointer enter.
|
|
11
|
+
*
|
|
12
|
+
* The element's textContent is restored exactly on destroy.
|
|
13
|
+
*/
|
|
14
|
+
import { gsap, ScrollTrigger, initGSAP } from "../core/gsap.js";
|
|
15
|
+
import { guard } from "../core/guard.js";
|
|
16
|
+
import { toArray } from "../core/util.js";
|
|
17
|
+
export function scrambleText(target, options = {}) {
|
|
18
|
+
initGSAP();
|
|
19
|
+
const { mode = "scroll", charset = "abcdefghijklmnopqrstuvwxyz", durationPerChar = 0.18, stagger = 0.04, delay = 0, start = "top 80%", } = options;
|
|
20
|
+
const els = toArray(target);
|
|
21
|
+
if (!els.length)
|
|
22
|
+
return () => { };
|
|
23
|
+
return guard(options, () => {
|
|
24
|
+
const originals = new Map();
|
|
25
|
+
const timelines = [];
|
|
26
|
+
const cleanups = [];
|
|
27
|
+
/** Fill a timeline with one eased scramble tween per letter. */
|
|
28
|
+
const fill = (el, original, tl) => {
|
|
29
|
+
Array.from(original).forEach((ch, i) => {
|
|
30
|
+
if (!/[a-z]/i.test(ch))
|
|
31
|
+
return; // digits / punctuation / spaces stay put
|
|
32
|
+
const upper = ch === ch.toUpperCase();
|
|
33
|
+
const state = { p: 0 };
|
|
34
|
+
tl.to(state, {
|
|
35
|
+
p: 1,
|
|
36
|
+
duration: durationPerChar,
|
|
37
|
+
ease: "power3.out",
|
|
38
|
+
onUpdate: () => {
|
|
39
|
+
if (state.p >= 1)
|
|
40
|
+
return;
|
|
41
|
+
const glyph = charset[Math.floor(Math.random() * charset.length)];
|
|
42
|
+
el.textContent =
|
|
43
|
+
original.slice(0, i) + (upper ? glyph.toUpperCase() : glyph) + original.slice(i + 1);
|
|
44
|
+
},
|
|
45
|
+
}, i * stagger);
|
|
46
|
+
});
|
|
47
|
+
tl.eventCallback("onComplete", () => (el.textContent = original));
|
|
48
|
+
};
|
|
49
|
+
els.forEach((el) => {
|
|
50
|
+
const original = el.textContent ?? "";
|
|
51
|
+
if (!original)
|
|
52
|
+
return;
|
|
53
|
+
originals.set(el, original);
|
|
54
|
+
el.dataset.akScramble = "true";
|
|
55
|
+
if (mode === "scroll") {
|
|
56
|
+
const tl = gsap.timeline({
|
|
57
|
+
delay,
|
|
58
|
+
scrollTrigger: { trigger: el, start, once: true },
|
|
59
|
+
});
|
|
60
|
+
fill(el, original, tl);
|
|
61
|
+
timelines.push(tl);
|
|
62
|
+
}
|
|
63
|
+
else if (mode === "immediate") {
|
|
64
|
+
const tl = gsap.timeline({ delay });
|
|
65
|
+
fill(el, original, tl);
|
|
66
|
+
timelines.push(tl);
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
const tl = gsap.timeline({ delay, paused: true });
|
|
70
|
+
fill(el, original, tl);
|
|
71
|
+
timelines.push(tl);
|
|
72
|
+
const onEnter = () => tl.restart();
|
|
73
|
+
el.addEventListener("pointerenter", onEnter);
|
|
74
|
+
cleanups.push(() => el.removeEventListener("pointerenter", onEnter));
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
ScrollTrigger.refresh();
|
|
78
|
+
return () => {
|
|
79
|
+
cleanups.forEach((fn) => fn());
|
|
80
|
+
timelines.forEach((tl) => {
|
|
81
|
+
tl.scrollTrigger?.kill();
|
|
82
|
+
tl.kill();
|
|
83
|
+
});
|
|
84
|
+
originals.forEach((text, el) => {
|
|
85
|
+
el.textContent = text;
|
|
86
|
+
delete el.dataset.akScramble;
|
|
87
|
+
});
|
|
88
|
+
originals.clear();
|
|
89
|
+
ScrollTrigger.refresh();
|
|
90
|
+
};
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
//# sourceMappingURL=scramble-text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scramble-text.js","sourceRoot":"","sources":["../../src/effects/scramble-text.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
|
|
2
|
+
export interface UnfoldRevealOptions extends CommonOptions {
|
|
3
|
+
/** Which axis grows open. @default "y" */
|
|
4
|
+
axis?: "y" | "x";
|
|
5
|
+
/** transformOrigin — defaults to "top" (y) / "left" (x). */
|
|
6
|
+
origin?: string;
|
|
7
|
+
/** Animation duration, seconds. @default 0.7 */
|
|
8
|
+
duration?: number;
|
|
9
|
+
/** GSAP ease. @default "power3.out" */
|
|
10
|
+
ease?: string;
|
|
11
|
+
/** Stagger between targets, seconds. @default 0.08 */
|
|
12
|
+
stagger?: number;
|
|
13
|
+
/** Delay before playing, seconds. @default 0 */
|
|
14
|
+
delay?: number;
|
|
15
|
+
/** "scroll" plays on enter, "immediate" plays at once. @default "scroll" */
|
|
16
|
+
mode?: "scroll" | "immediate";
|
|
17
|
+
/** ScrollTrigger start position. @default "top 85%" */
|
|
18
|
+
start?: string;
|
|
19
|
+
/** Re-unfold when leaving / re-entering the viewport. @default false */
|
|
20
|
+
replay?: boolean;
|
|
21
|
+
}
|
|
22
|
+
export declare function unfoldReveal(target: TargetLike, options?: UnfoldRevealOptions): Destroy;
|
|
23
|
+
//# sourceMappingURL=unfold-reveal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"unfold-reveal.d.ts","sourceRoot":"","sources":["../../src/effects/unfold-reveal.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,0CAA0C;IAC1C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,IAAI,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC9B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE,mBAAwB,GAAG,OAAO,CAoD3F"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Unfold reveal — blocks that grow open from an edge.
|
|
3
|
+
*
|
|
4
|
+
* `scaleY: 0 → 1` from the top (or bottom) edge for a vertical unfold,
|
|
5
|
+
* `scaleX: 0 → 1` from the left for a horizontal one — the staggered block
|
|
6
|
+
* grow-in used for labels, headings and buttons as a section enters.
|
|
7
|
+
*
|
|
8
|
+
* unfoldReveal("[data-unfold]", { axis: "y", origin: "top" });
|
|
9
|
+
* unfoldReveal("[data-unfold-x]", { axis: "x", origin: "left" });
|
|
10
|
+
*
|
|
11
|
+
* Targets stagger together off the first match's trigger. destroy() kills the
|
|
12
|
+
* tween and clears the transform, so elements rest exactly as authored.
|
|
13
|
+
*/
|
|
14
|
+
import { gsap, ScrollTrigger, initGSAP } from "../core/gsap.js";
|
|
15
|
+
import { guard } from "../core/guard.js";
|
|
16
|
+
import { toArray } from "../core/util.js";
|
|
17
|
+
export function unfoldReveal(target, options = {}) {
|
|
18
|
+
initGSAP();
|
|
19
|
+
const { axis = "y", origin, duration = 0.7, ease = "power3.out", stagger = 0.08, delay = 0, mode = "scroll", start = "top 85%", replay = false, } = options;
|
|
20
|
+
const els = toArray(target);
|
|
21
|
+
if (!els.length)
|
|
22
|
+
return () => { };
|
|
23
|
+
return guard(options, run);
|
|
24
|
+
function run() {
|
|
25
|
+
const prop = axis === "x" ? "scaleX" : "scaleY";
|
|
26
|
+
const from = origin ?? (axis === "x" ? "left" : "top");
|
|
27
|
+
gsap.set(els, { [prop]: 0, transformOrigin: from });
|
|
28
|
+
const vars = {
|
|
29
|
+
[prop]: 1,
|
|
30
|
+
duration,
|
|
31
|
+
ease,
|
|
32
|
+
stagger,
|
|
33
|
+
delay,
|
|
34
|
+
overwrite: "auto",
|
|
35
|
+
};
|
|
36
|
+
if (mode === "scroll") {
|
|
37
|
+
vars.scrollTrigger = {
|
|
38
|
+
trigger: els[0],
|
|
39
|
+
start,
|
|
40
|
+
toggleActions: replay ? "play reverse play reverse" : "play none none none",
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
const tween = gsap.to(els, vars);
|
|
44
|
+
ScrollTrigger.refresh();
|
|
45
|
+
return () => {
|
|
46
|
+
tween.scrollTrigger?.kill();
|
|
47
|
+
tween.kill();
|
|
48
|
+
gsap.set(els, { clearProps: "transform,transformOrigin" });
|
|
49
|
+
ScrollTrigger.refresh();
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
//# sourceMappingURL=unfold-reveal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"unfold-reveal.js","sourceRoot":"","sources":["../../src/effects/unfold-reveal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAwB1C,MAAM,UAAU,YAAY,CAAC,MAAkB,EAAE,UAA+B,EAAE;IAChF,QAAQ,EAAE,CAAC;IAEX,MAAM,EACJ,IAAI,GAAG,GAAG,EACV,MAAM,EACN,QAAQ,GAAG,GAAG,EACd,IAAI,GAAG,YAAY,EACnB,OAAO,GAAG,IAAI,EACd,KAAK,GAAG,CAAC,EACT,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,SAAS,EACjB,MAAM,GAAG,KAAK,GACf,GAAG,OAAO,CAAC;IAEZ,MAAM,GAAG,GAAG,OAAO,CAAc,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,GAAG,CAAC,MAAM;QAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAEjC,OAAO,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IAE3B,SAAS,GAAG;QACV,MAAM,IAAI,GAAG,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;QAChD,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAEvD,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC,CAAC;QAEpD,MAAM,IAAI,GAAmB;YAC3B,CAAC,IAAI,CAAC,EAAE,CAAC;YACT,QAAQ;YACR,IAAI;YACJ,OAAO;YACP,KAAK;YACL,SAAS,EAAE,MAAM;SAClB,CAAC;QACF,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;YACtB,IAAI,CAAC,aAAa,GAAG;gBACnB,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;gBACf,KAAK;gBACL,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,qBAAqB;aAC5E,CAAC;QACJ,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QACjC,aAAa,CAAC,OAAO,EAAE,CAAC;QAExB,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,aAAa,EAAE,IAAI,EAAE,CAAC;YAC5B,KAAK,CAAC,IAAI,EAAE,CAAC;YACb,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,UAAU,EAAE,2BAA2B,EAAE,CAAC,CAAC;YAC3D,aAAa,CAAC,OAAO,EAAE,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC;AACH,CAAC"}
|