Summary
When you need CSS keyframe animations to play nicely with HyperFrames' deterministic seeking and preview system, this adapter is the bridge. It finds elements with animation-name, grabs their WAAPI handles when available, and falls back to the negative animation-delay trick for environments that don't expose them. Works great for decorative loops, shimmer effects, and simple entrances where spinning up a full GSAP timeline feels heavy. The main gotcha is avoiding infinite animations unless you've confirmed WAAPI support, since the fallback can't represent unbounded duration. Includes stagger patterns using CSS custom properties and clear guidance on what belongs in CSS versus a proper timeline.
Install to Claude Code
npx -y skills add heygen-com/hyperframes --skill css-animations --agent claude-codeInstalls into .claude/skills of the current project.
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
Files
SKILL.md
Select a file.
Featured
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
