102.7K+Download
Skip to the usage guide
hyperframes-animationby HeyGen

HyperFrames Animation Skill.

A Claude Code and Codex skill for motion and video: animation rules, scene blueprints, transitions, and runtime adapters for HyperFrames.

  • Motion & Video
  • Video
Download OpenDesignView usage guide
heygen-com/hyperframes · skills/hyperframes-animation/SKILL.mdSKILL.md
--- name: hyperframes-animation description: 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 … --- ## Default: compose atomic rules ## Load a blueprint when ## Routing ## Picking a runtime ## Critical Constraints ## Scripts
Front matter and section headings read from the upstream file on 2026-09-14 · 7,755 characters in full

01 What it does

What the hyperframes-animation Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Provides all animation knowledge for HyperFrames: atomic motion rules, multi-phase scene blueprints, scene transitions, motion-design techniques, and seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Users pick 2-4 atomic rules and compose them with a single paused GSAP timeline, or load a multi-phase blueprint for complex 4-5 phase choreography, or look up runtime-specific APIs.

It also routes to choreography auditing through animation-map.mjs and named text effects. GSAP is the source's default authoring choice, not a measured usage statistic. Implementations must follow HyperFrames' paused, seek-safe and deterministic composition contract.

What it produces

  • Animation code assembled from atomic rules or a scene blueprint, integrated into a HyperFrames composition.
  • animation-map.json with choreography flags when the audit script is run; these flags require visual interpretation.
See the example prompt ↗

How It Works

  1. 01
    Pick and Compose Atomic Rules

    Select 2-4 rules from rules-index.md and glue them together with a single paused GSAP timeline. This is the default workflow, faster than starting from a blueprint.

  2. 02
    Load a Blueprint for multi-phase Scenes

    When the scene matches an existing pre-designed template like brand-reveal or social-proof, load its recipe from blueprints-index.md to reuse its phase pipeline.

  3. 03
    Look up runtime-specific APIs

    Use the routing table to find GSAP eases and timeline controls, Lottie player methods, Three.js mixer APIs, or other runtime-specific documentation as needed.

  4. 04
    Audit Choreography with animation-map

    Run animation-map.mjs to read every GSAP timeline, enumerate tweens, sample bboxes, compute flags, and output animation-map.json for auditing dead zones and stagger consistency.

02 Find your fit

When to Use the hyperframes-animation Skill

Use the hyperframes-animation skill in Claude Code or Codex when the job is motion and video of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Atomic motion patterns selected by trigger or tag from rules-index.md
  • CSS-driven scene transitions between two clips
  • 3D scenes, camera motion, and shader-driven visuals using Three.js
  • GPU-rendered canvases with particles, liquid glass, or custom shaders using TypeGPU

Know the Boundaries

  • Animating width, height, top, or left for layout changes

What to Provide

  • Composition directoryProvide the path to your composition directory when running animation-map.mjs to audit choreography.
  • Scene brief and assetsDescribe the content, duration and intended motion, and provide any existing composition or media. The agent selects an appropriate rule or blueprint; you need not know an internal blueprint ID.

03 Inside the skill

Rules the hyperframes-animation Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Pre-calculate Layout Constants

    Never derive positions from getBoundingClientRect at tween time.

  2. Spatial Motion Uses GSAP Transform Aliases Only

    Use x, y, scale, rotation for all spatial motion. Never animate width, height, top, or left for layout changes.

  3. GSAP Is the Default Runtime

    GSAP is the source's default and all atomic rules use it. Other adapters cover Lottie, Three.js, Anime.js, CSS, WAAPI and TypeGPU when the scene calls for them.

  4. Compose Atomic Rules by Default

    Pick 2-4 rules from rules-index.md and compose them. This is faster and produces less code than starting from a blueprint.

  5. Multiple Runtimes Can Coexist

    Multiple runtimes can coexist in one composition. Each registers its instances on the runtime-specific global so HyperFrames can seek all of them in one pass.

  6. Do Not Read Blueprints Speculatively

    Do not read a blueprint file speculatively; load it only when you have already decided you need scene-level orchestration.

  7. Non-spatial Properties Are Allowed

    The allowlist permits opacity, color, backgroundColor, and borderRadius for non-spatial property tweens, but never width, height, top, or left for layout changes.

04 Put it to work

Install hyperframes-animation in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add hyperframes-animation to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-animation

Generic skills CLI form for skills/hyperframes-animation/SKILL.md; the repository may document its own path.

Give the Skill a First Motion and Video Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Build a brand-reveal scene for [product name] using the multi-phase blueprint. The hero text should fade in with elastic ease at y:40, followed by a product card sliding up from y:60 with 0.2s stagger between child elements. Add a subtle pulse to the CTA button starting at 2.5s. Use GSAP as the runtime, ensure all spatial motion uses transform aliases (x, y, scale, rotation), and pre-calculate any layout constants at composition setup. Run animation-map.mjs on [composition directory] and output the audit results.

Editorial starter example based on the source workflow; not a recorded run.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Seek to several timestamps and confirm the same frame is reproducible without wall-clock randomness.
  • Confirm runtime instances are registered for HyperFrames seeking and timelines are paused.
  • Check the declared duration, bounded repeats and clip lifecycle behavior.
  • Read animation-map flags for dead zones, stagger consistency and lifecycle warnings, then inspect the actual frames.

In OpenDesign check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
HeyGen
Repository
github.com/heygen-com/hyperframes Branch main
Skill file
skills/hyperframes-animation/SKILL.md Content checksum recorded at verification; commit 558c11b
License
Apache-2.0 From LICENSE.
Repository stars
49,761 GitHub snapshot taken 2026-09-14 for the whole heygen-com/hyperframes repository, which contains 9 skills in this catalog. Not a rating or usage count for hyperframes-animation.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. Default: compose atomic rulesPick 2-4 rules from rules-index.md and compose with GSAP timeline, faster than blueprints
  2. Load a blueprint whenUse when scene matches multi-phase template or need runnable 4-5 phase choreography
  3. RoutingTable mapping tasks to files: rules, blueprints, transitions, techniques, adapters, scripts
  4. Picking a runtimeWhen to use GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU
  5. Critical ConstraintsPre-calculated layout constants, GSAP transform aliases only, no width/height/top/left tweens
  6. ScriptsRun animation-map.mjs to audit choreography and output animation-map.json
  7. See AlsoLinks to hyperframes-core, hyperframes-creative, hyperframes-cli
The Skill's Own Description
“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.”

Front-matter description from SKILL.md. The full file is about 7,755 characters. Read the full file on GitHub.

HyperFrames Animation

Run hyperframes-animation on a Real Motion and Video Task.

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-animation