Create native WAAPI animations with deterministic timing within HyperFrames.
npx skills add https://github.com/Kamalabot/tt-vid --skill waapi-kamalabot
Please help me install this Agent Skill. Skill: waapi Source: https://github.com/Kamalabot/tt-vid/tree/main/man_lady/.agents/skills/waapi Command: npx skills add https://github.com/Kamalabot/tt-vid --skill waapi-kamalabot
This Skill eliminates the friction of creating native browser Web Animations API (WAAPI) motion that renders deterministically within the HyperFrames framework, removing the need for external animation libraries like GSAP for lightweight DOM motion.
Use the waapi skill to create a paused native browser animation for a HyperFrames clip element with custom keyframes, a 3-second duration, and fill mode set to both.
High-intent search queries and answers about installing and using this skill.
To create deterministic Web Animations API motion in HyperFrames, use an adapter that syncs the animation currentTime to HyperFrames time, ensuring consistent and predictable output without external libraries. This enables native browser element.animate() keyframes to render synchronously.
No, you do not need GSAP for frontend animations in HyperFrames. You can use the native browser Web Animations API (WAAPI) directly to achieve lightweight DOM motion like staggered element animations and orb movement effects without external animation library dependencies.
The best way to sync WAAPI keyframes to a HyperFrames timeline is through an adapter-managed currentTime syncing mechanism. This automatically aligns the native browser animation timing with HyperFrames time during composition initialization for deterministic rendering.
Yes, you can use native browser WAAPI for staggered element animations in HyperFrames. The framework supports JavaScript-controlled keyframe timing and element.animate() with custom keyframes, timing, and fill modes directly in the browser for lightweight DOM motion.
WAAPI animations may not render correctly when seeking in HyperFrames if the fill mode is not set to 'both'. Setting fill mode to both ensures persistent seeked states, allowing the adapter-managed currentTime syncing to accurately reflect HyperFrames time during paused or seeked states.
1vesoIntegrate Web Animations API with HyperFrames for deterministic animation rendering.
dylantarreMap Disney's 12 animation principles to UI motion guidelines.
automatedigitalCreate deterministic DOM animations using native WAAPI within HyperFrames playback contexts.
1vesoIntegrate GSAP animations into HyperFrames compositions with timeline management.
