lottie
Installation
Summary
Embed and seek lottie-web and dotLottie animations within HyperFrames compositions.
- Supports both
lottie-webJSON animations and.lottiefiles via the dotLottie player, with automatic seeking to composition time - Requires registering player instances on
window.__hfLottieand disabling autoplay for deterministic timeline control - Handles multiple animations in a single composition by pushing each player to the same registry for synchronized seeking
- Works best with pre-tested After Effects exports and local asset files; avoid remote URLs and asynchronous player registration at render time
SKILL.md
Lottie for HyperFrames
HyperFrames can seek both lottie-web and dotLottie players through its lottie runtime adapter. Lottie is a strong fit because the animation timeline is already encoded in the asset; HyperFrames only needs a player object it can seek.
Contract
- Load assets from local project files, usually under
assets/. - Set
autoplay: false. - Prefer
loop: falseunless the user explicitly wants a loop. - Register every returned animation or player on
window.__hfLottie. - Keep the Lottie container dimensions stable with CSS.
The adapter seeks lottie-web with goToAndStop(timeMs, false) and dotLottie with frame or percentage APIs depending on player shape.
lottie-web Pattern
Explore more of GLSRM