Integrates lottie-web and dotLottie animations into HyperFrames with deterministic seeking.
npx skills add https://github.com/hugotown/dotfiles --skill lottie-hugotown
Please help me install this Agent Skill. Skill: lottie Source: https://github.com/hugotown/dotfiles/tree/main/agents/skills/lottie Command: npx skills add https://github.com/hugotown/dotfiles --skill lottie-hugotown
lottie.loadAnimation using autoplay: false and register them on window.__hfLottie for frame-accurate seeking. - dotLottie Player Support: Configure @lottiefiles/dotlottie-web canvas players with .lottie files and register them in the same registry. - Multi-Animation Scenes: Push multiple players into one registry so HyperFrames seeks all animations to the same composition time. - Use Case: You have an After Effects logo reveal exported as JSON and want it to render frame-accurately inside a HyperFrames composition instead of playing freely. ## Quick Start Use the lottie skill to embed my assets/logo-reveal.json animation in a HyperFrames page with autoplay disabled and registered on window.__hfLottie.High-intent search queries and answers about installing and using this skill.
Load the animation with lottie.loadAnimation using autoplay set to false and a local JSON path, then push the returned instance onto window.__hfLottie. HyperFrames seeks it with goToAndStop(timeMs, false) through its lottie runtime adapter.
Use lottie-web for standard JSON exports rendered as SVG, and @lottiefiles/dotlottie-web when your asset is a packaged .lottie file rendered on canvas. Both are registered the same way on window.__hfLottie, but dotLottie is sought via frame or percentage APIs.
Yes, push each animation or player instance into the same window.__hfLottie array. HyperFrames seeks all registered players to the same composition time, keeping multiple animations synchronized.
Common causes are autoplay left enabled, calling play() manually, or registering the player asynchronously after HyperFrames validation already inspected the page. Ensure autoplay is false and the instance is pushed to window.__hfLottie synchronously at load time.
No, remote path URLs at render time should be avoided. Load assets from local project files, typically under an assets/ directory, so rendering is deterministic and does not depend on network availability.
freshtechbroIntegrate Lottie JSON and dotLottie animations into web and React applications.
heygen-comScaffold, lint, preview, and render HTML-based HyperFrames compositions.
chmonitorEnforce structural and runtime rules for HyperFrames HTML video compositions.
TumeloRamaphosaConvert After Effects animations into Lottie assets for React apps.