skills.rest
1veso
1vesoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

lottie

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

Updated May 14, 2026
Search Tags:#json#animation#lottie#web animation#hyperframes
One-click install
npx skills add https://github.com/1veso/CONTENT_AUTOMATION_PIPELINE --skill lottie-1veso
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
KamalabotKamalabot

lottie

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

Community
Intermediate
heygen-comheygen-com
40.2k

lottie

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

Official
Intermediate
hoanghd218hoanghd218
7

lottie

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

Community
Intermediate
boraoztuncboraoztunc
248

lottie

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

Community
Intermediate