98.8K+Download
Skip to the usage guide
hyperframes-keyframesby HeyGen

HyperFrames Keyframes Skill.

A Claude Code and Codex skill for motion and video: punch-ins, zooms, reframes, Ken Burns moves, and 2D/3D keyframes for HyperFrames.

  • Motion & Video
  • Video
Download OpenDesignView usage guide
heygen-com/hyperframes · skills/hyperframes-keyframes/SKILL.mdSKILL.md
--- name: hyperframes-keyframes description: Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video … --- ## Creator editing boundary ## Procedure ## Contract ## Runtime Rules ## GSAP Skeleton ## Keyframe Forms
Front matter and section headings read from the upstream file on 2026-09-14 · 15,899 characters in full

01 What it does

What the hyperframes-keyframes 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

Handles punch-ins, punch-outs, zooms, reframes, Ken Burns moves, camera moves, visual match/whip handoffs, and seek-safe 2D/3D keyframes for HyperFrames compositions. Supports GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, and 3D depth. Keyframes are a pose contract: visible states, continuous subject identity, seek-safe runtime, verified pixels.

Focuses on visual motion within clips, not clip assembly or scene strategy. Requires synchronous runtime construction, registered timeline instances, and deterministic timing. Authors verify with hyperframes lint, check, keyframes command, focused --shot diagnostics, and snapshots at proof times.

What it produces

  • Registered GSAP timeline instance in window.__timelines[compositionId] with paused: true
See the example prompt ↗

How It Works

  1. 01
    Identify Subject and States

    Identify the animated subject, visible states, final state, and runtime before authoring keyframes.

  2. 02
    Choose the Smallest Mechanism

    Choose the smallest mechanism that proves the prompt, consulting references/keyframe-patterns.md only if the mechanism is unclear.

  3. 03
    Author and Register

    Author seek-safe keyframes in the declared runtime, building synchronously and registering the runtime instance.

  4. 04
    Verify with Diagnostics

    Verify using hyperframes lint, check, keyframes command, one focused --shot, and snapshots at proof times.

  5. 05
    Fix and Retest

    If proof fails, fix the source keyframes and rerun the smallest failing diagnostic before rendering.

02 Find your fit

When to Use the hyperframes-keyframes Skill

Use the hyperframes-keyframes 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

  • Punch-in or punch-out with keyframed scale and translation on a non-timed visual/crop wrapper inside the clip
  • Smooth multi-state zoom or reframe keeping one subject wrapper alive with multiple states as a pose ladder
  • Pan, reframe, or Ken Burns camera move with animated wrapper translation plus scale
  • Chained camera moves with labeled transform beats on one registered seek-safe timeline
  • Match cut or whip pan preserving authored geometry, direction, and velocity

Know the Boundaries

  • Broad scene strategy, brand design, media sourcing, captions, or general video planning
  • Source-range hard cuts, trim, splice, and reorder, which belong to hyperframes-core
  • Source speed ramps with time-varying playback-rate envelope, which are not supported
  • Arbitrary mid-source freeze frames, which require preprocessing a still/derived segment

What to Provide

  • Visible poses and final stateThe poses needed to prove the intended motion, including the final state that completes the animation.

03 Inside the skill

Rules the hyperframes-keyframes Skill Gives Claude Code and Codex

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

  1. Paused GSAP Timelines

    GSAP timelines must use gsap.timeline({ paused: true }), never call tl.play() for render-critical motion, and be registered as window.__timelines[compositionId] with a key matching data-composition-id.

  2. Anime.js Autoplay False

    Anime.js instances must have autoplay: false and be pushed to window.__hfAnime with finite duration and loops.

  3. CSS Keyframes Fill Mode

    CSS keyframes require finite duration and iteration count, deterministic delay, and animation-fill-mode: both.

  4. Never Use Timers or Random

    Never use Date.now(), performance.now(), unseeded Math.random(), hover/scroll triggers, timers, async-created timelines, unregistered requestAnimationFrame, or infinite loops for render-critical motion.

  5. Keyframe Visible Channels Only

    Keyframe visible channels like x/y/z, scale, opacity, clip-path, masks, not hidden helper state.

  6. Preserve Object Identity

    Preserve object identity when continuity matters. Crossfade only when the intended motion is replacement or dissolve.

  7. Final Frame Is Part of Animation

    Final frame is part of the animation, not cleanup. Do not reset to rest unless requested. Do not end on black unless requested.

  8. Name Subjects and Poses

    Name the moving subject and the poses needed to prove the intended motion, including the final state.

04 Put it to work

Install hyperframes-keyframes 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-keyframes 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-keyframes

Generic skills CLI form for skills/hyperframes-keyframes/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
Add a Ken Burns punch-in to [clip-id] starting at 2.5s: scale from 1.0 to 1.4 over 3 seconds with ease-out, translating the wrapper 15% right and 10% up to reframe on the subject's face. Hold the final framing for 1 second. Register the timeline and verify with a strip shot showing the route.

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:

  • Run hyperframes lint to check for structural issues
  • Run hyperframes check to validate the composition
  • Run hyperframes keyframes with --shot and --samples to verify targets, stops, paths, and time spacing
  • Use --layout strip to prove in-place motion, overlaps, contact, and subtle scale/opacity changes
  • Use --ghost with --angle to prove canvas, WebGL, shader motion, and 3D depth projection
  • Snapshot at first frame, proof poses, final-minus-hold, and exact final to verify masks, text readability, full state, and no black/reset tails

In OpenDesign import hyperframes-keyframes 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-keyframes/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-keyframes.
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. Creator editing boundaryKeyframes own visual motion; core owns clip assembly, trim, splice, source offsets, and hard cuts
  2. ProcedureFive-step workflow from identifying subject and states through authoring, verification, and diagnostic-driven fixes
  3. ContractName subjects and poses, keyframe visible channels, preserve identity, hold states long enough, treat final frame as animation
  4. Runtime RulesGSAP paused timelines, CSS fill-mode both, Anime autoplay false, registration requirements, forbidden timer/random/async patterns
  5. Keyframe FormsArray keyframes, percentage keyframes, property arrays, ease-none parent with per-stop easing, easeEach for shared feel
  6. ChannelsPrefer compositor/visual channels like x/y/scale/opacity; avoid layout/lifecycle channels like top/left, width/height, display
  7. Mechanism ChoiceTable matching needs to smallest mechanisms: FLIP, path travel, stroke draw, shape interpolation, stagger, text subdivision, 3D
  8. TimingAnticipation, acceleration, peak proof, follow-through, overshoot, ease choice, stagger offsets, final holds, continuous velocity
  9. TextPreserve line boxes, word spacing, readability, final fit; move glyphs or masked bands; snapshot readable frames
  10. SVGDrawSVGPlugin for stroke growth, MorphSVGPlugin for shape interpolation, convert primitives to paths, split complex silhouettes
  11. 3DUse perspective, preserve-3d, z travel, rotation, camera/world motion, occlusion, layer order; prove depth with diagnostic angles
  12. Canvas / WebGLKeyframe camera, object transform, material, shader uniforms; render from HyperFrames time; use --ghost for proof
The Skill's Own Description
“Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.”

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

06 Before you install

Questions About the hyperframes-keyframes Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

What's the difference between this skill and hyperframes-animation?

This skill owns keyframe implementation and visual motion mechanics. Use hyperframes-animation for broad scene recipes and visual handoff choreography. Use hyperframes-cli for full command documentation. This skill focuses on authoring, registering, and verifying the actual keyframes.

HyperFrames Keyframes

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

Download OpenDesign, import hyperframes-keyframes 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-keyframes

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