lottie

Name: lottie
Availability: InStock
Author: Bora

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

248|32|Updated Mar 30, 2026

Search Tags:#frontend #animation #lottie #lottie-web #dotlottie #hyperframes

Ready to run

npx skills add https://github.com/boraoztunc/skills --skill lottie-boraoztunc

💬 Prompt for ChatGPT / Claude Chat▼

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.