🎯

lottie

🎯Skill

from heygen-com/hyperframes

Installation

Vibe Index InstallInstalls to .claude/skills/

$npx vibeindex add heygen-com/hyperframes --skill lottie

skills.sh Install⚠ Installs to .agents/skills/

$npx skills add heygen-com/hyperframes --skill lottie

Manual InstallCopy SKILL.md content and save to the path below

path

~/.claude/skills/lottie/SKILL.md

What it does

A Lottie adapter skill for HyperFrames, the open-source HTML-to-video rendering framework by HeyGen. Enables AI coding agents to embed and control Lottie animations within HyperFrames video compositions.

Overview

The lottie skill is a HyperFrames adapter skill that teaches AI coding agents how to use lottie-web and dotLottie players registered on window.__hfLottie with local assets and paused playback for frame-accurate seeking. HyperFrames is an open-source HTML-based video rendering framework by HeyGen that captures frames in headless Chrome for deterministic MP4 output. This adapter enables frame-accurate control so HyperFrames can seek through the animation at each captured frame.

Key Features

lottie-web and dotLottie players registered on window.__hfLottie with local assets and paused playback for frame-accurate seeking
Frame-accurate, deterministic rendering during headless Chrome capture for consistent video output
Works alongside other HyperFrames adapters (GSAP, CSS keyframes, Anime.js, Lottie, Three.js, WAAPI, TypeGPU) for mixed-runtime compositions
Integrates with the HyperFrames dev-loop: init, preview with live reload, lint, and render to MP4 via FFmpeg
Part of the HyperFrames skills collection installable via npx skills add heygen-com/hyperframes

Who is this for?

Developers who want to use lottie capabilities within HyperFrames video compositions with deterministic frame capture
AI agent users building HTML-based video content who need frame-accurate lottie integration
Teams building automated video pipelines using the HyperFrames framework with multiple animation runtimes

📦

Same repository

heygen-com/hyperframes(48 items)

lottie

SKILL.md

69,834Installs

AddedApr 30, 2026

View on GitHub Back to Skills

More from this repository10

🎯

hyperframes-cli🎯Skill

CLI tool for the Hyperframes video rendering framework that provides commands to create, preview, lint, and render HTML-based video compositions to MP4.

🎯

hyperframes🎯Skill

Skill for authoring HTML-based video compositions with the Hyperframes framework, covering captions, TTS, audio-reactive animation, and transitions for AI agent-driven video creation.

🎯

hyperframes-registry🎯Skill

Skill for installing blocks and components into Hyperframes projects via the `hyperframes add` command, providing access to 50+ ready-to-use overlays, shader transitions, and data visualizations.

🎯

hyperframes-core🎯Skill

The foundational technical contract for HyperFrames HTML video compositions, defining data attributes, clip/track structure, sub-compositions, variables, media playback, deterministic rendering rules, and project validation.

🎯

hyperframes-animation🎯Skill

Comprehensive animation skill for HyperFrames providing atomic motion rules, multi-phase scene blueprints, scene transitions, motion-design techniques, and seven runtime adapters including GSAP, Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, and TypeGPU.

🎯

hyperframes-creative🎯Skill

Non-animation creative direction for HyperFrames videos covering design specs, color palettes, typography, narration scripting, beat planning, audio-reactive visuals, composition patterns, and brand/style decisions.

🎯

remotion-to-hyperframes🎯Skill

A skill for the HyperFrames open-source video rendering framework that teaches AI agents to write correct HTML-based video compositions and GSAP animations, enabling them to render video from HTML code.

🎯

hyperframes-keyframes🎯Skill

A Claude Code skill that guides the creation of seek-safe 2D/3D keyframe animations for HyperFrames compositions, supporting GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP transitions, SVG morph/draw, motion paths, and 3D depth effects with built-in verification diagnostics.

🎯

general-video🎯Skill

A fallback HyperFrames composition authoring skill for custom video creation when no specialized workflow fits. Handles multi-scene pieces, brand reels, montages, title cards, motion posters, static loops, and freeform compositions at any length or format.

🎯

faceless-explainer🎯Skill

Converts arbitrary text (articles, notes, topics, briefs) into faceless explainer videos with auto-generated TTS narration and LLM-designed visuals including typography, abstract graphics, diagrams, and data visualizations.