lottie

Integrates lottie-web and dotLottie assets into HyperFrames with centralized player registration via window.__hfLottie.

248|32|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/boraoztunc/skills --skill lottie-boraoztunc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: lottie
Source: https://github.com/boraoztunc/skills/tree/main/lottie
Command: npx skills add https://github.com/boraoztunc/skills --skill lottie-boraoztunc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Allows embedding and precise control of Lottie animations inside HyperFrames, including lottie-web and dotLottie workflows, to achieve deterministic playback across environments.

Core Features & Use Cases

  • Asset-based playback: load lottie-web and dotLottie assets from local project files under assets/.
  • Deterministic playback: disable autoplay and looping to ensure predictable timing.
  • Centralized management: register animations on window.__hfLottie for easy access and coordination.
  • Use case: integrate brand animations in product UI with consistent timing across pages and platforms.

Quick Start

Load an asset from assets and push the Lottie player to window.__hfLottie for centralized control.

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 inside HyperFrames?

To embed Lottie animations inside HyperFrames, load lottie-web or dotLottie assets from local project files under assets/ and register the player through a centralized API for deterministic playback.

How do I control Lottie animation timing for a consistent UI across browsers?

Control Lottie animation timing by disabling autoplay and looping, which ensures predictable and deterministic playback of animated UI elements across different browsers and devices.

Can I load dotLottie assets from local files for frontend animations?

Yes, you can load dotLottie assets from local project files under the assets/ directory, configure playback settings, and push the player to a centralized registry for management.

What is the best way to coordinate multiple Lottie players on a marketing site?

The best way to coordinate multiple Lottie players is by registering them on the centralized window.__hfLottie registry, allowing easy access and synchronized timing management across pages.

Does this Lottie integration support both lottie-web and dotLottie formats?

Yes, the integration supports both lottie-web and dotLottie asset formats, loading them from local project files and exposing their players through a standardized registration API.