waapi

Name: waapi
Availability: InStock
Author: HeyGen

Map Web Animations API animations to HyperFrames timing for deterministic video frames.

40.2k|3.8k|Updated Mar 10, 2026

Search Tags:#animation #deterministic #adapter #waapi #hyperframes #web-animations-api

Ready to run

npx skills add https://github.com/heygen-com/hyperframes --skill waapi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: waapi
Source: https://github.com/heygen-com/hyperframes/tree/main/skills/waapi
Command: npx skills add https://github.com/heygen-com/hyperframes --skill waapi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams render deterministic, browser-native animations inside HyperFrames by mapping Web Animations API state to HyperFrames timeline.

Core Features & Use Cases

Perform WAAPI-based animation on DOM elements within HyperFrames scenes.
Sync animation currentTime with HyperFrames timeline to ensure frame-accurate playback.
Use finite duration/iterations and fill: both to preserve rendered states.

Quick Start

Create a WAAPI animation on an element using the Web Animations API and pause it so HyperFrames can drive its timing.

Frequently Asked Questions about waapi

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

FAQPage Schema

How do I render deterministic Web Animations API frames for video output?▼

You need finite duration and iterations on your WAAPI animation to map it to HyperFrames correctly. This skill requires synchronous creation, pauses after the initial seek, and avoids render-critical callbacks to maintain deterministic output.

Does the Web Animations API work with HyperFrames for frame-accurate playback?▼

Yes, the Web Animations API works with HyperFrames by mapping element.animate-based motion to the HyperFrames timeline. It synchronizes currentTime and handles fill: both to preserve rendered states accurately across frames.

Why does my WAAPI animation not render correctly during video frame capture?▼

WAAPI animations may fail to render correctly if they lack fill: both or depend on render-critical callbacks. This adapter enforces synchronous creation and pauses after the initial seek to prevent timing desynchronization during frame capture.

What are the limitations of using WAAPI for deterministic video rendering?▼

Limitations of using WAAPI for deterministic video rendering include the requirement for finite duration and iterations. The adapter avoids render-critical callbacks and only supports element.animate-based motion to guarantee synchronous frame mapping.

How do I sync animation currentTime with HyperFrames timeline?▼

To sync animation currentTime with the HyperFrames timeline, create your WAAPI animation on the DOM element and pause it immediately. The adapter then drives the animation timing to render deterministic video frames.