waapi

SKILL.md

Native browser keyframe animations with deterministic seeking for HyperFrames compositions.

Create animations synchronously with element.animate() using finite durations and iterations, then pause them for adapter control

The adapter seeks all active animations via document.getAnimations() by setting currentTime to HyperFrames timeline position in milliseconds

Use fill: "both" to persist seeked states, and model clip timing with delay or visibility control rather than relying on clip-local start times

Supports staggered animations, keyframe offsets, and easing functions; avoid infinite iterations, animation.finished callbacks, and layout property animation

Web Animations API for HyperFrames

HyperFrames can seek Web Animations API animations through its waapi runtime adapter. WAAPI is useful when you want native browser keyframes with JavaScript-created timing and no GSAP dependency.

Contract

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.

The adapter calls document.getAnimations(), sets each animation's currentTime to HyperFrames time in milliseconds, then pauses it.

Basic Pattern

<div id="orb" class="clip orb" data-start="2" data-duration="3" data-track-index="2"></div>