Agent skill · design visual · aiskillstore
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.
Why this skill is useful
Provides specific patterns and integration details for using Lottie animations in HyperFrames that the AI wouldn't reliably generate on its own.
What it needs
Requires hyperframes installed locally. About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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: false unless 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 dotLottie Pattern Multiple Animations Push each player into the same registry: HyperFrames seeks them all to the same composition time. Good Uses After Effects exports that are already known to render correctly in lottie-web. Logo reveals, icon loops, decorative accents, and product UI motion. Translating Remotion Lottie usage into plain HyperFrames HTML. Avoid Relying on remote path URLs at render time. Starting playback with play(). Assuming unsupported After Effects effects will survive export. Test the JSON or .lottie file in a browser first. Loading a player asynchronously and registering it after HyperFrames validation has already inspected the page. Validation After editing a Lottie composition: Credits And References HyperFrames adapter source: packages/core/src/runtime/adapters/lottie.ts. lottie-web by Airbnb: https://github.com/airbnb/lottie-web lottie-web loadAnimation options: https://github.com/airbnb/lottie-web/wiki/loadAnimation-options dotLottie web player methods by LottieFiles: https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/methods
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/lottie