@multitrack/react 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 +60 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -91,6 +91,66 @@ A fixed-position overlay inside `ScrollContainer` for content that stays in the
|
|
|
91
91
|
|
|
92
92
|
Conditionally renders children when the named step is active (opacity > 0).
|
|
93
93
|
|
|
94
|
+
### DevTools
|
|
95
|
+
|
|
96
|
+
Enable the Chrome DevTools integration by passing the `devtools` prop to the provider:
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
<MultitrackProvider config={config} devtools>
|
|
100
|
+
{children}
|
|
101
|
+
</MultitrackProvider>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
This exposes timeline state to the [@multitrack/devtools](https://github.com/jakhsu/multitrack/tree/main/packages/devtools) Chrome extension, giving you a live timeline inspector with playhead visualization, active step opacities, and an event log.
|
|
105
|
+
|
|
106
|
+
## Full example with `useStep()`
|
|
107
|
+
|
|
108
|
+
For fine-grained control over individual steps, use the `useStep()` hook to get `{ opacity, isActive }` and drive animations directly:
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
import { MultitrackProvider, ScrollContainer, FixedStage, Show, useStep } from "@multitrack/react";
|
|
112
|
+
import type { StepConfig } from "@multitrack/core";
|
|
113
|
+
|
|
114
|
+
const config: StepConfig[] = [
|
|
115
|
+
{ name: "intro", duration: 3, track: "main", easing: "linear" },
|
|
116
|
+
{ name: "feature", duration: 5, track: "main" },
|
|
117
|
+
{ name: "outro", duration: 3, track: "main", easing: "linear" },
|
|
118
|
+
|
|
119
|
+
// Independent text track — overlaps freely with main
|
|
120
|
+
{ name: "buffer", duration: 4, track: "text" },
|
|
121
|
+
{ name: "caption", duration: 3, track: "text" },
|
|
122
|
+
];
|
|
123
|
+
|
|
124
|
+
function App() {
|
|
125
|
+
return (
|
|
126
|
+
<MultitrackProvider config={config} devtools>
|
|
127
|
+
<ScrollContainer>
|
|
128
|
+
<FixedStage>
|
|
129
|
+
<Show when="intro">
|
|
130
|
+
<IntroSection />
|
|
131
|
+
</Show>
|
|
132
|
+
<Show when="feature">
|
|
133
|
+
<FeatureSection />
|
|
134
|
+
</Show>
|
|
135
|
+
<Show when="caption">
|
|
136
|
+
<Caption text="Tracks are independent." />
|
|
137
|
+
</Show>
|
|
138
|
+
</FixedStage>
|
|
139
|
+
</ScrollContainer>
|
|
140
|
+
</MultitrackProvider>
|
|
141
|
+
);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
function IntroSection() {
|
|
145
|
+
const { opacity } = useStep("intro");
|
|
146
|
+
return (
|
|
147
|
+
<div style={{ opacity, transform: `translateY(${(1 - opacity) * 40}px)` }}>
|
|
148
|
+
<h1>Welcome</h1>
|
|
149
|
+
</div>
|
|
150
|
+
);
|
|
151
|
+
}
|
|
152
|
+
```
|
|
153
|
+
|
|
94
154
|
## License
|
|
95
155
|
|
|
96
156
|
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@multitrack/react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "React bindings for @multitrack/core",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"react-dom": ">=18.0.0"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@multitrack/core": "^0.1.
|
|
29
|
+
"@multitrack/core": "^0.1.1"
|
|
30
30
|
},
|
|
31
31
|
"sideEffects": false,
|
|
32
32
|
"license": "MIT",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"access": "public"
|
|
54
54
|
},
|
|
55
55
|
"engines": {
|
|
56
|
-
"node": ">=
|
|
56
|
+
"node": ">=20"
|
|
57
57
|
},
|
|
58
58
|
"scripts": {
|
|
59
59
|
"build": "tsup",
|