OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add heygen-com/hyperframes --skill lottie
Lottie and dotLottie adapter patterns for HyperFrames. Use when embedding lottie-web JSON animations, .lottie files, @lottiefiles/dotlottie-web players, registering instances on window.__hfLottie, or making After Effects exports deterministic in HyperFrames.
npx skills add heygen-com/hyperframes --skill lottie
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.
assets/.autoplay: false.loop: false unless the user explicitly wants a loop.window.__hfLottie.The adapter seeks lottie-web with goToAndStop(timeMs, false) and dotLottie with frame or percentage APIs depending on player shape.
Push each player into the same registry:
HyperFrames seeks them all to the same composition time.
path URLs at render time.play()..lottie file in a browser first.After editing a Lottie composition:
packages/core/src/runtime/adapters/lottie.ts.loadAnimation options: https://github.com/airbnb/lottie-web/wiki/loadAnimation-options.lottie-layer {
width: 100%;
height: 100%;
}<canvas id="product-lottie" class="lottie-canvas"></canvas>
<script src="https://unpkg.com/@lottiefiles/dotlottie-web"></script>
<script>
const player = new DotLottie({
canvas: document.getElementById("product-lottie"),
src: "assets/product-flow.lottie",
autoplay: false,
loop: false,
});
window.__hfLottie = window.__hfLottie || [];
window.__hfLottie.push(player);
</script>.lottie-canvas {
width: 100%;
height: 100%;
display: block;
}window.__hfLottie = window.__hfLottie || [];
window.__hfLottie.push(backgroundAnim);
window.__hfLottie.push(iconAnim);
window.__hfLottie.push(confettiAnim);npx hyperframes lint
npx hyperframes validate