Skip to content

docs(skills): align Lottie guidance with runtime adapter #1141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
miguel-heygen merged 1 commit into from
May 31, 2026
+26 −39
Merged

docs(skills): align Lottie guidance with runtime adapter #1141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 15 additions & 30 deletions skills/hyperframes/references/techniques.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,38 +181,23 @@ The slide distance DECAYS per word (80→12px) — mimics a camera settling.
Vector animations that play inside a composition. Use for logos, character animations, icons.

```html
<!-- The web-component package is `@lottiefiles/dotlottie-wc` (the SDK
`@lottiefiles/dotlottie-web` does NOT expose a custom element).
The element tag is <dotlottie-wc>. -->
<script
src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-wc/dist/dotlottie-wc.js"
type="module"
></script>
<dotlottie-wc
class="lottie"
src="capture/assets/lottie/animation-0.json"
autoplay
loop
speed="1.5"
style="width:500px;height:500px;"
>
</dotlottie-wc>
<div id="anim" class="lottie"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
gsap.set(".lottie", { scale: 0.3, opacity: 0 });
tl.to(".lottie", { scale: 1, opacity: 1, duration: 0.35, ease: "back.out(1.6)" }, 0.2);
</script>
```

Or use lottie-web for more control:
window.__hfLottie = window.__hfLottie || [];

const anim = lottie.loadAnimation({
container: document.getElementById("anim"),
renderer: "svg",
loop: false,
autoplay: false,
path: "capture/assets/lottie/animation-0.json",
});
window.__hfLottie.push(anim);

```javascript
var anim = lottie.loadAnimation({
container: document.getElementById("anim"),
renderer: "svg",
loop: false,
autoplay: false,
path: "capture/assets/lottie/animation-0.json",
});
gsap.set("#anim", { scale: 0.3, opacity: 0 });
tl.to("#anim", { scale: 1, opacity: 1, duration: 0.35, ease: "back.out(1.6)" }, 0.2);
</script>
```

---
Expand Down
10 changes: 5 additions & 5 deletions skills/remotion-to-hyperframes/references/api-map.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,11 @@ See [transitions.md](transitions.md).

See [lottie.md](lottie.md).

| Remotion | HyperFrames |
| ------------------------------- | --------------------------------------------------------------------------------------------------------- |
| `<Lottie animationData={data}>` | `<div id="lottie-N">` + `<script>lottie.loadAnimation(...).then(a => window.__hfLottie.push(a))</script>` |
| `loop` / `playbackRate` props | translate to `loop` / lottie playback options; HF adapter seeks via `goToAndStop` |
| `@remotion/lottie` runtime | `lottie-web` from CDN — drop the React wrapper |
| Remotion | HyperFrames |
| ------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| `<Lottie animationData={data}>` | `<div id="lottie-N">` + `<script>const anim = lottie.loadAnimation({...}); window.__hfLottie.push(anim)</script>` |
| `loop` / `playbackRate` props | translate only after checking player seek behavior; HF adapter seeks absolute time via `goToAndStop` |
| `@remotion/lottie` runtime | `lottie-web` from CDN — drop the React wrapper |

## Fonts

Expand Down
10 changes: 6 additions & 4 deletions skills/remotion-to-hyperframes/references/lottie.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,10 +105,12 @@ for the full supported feature list.
## Loop behavior

Remotion's `loop={true}` plays the animation continuously. Translate to
the lottie-web `loop: true` setting AND rely on the adapter's natural
seek behavior (it'll seek modulo the animation's duration). For
non-default playback rates, set `playbackRate` in `loadAnimation` and HF
will respect it during seek.
the player option only after checking the generated frames. The HF
adapter seeks absolute composition time; it does not add modulo looping
or playback-rate scaling on top of the player. For exact repeating
cycles or non-default playback rates, bake the timing into the Lottie
asset or author an explicit timeline around the Lottie layer and verify
the rendered output.

## Performance note

Expand Down
Loading