skills.rest
hugotown
hugotownCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

waapi

Implements Web Animations API patterns for deterministic seeking in HyperFrames compositions.

Updated Oct 16, 2025
Search Tags:#javascript#keyframes#deterministic rendering#hyperframes#element.animate#animation seeking#web animations api
One-click install
npx skills add https://github.com/hugotown/dotfiles --skill waapi-hugotown
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: waapi
Source: https://github.com/hugotown/dotfiles/tree/main/agents/skills/waapi
Command: npx skills add https://github.com/hugotown/dotfiles --skill waapi-hugotown

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Authoring JavaScript-driven animations that must render deterministically at any seeked timestamp is difficult, since native Web Animations API playback is time-based and asynchronous. This Skill provides the contract and patterns for making element.animate() animations seekable by the HyperFrames waapi runtime adapter. ## Core Features & Use Cases - Seekable Animation Contract: Enforces finite duration and iterations, fill: "both", synchronous creation, and paused animations so HyperFrames can set currentTime deterministically. - Ready-Made Patterns: Includes a basic keyframe pattern with delay and cubic-bezier easing, plus a stagger pattern for animating lists of elements with incremental delays. - Anti-Pattern Guidance: Lists what to avoid, such as infinite iterations, animation.finished callbacks, requestAnimationFrame clocks, and layout-property animation. - Use Case: You are building a HyperFrames video composition and want lightweight DOM motion without a GSAP dependency; use this Skill to write WAAPI keyframes that scrub correctly frame-by-frame, then verify with npx hyperframes lint and validate. ## Quick Start Use the waapi skill to write a seekable element.animate() animation for my HyperFrames composition with a staggered fade-in of list items.

Frequently Asked Questions about waapi

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

FAQPage Schema
How do I make Web Animations API animations seekable in HyperFrames?▼

Create animations synchronously with element.animate() using finite duration and iterations, set fill to "both", and call animation.pause() after creation. The HyperFrames waapi adapter then sets each animation's currentTime to the composition time in milliseconds.

When should I use WAAPI instead of GSAP for animations?▼

Use WAAPI for lightweight DOM motion, animations generated from structured data, and simple timelines expressible as keyframes, delays, and offsets. It avoids the GSAP dependency when native browser keyframes with JavaScript-created timing are sufficient.

Does the HyperFrames waapi adapter support infinite animations?▼

No. Infinite iterations are explicitly listed as a pattern to avoid because the adapter seeks by setting currentTime to a finite composition time. Always use finite duration and iterations with fill: "both" so seeked states persist.

Why is my WAAPI animation out of sync with the HyperFrames timeline?▼

The adapter seeks document-level animation time, not clip-local start time. Model clip offsets with the delay option or attach the animation to an element whose visibility is controlled by HyperFrames timing, and avoid separate clocks like requestAnimationFrame or performance.now().

How do I validate a WAAPI composition in HyperFrames?▼

Run npx hyperframes lint followed by npx hyperframes validate after editing a WAAPI composition. These commands check the composition for correctness before rendering.

Related Skills

Explore More Software Engineering Skills→
chmonitorchmonitor
255

hyperframes-core

Enforce structural and runtime rules for HyperFrames HTML video compositions.

Official
Advanced
X-RANKFLOW-MEDIA-GROUPX-RANKFLOW-MEDIA-GROUP

website-to-video

Capture a website's layout and content to generate a HyperFrames video presentation.

Official
Advanced
Marshal-NguyenMarshal-Nguyen
1

hyperframes-keyframes

Author seek-safe 2D and 3D keyframes for HyperFrames compositions and verify them with CLI diagnostics.

Community
Advanced
greensockgreensock
13.3k

gsap-timeline

Coordinate complex animations using the GSAP timeline API.

Official
Advanced