# Create Deterministic Anime.js HyperFrames

Anime.js animations can drift when they run on their own clock. This skill shows deterministic HyperFrames patterns that register animations and seek them through the runtime adapter.

## Install

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

## Metadata

- Status: approved
- Slug: heygen-com-animejs
- Skillstore revision: r1
- Version status: missing
- Tree hash: 8aedad13a5b5b5716afdaaad6832ae64dee8bf20e2c605b86f36694b33ff935c
- Author: heygen-com
- GitHub username: heygen-com
- License: MIT
- Repository: https://github.com/heygen-com/hyperframes/tree/main/skills/animejs/
- 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-animejs
- Manifest: https://skillstore.pages.dev/api/skills/heygen-com-animejs/manifest

## Capabilities

- Shows how to register Anime.js animations on window.\_\_hfAnime.
- Explains how to disable autoplay for deterministic rendering.
- Provides patterns for basic animations and timelines.
- Documents ES module usage with the HyperFrames adapter.
- Lists validation commands for HyperFrames compositions.

## Use Cases

- Convert Anime.js Examples: Adapt an existing Anime.js sample so HyperFrames can seek it deterministically.
- Build Timeline Micro-Animations: Create compact DOM or SVG flourishes that register with the HyperFrames runtime.
- Review Render Safety: Check a composition for autoplay, infinite loops, async setup, and unseeded randomness.

## Prompt Templates

### Add a Basic Animation

```
Use the animejs skill to add a simple seek-driven Anime.js animation to my HyperFrames composition.
```

### Convert an Existing Snippet

```
Use the animejs skill to convert this Anime.js example into render-safe HyperFrames HTML.
```

### Create a Registered Timeline

```
Use the animejs skill to build a finite Anime.js timeline and register it on window.__hfAnime.
```

### Audit Determinism

```
Use the animejs skill to review my composition for autoplay, async setup, timers, and nondeterministic animation state.
```

## Limitations

- It is guidance only and does not install Anime.js.
- It focuses on HyperFrames compositions, not general Anime.js projects.
- It recommends GSAP for complex scene sequencing.
- Example CDN imports require network access unless replaced locally.

## Best Practices

- Create animations synchronously during composition initialization.
- Set autoplay to false and register every instance on window.\_\_hfAnime.
- Use finite durations and loop counts that match the composition duration.

## Anti Patterns

- Do not rely on Anime.js autoplay for HyperFrames rendering.
- Do not create animations after timers, promises, events, or async asset loads.
- Do not depend on anime.running auto-discovery instead of explicit registration.

## Security Audit

- Audited at: 2026-07-09T11:47:33.536\+00:00
- Summary: Most static findings are false positives caused by Markdown backticks, inline code, code fences, or safe prose. Two findings are confirmed because example snippets load Anime.js from jsDelivr, creating a real external dependency. No prompt injection or malicious intent was found in the reviewed skill file.

## Stats

- Views: 59
- Downloads: 10
- Favorites: 0
- Popularity score: 0