@hyperframes/shader-transitions 0.5.4 → 0.6.0-alpha.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 +9 -19
- package/dist/index.cjs +4 -13
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -11
- package/dist/index.d.ts +4 -11
- package/dist/index.global.js +4 -13
- package/dist/index.global.js.map +1 -1
- package/dist/index.js +4 -13
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -30,12 +30,7 @@ const tl = init({
|
|
|
30
30
|
});
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
The `init()` function
|
|
34
|
-
|
|
35
|
-
When the browser exposes Chrome's experimental CanvasDrawElement API, scene
|
|
36
|
-
capture uses native HTML-in-canvas via `drawElementImage()`. Other browsers keep
|
|
37
|
-
using the existing `html2canvas` fallback. You can feature-detect the native path
|
|
38
|
-
with `isHtmlInCanvasCaptureSupported()`.
|
|
33
|
+
The `init()` function captures each scene to a WebGL texture at transition time, crossfades between them using the selected shader, and returns a GSAP timeline. If WebGL is unavailable, it falls back to hard cuts.
|
|
39
34
|
|
|
40
35
|
### With an existing timeline
|
|
41
36
|
|
|
@@ -79,19 +74,14 @@ init({
|
|
|
79
74
|
|
|
80
75
|
### `init(config): GsapTimeline`
|
|
81
76
|
|
|
82
|
-
| Option
|
|
83
|
-
|
|
|
84
|
-
| `bgColor`
|
|
85
|
-
| `accentColor`
|
|
86
|
-
| `scenes`
|
|
87
|
-
| `transitions`
|
|
88
|
-
| `timeline`
|
|
89
|
-
| `compositionId`
|
|
90
|
-
| `previewCaptureFps` | `number` | no | Browser preview pre-capture samples per transition second. Defaults to `30`; rendering uses deterministic per-frame compositing instead. |
|
|
91
|
-
|
|
92
|
-
Browser preview capture scale and transition-prep loading UI ownership are controlled by `<hyperframes-player>` (`shader-capture-scale`, `shader-loading`) instead of composition code. Direct non-player previews keep the built-in full-fidelity loading fallback.
|
|
93
|
-
|
|
94
|
-
Browser previews store captured transition snapshots in IndexedDB using a key derived from composition ID, scene DOM/style signatures, transition timing, capture FPS, scale, and dimensions. On refresh, matching snapshots are reloaded into WebGL textures instead of being captured again. Runtime scene or stylesheet edits mark only adjacent transition caches dirty; recapture is deferred until playback so editing stays responsive.
|
|
77
|
+
| Option | Type | Required | Description |
|
|
78
|
+
| --------------- | -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
79
|
+
| `bgColor` | `string` | yes | Fallback background color (hex) for scene capture. Use the composition's body/canvas background — individual scenes set their own `background-color` via CSS. |
|
|
80
|
+
| `accentColor` | `string` | no | Accent color (hex) for shader glow effects |
|
|
81
|
+
| `scenes` | `string[]` | yes | Element IDs of each scene, in order |
|
|
82
|
+
| `transitions` | `TransitionConfig[]` | yes | Transition definitions (see below) |
|
|
83
|
+
| `timeline` | `GsapTimeline` | no | Existing timeline to attach transitions to |
|
|
84
|
+
| `compositionId` | `string` | no | Override the `data-composition-id` for timeline registration |
|
|
95
85
|
|
|
96
86
|
### `TransitionConfig`
|
|
97
87
|
|