98.8K+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.

Also covers auditing existing compositions via animation-map.mjs and 24 named text-animation effects. GSAP is the default for 95% of motion work covering timeline orchestration, transforms, easing, and stagger. Everything is HyperFrames-native: single paused timeline, seek-safe, deterministic.

What it produces

  • animation-map.json containing choreography audit data with dead zones, stagger consistency, and lifecycle warnings
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.
  • Blueprint IDWhen your scene matches a multi-phase template, provide the blueprint ID from blueprints-index.md to load its full recipe.

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 default for 95% of motion work, covering timeline orchestration, transforms, easing, and stagger. All atomic rules in this skill are GSAP-based.

  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.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

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

  • Confirm all runtime instances are registered on their runtime-specific globals so HyperFrames can seek them in one pass

In OpenDesign import hyperframes-animation from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

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.

Download OpenDesign, import hyperframes-animation from its SKILL.md link, paste the prompt above, and read the plan before the result.

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

OpenDesign Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS and Windows