skills.rest
wesleysimplicio
wesleysimplicioCOMMUNITY
Explore all skills by this author →
𝕏@wesleysimplicGitHub

lottie

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

1|Updated May 7, 2026
Search Tags:#integration#animation#lottie#web-animation#playback-control#dotlottie#hyperframes
One-click install
npx skills add https://github.com/wesleysimplicio/simplicio-mapper --skill lottie-wesleysimplicio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lottie
Source: https://github.com/wesleysimplicio/simplicio-mapper/tree/main/.skills/lottie
Command: npx skills add https://github.com/wesleysimplicio/simplicio-mapper --skill lottie-wesleysimplicio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

HyperFrames needs a reliable way to render and control lottie-web and dotLottie animations from assets, enabling deterministic playback, proper asset loading, and centralized registration of players on a shared registry.

Core Features & Use Cases

  • Lottie-web Pattern: load animations from assets and control playback with APIs while maintaining stable container sizing.
  • dotLottie Pattern: support DotLottie players with a consistent integration approach and non-autoplay behavior.
  • Multiple Animations: register multiple animation instances on window.__hfLottie for synchronized time progression.
  • Use Case: embed a logo reveal or UI motion in a HyperFrames page and ensure consistent playback across components.

Quick Start

Load a Lottie or dotLottie animation from assets and initialize playback with autoplay disabled for consistent rendering.

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 with deterministic playback?▼

Embed Lottie animations in HyperFrames using a runtime adapter that loads assets and registers each player on window.__hfLottie for deterministic, synchronized playback control.

How do I control multiple Lottie-web instances on a single web page?▼

Control multiple Lottie-web instances by registering each animation player on the centralized window.__hfLottie registry to enable synchronized time progression across components.

Can I use dotLottie animations in HyperFrames without enabling autoplay?▼

Yes, dotLottie animations are supported in HyperFrames with non-autoplay and non-loop defaults, requiring manual initialization to ensure consistent rendering and stable container sizing.

How do I load Lottie animation assets for web interfaces?▼

Load Lottie animation assets by referencing files stored in the assets/ directory, enabling the runtime adapter to properly fetch and render the animation data within HyperFrames.

Why does my Lottie animation not play automatically in HyperFrames?▼

Lottie animations do not play automatically because the integration defaults to non-autoplay and non-loop behavior, requiring you to manually trigger playback for deterministic control.

What is the best way to synchronize UI motion across different HyperFrames components?▼

Synchronize UI motion across components by registering multiple animation instances on the shared window.__hfLottie registry, ensuring centralized control and synchronized time progression.

Related Skills

Explore More Design & Creative Skills→
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
BasedHardwareBasedHardware
4

lottie

Add and manage Lottie animations in React using LottieFiles.

Official
Intermediate
KamalabotKamalabot

lottie

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

Community
Intermediate