# Embed Lottie Animations in HyperFrames

HyperFrames projects need deterministic Lottie playback instead of timeline drift. This skill shows local asset loading, player registration, and validation patterns for lottie-web and dotLottie.

## Install

```bash
npx skillstore add heygen-com/lottie
```

## Metadata

- Status: approved
- Slug: heygen-com-lottie
- Skillstore revision: r1
- Version status: missing
- Tree hash: 313371a828aa24583b82dd75ed9c4fca989bf115aa4c178fe38af52473a42ad5
- Author: heygen-com
- GitHub username: heygen-com
- License: MIT
- Repository: https://github.com/heygen-com/hyperframes/tree/main/skills/lottie/
- Ref: 0519034dad657fb1f7706e0550e962beeda73fdf
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/heygen-com-lottie
- Manifest: https://skillstore.pages.dev/api/skills/heygen-com-lottie/manifest

## Capabilities

- Shows how to embed lottie-web JSON animations in HyperFrames HTML.
- Shows how to embed .lottie files with the dotLottie web player.
- Explains how to register players on window.\_\_hfLottie for timeline seeking.
- Defines stable CSS container patterns for SVG and canvas players.
- Lists validation commands for HyperFrames lint and validate checks.
- Identifies good and poor uses for Lottie assets in HyperFrames.

## Use Cases

- Add product motion to a HyperFrames page: Use the lottie-web pattern to load a local JSON animation and register it for timeline control.
- Port dotLottie assets into a render workflow: Use the dotLottie canvas pattern to keep playback deterministic during HyperFrames validation and rendering.
- Review animation integration before release: Check that assets are local, autoplay is disabled, containers are stable, and validation commands are run.

## Prompt Templates

### Create a basic Lottie embed

```
Use this skill to add a local lottie-web animation to my HyperFrames page. Keep autoplay disabled and register the player.
```

### Adapt a dotLottie file

```
Use this skill to embed my .lottie asset with dotLottie in HyperFrames. Include stable canvas sizing and timeline registration.
```

### Audit an existing animation page

```
Review my HyperFrames Lottie integration using this skill. Find remote asset paths, autoplay, late registration, and unstable containers.
```

### Design a multi-animation timeline

```
Use this skill to coordinate multiple Lottie and dotLottie players in one HyperFrames composition. Ensure every player seeks together.
```

## Limitations

- It provides patterns only and does not include reusable source files.
- It assumes the Lottie asset already renders correctly in a browser.
- It does not convert After Effects projects into Lottie files.
- It recommends local assets but includes CDN examples for player libraries.

## Best Practices

- Use local animation assets whenever possible to keep renders deterministic.
- Disable autoplay and register each player before HyperFrames validation runs.
- Test exported Lottie files in a browser before adding them to a composition.

## Anti Patterns

- Do not rely on remote animation paths during render time.
- Do not start playback manually when HyperFrames should control seeking.
- Do not assume every After Effects feature survives Lottie export.

## Security Audit

- Audited at: 2026-07-09T12:03:38.629\+00:00
- Summary: Static external-command findings are false positives caused by Markdown inline code, fenced examples, and documented HyperFrames validation commands. Two runtime CDN script examples are confirmed low supply-chain risks, while reference links are documentation only. No prompt injection, credential handling, or data exfiltration intent was found.

## Stats

- Views: 50
- Downloads: 5
- Favorites: 0
- Popularity score: 0