Integrate Lottie and dotLottie animations into HyperFrames via a registered player interface.
npx skills add https://github.com/heygen-com/hyperframes --skill lottie-heygen-com
Please help me install this Agent Skill. Skill: lottie Source: https://github.com/heygen-com/hyperframes/tree/main/skills/lottie Command: npx skills add https://github.com/heygen-com/hyperframes --skill lottie-heygen-com
Lottie and dotLottie adapter patterns for HyperFrames enable embedding and controlling Lottie animations (lottie-web JSONs and .lottie files) within your compositions, with deterministic playback and a unified registration surface.
Add your Lottie asset to the assets folder, initialize it with the appropriate lottie-web or dotLottie player, and push the resulting player to window.__hfLottie for HyperFrames to manage.
High-intent search queries and answers about installing and using this skill.
You can embed Lottie animations by loading local lottie-web JSON or dotLottie files under assets/, initializing a compatible player, and registering it on window.__hfLottie for HyperFrames to synchronize with the composition timeline.
Yes, dotLottie files are supported alongside lottie-web JSON animations. You load the local asset, initialize the appropriate dotLottie player, and register the resulting player instance to window.__hfLottie for synchronized timeline control.
Lottie animations autoplay or loop unexpectedly because default settings are not enforced. This adapter sets autoplay: false and loop: false by default, ensuring controlled, deterministic playback synchronized directly to the composition timeline.
To synchronize Lottie playback with a composition timeline, you register each animation instance to the centralized window.__hfLottie registry. This provides a unified interface for HyperFrames to globally manage and deterministically seek animations.
To fix layout shifts when rendering Lottie animations, keep the Lottie container dimensions stable using CSS. This ensures reliable layout across renders and devices, preventing the container from collapsing or expanding unexpectedly during playback.
Yes, you need to manually register every Lottie player. Pushing each initialized player to the window.__hfLottie registry is required for HyperFrames to globally manage, control, and synchronize the animation with the composition timeline.
BasedHardwareAdd and manage Lottie animations in React using LottieFiles.
wesleysimplicioIntegrate lottie-web and dotLottie animations into HyperFrames via a runtime adapter.
johan-RmOrchestrate complex animations across GSAP, Lottie, and Three.js runtimes.
KamalabotIntegrate Lottie and dotLottie animations into HyperFrames projects with seekable playback.
