@frame-by-frame/core 1.0.0-rc.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/LICENSE +21 -0
- package/README.md +123 -0
- package/dist/canvas.d.ts +8 -0
- package/dist/canvas.d.ts.map +1 -0
- package/dist/canvas.js +535 -0
- package/dist/canvas.js.map +1 -0
- package/dist/index-DhdyeigP.d.ts +7 -0
- package/dist/index-DhdyeigP.d.ts.map +1 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +3 -0
- package/dist/public-controller-jGcw6iqQ.js +2825 -0
- package/dist/public-controller-jGcw6iqQ.js.map +1 -0
- package/dist/timeline-DDuRBPRJ.d.ts +17 -0
- package/dist/timeline-DDuRBPRJ.d.ts.map +1 -0
- package/dist/types-BYfMRnsj.d.ts +451 -0
- package/dist/types-BYfMRnsj.d.ts.map +1 -0
- package/dist/types.d.ts +2 -0
- package/dist/types.js +0 -0
- package/dist/video.d.ts +4 -0
- package/dist/video.js +4 -0
- package/package.json +98 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Mário Veronesi Medina
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
# frame-by-frame
|
|
2
|
+
|
|
3
|
+
[](https://github.com/mariozenmedina/frame-by-frame/actions/workflows/ci.yml)
|
|
4
|
+
[](LICENSE)
|
|
5
|
+
|
|
6
|
+
A framework-agnostic TypeScript engine for mapping scroll position to video time.
|
|
7
|
+
|
|
8
|
+
> [!IMPORTANT]
|
|
9
|
+
> `frame-by-frame` `1.0.0-rc.1` is a release candidate for integration feedback, not a stable production release. Compatibility evidence remains qualified by the tested browsers, operating systems, codecs, and media environments.
|
|
10
|
+
|
|
11
|
+
## Why frame-by-frame?
|
|
12
|
+
|
|
13
|
+
Scroll-driven video experiences repeatedly need the same careful behavior: deterministic timeline mapping, bounded media seeks, responsive assets, loading coordination, and complete cleanup. `frame-by-frame` provides those responsibilities as a small engine with an explicit lifecycle instead of coupling them to an application or frontend framework.
|
|
14
|
+
|
|
15
|
+
- Map pixel or normalized scroll ranges to forward or reverse media-time ranges.
|
|
16
|
+
- Use multiple clips and global or per-segment easing in one timeline.
|
|
17
|
+
- Drive independent horizontal and vertical targets from one controller.
|
|
18
|
+
- Choose native video by default or opt into a video-backed 2D canvas.
|
|
19
|
+
- Coordinate immediate, full-file, manual, viewport, and first-use loading.
|
|
20
|
+
- Respect reduced-motion preferences and apply ordered responsive overrides.
|
|
21
|
+
- Keep imports SSR-safe and release every owned resource with `destroy()`.
|
|
22
|
+
|
|
23
|
+
Native scrolling is never intercepted. The engine coalesces scroll work with animation frames and keeps only the latest pending seek.
|
|
24
|
+
|
|
25
|
+
## Quick start
|
|
26
|
+
|
|
27
|
+
Install the release-candidate channel with one package manager:
|
|
28
|
+
|
|
29
|
+
```sh
|
|
30
|
+
pnpm add @frame-by-frame/core@next
|
|
31
|
+
# or
|
|
32
|
+
npm install @frame-by-frame/core@next
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
The root entry is the recommended video-only API:
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
import { createFrameByFrame } from '@frame-by-frame/core';
|
|
39
|
+
|
|
40
|
+
const controller = createFrameByFrame({
|
|
41
|
+
axes: {
|
|
42
|
+
y: {
|
|
43
|
+
bindings: [
|
|
44
|
+
{
|
|
45
|
+
id: 'story',
|
|
46
|
+
target: '#story-video',
|
|
47
|
+
clips: [
|
|
48
|
+
{
|
|
49
|
+
id: 'intro',
|
|
50
|
+
sources: [
|
|
51
|
+
{ src: '/media/intro.webm', type: 'video/webm' },
|
|
52
|
+
{ src: '/media/intro.mp4', type: 'video/mp4' },
|
|
53
|
+
],
|
|
54
|
+
},
|
|
55
|
+
],
|
|
56
|
+
easing: 'ease-in-out',
|
|
57
|
+
segments: [
|
|
58
|
+
{
|
|
59
|
+
scroll: [0, 1],
|
|
60
|
+
scrollUnit: 'progress',
|
|
61
|
+
clip: 'intro',
|
|
62
|
+
media: [0, 8],
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
await controller.mount();
|
|
72
|
+
await controller.whenReady();
|
|
73
|
+
|
|
74
|
+
// On application teardown:
|
|
75
|
+
controller.destroy();
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
`mount()` resolves DOM ownership and starts configured automatic loading without waiting for the network. `whenReady()` is the aggregate readiness barrier for application loading screens.
|
|
79
|
+
|
|
80
|
+
## Package entries
|
|
81
|
+
|
|
82
|
+
| Entry | Purpose |
|
|
83
|
+
| ----------------------------- | -------------------------------------------------------------- |
|
|
84
|
+
| `@frame-by-frame/core` | Recommended video-only controller, timeline, errors, and types |
|
|
85
|
+
| `@frame-by-frame/core/video` | Explicit alias for the same video-only API |
|
|
86
|
+
| `@frame-by-frame/core/canvas` | Opt-in factory supporting video and canvas bindings |
|
|
87
|
+
| `@frame-by-frame/core/types` | Runtime-empty, type-only entry |
|
|
88
|
+
|
|
89
|
+
## Documentation
|
|
90
|
+
|
|
91
|
+
Start with the [documentation map](docs/README.md), then choose the path that matches your task:
|
|
92
|
+
|
|
93
|
+
- [Recipes](docs/recipes/README.md) for axes, multi-clip timelines, loading, canvas, responsive behavior, and framework lifecycles.
|
|
94
|
+
- [Guides](docs/guides/README.md) for media preparation, performance, accessibility, and browser support.
|
|
95
|
+
- [API reference](docs/api/controller.md) for controller behavior, with dedicated [timeline](docs/api/timeline.md), [video](docs/api/video.md), and [canvas](docs/api/canvas.md) references.
|
|
96
|
+
- [Troubleshooting](docs/troubleshooting.md) for common integration symptoms and stable error codes.
|
|
97
|
+
- [Version 1 acceptance matrix](docs/v1-acceptance.md) for implemented, operator-pending, and release-pending evidence.
|
|
98
|
+
- [Changelog](CHANGELOG.md) and the [release maintainer guide](docs/guides/releasing.md) for version history and the publication boundary.
|
|
99
|
+
- [Release candidate notes](docs/releases/v1.0.0-rc.1.md) for installation, compatibility evidence, and known limitations in `1.0.0-rc.1`.
|
|
100
|
+
- [Architecture decisions](docs/decisions/0001-package-foundation.md) for the public design rationale.
|
|
101
|
+
|
|
102
|
+
## Development
|
|
103
|
+
|
|
104
|
+
Use Node.js 24 LTS and pnpm 11. CI also validates the supported Node.js 22 line.
|
|
105
|
+
|
|
106
|
+
```sh
|
|
107
|
+
pnpm install
|
|
108
|
+
pnpm check
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
The required gate covers formatting, documentation links, linting, TypeScript, deterministic tests and coverage, builds, bundle budgets, package metadata, declarations, and built entry imports. The prepared [browser validation suite](docs/guides/browser-support.md) is run separately by an operator because codecs and media presentation vary by runtime.
|
|
112
|
+
|
|
113
|
+
## Contributing
|
|
114
|
+
|
|
115
|
+
Focused bug reports, documentation improvements, design feedback, and implementation proposals are welcome. Read [CONTRIBUTING.md](CONTRIBUTING.md) before opening an issue or pull request. Significant API or architecture changes should begin with an issue so their trade-offs can be discussed publicly.
|
|
116
|
+
|
|
117
|
+
The core remains framework agnostic. A maintained Vue example is planned after the first core release; other framework examples will be open to community pull requests once that example contract is established.
|
|
118
|
+
|
|
119
|
+
Project communication, code, tests, and public documentation are in English. See the [Code of Conduct](CODE_OF_CONDUCT.md), [support policy](SUPPORT.md), [security policy](SECURITY.md), and [governance model](GOVERNANCE.md).
|
|
120
|
+
|
|
121
|
+
## License
|
|
122
|
+
|
|
123
|
+
Licensed under the [MIT License](LICENSE).
|
package/dist/canvas.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { $ as Timeline, A as FrameByFrameBreakpointOverride, B as FrameByFrameOptions, C as FrameByFrameBindingBaseConfig, D as FrameByFrameBindingState, E as FrameByFrameBindingOverride, F as FrameByFrameErrorOptions, G as FrameByFrameUpdateReason, H as FrameByFrameState, I as FrameByFrameEventMap, J as ReducedMotionBehavior, K as FrameConfig, L as FrameByFrameFrameEvent, M as FrameByFrameErrorCode, N as FrameByFrameErrorDetails, O as FrameByFrameBreakpointChangeEvent, P as FrameByFrameErrorInfo, Q as ScrollUnit, R as FrameByFrameLoadProgressEvent, S as FrameByFrameAxisState, T as FrameByFrameBindingEvent, U as FrameByFrameStatus, V as FrameByFrameSeekRequestEvent, W as FrameByFrameUpdateEvent, X as ScrollSource, Y as RendererType, Z as ScrollSourceReference, _ as EasingName, a as CanvasFrameByFrameAxisConfig, at as VideoLoadProgress, b as FrameByFrameAxisConfig, c as CanvasFrameByFrameBindingOverride, ct as VideoLoadingTrigger, d as CanvasFrameByFrameController, dt as VideoSeekConfig, et as TimelineOptions, f as CanvasFrameByFrameOptions, ft as VideoSourceConfig, g as EasingFunction, h as Easing, i as CanvasFrameByFrameAxesConfig, it as VideoClipConfig, j as FrameByFrameController, k as FrameByFrameBreakpointConfig, l as CanvasFrameByFrameBreakpointConfig, lt as VideoPreload, m as CanvasRendererOverride, n as CanvasBindingConfig, nt as TimelineResolution, o as CanvasFrameByFrameAxisOverride, ot as VideoLoadState, p as CanvasRendererConfig, q as MediaCrossOrigin, r as CanvasFit, rt as TimelineSegment, s as CanvasFrameByFrameBindingConfig, st as VideoLoadingConfig, t as AxisName, tt as TimelinePhase, u as CanvasFrameByFrameBreakpointOverride, ut as VideoRendererConfig, v as ElementReference, w as FrameByFrameBindingConfig, x as FrameByFrameAxisOverride, y as FrameByFrameAxesConfig, z as FrameByFrameLoadedMetadataEvent } from "./types-BYfMRnsj.js";
|
|
2
|
+
import { n as FrameByFrameError, t as createTimeline } from "./timeline-DDuRBPRJ.js";
|
|
3
|
+
//#region src/canvas.d.ts
|
|
4
|
+
/** Creates an SSR-safe controller with opt-in native-video and 2D-canvas renderers. */
|
|
5
|
+
declare const createFrameByFrame: (options: CanvasFrameByFrameOptions) => CanvasFrameByFrameController;
|
|
6
|
+
//#endregion
|
|
7
|
+
export { type AxisName, type CanvasBindingConfig, type CanvasFit, type CanvasFrameByFrameAxesConfig, type CanvasFrameByFrameAxisConfig, type CanvasFrameByFrameAxisOverride, type CanvasFrameByFrameBindingConfig, type CanvasFrameByFrameBindingOverride, type CanvasFrameByFrameBreakpointConfig, type CanvasFrameByFrameBreakpointOverride, type CanvasFrameByFrameController, type CanvasFrameByFrameOptions, type CanvasRendererConfig, type CanvasRendererOverride, type Easing, type EasingFunction, type EasingName, type ElementReference, type FrameByFrameAxesConfig, type FrameByFrameAxisConfig, type FrameByFrameAxisOverride, type FrameByFrameAxisState, type FrameByFrameBindingBaseConfig, type FrameByFrameBindingConfig, type FrameByFrameBindingEvent, type FrameByFrameBindingOverride, type FrameByFrameBindingState, type FrameByFrameBreakpointChangeEvent, type FrameByFrameBreakpointConfig, type FrameByFrameBreakpointOverride, type FrameByFrameController, FrameByFrameError, type FrameByFrameErrorCode, type FrameByFrameErrorDetails, type FrameByFrameErrorInfo, type FrameByFrameErrorOptions, type FrameByFrameEventMap, type FrameByFrameFrameEvent, type FrameByFrameLoadProgressEvent, type FrameByFrameLoadedMetadataEvent, type FrameByFrameOptions, type FrameByFrameSeekRequestEvent, type FrameByFrameState, type FrameByFrameStatus, type FrameByFrameUpdateEvent, type FrameByFrameUpdateReason, type FrameConfig, type MediaCrossOrigin, type ReducedMotionBehavior, type RendererType, type ScrollSource, type ScrollSourceReference, type ScrollUnit, type Timeline, type TimelineOptions, type TimelinePhase, type TimelineResolution, type TimelineSegment, type VideoClipConfig, type VideoLoadProgress, type VideoLoadState, type VideoLoadingConfig, type VideoLoadingTrigger, type VideoPreload, type VideoRendererConfig, type VideoSeekConfig, type VideoSourceConfig, createFrameByFrame, createTimeline };
|
|
8
|
+
//# sourceMappingURL=canvas.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"canvas.d.ts","names":[],"sources":["../src/canvas.ts"],"mappings":";;;;cAyCa,qBACX,SAAS,8BACR"}
|