hyperframes-animation
An agent skill by heygen-com, from heygen-com/hyperframes. Tags: api, design, developer-tools, generative.
What it does
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
Install
With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:
npx skills add heygen-com/hyperframes --skill hyperframes-animationOr copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):
git clone --depth 1 https://github.com/heygen-com/hyperframes
cp -r hyperframes/skills/hyperframes-animation ~/.claude/skills/hyperframes-animationSafety box score
Not rated yet. A safety box score grades what a skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. Anyone can request one from this page; it is saved for everyone. How the score works.
Source
- Repository
- heygen-com/hyperframes (all skills from this repository)
- Path
- skills/hyperframes-animation/SKILL.md
- Branch
- main
- Updated
- 2026-09-19
Related skills
- hyperframes-keyframes — js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics.
- figma — Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components.
- algorithmic-art — js with seeded randomness and interactive parameter exploration.
- brainstorming — You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior.
- vercel-composition-patterns — React composition patterns that scale.
- ad-creative — When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text.