skills.rest
Kamalabot
KamalabotCOMMUNITY
Explore all skills by this author →
GitHub

lottie

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

Updated Apr 25, 2026
Search Tags:#frontend#lottie#lottie-web#web animation#after effects#dotlottie#hyperframes
One-click install
npx skills add https://github.com/Kamalabot/tt-vid --skill lottie-kamalabot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lottie
Source: https://github.com/Kamalabot/tt-vid/tree/main/man_lady/.agents/skills/lottie
Command: npx skills add https://github.com/Kamalabot/tt-vid --skill lottie-kamalabot

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the friction of integrating Lottie and dotLottie animations into HyperFrames projects, ensuring consistent, seekable playback without manual configuration errors for animation control.

Core Features & Use Cases

  • Dual Player Compatibility: Supports both lottie-web JSON animations and dotLottie .lottie files, including @lottiefiles/dotlottie-web players.
  • Deterministic Playback Configuration: Enforces best practices like disabling autoplay, disabling loops by default, and registering all animation players on the window.__hfLottie registry for reliable HyperFrames seeking.
  • Common Use Cases: Ideal for adding logo reveals, product UI motion, decorative icon animations to HyperFrames web projects, and converting Remotion Lottie implementations to plain HyperFrames HTML.

Quick Start

Use the lottie skill to add a seekable lottie-web logo animation to your HyperFrames project, loading the animation file from your local assets folder and registering the player on the window.__hfLottie registry.

Frequently Asked Questions about lottie

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

FAQPage Schema
How do I add Lottie animations to a HyperFrames project?▼

To add Lottie animations to HyperFrames, this Skill integrates lottie-web JSON and dotLottie files with deterministic, seekable playback. It registers all players on a window registry and disables autoplay and loop by default for reliable rendering.

Can I use dotLottie files alongside lottie-web JSON in HyperFrames?▼

Yes, dotLottie files work alongside lottie-web JSON in HyperFrames. This Skill supports dual player compatibility, handling both standard Lottie JSON animations and .lottie files using the @lottiefiles/dotlottie-web player.

Why does my Lottie animation not seek correctly in HyperFrames?▼

Lottie animations fail to seek correctly in HyperFrames when autoplay and loop are enabled by default. This Skill fixes the issue by disabling both settings and registering players on the window.__hfLottie registry for deterministic playback.

How do I migrate Remotion Lottie implementations to plain HyperFrames HTML?▼

To migrate Remotion Lottie implementations to plain HyperFrames HTML, this Skill converts your animation setup to use deterministic playback configurations. It handles logo reveals and UI motion while ensuring stable container dimensions for consistent rendering.

Do I need to configure container dimensions for Lottie animations in HyperFrames?▼

Yes, maintaining stable container dimensions is required for consistent Lottie rendering in HyperFrames. This Skill enforces this practice along with disabling autoplay and loop to ensure your After Effects exports play back reliably.

Related Skills

Explore More Software Engineering Skills→
freshtechbrofreshtechbro
682

lottie-animations

Integrate Lottie JSON and dotLottie animations into web and React applications.

Community
Intermediate
KamalabotKamalabot

css-animations

Create HyperFrames-compatible CSS animations with finite durations and fixed iteration counts.

Community
Intermediate
heygen-comheygen-com
40.2k

lottie

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

Official
Intermediate
1veso1veso

lottie

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

Community
Intermediate