@cosmictraveler002/anim-kit 1.0.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.
Files changed (127) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +1033 -0
  3. package/dist/anim-kit.standalone.js +117 -0
  4. package/dist/anim-kit.standalone.js.map +1 -0
  5. package/dist/core/gsap.d.ts +44 -0
  6. package/dist/core/gsap.d.ts.map +1 -0
  7. package/dist/core/gsap.js +71 -0
  8. package/dist/core/gsap.js.map +1 -0
  9. package/dist/core/guard.d.ts +3 -0
  10. package/dist/core/guard.d.ts.map +1 -0
  11. package/dist/core/guard.js +18 -0
  12. package/dist/core/guard.js.map +1 -0
  13. package/dist/core/smooth-scroll.d.ts +45 -0
  14. package/dist/core/smooth-scroll.d.ts.map +1 -0
  15. package/dist/core/smooth-scroll.js +98 -0
  16. package/dist/core/smooth-scroll.js.map +1 -0
  17. package/dist/core/split.d.ts +24 -0
  18. package/dist/core/split.d.ts.map +1 -0
  19. package/dist/core/split.js +117 -0
  20. package/dist/core/split.js.map +1 -0
  21. package/dist/core/types.d.ts +21 -0
  22. package/dist/core/types.d.ts.map +1 -0
  23. package/dist/core/types.js +9 -0
  24. package/dist/core/types.js.map +1 -0
  25. package/dist/core/util.d.ts +19 -0
  26. package/dist/core/util.d.ts.map +1 -0
  27. package/dist/core/util.js +73 -0
  28. package/dist/core/util.js.map +1 -0
  29. package/dist/effects/counter.d.ts +52 -0
  30. package/dist/effects/counter.d.ts.map +1 -0
  31. package/dist/effects/counter.js +106 -0
  32. package/dist/effects/counter.js.map +1 -0
  33. package/dist/effects/cursor-follower.d.ts +19 -0
  34. package/dist/effects/cursor-follower.d.ts.map +1 -0
  35. package/dist/effects/cursor-follower.js +76 -0
  36. package/dist/effects/cursor-follower.js.map +1 -0
  37. package/dist/effects/drag-strip.d.ts +17 -0
  38. package/dist/effects/drag-strip.d.ts.map +1 -0
  39. package/dist/effects/drag-strip.js +186 -0
  40. package/dist/effects/drag-strip.js.map +1 -0
  41. package/dist/effects/hero-shrink.d.ts +15 -0
  42. package/dist/effects/hero-shrink.d.ts.map +1 -0
  43. package/dist/effects/hero-shrink.js +40 -0
  44. package/dist/effects/hero-shrink.js.map +1 -0
  45. package/dist/effects/horizontal-scroll.d.ts +17 -0
  46. package/dist/effects/horizontal-scroll.d.ts.map +1 -0
  47. package/dist/effects/horizontal-scroll.js +87 -0
  48. package/dist/effects/horizontal-scroll.js.map +1 -0
  49. package/dist/effects/line-reveal.d.ts +34 -0
  50. package/dist/effects/line-reveal.d.ts.map +1 -0
  51. package/dist/effects/line-reveal.js +71 -0
  52. package/dist/effects/line-reveal.js.map +1 -0
  53. package/dist/effects/liquid-button.d.ts +19 -0
  54. package/dist/effects/liquid-button.d.ts.map +1 -0
  55. package/dist/effects/liquid-button.js +52 -0
  56. package/dist/effects/liquid-button.js.map +1 -0
  57. package/dist/effects/logo-reveal.d.ts +15 -0
  58. package/dist/effects/logo-reveal.d.ts.map +1 -0
  59. package/dist/effects/logo-reveal.js +49 -0
  60. package/dist/effects/logo-reveal.js.map +1 -0
  61. package/dist/effects/marquee.d.ts +13 -0
  62. package/dist/effects/marquee.d.ts.map +1 -0
  63. package/dist/effects/marquee.js +143 -0
  64. package/dist/effects/marquee.js.map +1 -0
  65. package/dist/effects/mask-reveal.d.ts +36 -0
  66. package/dist/effects/mask-reveal.d.ts.map +1 -0
  67. package/dist/effects/mask-reveal.js +102 -0
  68. package/dist/effects/mask-reveal.js.map +1 -0
  69. package/dist/effects/menu-overlay.d.ts +32 -0
  70. package/dist/effects/menu-overlay.d.ts.map +1 -0
  71. package/dist/effects/menu-overlay.js +150 -0
  72. package/dist/effects/menu-overlay.js.map +1 -0
  73. package/dist/effects/nav-hide.d.ts +13 -0
  74. package/dist/effects/nav-hide.d.ts.map +1 -0
  75. package/dist/effects/nav-hide.js +68 -0
  76. package/dist/effects/nav-hide.js.map +1 -0
  77. package/dist/effects/parallax.d.ts +11 -0
  78. package/dist/effects/parallax.d.ts.map +1 -0
  79. package/dist/effects/parallax.js +48 -0
  80. package/dist/effects/parallax.js.map +1 -0
  81. package/dist/effects/preloader.d.ts +33 -0
  82. package/dist/effects/preloader.d.ts.map +1 -0
  83. package/dist/effects/preloader.js +128 -0
  84. package/dist/effects/preloader.js.map +1 -0
  85. package/dist/effects/scatter-text.d.ts +20 -0
  86. package/dist/effects/scatter-text.d.ts.map +1 -0
  87. package/dist/effects/scatter-text.js +87 -0
  88. package/dist/effects/scatter-text.js.map +1 -0
  89. package/dist/effects/stacked-cards.d.ts +24 -0
  90. package/dist/effects/stacked-cards.d.ts.map +1 -0
  91. package/dist/effects/stacked-cards.js +106 -0
  92. package/dist/effects/stacked-cards.js.map +1 -0
  93. package/dist/effects/theme-reveal.d.ts +35 -0
  94. package/dist/effects/theme-reveal.d.ts.map +1 -0
  95. package/dist/effects/theme-reveal.js +93 -0
  96. package/dist/effects/theme-reveal.js.map +1 -0
  97. package/dist/index.d.ts +77 -0
  98. package/dist/index.d.ts.map +1 -0
  99. package/dist/index.js +61 -0
  100. package/dist/index.js.map +1 -0
  101. package/dist/styles/anim-kit.css +361 -0
  102. package/package.json +80 -0
  103. package/src/core/gsap.ts +79 -0
  104. package/src/core/guard.ts +18 -0
  105. package/src/core/smooth-scroll.ts +143 -0
  106. package/src/core/split.ts +145 -0
  107. package/src/core/types.ts +30 -0
  108. package/src/core/util.ts +79 -0
  109. package/src/effects/counter.ts +192 -0
  110. package/src/effects/cursor-follower.ts +104 -0
  111. package/src/effects/drag-strip.ts +228 -0
  112. package/src/effects/hero-shrink.ts +69 -0
  113. package/src/effects/horizontal-scroll.ts +123 -0
  114. package/src/effects/line-reveal.ts +109 -0
  115. package/src/effects/liquid-button.ts +75 -0
  116. package/src/effects/logo-reveal.ts +76 -0
  117. package/src/effects/marquee.ts +157 -0
  118. package/src/effects/mask-reveal.ts +148 -0
  119. package/src/effects/menu-overlay.ts +218 -0
  120. package/src/effects/nav-hide.ts +90 -0
  121. package/src/effects/parallax.ts +68 -0
  122. package/src/effects/preloader.ts +187 -0
  123. package/src/effects/scatter-text.ts +129 -0
  124. package/src/effects/stacked-cards.ts +154 -0
  125. package/src/effects/theme-reveal.ts +144 -0
  126. package/src/index.ts +98 -0
  127. package/src/styles/anim-kit.css +361 -0
@@ -0,0 +1,20 @@
1
+ import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
2
+ export interface ScatterTextOptions extends CommonOptions {
3
+ /** Element that holds the text and gets translated on X. */
4
+ line?: TargetLike;
5
+ /** Element pinned while the band scrolls. */
6
+ pinTarget?: TargetLike;
7
+ /** Split by "chars" (default) or "words". @default "chars" */
8
+ granularity?: "chars" | "words";
9
+ /** Max random vertical offset, in percent of the line height. @default 60 */
10
+ scatterY?: number;
11
+ /** Max random rotation, degrees. @default 15 */
12
+ scatterRotation?: number;
13
+ /** Scrub smoothing. @default 0.5 */
14
+ scrub?: number;
15
+ /** Per-character settle start/end as a fraction of the container. */
16
+ settleStart?: string;
17
+ settleEnd?: string;
18
+ }
19
+ export declare function scatterText(target: TargetLike, options?: ScatterTextOptions): Destroy;
20
+ //# sourceMappingURL=scatter-text.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scatter-text.d.ts","sourceRoot":"","sources":["../../src/effects/scatter-text.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,4DAA4D;IAC5D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAChC,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CACzB,MAAM,EAAE,UAAU,EAClB,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CA8FT"}
@@ -0,0 +1,87 @@
1
+ /**
2
+ * Scatter text — the giant "So, are you ready to Stand out?" band.
3
+ *
4
+ * The line is split into per-character spans, then pinned and scrolled
5
+ * horizontally. Every character carries a random initial `yPercent` (±60) and
6
+ * `rotation` (±15) and settles to zero as it crosses the viewport, driven by
7
+ * `containerAnimation` so the settle is tied to the *horizontal* scroll.
8
+ */
9
+ import { gsap, ScrollTrigger, initGSAP } from "../core/gsap.js";
10
+ import { guard } from "../core/guard.js";
11
+ import { one } from "../core/util.js";
12
+ export function scatterText(target, options = {}) {
13
+ initGSAP();
14
+ const wrap = one(target);
15
+ const line = (options.line ? one(options.line) : null) ?? wrap;
16
+ if (!wrap || !line)
17
+ return () => { };
18
+ const pinTarget = (options.pinTarget ? one(options.pinTarget) : null) ??
19
+ (wrap.querySelector("[data-pin]") ?? wrap);
20
+ const { granularity = "chars", scatterY = 60, scatterRotation = 15, scrub = 0.5, settleStart = "left 100%", settleEnd = "left 15%", } = options;
21
+ return guard(options, () => {
22
+ const tweens = [];
23
+ const triggers = [];
24
+ const text = line.textContent || "";
25
+ const build = () => {
26
+ // Split manually: spaces need a fixed-size slot so the band keeps flowing.
27
+ line.innerHTML = text
28
+ .split("")
29
+ .map((ch) => ch === " "
30
+ ? `<span class="ak-space"> </span>`
31
+ : granularity === "chars"
32
+ ? `<span class="ak-char">${ch}</span>`
33
+ : `<span class="ak-char">${ch}</span>`)
34
+ .join("");
35
+ const travel = () => Math.max(0, line.scrollWidth - window.innerWidth);
36
+ const master = gsap.to(line, {
37
+ x: () => -travel(),
38
+ ease: "none",
39
+ scrollTrigger: {
40
+ trigger: wrap,
41
+ pin: pinTarget,
42
+ scrub,
43
+ end: () => "+=" + travel(),
44
+ invalidateOnRefresh: true,
45
+ anticipatePin: 1,
46
+ },
47
+ });
48
+ tweens.push(master);
49
+ if (master.scrollTrigger)
50
+ triggers.push(master.scrollTrigger);
51
+ const pieces = Array.from(line.querySelectorAll(".ak-char"));
52
+ pieces.forEach((piece) => {
53
+ const y = (Math.random() - 0.5) * scatterY;
54
+ const r = (Math.random() - 0.5) * scatterRotation;
55
+ const t = gsap.fromTo(piece, { yPercent: y, rotation: r }, {
56
+ yPercent: 0,
57
+ rotation: 0,
58
+ ease: "power2.out",
59
+ scrollTrigger: {
60
+ trigger: piece,
61
+ containerAnimation: master,
62
+ start: settleStart,
63
+ end: settleEnd,
64
+ scrub: 0.5,
65
+ },
66
+ });
67
+ tweens.push(t);
68
+ if (t.scrollTrigger)
69
+ triggers.push(t.scrollTrigger);
70
+ });
71
+ ScrollTrigger.refresh();
72
+ };
73
+ // Measure only after webfonts land, or the travel distance is wrong.
74
+ if (document.fonts?.ready)
75
+ document.fonts.ready.then(build).catch(build);
76
+ else
77
+ build();
78
+ return () => {
79
+ triggers.forEach((t) => t.kill());
80
+ tweens.forEach((t) => t.kill());
81
+ line.textContent = text;
82
+ gsap.set(line, { clearProps: "transform" });
83
+ ScrollTrigger.refresh();
84
+ };
85
+ });
86
+ }
87
+ //# sourceMappingURL=scatter-text.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scatter-text.js","sourceRoot":"","sources":["../../src/effects/scatter-text.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,24 @@
1
+ import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
2
+ export interface StackedCardsOptions extends CommonOptions {
3
+ /** Tall scroll wrapper (trigger). */
4
+ wrap?: TargetLike;
5
+ /** Element that stays on screen. Defaults to `wrap`'s first child. */
6
+ viewport?: TargetLike;
7
+ /** Card selector scoped to the viewport. @default ".ak-card" */
8
+ card?: string;
9
+ /** Scrub smoothing. @default 0.5 */
10
+ scrub?: number;
11
+ /** Delay between cards, seconds. @default 0.12 */
12
+ stagger?: number;
13
+ /** The cascading ease. @default EASES.cardStack */
14
+ ease?: string;
15
+ }
16
+ export declare function stackedCards(target: TargetLike, options?: StackedCardsOptions): Destroy;
17
+ /**
18
+ * Variant used when the sticky viewport is a sibling rather than a child —
19
+ * pins `viewport` with `pinSpacing:false` over `wrap`'s scroll length.
20
+ */
21
+ export declare function stackedCardsPinned(wrapTarget: TargetLike, options?: StackedCardsOptions & {
22
+ viewport: TargetLike;
23
+ }): Destroy;
24
+ //# sourceMappingURL=stacked-cards.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"stacked-cards.d.ts","sourceRoot":"","sources":["../../src/effects/stacked-cards.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,YAAY,CAC1B,MAAM,EAAE,UAAU,EAClB,OAAO,GAAE,mBAAwB,GAChC,OAAO,CAkDT;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,UAAU,EAAE,UAAU,EACtB,OAAO,GAAE,mBAAmB,GAAG;IAAE,QAAQ,EAAE,UAAU,CAAA;CAAqB,GACzE,OAAO,CAyDT"}
@@ -0,0 +1,106 @@
1
+ /**
2
+ * Stacked cards — the pinned "services" deck.
3
+ *
4
+ * A tall wrapper scrolls normally while a sticky viewport holds still; cards
5
+ * inside are pre-offset below centre (`yPercent:50, y:innerHeight/2`) and a
6
+ * scrubbed timeline marches them up past centre with a stagger and the
7
+ * studio's `ak-card-stack` bezier.
8
+ *
9
+ * DOM contract:
10
+ * <div class="ak-stack-wrap"> ← trigger, height e.g. 500vh
11
+ * <div class="ak-stack-viewport">← pinned (pinSpacing:false)
12
+ * <div class="ak-stack-cards"> ← the row of cards
13
+ * …cards…
14
+ */
15
+ import { gsap, ScrollTrigger, initGSAP, EASES } from "../core/gsap.js";
16
+ import { guard } from "../core/guard.js";
17
+ import { one, toArray } from "../core/util.js";
18
+ export function stackedCards(target, options = {}) {
19
+ initGSAP();
20
+ const wrap = one(target);
21
+ if (!wrap)
22
+ return () => { };
23
+ const viewport = (options.viewport ? one(options.viewport) : null) ??
24
+ wrap.firstElementChild ??
25
+ wrap;
26
+ const { scrub = 0.5, stagger = 0.12, card = ".ak-card", ease = EASES.cardStack } = options;
27
+ return guard(options, () => {
28
+ const cards = toArray(card, viewport);
29
+ if (!cards.length)
30
+ return () => { };
31
+ const offset = () => window.innerHeight / 2;
32
+ // Cards start stacked below centre…
33
+ gsap.set(cards, { yPercent: 50, y: offset() });
34
+ const tl = gsap.timeline({
35
+ scrollTrigger: {
36
+ trigger: wrap,
37
+ start: "top top",
38
+ end: "bottom bottom",
39
+ scrub,
40
+ invalidateOnRefresh: true,
41
+ },
42
+ });
43
+ // …and are marched up past centre, one after another.
44
+ tl.to(cards, { yPercent: -50, y: () => -offset(), duration: 1, stagger, ease }, "step");
45
+ const st = tl.scrollTrigger;
46
+ ScrollTrigger.refresh();
47
+ return () => {
48
+ st?.kill();
49
+ tl.kill();
50
+ gsap.set(cards, { clearProps: "all" });
51
+ ScrollTrigger.refresh();
52
+ };
53
+ });
54
+ }
55
+ /**
56
+ * Variant used when the sticky viewport is a sibling rather than a child —
57
+ * pins `viewport` with `pinSpacing:false` over `wrap`'s scroll length.
58
+ */
59
+ export function stackedCardsPinned(wrapTarget, options = { viewport: "" }) {
60
+ initGSAP();
61
+ const wrap = one(wrapTarget);
62
+ const viewport = one(options.viewport);
63
+ if (!wrap || !viewport)
64
+ return () => { };
65
+ const { scrub = true, stagger = 0.1, card = ".ak-card", ease = EASES.cardStack } = options;
66
+ return guard(options, () => {
67
+ const cards = toArray(card, viewport);
68
+ if (!cards.length)
69
+ return () => { };
70
+ gsap.set(cards, { yPercent: 50, y: window.innerHeight / 2 });
71
+ const pin = ScrollTrigger.create({
72
+ trigger: wrap,
73
+ start: "top top",
74
+ end: "bottom bottom",
75
+ pin: viewport,
76
+ pinSpacing: false,
77
+ anticipatePin: 1,
78
+ invalidateOnRefresh: true,
79
+ });
80
+ const tl = gsap.timeline({
81
+ scrollTrigger: {
82
+ trigger: wrap,
83
+ start: "top top",
84
+ end: "bottom bottom",
85
+ scrub,
86
+ invalidateOnRefresh: true,
87
+ },
88
+ });
89
+ tl.to(cards, {
90
+ yPercent: -50,
91
+ y: () => -window.innerHeight / 2,
92
+ duration: 1,
93
+ stagger,
94
+ ease,
95
+ }, 0);
96
+ ScrollTrigger.refresh();
97
+ return () => {
98
+ pin.kill();
99
+ tl.scrollTrigger?.kill();
100
+ tl.kill();
101
+ gsap.set(cards, { clearProps: "all" });
102
+ ScrollTrigger.refresh();
103
+ };
104
+ });
105
+ }
106
+ //# sourceMappingURL=stacked-cards.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"stacked-cards.js","sourceRoot":"","sources":["../../src/effects/stacked-cards.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,35 @@
1
+ /**
2
+ * Theme reveal — circular clip-path wipe between light and dark.
3
+ *
4
+ * Uses the View Transitions API when available: `document.startViewTransition()`
5
+ * swaps the theme inside the callback while injected keyframes animate
6
+ * `::view-transition-new(root)` from `circle(0%)` to `circle(100%)`, centred on
7
+ * the button that was clicked. Falls back to an instant swap.
8
+ *
9
+ * const theme = themeReveal({ toggle: "#theme-btn" });
10
+ * theme.set("dark"); // wipes to dark
11
+ * theme.toggle(); // flips and wipes
12
+ */
13
+ import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
14
+ export type ThemeName = "light" | "dark";
15
+ export interface ThemeRevealOptions extends CommonOptions {
16
+ /** Click target that triggers the wipe (usually the toggle button). */
17
+ toggle?: TargetLike;
18
+ /** Storage key for persistence. @default "ak-theme" */
19
+ storageKey?: string;
20
+ /** Initial theme; defaults to whatever is already on <html>. */
21
+ initial?: ThemeName;
22
+ /** Circle origin, e.g. "50% 50%" or an element to centre on. */
23
+ origin?: string | TargetLike;
24
+ /** Animation duration, seconds. @default 1 */
25
+ duration?: number;
26
+ onChange?: (theme: ThemeName) => void;
27
+ }
28
+ export interface ThemeRevealHandle {
29
+ set: (theme: ThemeName) => void;
30
+ toggle: () => void;
31
+ current: () => ThemeName;
32
+ destroy: Destroy;
33
+ }
34
+ export declare function themeReveal(options?: ThemeRevealOptions): ThemeRevealHandle;
35
+ //# sourceMappingURL=theme-reveal.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme-reveal.d.ts","sourceRoot":"","sources":["../../src/effects/theme-reveal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG3E,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,uEAAuE;IACvE,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gEAAgE;IAChE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,SAAS,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;CAClB;AAID,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,iBAAiB,CAuG/E"}
@@ -0,0 +1,93 @@
1
+ import { one } from "../core/util.js";
2
+ const STYLE_ID = "ak-theme-reveal";
3
+ export function themeReveal(options = {}) {
4
+ const { toggle, storageKey = "ak-theme", origin = "50% 50%", duration = 1, onChange, } = options;
5
+ const root = document.documentElement;
6
+ const btn = toggle ? one(toggle) : null;
7
+ const stored = (() => {
8
+ try {
9
+ return sessionStorage.getItem(storageKey);
10
+ }
11
+ catch {
12
+ return null;
13
+ }
14
+ })();
15
+ let current = options.initial ??
16
+ stored ??
17
+ (root.classList.contains("dark") ? "dark" : "light");
18
+ apply(current, false);
19
+ const onClick = () => set(current === "dark" ? "light" : "dark");
20
+ if (btn)
21
+ btn.addEventListener("click", onClick);
22
+ function resolveOrigin() {
23
+ if (typeof origin === "string")
24
+ return origin;
25
+ const el = origin ? one(origin) : btn;
26
+ if (!el)
27
+ return "50% 50%";
28
+ const r = el.getBoundingClientRect();
29
+ return `${Math.round(r.left + r.width / 2)}px ${Math.round(r.top + r.height / 2)}px`;
30
+ }
31
+ function injectStyles(o) {
32
+ let style = document.getElementById(STYLE_ID);
33
+ if (!style) {
34
+ style = document.createElement("style");
35
+ style.id = STYLE_ID;
36
+ document.head.appendChild(style);
37
+ }
38
+ const t = `${duration}s`;
39
+ style.textContent = `
40
+ @supports (view-transition-name: root) {
41
+ ::view-transition-group(root) { animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }
42
+ ::view-transition-old(root),
43
+ .dark::view-transition-old(root) { animation: none; z-index: -1; }
44
+ ::view-transition-new(root) {
45
+ animation: ak-theme-reveal ${t} cubic-bezier(0.76, 0, 0.24, 1);
46
+ clip-path: circle(0% at ${o});
47
+ }
48
+ @keyframes ak-theme-reveal {
49
+ from { clip-path: circle(0% at ${o}); }
50
+ to { clip-path: circle(142% at ${o}); }
51
+ }
52
+ }`;
53
+ }
54
+ function apply(theme, animate) {
55
+ const commit = () => {
56
+ root.classList.toggle("dark", theme === "dark");
57
+ root.style.colorScheme = theme;
58
+ current = theme;
59
+ try {
60
+ sessionStorage.setItem(storageKey, theme);
61
+ }
62
+ catch {
63
+ /* private mode */
64
+ }
65
+ onChange?.(theme);
66
+ };
67
+ const supported = animate && !options.force && typeof document.startViewTransition === "function";
68
+ if (!supported) {
69
+ commit();
70
+ return;
71
+ }
72
+ injectStyles(resolveOrigin());
73
+ // startViewTransition returns a promise; ignore rejection on rapid toggles.
74
+ void document.startViewTransition(commit);
75
+ }
76
+ return {
77
+ set: (theme) => {
78
+ if (theme !== current)
79
+ set(theme);
80
+ },
81
+ toggle: () => set(current === "dark" ? "light" : "dark"),
82
+ current: () => current,
83
+ destroy: () => {
84
+ if (btn)
85
+ btn.removeEventListener("click", onClick);
86
+ document.getElementById(STYLE_ID)?.remove();
87
+ },
88
+ };
89
+ function set(theme) {
90
+ apply(theme, true);
91
+ }
92
+ }
93
+ //# sourceMappingURL=theme-reveal.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme-reveal.js","sourceRoot":"","sources":["../../src/effects/theme-reveal.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,77 @@
1
+ /**
2
+ * anim-kit — modular animation library extracted from dzinrstudio.com.
3
+ *
4
+ * Core:
5
+ * smoothScroll() Lenis + ScrollTrigger bridge (lerp 0.08)
6
+ * initGSAP() registers GSAP plugins + the studio's custom eases
7
+ * split() text splitting with mask support
8
+ *
9
+ * Scroll effects:
10
+ * lineReveal() masked staggered text reveal
11
+ * maskReveal() inline overflow-hidden heading reveal
12
+ * revealRule() line that draws to full width
13
+ * parallax() data-speed parallax
14
+ * horizontalScroll() pinned horizontal gallery
15
+ * stackedCards() / stackedCardsPinned() pinned card deck
16
+ * scatterText() pinned horizontal band with per-char settle
17
+ * heroShrink() media that scales down as it scrolls away
18
+ * navHide() header that hides on scroll-down
19
+ * logoReveal() SVG wordmark assembling letter by letter
20
+ *
21
+ * Infinite / loops:
22
+ * marquee() dual-row constant-speed marquee
23
+ * dragStrip() infinite draggable carousel with rotation
24
+ *
25
+ * Micro-interactions:
26
+ * liquidButton() SVG wave flood on hover
27
+ * underlineLink() underline wipe on hover
28
+ * cursorFollower() spring-follow cursor tag
29
+ * counter() tabular number ticker
30
+ * audioBars() equaliser visualiser
31
+ * themeReveal() View Transitions circular wipe
32
+ * menuOverlay() clip-path curtain menu
33
+ * preloader() 0→100 counter intro
34
+ */
35
+ export { gsap, ScrollTrigger, SplitText, Draggable, CustomEase, ScrollSmoother, initGSAP, EASES } from "./core/gsap.js";
36
+ export type { SmoothScrollOptions, SmoothScrollHandle } from "./core/smooth-scroll.js";
37
+ export { smoothScroll } from "./core/smooth-scroll.js";
38
+ export { split } from "./core/split.js";
39
+ export type { SplitOptions, SplitResult, SplitType } from "./core/split.js";
40
+ export { guard } from "./core/guard.js";
41
+ export { toArray, one, onReady, compose, raf, prefersReducedMotion } from "./core/util.js";
42
+ export type { TargetLike, Destroy, CommonOptions } from "./core/types.js";
43
+ export { lineReveal } from "./effects/line-reveal.js";
44
+ export type { LineRevealOptions } from "./effects/line-reveal.js";
45
+ export { maskReveal, revealRule } from "./effects/mask-reveal.js";
46
+ export type { MaskRevealOptions } from "./effects/mask-reveal.js";
47
+ export { parallax } from "./effects/parallax.js";
48
+ export type { ParallaxOptions } from "./effects/parallax.js";
49
+ export { horizontalScroll } from "./effects/horizontal-scroll.js";
50
+ export type { HorizontalScrollOptions } from "./effects/horizontal-scroll.js";
51
+ export { stackedCards, stackedCardsPinned } from "./effects/stacked-cards.js";
52
+ export type { StackedCardsOptions } from "./effects/stacked-cards.js";
53
+ export { scatterText } from "./effects/scatter-text.js";
54
+ export type { ScatterTextOptions } from "./effects/scatter-text.js";
55
+ export { heroShrink } from "./effects/hero-shrink.js";
56
+ export type { HeroShrinkOptions } from "./effects/hero-shrink.js";
57
+ export { navHide } from "./effects/nav-hide.js";
58
+ export type { NavHideOptions } from "./effects/nav-hide.js";
59
+ export { logoReveal } from "./effects/logo-reveal.js";
60
+ export type { LogoRevealOptions } from "./effects/logo-reveal.js";
61
+ export { marquee } from "./effects/marquee.js";
62
+ export type { MarqueeOptions } from "./effects/marquee.js";
63
+ export { dragStrip } from "./effects/drag-strip.js";
64
+ export type { DragStripOptions } from "./effects/drag-strip.js";
65
+ export { liquidButton, underlineLink } from "./effects/liquid-button.js";
66
+ export type { LiquidButtonOptions } from "./effects/liquid-button.js";
67
+ export { cursorFollower } from "./effects/cursor-follower.js";
68
+ export type { CursorFollowerOptions } from "./effects/cursor-follower.js";
69
+ export { counter, audioBars } from "./effects/counter.js";
70
+ export type { CounterOptions, AudioBarsOptions, AudioBarsHandle } from "./effects/counter.js";
71
+ export { themeReveal } from "./effects/theme-reveal.js";
72
+ export type { ThemeRevealOptions, ThemeRevealHandle, ThemeName } from "./effects/theme-reveal.js";
73
+ export { menuOverlay } from "./effects/menu-overlay.js";
74
+ export type { MenuOverlayOptions, MenuOverlayHandle } from "./effects/menu-overlay.js";
75
+ export { preloader } from "./effects/preloader.js";
76
+ export type { PreloaderOptions } from "./effects/preloader.js";
77
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
package/dist/index.js ADDED
@@ -0,0 +1,61 @@
1
+ /**
2
+ * anim-kit — modular animation library extracted from dzinrstudio.com.
3
+ *
4
+ * Core:
5
+ * smoothScroll() Lenis + ScrollTrigger bridge (lerp 0.08)
6
+ * initGSAP() registers GSAP plugins + the studio's custom eases
7
+ * split() text splitting with mask support
8
+ *
9
+ * Scroll effects:
10
+ * lineReveal() masked staggered text reveal
11
+ * maskReveal() inline overflow-hidden heading reveal
12
+ * revealRule() line that draws to full width
13
+ * parallax() data-speed parallax
14
+ * horizontalScroll() pinned horizontal gallery
15
+ * stackedCards() / stackedCardsPinned() pinned card deck
16
+ * scatterText() pinned horizontal band with per-char settle
17
+ * heroShrink() media that scales down as it scrolls away
18
+ * navHide() header that hides on scroll-down
19
+ * logoReveal() SVG wordmark assembling letter by letter
20
+ *
21
+ * Infinite / loops:
22
+ * marquee() dual-row constant-speed marquee
23
+ * dragStrip() infinite draggable carousel with rotation
24
+ *
25
+ * Micro-interactions:
26
+ * liquidButton() SVG wave flood on hover
27
+ * underlineLink() underline wipe on hover
28
+ * cursorFollower() spring-follow cursor tag
29
+ * counter() tabular number ticker
30
+ * audioBars() equaliser visualiser
31
+ * themeReveal() View Transitions circular wipe
32
+ * menuOverlay() clip-path curtain menu
33
+ * preloader() 0→100 counter intro
34
+ */
35
+ /* ---- core ---- */
36
+ export { gsap, ScrollTrigger, SplitText, Draggable, CustomEase, ScrollSmoother, initGSAP, EASES } from "./core/gsap.js";
37
+ export { smoothScroll } from "./core/smooth-scroll.js";
38
+ export { split } from "./core/split.js";
39
+ export { guard } from "./core/guard.js";
40
+ export { toArray, one, onReady, compose, raf, prefersReducedMotion } from "./core/util.js";
41
+ /* ---- scroll effects ---- */
42
+ export { lineReveal } from "./effects/line-reveal.js";
43
+ export { maskReveal, revealRule } from "./effects/mask-reveal.js";
44
+ export { parallax } from "./effects/parallax.js";
45
+ export { horizontalScroll } from "./effects/horizontal-scroll.js";
46
+ export { stackedCards, stackedCardsPinned } from "./effects/stacked-cards.js";
47
+ export { scatterText } from "./effects/scatter-text.js";
48
+ export { heroShrink } from "./effects/hero-shrink.js";
49
+ export { navHide } from "./effects/nav-hide.js";
50
+ export { logoReveal } from "./effects/logo-reveal.js";
51
+ /* ---- loops ---- */
52
+ export { marquee } from "./effects/marquee.js";
53
+ export { dragStrip } from "./effects/drag-strip.js";
54
+ /* ---- micro-interactions ---- */
55
+ export { liquidButton, underlineLink } from "./effects/liquid-button.js";
56
+ export { cursorFollower } from "./effects/cursor-follower.js";
57
+ export { counter, audioBars } from "./effects/counter.js";
58
+ export { themeReveal } from "./effects/theme-reveal.js";
59
+ export { menuOverlay } from "./effects/menu-overlay.js";
60
+ export { preloader } from "./effects/preloader.js";
61
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,oBAAoB;AACpB,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAExH,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAG3F,8BAA8B;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGlE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG9E,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGhD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,qBAAqB;AACrB,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,kCAAkC;AAClC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAGzE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAG9D,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAG1D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC"}