skills.rest
hoanghd218
hoanghd218COMMUNITY
Explore all skills by this author →
GitHub

lottie

Load and control Lottie animations from assets/ via window.__hfLottie.

7|9|Updated May 9, 2026
Search Tags:#animation#lottie#lottie-web#dotlottie#hyperframes
One-click install
npx skills add https://github.com/hoanghd218/claude-code-2-days --skill lottie-hoanghd218
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lottie
Source: https://github.com/hoanghd218/claude-code-2-days/tree/main/.agents/skills/lottie
Command: npx skills add https://github.com/hoanghd218/claude-code-2-days --skill lottie-hoanghd218

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

HyperFrames users need a seamless way to load, control, and synchronize Lottie animations from local assets or dotLottie files within their projects.

Core Features & Use Cases

  • Lottie-web and dotLottie support: load and drive animations with a deterministic API.
  • Asset-centric workflow: load from assets/ and maintain stable container dimensions with CSS.
  • Integration patterns: register each animation on window.__hfLottie for centralized control and syncing.
  • Use Case: render brand logo reveals or UI motion sequences in HyperFrames without writing custom parsers.

Quick Start

Load a local lottie-web or dotLottie asset from assets/ and push the animation instance into window.__hfLottie with autoplay set to false.

Frequently Asked Questions about lottie

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I embed Lottie animations in HyperFrames?▼

Lottie-web and dotLottie files are both supported for embedding animations in HyperFrames. You can load either format from local assets, allowing you to drive UI motion sequences or brand logo reveals without writing custom parsers.

Does HyperFrames support dotLottie files for UI motion sequences?▼

Yes, HyperFrames supports dotLottie files for rendering UI motion sequences. You can load these assets alongside lottie-web files to embed brand animations without needing custom parsers, registering them on window.__hfLottie for control.

Why does my Lottie animation autoplay before I can control it in HyperFrames?▼

Your Lottie animation autoplays because autoplay was not disabled during initialization. To achieve deterministic playback control and proper registration on window.__hfLottie, you must explicitly set autoplay to false when loading the asset.

What are the limitations of embedding Lottie assets in HyperFrames?▼

The primary limitations involve asset loading and layout stability: you must load assets exclusively from the assets/ directory and maintain stable container dimensions with CSS. Without these precautions, animation registration on window.__hfLottie may fail or render incorrectly.

Related Skills

Explore More Software Engineering Skills→
BasedHardwareBasedHardware
4

lottie

Add and manage Lottie animations in React using LottieFiles.

Official
Intermediate
heygen-comheygen-com
40.2k

lottie

Integrate Lottie and dotLottie animations into HyperFrames via a registered player interface.

Official
Intermediate
KamalabotKamalabot

lottie

Integrate Lottie and dotLottie animations into HyperFrames projects with seekable playback.

Community
Intermediate
wesleysimpliciowesleysimplicio
1

lottie

Integrate lottie-web and dotLottie animations into HyperFrames via a runtime adapter.

Community
Advanced