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-code

Installs 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 GitHub

Sponsors

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
1googleworkspace avatargws-sharedgoogleworkspace/cligws CLI: Shared patterns for authentication, global flags, and output formatting.68Kskills.sh installs
2addyosmani avatarbrowser-testing-with-devtoolsaddyosmani/agent-skillsTests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture co67.7Kskills.sh installs
3nexscope-ai avatarcross-border-ecommercenexscope-ai/ecommerce-skillsCross-border e-commerce expansion advisor. Scores target markets on 8 weighted dimensions (market size, ecommerce penetration, competition, regulatory complexit63Kskills.sh installs
4heygen-com avatarmotion-doctrineheygen-com/hyperframesGATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous came62.2Kskills.sh installs
5insforge avatarinsforge-integrationsinsforge/insforge-skillsUse when wiring an external auth provider (Clerk, Auth0, WorkOS, Kinde, Stytch, Better Auth) into InsForge for JWT-based RLS, or when adding the OKX x402 paymen60.5Kskills.sh installs
6useosint avatarinvestigate-without-getting-madeuseosint/skillsInvestigator OPSEC — threat-model who might notice you, control your attribution surface across IP, ASN, browser and TLS fingerprint, timing and logged-in accou58.2Kskills.sh installs