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
Grade B, low risk: 21 of 100 risk points, rated 2026-10-19. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.
This is an animation-authoring skill for HyperFrames: mostly markdown motion recipes, plus a few Node helpers/tests for analyzing timelines. The main risks are bounded subprocess execution and remote fetches from npm/CDN examples; it does not appear to touch secrets, privileges, or external services beyond that.
| Category | Level | Why |
|---|---|---|
| Code & shell execution | 2 (moderate) | The skill ships Node helpers/tests and tells users to run them, including `node <SKILL_DIR>/scripts/animation-map.mjs` and tests that call `spawnSync(...)`, so it can execute subprocesses. |
| Network access | 2 (moderate) | It points to remote fetches such as `npx skills add pixel-point/animate-text` and CDN-loaded Anime.js/Lottie scripts, so using it can contact external package hosts. |
| Filesystem reach | 1 (low) | Its analysis helper writes under the project tree (`--out <composition-dir>/.hyperframes/anim-map`) and the tests create temporary files, but it does not request broad filesystem access. |
| Secrets & credentials | 0 (none) | No file reads or writes target token stores, keychains, `.env` files, browser sessions, or other credential locations. |
| Privilege & persistence | 0 (none) | There is no sudo, service installation, shell-profile editing, or other privilege-changing behavior in the reviewed files. |
| Instruction hijack surface | 0 (none) | I found no prompts to ignore instructions, hide actions, fetch and obey remote instructions, or use hidden text as control flow. |
| Irreversible actions | 0 (none) | The skill is about motion authoring and validation; it does not send messages, deploy, post, pay, or otherwise act on the user's behalf. |
| Transparency | 1 (low) | Several referenced implementation files were not readable in the provided sample due size/budget, so behavior inside them could not be fully audited here. |
Before installing
- Read `scripts/package-loader.mjs` and `scripts/animation-map.mjs` before running the helpers; confirm they only spawn the commands you expect.
- Decide whether remote fetches are acceptable: `npx skills add pixel-point/animate-text` and the CDN-loaded Anime.js/Lottie examples pull code from the network.
- Run the helper scripts in a scratch composition first and inspect the generated `.hyperframes/anim-map` output.
Rated 2026-10-19 by an automated review of 45 files from the skill's repository.
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 — Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff.
- figma — Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components.
- algorithmic-art — Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code.
- 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.