mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-10-30 09:16:55 +00:00
fix(skills): load dotLottie through its browser ESM entry (#5562)
* fix(skills): load dotLottie through its browser ESM entry * chore: prepare conflict resolution against current main * fix(skills): retain local Lottie setup after syncing main * chore: prepare conflict resolution against current main * fix(skills): retain browser dotlottie setup in current runtime guidance * chore: prepare conflict resolution against current main * fix(skills): refresh dotLottie fingerprints against current main * chore: prepare conflict resolution against current main * chore: merge main and refresh dotLottie skill manifest * chore: prepare conflict resolution against current main * fix(skills): keep Lottie setup guidance in its reference
This commit is contained in:
Abdullah M. Nazif
@@ -1,53 +1,8 @@
|
||||
import type { RuntimeDeterministicAdapter } from "../types";
|
||||
import { swallow } from "../diagnostics";
|
||||
|
||||
/**
|
||||
* Lottie adapter for HyperFrames
|
||||
*
|
||||
* Supports lottie-web and @lottiefiles/dotlottie-web.
|
||||
*
|
||||
* ## Usage in a composition
|
||||
*
|
||||
* ### lottie-web (classic):
|
||||
* ```html
|
||||
* <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
|
||||
* <div id="anim"></div>
|
||||
* <script>
|
||||
* const anim = lottie.loadAnimation({
|
||||
* container: document.getElementById('anim'),
|
||||
* renderer: 'svg',
|
||||
* loop: false,
|
||||
* autoplay: false,
|
||||
* path: 'animation.json',
|
||||
* });
|
||||
* // Register so the adapter can seek it:
|
||||
* window.__hfLottie = window.__hfLottie || [];
|
||||
* window.__hfLottie.push(anim);
|
||||
* </script>
|
||||
* ```
|
||||
*
|
||||
* ### @lottiefiles/dotlottie-web:
|
||||
* ```html
|
||||
* <script src="https://unpkg.com/@lottiefiles/dotlottie-web"></script>
|
||||
* <canvas id="anim"></canvas>
|
||||
* <script>
|
||||
* const player = new DotLottie({
|
||||
* canvas: document.getElementById('anim'),
|
||||
* src: 'animation.lottie',
|
||||
* autoplay: false,
|
||||
* });
|
||||
* window.__hfLottie = window.__hfLottie || [];
|
||||
* window.__hfLottie.push(player);
|
||||
* </script>
|
||||
* ```
|
||||
*
|
||||
* Multiple animations are supported — all are seeked in sync.
|
||||
*
|
||||
* ## Auto-discovery
|
||||
*
|
||||
* The adapter also attempts to auto-discover Lottie animations registered
|
||||
* via the global `lottie` object, so compositions that call
|
||||
* `lottie.loadAnimation(...)` without manually registering still work.
|
||||
/** Seeks paused lottie-web and dotLottie instances registered on window.__hfLottie.
|
||||
* Setup: skills/hyperframes/references/runtimes.md
|
||||
*/
|
||||
export function createLottieAdapter(params?: {
|
||||
resolveStartSeconds?: (element: Element) => number;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
"files": 2
|
||||
},
|
||||
"hyperframes": {
|
||||
"hash": "76c914f47480032c",
|
||||
"hash": "1237044d3ceae40d",
|
||||
"files": 77
|
||||
},
|
||||
"hyperframes-cli": {
|
||||
@@ -22,7 +22,7 @@
|
||||
"files": 116
|
||||
},
|
||||
"remotion-to-hyperframes": {
|
||||
"hash": "b585361591366636",
|
||||
"hash": "363d84ce81d7dd07",
|
||||
"files": 77
|
||||
},
|
||||
"slideshow": {
|
||||
|
||||
@@ -25,6 +25,32 @@ HyperFrames seeks each frame on its own, so motion must be a function of time, n
|
||||
|
||||
Charts and map overlays: drive them from a GSAP tween's `onUpdate`, not the library's own transitions. A real place is shown on baked imagery, not drawn (`film.md` "Maps and real places"). Heavy setup (big meshes, shader compiles) registers a `window.__hf.buildReady["<key>"]` promise.
|
||||
|
||||
## dotLottie browser setup
|
||||
|
||||
Copy `dist/index.js` and `dist/dotlottie-player.wasm` from the same pinned
|
||||
`@lottiefiles/dotlottie-web` release (for example, 0.81.0) into the project's
|
||||
`lib/dotlottie-web/` directory. Its CommonJS entry cannot run as a classic
|
||||
browser script. Import the ESM entry and set the local WASM URL before creating
|
||||
the player, so rendering loads the SDK, WASM and animation from project files.
|
||||
|
||||
```html
|
||||
<canvas id="anim" style="width:100%;height:100%"></canvas>
|
||||
<script type="module">
|
||||
import { DotLottie } from "./lib/dotlottie-web/index.js";
|
||||
|
||||
DotLottie.setWasmUrl(new URL("./lib/dotlottie-web/dotlottie-player.wasm", import.meta.url).href);
|
||||
const player = new DotLottie({
|
||||
canvas: document.getElementById("anim"),
|
||||
src: "assets/hello.lottie",
|
||||
autoplay: false,
|
||||
loop: false,
|
||||
renderConfig: { autoResize: false, freezeOnOffscreen: false },
|
||||
});
|
||||
window.__hfLottie = window.__hfLottie || [];
|
||||
window.__hfLottie.push(player);
|
||||
</script>
|
||||
```
|
||||
|
||||
## The seek protocol
|
||||
|
||||
```html
|
||||
|
||||
@@ -4,7 +4,7 @@ Lottie animations are a clean translation case — HF has a built-in
|
||||
[Lottie adapter](https://github.com/heygen-com/hyperframes/blob/main/packages/core/src/runtime/adapters/lottie.ts)
|
||||
that supports both `lottie-web` and `@lottiefiles/dotlottie-web`. The
|
||||
adapter auto-discovers animations registered on `window.__hfLottie`
|
||||
and seeks them per-frame via `goToAndStop`.
|
||||
and seeks lottie-web via `goToAndStop` and current dotLottie players via `setFrame`.
|
||||
|
||||
## Pattern
|
||||
|
||||
@@ -51,27 +51,40 @@ Key differences from a typical Lottie embed:
|
||||
Remotion bundles the animation JSON via webpack import. HF needs the JSON
|
||||
on disk under `assets/` and references it via path:
|
||||
|
||||
1. Copy `hello.json` from the Remotion project into `hf-src/assets/`.
|
||||
2. Reference as `path: "assets/hello.json"` in `loadAnimation`.
|
||||
1. Copy the animation JSON from the Remotion project into the HyperFrames project’s assets folder.
|
||||
2. Pass that local path to `loadAnimation`, as shown in the example above.
|
||||
|
||||
For dotlottie (binary) format, swap in `@lottiefiles/dotlottie-web`:
|
||||
For dotlottie (binary) format, use the ESM build of `@lottiefiles/dotlottie-web`.
|
||||
Before rendering, copy `dist/index.js` and `dist/dotlottie-player.wasm` from the
|
||||
same pinned release into `hf-src/lib/dotlottie-web/`. Version 0.81.0 provides:
|
||||
|
||||
- https://unpkg.com/@lottiefiles/dotlottie-web@0.81.0/dist/index.js
|
||||
- https://unpkg.com/@lottiefiles/dotlottie-web@0.81.0/dist/dotlottie-player.wasm
|
||||
|
||||
The package's CommonJS entry cannot run as a classic browser script. Set the
|
||||
local WASM URL before constructing the player; the render then loads the SDK,
|
||||
WASM and animation from project files.
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@lottiefiles/dotlottie-web"></script>
|
||||
<canvas id="anim" style="width:100%;height:100%"></canvas>
|
||||
<script>
|
||||
<script type="module">
|
||||
import { DotLottie } from "./lib/dotlottie-web/index.js";
|
||||
|
||||
DotLottie.setWasmUrl(new URL("./lib/dotlottie-web/dotlottie-player.wasm", import.meta.url).href);
|
||||
const player = new DotLottie({
|
||||
canvas: document.getElementById("anim"),
|
||||
src: "assets/hello.lottie",
|
||||
autoplay: false,
|
||||
loop: false,
|
||||
renderConfig: { autoResize: false, freezeOnOffscreen: false },
|
||||
});
|
||||
window.__hfLottie = window.__hfLottie || [];
|
||||
window.__hfLottie.push(player);
|
||||
</script>
|
||||
```
|
||||
|
||||
The HF adapter handles both player APIs (it duck-types `goToAndStop`
|
||||
vs `setCurrentRawFrameValue` / `seek`).
|
||||
The HF adapter supports `goToAndStop` for lottie-web, `setFrame` for current
|
||||
dotLottie players, and `setCurrentRawFrameValue` / `seek` for older player shapes.
|
||||
|
||||
## Multiple Lottie animations
|
||||
|
||||
|
||||
Reference in New Issue
Block a user