@cosmictraveler002/anim-kit 1.2.0 → 1.3.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 +203 -31
- package/dist/anim-kit.standalone.js +5 -5
- package/dist/anim-kit.standalone.js.map +1 -1
- package/dist/core/gsap.d.ts +1 -1
- package/dist/core/gsap.d.ts.map +1 -1
- package/dist/core/gsap.js +1 -1
- package/dist/core/gsap.js.map +1 -1
- package/dist/core/smooth-scroll.d.ts +1 -1
- package/dist/core/smooth-scroll.js +1 -1
- package/dist/effects/drag-rail.d.ts +23 -0
- package/dist/effects/drag-rail.d.ts.map +1 -0
- package/dist/effects/drag-rail.js +196 -0
- package/dist/effects/drag-rail.js.map +1 -0
- package/dist/effects/preloader.js +1 -1
- package/dist/effects/reel-text.d.ts +19 -0
- package/dist/effects/reel-text.d.ts.map +1 -0
- package/dist/effects/reel-text.js +163 -0
- package/dist/effects/reel-text.js.map +1 -0
- package/dist/index.d.ts +7 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -1
- package/dist/index.js.map +1 -1
- package/dist/three/index.d.ts +13 -0
- package/dist/three/index.d.ts.map +1 -0
- package/dist/three/index.js +12 -0
- package/dist/three/index.js.map +1 -0
- package/dist/three/webgl-media.d.ts +21 -0
- package/dist/three/webgl-media.d.ts.map +1 -0
- package/dist/three/webgl-media.js +268 -0
- package/dist/three/webgl-media.js.map +1 -0
- package/package.json +17 -1
- package/src/core/gsap.ts +1 -1
- package/src/core/smooth-scroll.ts +1 -1
- package/src/effects/drag-rail.ts +236 -0
- package/src/effects/preloader.ts +1 -1
- package/src/effects/reel-text.ts +212 -0
- package/src/index.ts +9 -1
- package/src/three/index.ts +12 -0
- package/src/three/webgl-media.ts +325 -0
package/dist/core/gsap.d.ts
CHANGED
|
@@ -13,7 +13,7 @@ import { ScrollSmoother } from "gsap/ScrollSmoother";
|
|
|
13
13
|
import { Flip } from "gsap/Flip";
|
|
14
14
|
import type { TargetLike } from "./types.js";
|
|
15
15
|
export { gsap, ScrollTrigger, SplitText, Draggable, CustomEase, ScrollSmoother, Flip };
|
|
16
|
-
/** Named eases
|
|
16
|
+
/** Named eases from kalakritico.in's bundles. */
|
|
17
17
|
export declare const EASES: {
|
|
18
18
|
/** `.76,0,.2,1` — the studio's signature menu / nav curtain ease. */
|
|
19
19
|
readonly curtain: "ak-curtain";
|
package/dist/core/gsap.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gsap.d.ts","sourceRoot":"","sources":["../../src/core/gsap.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAEvF,
|
|
1
|
+
{"version":3,"file":"gsap.d.ts","sourceRoot":"","sources":["../../src/core/gsap.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAEvF,iDAAiD;AACjD,eAAO,MAAM,KAAK;IAChB,qEAAqE;;IAErE,0DAA0D;;IAE1D,qDAAqD;;IAErD,sDAAsD;;CAE9C,CAAC;AAIX,wDAAwD;AACxD,wBAAgB,QAAQ,IAAI,IAAI,CAuB/B;AAID;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,UAAU,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,IAAI,CAIvF"}
|
package/dist/core/gsap.js
CHANGED
|
@@ -13,7 +13,7 @@ import { ScrollSmoother } from "gsap/ScrollSmoother";
|
|
|
13
13
|
import { Flip } from "gsap/Flip";
|
|
14
14
|
import { toArray } from "./util.js";
|
|
15
15
|
export { gsap, ScrollTrigger, SplitText, Draggable, CustomEase, ScrollSmoother, Flip };
|
|
16
|
-
/** Named eases
|
|
16
|
+
/** Named eases from kalakritico.in's bundles. */
|
|
17
17
|
export const EASES = {
|
|
18
18
|
/** `.76,0,.2,1` — the studio's signature menu / nav curtain ease. */
|
|
19
19
|
curtain: "ak-curtain",
|
package/dist/core/gsap.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gsap.js","sourceRoot":"","sources":["../../src/core/gsap.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAEvF,
|
|
1
|
+
{"version":3,"file":"gsap.js","sourceRoot":"","sources":["../../src/core/gsap.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAEvF,iDAAiD;AACjD,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,qEAAqE;IACrE,OAAO,EAAE,YAAY;IACrB,0DAA0D;IAC1D,SAAS,EAAE,eAAe;IAC1B,qDAAqD;IACrD,MAAM,EAAE,WAAW;IACnB,sDAAsD;IACtD,UAAU,EAAE,gBAAgB;CACpB,CAAC;AAEX,IAAI,OAAO,GAAG,KAAK,CAAC;AAEpB,wDAAwD;AACxD,MAAM,UAAU,QAAQ;IACtB,IAAI,OAAO,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO;IACrD,OAAO,GAAG,IAAI,CAAC;IAEf,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IAE3E,4EAA4E;IAC5E,yEAAyE;IACzE,IAAI,CAAC;QACH,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACtC,CAAC;IAAC,MAAM,CAAC;QACP,sCAAsC;IACxC,CAAC;IAED,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;QACnC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QAC/C,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,EAAE,mDAAmD,CAAC,CAAC;QACxF,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;QAClD,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAAC;IAC3D,CAAC;IAED,yDAAyD;IACzD,aAAa,CAAC,MAAM,CAAC,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC,CAAC;AACrD,CAAC;AAED,QAAQ,EAAE,CAAC;AAEX;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,UAAU,CAAC,MAAsD;IAC/E,MAAM,GAAG,GAAsC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAChG,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,EAAiB,EAAE,CAAC,EAAE,YAAY,OAAO,CAAC,CAAC;IACtE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;AAClD,CAAC"}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
* clocks on the same frame, which is what stops ScrollTrigger from stuttering.
|
|
11
11
|
*
|
|
12
12
|
* `useScrollerProxy: true` additionally proxies `document.documentElement`,
|
|
13
|
-
* matching
|
|
13
|
+
* matching kalakritico.in's setup — only needed if you scroll a nested
|
|
14
14
|
* element instead of the window.
|
|
15
15
|
*/
|
|
16
16
|
import Lenis from "lenis";
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
* clocks on the same frame, which is what stops ScrollTrigger from stuttering.
|
|
11
11
|
*
|
|
12
12
|
* `useScrollerProxy: true` additionally proxies `document.documentElement`,
|
|
13
|
-
* matching
|
|
13
|
+
* matching kalakritico.in's setup — only needed if you scroll a nested
|
|
14
14
|
* element instead of the window.
|
|
15
15
|
*/
|
|
16
16
|
import Lenis from "lenis";
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
|
|
2
|
+
export interface DragRailOptions extends CommonOptions {
|
|
3
|
+
/** Scroll viewport around the track — defaults to `track.parentElement`. */
|
|
4
|
+
viewport?: TargetLike;
|
|
5
|
+
/** Children that tilt with velocity. @default `":scope > *"` */
|
|
6
|
+
item?: string;
|
|
7
|
+
/** Follow speed toward the intent, per 60fps frame (0..1). @default 0.1 */
|
|
8
|
+
lerp?: number;
|
|
9
|
+
/** Rubber-band resistance distance past the ends, px. @default 140 */
|
|
10
|
+
edge?: number;
|
|
11
|
+
/** Momentum multiplier on release (px of coast per px/frame of flick). @default 14 */
|
|
12
|
+
throwScale?: number;
|
|
13
|
+
/** Wheel / trackpad drives the rail (consumed while it can still move). @default true */
|
|
14
|
+
wheel?: boolean;
|
|
15
|
+
/** Degrees of tilt per px/frame of velocity — `0` disables. @default 0 */
|
|
16
|
+
tilt?: number;
|
|
17
|
+
/** Tilt clamp, degrees. @default 8 */
|
|
18
|
+
tiltMax?: number;
|
|
19
|
+
/** `(pos, velocity) => {}` called every rendered frame while mounted. */
|
|
20
|
+
onTick?: (pos: number, velocity: number) => void;
|
|
21
|
+
}
|
|
22
|
+
export declare function dragRail(target: TargetLike, options?: DragRailOptions): Destroy;
|
|
23
|
+
//# sourceMappingURL=drag-rail.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drag-rail.d.ts","sourceRoot":"","sources":["../../src/effects/drag-rail.ts"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sFAAsF;IACtF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yFAAyF;IACzF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,QAAQ,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE,eAAoB,GAAG,OAAO,CAyKnF"}
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Drag rail — the bounded, inertia-driven horizontal rail.
|
|
3
|
+
*
|
|
4
|
+
* A grab-and-throw rail with real physics, extracted from the drag-driven
|
|
5
|
+
* portfolio rail pattern: pointer drag, wheel and trackpad all feed one
|
|
6
|
+
* *intent* value, and the track follows it with a per-frame lerp. Why it is
|
|
7
|
+
* shaped this way (audit notes):
|
|
8
|
+
*
|
|
9
|
+
* - **Two values, not one.** `intent` is where the rail wants to be (drag
|
|
10
|
+
* delta, wheel delta, throw momentum); `pos` is what is rendered. The tick
|
|
11
|
+
* lerps intent → pos (`lerp * deltaRatio`), which is what gives the
|
|
12
|
+
* buttery catch-up after a hard throw. Writing the transform directly from
|
|
13
|
+
* pointermove (v1) felt like dragging a brick.
|
|
14
|
+
* - **tanh rubber-band.** Past either end, intent is squashed through
|
|
15
|
+
* `edge * tanh(overshoot / edge)` — the further you pull, the less each
|
|
16
|
+
* pixel buys you, but it never hard-stops. On release a restore force pulls
|
|
17
|
+
* the overscrolled intent back inside the bounds while the lerp chases it,
|
|
18
|
+
* producing the settle. This is the same soft-edge maths as the original
|
|
19
|
+
* rail's `a.t = a.a + tanh(l / t) * t`.
|
|
20
|
+
* - **Release throw.** Velocity is sampled as a smoothed per-frame pointer
|
|
21
|
+
* delta (0.7 smoothing) and multiplied by `throwScale` into intent — a flick
|
|
22
|
+
* coasts, a slow release barely moves. No InertiaPlugin dependency; the
|
|
23
|
+
* ticker *is* the inertia.
|
|
24
|
+
* - **Wheel coexistence.** While the rail can still move in the wheel's
|
|
25
|
+
* direction the event is consumed (`preventDefault` + `stopPropagation` —
|
|
26
|
+
* the stop matters: Lenis listens above us and would scroll the page in
|
|
27
|
+
* parallel). Once overscrolled a full `edge`, the wheel passes through to
|
|
28
|
+
* the page again, so the section never traps the reader.
|
|
29
|
+
* - **Velocity-reactive items.** `tilt` rotates children proportionally to the
|
|
30
|
+
* rendered per-frame velocity (the cards lean into motion and spring flat at
|
|
31
|
+
* rest); `onTick` exposes pos/velocity for WebGL or custom consumers.
|
|
32
|
+
* - **Fidelity.** `destroy()` removes every listener + the ticker, kills the
|
|
33
|
+
* tilt state and restores the inline cursor/user-select/touch-action the
|
|
34
|
+
* effect had overwritten.
|
|
35
|
+
*
|
|
36
|
+
* dragRail(".ak-rail-track", { tilt: 0.05 })
|
|
37
|
+
*
|
|
38
|
+
* CSS: viewport `overflow: hidden`; track `display: flex; width: max-content;
|
|
39
|
+
* gap: 1rem; cursor: grab; user-select: none; touch-action: pan-y`.
|
|
40
|
+
*/
|
|
41
|
+
import { gsap, initGSAP } from "../core/gsap.js";
|
|
42
|
+
import { guard } from "../core/guard.js";
|
|
43
|
+
import { one, toArray } from "../core/util.js";
|
|
44
|
+
export function dragRail(target, options = {}) {
|
|
45
|
+
initGSAP();
|
|
46
|
+
const track = one(target);
|
|
47
|
+
if (!track)
|
|
48
|
+
return () => { };
|
|
49
|
+
const { viewport, item = ":scope > *", lerp = 0.1, edge = 140, throwScale = 14, wheel = true, tilt = 0, tiltMax = 8, onTick, } = options;
|
|
50
|
+
return guard(options, () => {
|
|
51
|
+
const vp = one(viewport) ?? track.parentElement ?? track;
|
|
52
|
+
const prevStyle = {
|
|
53
|
+
cursor: track.style.cursor,
|
|
54
|
+
userSelect: track.style.userSelect,
|
|
55
|
+
touchAction: track.style.touchAction,
|
|
56
|
+
};
|
|
57
|
+
/* ---------------- bounds ---------------- */
|
|
58
|
+
let min = 0; // most-negative resting x (content overflows left)
|
|
59
|
+
let max = 0; // start of the rail
|
|
60
|
+
let pos = 0; // rendered x
|
|
61
|
+
let intent = 0; // wanted x (drag/wheel/throw feed this)
|
|
62
|
+
const measure = () => {
|
|
63
|
+
const overflow = Math.max(0, track.scrollWidth - vp.clientWidth);
|
|
64
|
+
min = -overflow;
|
|
65
|
+
max = 0;
|
|
66
|
+
// Fold an out-of-range position back through the soft edge (no jump).
|
|
67
|
+
intent = soft(intent);
|
|
68
|
+
pos = soft(pos);
|
|
69
|
+
};
|
|
70
|
+
/** tanh soft-edge: unbounded input, saturating output around [min, max]. */
|
|
71
|
+
function soft(v) {
|
|
72
|
+
if (v > max)
|
|
73
|
+
return max + edge * Math.tanh((v - max) / edge);
|
|
74
|
+
if (v < min)
|
|
75
|
+
return min + edge * Math.tanh((v - min) / edge);
|
|
76
|
+
return v;
|
|
77
|
+
}
|
|
78
|
+
/* ---------------- pointer drag ---------------- */
|
|
79
|
+
let dragging = false;
|
|
80
|
+
let lastX = 0;
|
|
81
|
+
let velocity = 0; // smoothed pointer delta (px/frame-ish)
|
|
82
|
+
let renderedVel = 0; // rendered per-frame velocity (drives tilt/onTick)
|
|
83
|
+
const onPointerDown = (e) => {
|
|
84
|
+
if (e.pointerType === "mouse" && e.button !== 0)
|
|
85
|
+
return;
|
|
86
|
+
dragging = true;
|
|
87
|
+
lastX = e.clientX;
|
|
88
|
+
velocity = 0;
|
|
89
|
+
try {
|
|
90
|
+
vp.setPointerCapture(e.pointerId);
|
|
91
|
+
}
|
|
92
|
+
catch {
|
|
93
|
+
/* capture is best-effort — moves still land while the pointer is down */
|
|
94
|
+
}
|
|
95
|
+
track.style.cursor = "grabbing";
|
|
96
|
+
};
|
|
97
|
+
const onPointerMove = (e) => {
|
|
98
|
+
if (!dragging)
|
|
99
|
+
return;
|
|
100
|
+
const dx = e.clientX - lastX;
|
|
101
|
+
lastX = e.clientX;
|
|
102
|
+
velocity = velocity * 0.7 + dx * 0.3; // smooth out event-rate jitter
|
|
103
|
+
intent = soft(intent + dx);
|
|
104
|
+
};
|
|
105
|
+
const endDrag = (e) => {
|
|
106
|
+
if (!dragging)
|
|
107
|
+
return;
|
|
108
|
+
dragging = false;
|
|
109
|
+
track.style.cursor = prevStyle.cursor || "grab";
|
|
110
|
+
if (e) {
|
|
111
|
+
try {
|
|
112
|
+
vp.releasePointerCapture(e.pointerId);
|
|
113
|
+
}
|
|
114
|
+
catch {
|
|
115
|
+
/* already released */
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
// A flick coasts on its sampled momentum, then the soft edge reclaims it.
|
|
119
|
+
intent = soft(intent + velocity * throwScale);
|
|
120
|
+
};
|
|
121
|
+
const onPointerUp = (e) => endDrag(e);
|
|
122
|
+
const onPointerCancel = (e) => endDrag(e);
|
|
123
|
+
const onDragStart = (e) => e.preventDefault(); // no native img drag
|
|
124
|
+
/* ---------------- wheel / trackpad ---------------- */
|
|
125
|
+
const onWheel = (e) => {
|
|
126
|
+
if (!wheel)
|
|
127
|
+
return;
|
|
128
|
+
const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
|
|
129
|
+
const bound = delta > 0 ? max : min;
|
|
130
|
+
const outward = (intent - bound) * (delta > 0 ? 1 : -1);
|
|
131
|
+
if (outward > edge)
|
|
132
|
+
return; // over-extended — hand the scroll back to the page
|
|
133
|
+
e.preventDefault();
|
|
134
|
+
e.stopPropagation(); // Lenis listens above us; it must not scroll in parallel
|
|
135
|
+
intent = soft(intent + delta);
|
|
136
|
+
};
|
|
137
|
+
/* ---------------- tick ---------------- */
|
|
138
|
+
const items = tilt ? toArray(item, track) : [];
|
|
139
|
+
if (items.length)
|
|
140
|
+
gsap.set(items, { transformOrigin: "50% 50%" });
|
|
141
|
+
const tick = () => {
|
|
142
|
+
const ratio = gsap.ticker.deltaRatio(60); // frames since last tick, clamped
|
|
143
|
+
// Release restore: once input stops, overscrolled intent springs home.
|
|
144
|
+
if (!dragging) {
|
|
145
|
+
const bound = intent < min ? min : intent > max ? max : null;
|
|
146
|
+
if (bound !== null)
|
|
147
|
+
intent += (bound - intent) * Math.min(1, 0.18 * ratio);
|
|
148
|
+
}
|
|
149
|
+
const prev = pos;
|
|
150
|
+
pos += (intent - pos) * Math.min(1, lerp * ratio);
|
|
151
|
+
renderedVel = pos - prev;
|
|
152
|
+
if (renderedVel === 0 && pos === intent)
|
|
153
|
+
return; // idle: skip the write
|
|
154
|
+
gsap.set(track, { x: pos });
|
|
155
|
+
if (items.length) {
|
|
156
|
+
gsap.set(items, {
|
|
157
|
+
rotation: gsap.utils.clamp(-tiltMax, tiltMax, renderedVel * tilt),
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
onTick?.(pos, renderedVel);
|
|
161
|
+
};
|
|
162
|
+
/* ---------------- wiring ---------------- */
|
|
163
|
+
measure();
|
|
164
|
+
track.dataset.akRail = "true";
|
|
165
|
+
track.style.cursor = "grab";
|
|
166
|
+
track.style.userSelect = "none";
|
|
167
|
+
track.style.touchAction = "pan-y";
|
|
168
|
+
vp.addEventListener("pointerdown", onPointerDown);
|
|
169
|
+
vp.addEventListener("pointermove", onPointerMove);
|
|
170
|
+
vp.addEventListener("pointerup", onPointerUp);
|
|
171
|
+
vp.addEventListener("pointercancel", onPointerCancel);
|
|
172
|
+
vp.addEventListener("wheel", onWheel, { passive: false });
|
|
173
|
+
track.addEventListener("dragstart", onDragStart);
|
|
174
|
+
const onResize = () => measure();
|
|
175
|
+
window.addEventListener("resize", onResize);
|
|
176
|
+
gsap.ticker.add(tick);
|
|
177
|
+
return () => {
|
|
178
|
+
window.removeEventListener("resize", onResize);
|
|
179
|
+
vp.removeEventListener("pointerdown", onPointerDown);
|
|
180
|
+
vp.removeEventListener("pointermove", onPointerMove);
|
|
181
|
+
vp.removeEventListener("pointerup", onPointerUp);
|
|
182
|
+
vp.removeEventListener("pointercancel", onPointerCancel);
|
|
183
|
+
vp.removeEventListener("wheel", onWheel);
|
|
184
|
+
track.removeEventListener("dragstart", onDragStart);
|
|
185
|
+
gsap.ticker.remove(tick);
|
|
186
|
+
delete track.dataset.akRail;
|
|
187
|
+
track.style.cursor = prevStyle.cursor;
|
|
188
|
+
track.style.userSelect = prevStyle.userSelect;
|
|
189
|
+
track.style.touchAction = prevStyle.touchAction;
|
|
190
|
+
gsap.set(track, { clearProps: "transform" });
|
|
191
|
+
if (items.length)
|
|
192
|
+
gsap.set(items, { clearProps: "rotation,transformOrigin" });
|
|
193
|
+
};
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
//# sourceMappingURL=drag-rail.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drag-rail.js","sourceRoot":"","sources":["../../src/effects/drag-rail.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
|
|
2
|
+
export interface ReelTextOptions extends CommonOptions {
|
|
3
|
+
/** `'immediate'` rolls on mount; `'scroll'` rolls on viewport enter. @default `"immediate"` */
|
|
4
|
+
mode?: "immediate" | "scroll";
|
|
5
|
+
/** ScrollTrigger start (only with `mode: "scroll"`). @default `"top 85%"` */
|
|
6
|
+
start?: string;
|
|
7
|
+
/** Ghost frames per character before the final glyph. @default 4 */
|
|
8
|
+
frames?: number;
|
|
9
|
+
/** Roll duration per character, seconds. @default 0.8 */
|
|
10
|
+
duration?: number;
|
|
11
|
+
/** Stagger between characters, seconds. @default 0.05 */
|
|
12
|
+
stagger?: number;
|
|
13
|
+
/** GSAP ease for the roll. @default `"power4.out"` */
|
|
14
|
+
ease?: string;
|
|
15
|
+
/** Re-arm on every scroll re-entry instead of playing once. @default false */
|
|
16
|
+
replay?: boolean;
|
|
17
|
+
}
|
|
18
|
+
export declare function reelText(target: TargetLike, options?: ReelTextOptions): Destroy;
|
|
19
|
+
//# sourceMappingURL=reel-text.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"reel-text.d.ts","sourceRoot":"","sources":["../../src/effects/reel-text.ts"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,+FAA+F;IAC/F,IAAI,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;IAC9B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAkCD,wBAAgB,QAAQ,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE,eAAoB,GAAG,OAAO,CA6HnF"}
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Reel text — the per-character odometer roll.
|
|
3
|
+
*
|
|
4
|
+
* Every character gets its own overflow-hidden mask and a vertical strip of
|
|
5
|
+
* ghost glyphs stacked under the final one; the strips roll upward (staggered
|
|
6
|
+
* left→right) and land on the real text. This is the DOM twin of a shader
|
|
7
|
+
* slot-reel: character cells spun per glyph (`u_roll`/`u_spin` style), ported
|
|
8
|
+
* to plain GSAP so it needs no canvas. Why it is shaped this way:
|
|
9
|
+
*
|
|
10
|
+
* - **Built eagerly, rolled on trigger.** The masks exist as soon as the
|
|
11
|
+
* effect mounts (so layout is stable and tests can see the structure); the
|
|
12
|
+
* roll plays immediately or on scroll-enter. On completion the original
|
|
13
|
+
* `innerHTML` is restored — screen readers and copy/paste see clean text —
|
|
14
|
+
* and a `replay` re-entry re-splits from scratch. The ScrollTrigger is
|
|
15
|
+
* registered **once per element**, outside the rebuild path, so replay
|
|
16
|
+
* never stacks triggers.
|
|
17
|
+
* - **Width probed, never guessed.** Each wrapper's width is measured from
|
|
18
|
+
* the *final* glyph (hidden probe in the body) so ghost frames of a
|
|
19
|
+
* different width can't jitter the line while it spins. jsdom reports 0 —
|
|
20
|
+
* the wrapper then shrink-wraps, which is why the unit smoke still passes.
|
|
21
|
+
* - **Same-case ghosts.** Uppercase rolls through the uppercase alphabet,
|
|
22
|
+
* lowercase through lowercase, digits through digits — the line never
|
|
23
|
+
* changes colour/shape mid-roll the way mixed-case ghosts would. Spaces and
|
|
24
|
+
* punctuation stay as plain text (they don't spin).
|
|
25
|
+
* - **Fidelity.** `destroy()` kills the timeline + trigger, clears the stamp
|
|
26
|
+
* and puts the original `innerHTML` back byte for byte.
|
|
27
|
+
*
|
|
28
|
+
* reelText("[data-reel]", { mode: "scroll", frames: 4 })
|
|
29
|
+
*
|
|
30
|
+
* CSS: nothing required — masks, strip and frame heights are inline. Give the
|
|
31
|
+
* target the `line-height` you want the cells to inherit.
|
|
32
|
+
*/
|
|
33
|
+
import { gsap, ScrollTrigger, initGSAP } from "../core/gsap.js";
|
|
34
|
+
import { guard } from "../core/guard.js";
|
|
35
|
+
import { toArray } from "../core/util.js";
|
|
36
|
+
const UPPERCASE = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
|
37
|
+
const LOWERCASE = "abcdefghijklmnopqrstuvwxyz";
|
|
38
|
+
const DIGITS = "0123456789";
|
|
39
|
+
/** Only alphanumerics get a reel; spaces/punctuation pass through untouched. */
|
|
40
|
+
const spins = (ch) => /[A-Za-z0-9]/.test(ch);
|
|
41
|
+
const ghostsFor = (ch, count) => {
|
|
42
|
+
const pool = /[A-Z]/.test(ch) ? UPPERCASE : /[a-z]/.test(ch) ? LOWERCASE : DIGITS;
|
|
43
|
+
let out = "";
|
|
44
|
+
for (let i = 0; i < count; i++)
|
|
45
|
+
out += pool[Math.floor(Math.random() * pool.length)];
|
|
46
|
+
return out;
|
|
47
|
+
};
|
|
48
|
+
/** Width of a glyph — 0 in jsdom, where wrappers may shrink-wrap instead. */
|
|
49
|
+
const measureGlyph = (ch, sample) => {
|
|
50
|
+
const doc = sample.ownerDocument;
|
|
51
|
+
if (!doc.body)
|
|
52
|
+
return 0;
|
|
53
|
+
const probe = doc.createElement("span");
|
|
54
|
+
probe.style.cssText = "position:absolute;visibility:hidden;white-space:pre;";
|
|
55
|
+
probe.textContent = ch;
|
|
56
|
+
doc.body.appendChild(probe);
|
|
57
|
+
const w = probe.getBoundingClientRect().width;
|
|
58
|
+
probe.remove();
|
|
59
|
+
return Math.round(w);
|
|
60
|
+
};
|
|
61
|
+
export function reelText(target, options = {}) {
|
|
62
|
+
initGSAP();
|
|
63
|
+
const els = toArray(target);
|
|
64
|
+
if (!els.length)
|
|
65
|
+
return () => { };
|
|
66
|
+
const { mode = "immediate", start = "top 85%", frames = 4, duration = 0.8, stagger = 0.05, ease = "power4.out", replay = false, } = options;
|
|
67
|
+
return guard(options, () => {
|
|
68
|
+
const cells = [];
|
|
69
|
+
const timelines = new Map();
|
|
70
|
+
const triggers = [];
|
|
71
|
+
/** Unwind to the original markup (on completion and on destroy). */
|
|
72
|
+
const restore = (el) => {
|
|
73
|
+
const i = cells.findIndex((c) => c.el === el);
|
|
74
|
+
if (i < 0)
|
|
75
|
+
return;
|
|
76
|
+
el.innerHTML = cells[i].original;
|
|
77
|
+
delete el.dataset.akReel;
|
|
78
|
+
cells.splice(i, 1);
|
|
79
|
+
};
|
|
80
|
+
/**
|
|
81
|
+
* Split one element into masks + a paused roll timeline.
|
|
82
|
+
* Returns the timeline; the caller decides when (and whether) it plays.
|
|
83
|
+
*/
|
|
84
|
+
const build = (el) => {
|
|
85
|
+
const text = el.textContent ?? "";
|
|
86
|
+
if (!text.trim())
|
|
87
|
+
return null;
|
|
88
|
+
timelines.get(el)?.kill(); // a finished roll from a previous entry
|
|
89
|
+
// Keep the FIRST original: a second build must not snapshot masked HTML.
|
|
90
|
+
if (!cells.some((c) => c.el === el))
|
|
91
|
+
cells.push({ el, original: el.innerHTML });
|
|
92
|
+
const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || el.getBoundingClientRect().height || 16;
|
|
93
|
+
// Original markup → per-char segments (the element must be plain text).
|
|
94
|
+
el.textContent = "";
|
|
95
|
+
const strips = [];
|
|
96
|
+
const ends = [];
|
|
97
|
+
for (const ch of [...text]) {
|
|
98
|
+
if (!spins(ch)) {
|
|
99
|
+
el.appendChild(el.ownerDocument.createTextNode(ch));
|
|
100
|
+
continue;
|
|
101
|
+
}
|
|
102
|
+
const wrapper = el.ownerDocument.createElement("span");
|
|
103
|
+
wrapper.className = "ak-reel__ch";
|
|
104
|
+
wrapper.style.cssText = `display:inline-block;overflow:hidden;vertical-align:top;height:${lineHeight}px;`;
|
|
105
|
+
const width = measureGlyph(ch, el);
|
|
106
|
+
if (width > 0)
|
|
107
|
+
wrapper.style.width = `${width}px`;
|
|
108
|
+
const strip = el.ownerDocument.createElement("span");
|
|
109
|
+
strip.className = "ak-reel__strip";
|
|
110
|
+
strip.style.cssText = "display:flex;flex-direction:column;will-change:transform;";
|
|
111
|
+
for (const frame of ghostsFor(ch, frames) + ch) {
|
|
112
|
+
const frameEl = el.ownerDocument.createElement("span");
|
|
113
|
+
frameEl.style.cssText = `display:flex;align-items:center;justify-content:center;height:${lineHeight}px;flex:none;`;
|
|
114
|
+
frameEl.textContent = frame;
|
|
115
|
+
strip.appendChild(frameEl);
|
|
116
|
+
}
|
|
117
|
+
wrapper.appendChild(strip);
|
|
118
|
+
el.appendChild(wrapper);
|
|
119
|
+
strips.push(strip);
|
|
120
|
+
ends.push(-frames * lineHeight);
|
|
121
|
+
}
|
|
122
|
+
el.dataset.akReel = "true";
|
|
123
|
+
const tl = gsap.timeline({ paused: true, onComplete: () => restore(el) });
|
|
124
|
+
strips.forEach((strip, i) => {
|
|
125
|
+
tl.to(strip, { y: ends[i], duration, ease }, i * stagger);
|
|
126
|
+
});
|
|
127
|
+
timelines.set(el, tl);
|
|
128
|
+
return tl;
|
|
129
|
+
};
|
|
130
|
+
els.forEach((el) => {
|
|
131
|
+
const tl = build(el);
|
|
132
|
+
if (!tl)
|
|
133
|
+
return;
|
|
134
|
+
if (mode === "immediate") {
|
|
135
|
+
tl.play(0);
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
// Registered once per element — rebuilds on replay reuse this trigger.
|
|
139
|
+
triggers.push(ScrollTrigger.create({
|
|
140
|
+
trigger: el,
|
|
141
|
+
start,
|
|
142
|
+
once: !replay,
|
|
143
|
+
onEnter: () => {
|
|
144
|
+
// Restored after the last roll (or never started) → rebuild first.
|
|
145
|
+
const active = el.dataset.akReel === "true" ? timelines.get(el) : build(el);
|
|
146
|
+
active?.play(0);
|
|
147
|
+
},
|
|
148
|
+
}));
|
|
149
|
+
});
|
|
150
|
+
return () => {
|
|
151
|
+
triggers.forEach((st) => st.kill());
|
|
152
|
+
triggers.length = 0;
|
|
153
|
+
timelines.forEach((tl) => tl.kill());
|
|
154
|
+
timelines.clear();
|
|
155
|
+
cells.slice().forEach((cell) => {
|
|
156
|
+
cell.el.innerHTML = cell.original;
|
|
157
|
+
delete cell.el.dataset.akReel;
|
|
158
|
+
});
|
|
159
|
+
cells.length = 0;
|
|
160
|
+
};
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
//# sourceMappingURL=reel-text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"reel-text.js","sourceRoot":"","sources":["../../src/effects/reel-text.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* anim-kit — modular animation library
|
|
2
|
+
* anim-kit — modular animation library by kalakritico.in.
|
|
3
3
|
*
|
|
4
4
|
* Core:
|
|
5
5
|
* smoothScroll() Lenis + ScrollTrigger bridge (lerp 0.08)
|
|
@@ -24,10 +24,12 @@
|
|
|
24
24
|
* Infinite / loops:
|
|
25
25
|
* marquee() dual-row constant-speed marquee
|
|
26
26
|
* dragStrip() infinite draggable carousel with rotation
|
|
27
|
+
* dragRail() bounded drag rail — inertia, tanh rubber-band, wheel
|
|
27
28
|
* rollText() rolling word rotator (seamless row loop)
|
|
28
29
|
*
|
|
29
30
|
* Text extras:
|
|
30
31
|
* scrambleText() decode / cipher reveal per character
|
|
32
|
+
* reelText() per-character odometer roll (masked reel strips)
|
|
31
33
|
* flipWords() words that glide between two layouts (FLIP)
|
|
32
34
|
*
|
|
33
35
|
* Micro-interactions:
|
|
@@ -77,8 +79,12 @@ export { marquee } from "./effects/marquee.js";
|
|
|
77
79
|
export type { MarqueeOptions } from "./effects/marquee.js";
|
|
78
80
|
export { rollText } from "./effects/roll-text.js";
|
|
79
81
|
export type { RollTextOptions } from "./effects/roll-text.js";
|
|
82
|
+
export { reelText } from "./effects/reel-text.js";
|
|
83
|
+
export type { ReelTextOptions } from "./effects/reel-text.js";
|
|
80
84
|
export { dragStrip } from "./effects/drag-strip.js";
|
|
81
85
|
export type { DragStripOptions } from "./effects/drag-strip.js";
|
|
86
|
+
export { dragRail } from "./effects/drag-rail.js";
|
|
87
|
+
export type { DragRailOptions } from "./effects/drag-rail.js";
|
|
82
88
|
export { scrambleText } from "./effects/scramble-text.js";
|
|
83
89
|
export type { ScrambleTextOptions } from "./effects/scramble-text.js";
|
|
84
90
|
export { flipWords } from "./effects/flip-words.js";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* anim-kit — modular animation library
|
|
2
|
+
* anim-kit — modular animation library by kalakritico.in.
|
|
3
3
|
*
|
|
4
4
|
* Core:
|
|
5
5
|
* smoothScroll() Lenis + ScrollTrigger bridge (lerp 0.08)
|
|
@@ -24,10 +24,12 @@
|
|
|
24
24
|
* Infinite / loops:
|
|
25
25
|
* marquee() dual-row constant-speed marquee
|
|
26
26
|
* dragStrip() infinite draggable carousel with rotation
|
|
27
|
+
* dragRail() bounded drag rail — inertia, tanh rubber-band, wheel
|
|
27
28
|
* rollText() rolling word rotator (seamless row loop)
|
|
28
29
|
*
|
|
29
30
|
* Text extras:
|
|
30
31
|
* scrambleText() decode / cipher reveal per character
|
|
32
|
+
* reelText() per-character odometer roll (masked reel strips)
|
|
31
33
|
* flipWords() words that glide between two layouts (FLIP)
|
|
32
34
|
*
|
|
33
35
|
* Micro-interactions:
|
|
@@ -63,7 +65,9 @@ export { logoReveal } from "./effects/logo-reveal.js";
|
|
|
63
65
|
/* ---- loops ---- */
|
|
64
66
|
export { marquee } from "./effects/marquee.js";
|
|
65
67
|
export { rollText } from "./effects/roll-text.js";
|
|
68
|
+
export { reelText } from "./effects/reel-text.js";
|
|
66
69
|
export { dragStrip } from "./effects/drag-strip.js";
|
|
70
|
+
export { dragRail } from "./effects/drag-rail.js";
|
|
67
71
|
/* ---- text extras ---- */
|
|
68
72
|
export { scrambleText } from "./effects/scramble-text.js";
|
|
69
73
|
export { flipWords } from "./effects/flip-words.js";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;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,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,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,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,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,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,2BAA2B;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,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,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `@cosmictraveler002/anim-kit/three` — the WebGL entry.
|
|
3
|
+
*
|
|
4
|
+
* Everything here renders media through **three.js**, which is an *optional
|
|
5
|
+
* peer dependency*: install `three` alongside anim-kit to use this subpath.
|
|
6
|
+
* The core barrel (`@cosmictraveler002/anim-kit`) never imports three, so
|
|
7
|
+
* plain DOM/scroll users keep a gsap+lenis-only dependency tree.
|
|
8
|
+
*
|
|
9
|
+
* import { webglMedia } from "@cosmictraveler002/anim-kit/three";
|
|
10
|
+
*/
|
|
11
|
+
export { webglMedia } from "./webgl-media.js";
|
|
12
|
+
export type { WebglMediaOptions } from "./webgl-media.js";
|
|
13
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/three/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `@cosmictraveler002/anim-kit/three` — the WebGL entry.
|
|
3
|
+
*
|
|
4
|
+
* Everything here renders media through **three.js**, which is an *optional
|
|
5
|
+
* peer dependency*: install `three` alongside anim-kit to use this subpath.
|
|
6
|
+
* The core barrel (`@cosmictraveler002/anim-kit`) never imports three, so
|
|
7
|
+
* plain DOM/scroll users keep a gsap+lenis-only dependency tree.
|
|
8
|
+
*
|
|
9
|
+
* import { webglMedia } from "@cosmictraveler002/anim-kit/three";
|
|
10
|
+
*/
|
|
11
|
+
export { webglMedia } from "./webgl-media.js";
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/three/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}
|