Waapi
Author native `element.animate()` motion that HyperFrames can scrub via `document.getAnimations()` and `currentTime` without GSAP.
Overview
WAAPI is an agent skill for the Build phase that authors Web Animations API keyframes HyperFrames can seek through its waapi adapter using currentTime and paused animations.
Install
npx skills add https://github.com/heygen-com/hyperframes --skill waapiWhat is this skill?
- HyperFrames `waapi` adapter seeks via `document.getAnimations()` and `currentTime` in milliseconds
- Requires finite `duration` and `iterations` with `fill: "both"` for persistent seeked states
- Discourages render-critical callbacks and promise chains for deterministic frames
- Shows orb clip pattern with translate3d/opacity keyframes and optional data-* timing hooks
- Adapter sets currentTime in milliseconds then pauses each animation
Adoption & trust: 61.1k installs on skills.sh; 25.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want GSAP-free DOM motion in a HyperFrames scene but autoplay and async animation state make frame captures inconsistent.
Who is it for?
Builders who prefer native `element.animate()` for short UI motion layers inside HyperFrames compositions.
Skip if: Heavy timeline choreography that already depends on GSAP or Lottie unless you also adopt those HyperFrames adapters.
When should I use this skill?
Authoring element.animate() motion, Animation currentTime seeking, document.getAnimations(), KeyframeEffect timing, or fill modes for HyperFrames.
What do I get? / Deliverables
Animations are created synchronously, paused, and seekable so HyperFrames can set currentTime to the global timeline milliseconds.
- WAAPI keyframe definitions
- Paused Animation objects discoverable by getAnimations()
- Timed clips aligned to composition tracks
Recommended Skills
Journey fit
Browser keyframe motion for HyperFrames is implemented during product build when the composition DOM and scripts are written. Frontend covers WAAPI keyframes, fill modes, and synchronous init so the waapi adapter can pause and seek every animation.
How it compares
Native WAAPI seek patterns for HyperFrames—not a general animation course unrelated to deterministic rendering.
Common Questions / FAQ
Who is waapi for?
Developers composing HyperFrames in the browser who want standard WAAPI keyframes without adding GSAP or Lottie for simple moves.
When should I use waapi?
During Build when implementing `element.animate()`, KeyframeEffect timing, fill modes, or `document.getAnimations()` integration for HyperFrames export.
Is waapi safe to install?
Check the Security Audits panel on this page; the skill is procedural markup and JS guidance with no special credential requirements.
SKILL.md
READMESKILL.md - Waapi
# 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 ```html <div id="orb" class="clip orb" data-start="2" data-duration="3" data-track-index="2"></div> <script> const orb = document.getElementById("orb"); const animation = orb.animate( [ { transform: "translate3d(-160px, 0, 0) scale(0.8)", opacity: 0 }, { transform: "translate3d(0, 0, 0) scale(1)", opacity: 1, offset: 0.35 }, { transform: "translate3d(120px, 0, 0) scale(1.08)", opacity: 1 }, ], { duration: 3000, delay: 2000, easing: "cubic-bezier(0.2, 0, 0, 1)", fill: "both", iterations: 1, }, ); animation.pause(); </script> ``` ## Stagger Pattern ```js document.querySelectorAll(".token").forEach((token, index) => { const animation = token.animate( [ { transform: "translateY(24px)", opacity: 0 }, { transform: "translateY(0)", opacity: 1 }, ], { duration: 620, delay: index * 80, easing: "cubic-bezier(0.2, 0, 0, 1)", fill: "both", iterations: 1, }, ); animation.pause(); }); ``` ## Good Uses - Lightweight DOM motion where CSS keyframes are too rigid and GSAP is unnecessary. - Generated animations from structured data. - Simple timelines that can be represented as keyframes, delays, and offsets. ## Avoid - Infinite `iterations`. - Depending on `animation.finished` to mutate render-critical DOM. - Running separate clocks with `requestAnimationFrame`, timers, or `performance.now()`. - Animating layout properties when transforms and opacity can express the motion. - Assuming clip-local start time is automatic. WAAPI adapter seeks document-level animation time; model clip offsets with `delay` or create the animation on an element whose visibility is controlled by HyperFrames timing. ## Validation After editing a WAAPI composition: ```bash npx hyperframes lint npx hyperframes validate ``` ## Credits And References - HyperFrames adapter source: `packages/core/src/runtime/adapters/waapi.ts`. - MDN Web Animations API guide: https://developer.mozilla.org/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API - MDN `Animation.currentTime`: https://developer.mozilla.org/en-US/docs/Web/API/Animation/currentTime