Lottie for HyperFrames

Embed and seek lottie-web and dotLottie animations within HyperFrames compositions.

- Supports both lottie-web JSON animations and .lottie files via the dotLottie player, with automatic seeking to composition time

- Requires registering player instances on window.__hfLottie and 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

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