lottie

Integrate Lottie animations into HyperFrames with lottie-web or dotLottie.

Updated May 14, 2026

Search Tags:#json #animation #lottie #web animation #hyperframes

Ready to run

npx skills add https://github.com/1veso/CONTENT_AUTOMATION_PIPELINE --skill lottie-1veso

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: lottie
Source: https://github.com/1veso/CONTENT_AUTOMATION_PIPELINE/tree/main/.agents/skills/lottie
Command: npx skills add https://github.com/1veso/CONTENT_AUTOMATION_PIPELINE --skill lottie-1veso

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires lottie-web, dotlottie-web, and includes scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies the integration of Lottie animations into HyperFrames, allowing for dynamic and interactive visual elements within your HyperFrames projects.

Core Features & Use Cases

Lottie Web and dotLottie Support: Seamlessly integrate lottie-web JSON animations and dotLottie players.
Registration on window.__hfLottie: Ensures all animations are accessible within the HyperFrames context.
Stable Lottie Container Dimensions: Keeps animations consistent with CSS styling.
Use Case: Use this Skill to add a logo reveal animation to your HyperFrames project, ensuring it's in sync with the rest of your design.

Quick Start

Use the lottie skill to add a logo animation to your HyperFrames project by loading the 'logo-reveal.json' animation from the 'assets/' directory.

Frequently Asked Questions about lottie

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

FAQPage Schema

How do I embed Lottie JSON animations into HyperFrames?▼

To embed Lottie animations into HyperFrames, use this Skill to load lottie-web JSON files from the assets directory. It registers animations on window.__hfLottie, ensuring dynamic visual elements are accessible within your project context.

Can I use dotLottie players with HyperFrames web animations?▼

Yes, HyperFrames supports dotLottie players for web animations. This Skill integrates both lottie-web and dotlottie-web dependencies, allowing you to seamlessly load and control dynamic visual elements using either format.

Why does my Lottie animation change size in HyperFrames?▼

Lottie animations change size in HyperFrames due to unstable container dimensions. This Skill requires specific CSS styling to maintain stable Lottie container dimensions, ensuring your visual elements remain consistent with the rest of your design.

Do I need lottie-web installed to add interactive visual elements to HyperFrames?▼

Yes, you need the lottie-web or dotlottie-web library installed to provide player functionality for HyperFrames. These dependencies are required to load the JSON animation files and render the dynamic visual elements correctly.

How do I access Lottie animations within the HyperFrames context?▼

You access Lottie animations within the HyperFrames context via the window.__hfLottie object. This Skill automatically registers all loaded lottie-web and dotLottie instances there, enabling programmatic control over your dynamic visual elements.