What is the hyperframes-animation skill?
The hyperframes-animation skill is one of HyperFrames' domain skills, loaded when an agent needs to animate a composition. It holds atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques and adapters for GSAP, Lottie, Three.js, Anime.js, CSS keyframes, the Web Animations API and TypeGPU, plus 24 named text-animation effects.
It is the animation domain skill inside HyperFrames, an open source framework that turns HTML into deterministic MP4 video. An agent loads it whenever a composition needs motion, after the composition contract from hyperframes-core is already in place.
The skill covers five layers at once: atomic motion rules, multi-phase scene blueprints, scene-to-scene transitions, broader motion-design techniques, and adapters for seven different animation runtimes, so one skill answers most motion questions a HyperFrames build raises.
How a scene gets built
- Default path: pick two to four atomic rules from the rules index and glue them into one paused GSAP timeline.
- Blueprint path: load a multi-phase scene template when the brief matches an existing pattern such as a brand reveal or a social-proof card.
- Transitions: a separate catalog covers CSS-driven cuts between two clips, apart from in-scene motion.
- Adapters: GSAP is the default runtime, with Lottie, Three.js, Anime.js, CSS keyframes, the Web Animations API and TypeGPU available for specific asset types.
Constraints the skill enforces
On top of the core contract (one paused timeline, a data-duration that governs length, no Math.random or Date.now), the animation skill adds its own rules for craft.
- Positions are pre-calculated once at setup, not read from getBoundingClientRect mid-tween.
- Spatial motion sticks to GSAP transform aliases (x, y, scale, rotation) rather than width, height, top or left.
- An animation-map script can audit an existing composition's timelines for dead zones and stagger problems.
Who the hyperframes-animation skill is for
Best for
- Agents already composing a HyperFrames video that need a motion rule, a blueprint or a runtime-specific API lookup.
- Choosing between GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI or TypeGPU for one specific asset in a scene.
- Auditing an already-built composition's choreography for dead time or inconsistent stagger.
Not for
- Animating a live website's CSS transitions and keyframes with no video render step, where CSS Animation Creator keeps that motion fast for a real browser page.
- Playing back pre-baked Lottie exports on a live webpage rather than a rendered composition, where Lottie Animations covers dotLottie and lottie-react playback and scroll triggers.
- Wiring a React single-page app's route and element transitions with no video renderer, where Vercel React View Transitions uses the browser's native ViewTransition API instead.
- Building spring and gesture animations for a React app's own UI components, where Framer Motion Skill turns each Disney animation principle into React code.
How to install HyperFrames Animation Skill: GSAP Motion Rules Guide
npx skills add heygen-com/hyperframes --skill hyperframes-animationInstall the skill
Run the command above from the project root to pull hyperframes-animation from the current main branch of the repository.
Claude Code plugin route
In Claude, run claude plugin marketplace add heygen-com/hyperframes, then claude plugin install hyperframes@hyperframes to add the full HyperFrames catalog, including this skill.
Keep it current
Run npx hyperframes skills update to refresh this skill and the core domain skills it depends on ahead of a render.
Install prerequisites
Install Node.js 22 or newer and FFmpeg, then run npx hyperframes doctor once to confirm the toolchain.
Check that it loaded
Ask the agent to compose a short scene using two to four motion rules on one paused GSAP timeline, and check that the reply names the single-timeline and data-duration contract before it writes any markup.
Key features
- Atomic rule compositionThe default path picks two to four named rules from a rules index and glues them into one paused GSAP timeline, which the skill treats as quicker than starting from a blueprint.
- Multi-phase scene blueprintsPre-designed templates such as brand reveal, camera journey or logo assemble, each pointing to a full recipe for complex four or five phase choreography.
- Scene transition catalogA separate set of CSS-driven transitions, covering cuts such as dissolve, blur, push, radial and mechanical moves between two clips.
- Seven runtime adaptersPer-runtime API lookups for GSAP, Lottie, Three.js, Anime.js, CSS keyframes, the Web Animations API and TypeGPU, so the agent reads one page instead of guessing syntax.
- Motion-design technique referenceA techniques reference for broader motion-design patterns that sit above the atomic rule level.
- 24 named text-animation effectsRouted through a companion animate-text skill for kinetic typography beats such as typewriter reveal or gradient text sweep.
- Animation-map audit scriptscripts/animation-map.mjs reads every registered GSAP timeline, samples bounding boxes and flags dead zones or stagger inconsistencies after authoring.
- Pre-calculated layout rulePositions are computed once at composition setup instead of read from the DOM mid-tween, as parallel rendering can desync a live measurement.
- Motion blur referenceA dedicated reference explains shutter-smear blur on an animated element and names when not to reach for it.
Frequently asked questions
What is the hyperframes-animation skill?
It is the animation domain skill in the HyperFrames framework for turning HTML into deterministic MP4 video. It holds atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques and seven runtime adapters, so an agent building a HyperFrames composition has one place to look up how to animate it.
How do I install hyperframes-animation?
Run npx skills add heygen-com/hyperframes --skill hyperframes-animation from a project root to pull the current main branch. Claude Code users can instead add the marketplace with claude plugin marketplace add heygen-com/hyperframes and install the hyperframes plugin, which bundles the full skill catalog.
Which animation runtimes does hyperframes-animation cover?
Seven: GSAP as the default for timeline orchestration, Lottie for After Effects exports, Three.js for 3D and WebGL scenes, Anime.js for lightweight tweening, CSS keyframes for simple repeated motifs, the Web Animations API for native browser keyframes, and TypeGPU for GPU-rendered canvases such as particles or shaders.
When do I load a blueprint instead of composing rules?
Load a blueprint when the scene matches an existing multi-phase template, such as a brand reveal or a comparison split, and reusing its phase pipeline saves real authoring time, or when you want runnable ground-truth code for a complex four or five phase choreography. Otherwise the default is composing two to four atomic rules.
What does the hyperframes-animation skill forbid in a composition?
Positions can't be read from getBoundingClientRect during a tween, since parallel rendering can desync that measurement; they are pre-calculated once at setup. Spatial motion sticks to GSAP transform aliases such as x, y, scale and rotation rather than width, height, top or left, which the skill treats as layout changes.
Which AI coding agents can use hyperframes-animation?
The HyperFrames README says its skills work with Claude Code, Codex, Cursor, Gemini CLI, IBM Bob and other coding agents that support skills. Claude Code installs the full catalog as a plugin, while standalone installs for other agents use the npx skills add command.
Does hyperframes-animation audit an existing composition?
Yes. Its scripts/animation-map.mjs script reads every GSAP timeline registered on window.__timelines, samples bounding boxes across the run and outputs an animation-map.json the agent can use to flag dead zones, inconsistent stagger or lifecycle warnings after a scene is built.
How does hyperframes-animation relate to hyperframes-core?
hyperframes-core defines the composition contract: data attributes, a single paused timeline, sub-compositions and the deterministic render rules. hyperframes-animation builds on that contract with motion-specific rules, so the core skill's non-negotiable constraints take priority over any animation rule in this skill.