@multitrack/core 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -0
- package/dist/analytics.cjs +77 -0
- package/dist/analytics.cjs.map +1 -0
- package/dist/analytics.d.cts +77 -0
- package/dist/analytics.d.ts +77 -0
- package/dist/analytics.js +75 -0
- package/dist/analytics.js.map +1 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -98
- package/dist/index.d.ts +3 -98
- package/dist/index.js.map +1 -1
- package/dist/middleware-DQus4IrE.d.cts +99 -0
- package/dist/middleware-DQus4IrE.d.ts +99 -0
- package/package.json +12 -2
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Easing function: takes a progress value (0-1) and returns an eased value (0-1).
|
|
3
|
+
*/
|
|
4
|
+
type EasingFunction = (t: number) => number;
|
|
5
|
+
/**
|
|
6
|
+
* Built-in easing preset names.
|
|
7
|
+
*/
|
|
8
|
+
type EasingPreset = "snap" | "linear" | "easeIn" | "easeOut" | "easeInOut";
|
|
9
|
+
/**
|
|
10
|
+
* User-provided step configuration. Declarative — consumers define animations
|
|
11
|
+
* as data, not imperative code.
|
|
12
|
+
*
|
|
13
|
+
* Inspired by video editing: each step occupies a duration on a named track.
|
|
14
|
+
*/
|
|
15
|
+
interface StepConfig {
|
|
16
|
+
/** Unique identifier for this step. Use "buffer" for spacers (auto-renamed). */
|
|
17
|
+
name: string;
|
|
18
|
+
/** How many viewport-heights this step lasts. */
|
|
19
|
+
duration: number;
|
|
20
|
+
/** Which timeline track this step belongs to. */
|
|
21
|
+
track: string;
|
|
22
|
+
/** Easing for opacity transitions. Defaults to "snap" (binary 0 or 1). */
|
|
23
|
+
easing?: EasingPreset | EasingFunction;
|
|
24
|
+
/** Optional predicate — if provided, step is only included when this returns true. */
|
|
25
|
+
condition?: () => boolean;
|
|
26
|
+
/** Named breakpoint this step belongs to. Only included when that breakpoint matches. */
|
|
27
|
+
when?: string;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* A step with computed absolute positions on the timeline.
|
|
31
|
+
* Produced by `resolveSteps()` from user-provided `StepConfig[]`.
|
|
32
|
+
*/
|
|
33
|
+
interface Step {
|
|
34
|
+
name: string;
|
|
35
|
+
start: number;
|
|
36
|
+
end: number;
|
|
37
|
+
track: string;
|
|
38
|
+
easing: EasingPreset | EasingFunction;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Maps step names to their current opacity (0-1).
|
|
42
|
+
* Generic so TypeScript can infer step names from user config.
|
|
43
|
+
*/
|
|
44
|
+
type Opacities<T extends string = string> = Record<T, number>;
|
|
45
|
+
interface StepEventPayload {
|
|
46
|
+
name: string;
|
|
47
|
+
track: string;
|
|
48
|
+
start: number;
|
|
49
|
+
end: number;
|
|
50
|
+
}
|
|
51
|
+
interface ScrollEventPayload {
|
|
52
|
+
scrollPercentage: number;
|
|
53
|
+
currentStep: number;
|
|
54
|
+
}
|
|
55
|
+
interface ReconfigureEventPayload {
|
|
56
|
+
steps: Step[];
|
|
57
|
+
totalSteps: number;
|
|
58
|
+
}
|
|
59
|
+
interface TimelineEventMap {
|
|
60
|
+
"step:enter": StepEventPayload;
|
|
61
|
+
"step:exit": StepEventPayload;
|
|
62
|
+
scroll: ScrollEventPayload;
|
|
63
|
+
"timeline:reconfigure": ReconfigureEventPayload;
|
|
64
|
+
}
|
|
65
|
+
type TimelineEventType = keyof TimelineEventMap;
|
|
66
|
+
type TimelineEventHandler<T extends TimelineEventType> = (payload: TimelineEventMap[T]) => void;
|
|
67
|
+
interface ScrollDriverOptions {
|
|
68
|
+
/** Element to listen for scroll events on. Defaults to `window`. */
|
|
69
|
+
target?: HTMLElement | Window;
|
|
70
|
+
}
|
|
71
|
+
interface TimelineOptions<T extends string = string> {
|
|
72
|
+
config: StepConfig[];
|
|
73
|
+
/** Enable devtools integration (exposes state on window.__MULTITRACK_DEVTOOLS__) */
|
|
74
|
+
devtools?: boolean;
|
|
75
|
+
/** Named breakpoints mapping to CSS media queries for responsive step inclusion. */
|
|
76
|
+
breakpoints?: Record<string, string>;
|
|
77
|
+
}
|
|
78
|
+
interface DevtoolsState {
|
|
79
|
+
steps: Step[];
|
|
80
|
+
currentStep: number;
|
|
81
|
+
totalSteps: number;
|
|
82
|
+
opacities: Opacities;
|
|
83
|
+
scrollPercentage: number;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/**
|
|
87
|
+
* Event passed to middleware functions during step transitions.
|
|
88
|
+
*/
|
|
89
|
+
interface MiddlewareEvent {
|
|
90
|
+
type: "step:enter" | "step:exit";
|
|
91
|
+
payload: StepEventPayload;
|
|
92
|
+
}
|
|
93
|
+
/**
|
|
94
|
+
* Middleware function signature.
|
|
95
|
+
* Call `next()` to continue the chain; skip it to swallow the event.
|
|
96
|
+
*/
|
|
97
|
+
type MiddlewareFn = (event: MiddlewareEvent, next: () => void) => void;
|
|
98
|
+
|
|
99
|
+
export type { DevtoolsState as D, EasingFunction as E, MiddlewareFn as M, Opacities as O, ReconfigureEventPayload as R, Step as S, TimelineOptions as T, TimelineEventType as a, TimelineEventHandler as b, ScrollDriverOptions as c, StepConfig as d, EasingPreset as e, TimelineEventMap as f, MiddlewareEvent as g, ScrollEventPayload as h, StepEventPayload as i };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@multitrack/core",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "A scroll-driven animation engine with multi-track timeline architecture",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -16,6 +16,16 @@
|
|
|
16
16
|
"types": "./dist/index.d.cts",
|
|
17
17
|
"default": "./dist/index.cjs"
|
|
18
18
|
}
|
|
19
|
+
},
|
|
20
|
+
"./analytics": {
|
|
21
|
+
"import": {
|
|
22
|
+
"types": "./dist/analytics.d.ts",
|
|
23
|
+
"default": "./dist/analytics.js"
|
|
24
|
+
},
|
|
25
|
+
"require": {
|
|
26
|
+
"types": "./dist/analytics.d.cts",
|
|
27
|
+
"default": "./dist/analytics.cjs"
|
|
28
|
+
}
|
|
19
29
|
}
|
|
20
30
|
},
|
|
21
31
|
"files": [
|
|
@@ -45,7 +55,7 @@
|
|
|
45
55
|
"access": "public"
|
|
46
56
|
},
|
|
47
57
|
"engines": {
|
|
48
|
-
"node": ">=
|
|
58
|
+
"node": ">=20"
|
|
49
59
|
},
|
|
50
60
|
"scripts": {
|
|
51
61
|
"build": "tsup",
|