This adapter lets you use the Web Animations API with HyperFrames by automatically syncing animation.currentTime to the HyperFrames timeline. You create animations with element.animate(), pause them, and the adapter seeks them frame-perfectly using document.getAnimations(). It's lighter than GSAP when you just need keyframe motion with programmatic timing, and it works well for staggers or data-driven animations. The key contract is simple: use finite durations, set fill to "both", avoid promises or callbacks for state, and remember that WAAPI operates on document time, so model clip offsets with delays. If you're already comfortable with native browser animations but need deterministic seeking, this bridges that gap cleanly.
- skills.sh installs
- 68.7K
- GitHub stars
- 81.8K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add heygen-com/hyperframes --skill waapi --agent claude-codeInstalls into .claude/skills of the current project.
Files
This adapter lets you use the Web Animations API with HyperFrames by automatically syncing animation.currentTime to the HyperFrames timeline. You create animations with element.animate(), pause them, and the adapter seeks them frame-perfectly using document.getAnimations(). It's lighter than GSAP when you just need keyframe motion with programmatic timing, and it works well for staggers or data-driven animations. The key contract is simple: use finite durations, set fill to "both", avoid promises or callbacks for state, and remember that WAAPI operates on document time, so model clip offsets with delays. If you're already comfortable with native browser animations but need deterministic seeking, this bridges that gap cleanly.
Browse the repository on GitHubSponsors
Details
- Repository
- github.com/heygen-com/hyperframes
- Categories
- Backend & APIs, Automation & Workflows, Design & UI/UX
- First seen
- May 16, 2026
More from heygen-com/hyperframes
All 44- Motion Doctrine62.2K
- Captions Overlay61.8K
- Cut The Curve61.4K
- Seam Craft61.1K
- Oversized Cursor60.7K
- Changelog Video60.6K
- Contribute Catalog55.5K
- Typegpu51K
- Reverse Any Video45.2K
- Style Sampling38.8K
- Graphic Overlays29.1K
- Hyperframes Read First2.4K
- Claude Design Hyperframes2K
- Hyperframes Cli1.5M
- Hyperframes1.5M
- Media Use1.4M
- Hyperframes Registry1.2M
- Hyperframes Animation1M
- Hyperframes Core931.1K
- Hyperframes Creative917.1K
- Hyperframes Keyframes754.8K
- Hyperframes Audio663.9K
- General Video661.7K
- Remotion To Hyperframes590.2K
