Map Web Animations API animations to HyperFrames timing for deterministic video frames.
npx skills add https://github.com/heygen-com/hyperframes --skill waapi
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
This skill helps teams render deterministic, browser-native animations inside HyperFrames by mapping Web Animations API state to HyperFrames timeline.
Create a WAAPI animation on an element using the Web Animations API and pause it so HyperFrames can drive its timing.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
hoanghd218Align WAAPI animation timelines with HyperFrames timing for deterministic playback.
dylantarreMap Disney's 12 animation principles to UI motion guidelines.
1vesoIntegrate Web Animations API with HyperFrames for deterministic animation rendering.
wesleysimplicioEnable deterministic seeking of CSS keyframe animations within HyperFrames.
