@glissade/interact 0.2.0 → 0.4.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 +37 -0
- package/dist/index.js +0 -0
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# @glissade/interact
|
|
2
|
+
|
|
3
|
+
The v2 opt-in layer: **state machines over timelines**. States bind Timelines; typed inputs (`boolean`/`number` signals + queued `trigger`s); serializable conditions; and velocity-matched handoffs — interrupt a transition mid-flight and the property reverses with its momentum intact (closed-form offset springs, never integrators). Pointer listeners with geometric hit testing, spring-smoothed `pointerDriver`, offline `audioAmplitudeTrack` (`@glissade/interact/audio`), and the deterministic export story: `recordTrace` → `bakeTrace` → a plain v1 Timeline (replay is bit-identical; verified Chromium↔Node in CI).
|
|
4
|
+
|
|
5
|
+
Never imported by the linear pipeline — a machine-free embed never pays for it. ≤ 6 kB gz for the runtime surface.
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm i @glissade/interact
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
import { machineBuilder, pose, createMachine, createListeners } from '@glissade/interact';
|
|
13
|
+
|
|
14
|
+
const doc = machineBuilder('button')
|
|
15
|
+
.input('hovered', 'boolean')
|
|
16
|
+
.state('idle', pose({ 'btn/scale': [1, 1] }))
|
|
17
|
+
.state('hover', pose({ 'btn/scale': [1.08, 1.08] }))
|
|
18
|
+
.transition('idle', 'hover', { when: { input: 'hovered', is: true }, duration: 0.15 })
|
|
19
|
+
.transition('hover', 'idle', { when: { input: 'hovered', is: false }, duration: 0.15 })
|
|
20
|
+
.build();
|
|
21
|
+
|
|
22
|
+
const machine = createMachine(doc, { resolve: scene.resolveTarget });
|
|
23
|
+
player.attach(machine);
|
|
24
|
+
const L = createListeners({ scene, element: canvas });
|
|
25
|
+
L.hover(scene.nodes.get('btn'), machine.input('hovered'));
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
See the [interactivity guide](https://github.com/tyevco/glissade/blob/main/docs/interactivity.md).
|
|
29
|
+
|
|
30
|
+
## Part of glissade
|
|
31
|
+
|
|
32
|
+
*(glide & slide)* — programmatic motion graphics for TypeScript: realtime-first in any web page, deterministic headless video export from the same code, a visual studio over the same document. No generator functions.
|
|
33
|
+
|
|
34
|
+
- [Repository & full README](https://github.com/tyevco/glissade)
|
|
35
|
+
- [Getting started](https://github.com/tyevco/glissade/blob/main/docs/getting-started.md) · [Concepts](https://github.com/tyevco/glissade/blob/main/docs/concepts.md) · [Interactivity](https://github.com/tyevco/glissade/blob/main/docs/interactivity.md)
|
|
36
|
+
|
|
37
|
+
Apache-2.0.
|
package/dist/index.js
CHANGED
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@glissade/interact",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "glissade interactivity: state machines over timelines, velocity-matched handoffs, typed inputs. Opt-in layer; never imported by the linear pipeline.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
"dist"
|
|
20
20
|
],
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@glissade/core": "0.
|
|
23
|
-
"@glissade/player": "0.
|
|
24
|
-
"@glissade/scene": "0.
|
|
22
|
+
"@glissade/core": "0.4.0",
|
|
23
|
+
"@glissade/player": "0.4.0",
|
|
24
|
+
"@glissade/scene": "0.4.0"
|
|
25
25
|
},
|
|
26
26
|
"repository": {
|
|
27
27
|
"type": "git",
|