waapi — Skills — getagentictools

What it does

Create animations synchronously during composition initialization.

Use element.animate(...) with finite duration and iterations.

Use fill: "both" so seeked states persist.

Pause animations after creation or let the adapter pause them on first seek.

Avoid callbacks and promises for render-critical state.

Lightweight DOM motion where CSS keyframes are too rigid and GSAP is unnecessary.

Generated animations from structured data.

Native browser keyframe animations with deterministic seeking for HyperFrames compositions.

Source

Repository: https://github.com/heygen-com/hyperframes

waapi FAQ

What does the waapi skill do?

Web Animations API adapter patterns for HyperFrames. Use when authoring element.animate() motion, Animation currentTime seeking, document.getAnimations(), KeyframeEffect timing, fill modes, or native browser animations that must render deterministically in HyperFrames. Create animations synchronously during composition initialization. Use element.animate(...) with finite duration and iterations.

What does waapi require?

document.querySelectorAll(".token").forEach((token, index) => { const animation = token.animate(

How do I install waapi?

Run: npx -y skills add https://github.com/heygen-com/hyperframes --skill waapi --agent claude-code — the source lives at github.com/heygen-com/hyperframes.

Maintain waapi?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![waapi on getagentictools](https://getagentictools.com/badge/skills/heygen-com-hyperframes-waapi.svg)](https://getagentictools.com/skills/heygen-com-hyperframes-waapi?ref=badge)

npx agentictools info skills/heygen-com-hyperframes-waapi

The second line is the CLI lookup for this page — handy in READMEs and docs.